Examples: Add external three-mesh-bvh library demo

[gkjohnson]

Related issue: #23876 (comment)

Description

Adds a demo based on the three-mesh-bvh library. The library is linked to via unpkg so no version has to be maintained in this project. Links to three-mesh-bvh repo included in the page. 3000 bunny raycasts per frame is still at 60 fps on my machine 🎉

Live link:
http://raw.githack.com/gkjohnson/three.js/external-bvh-demo/examples/index.html?q=exter#external_bvh_raycasting

At some point I'll make another one or two with some other queries and add a path tracing demo, as well.

And just for fun, 10000 rays at ~24fps:

And 40000 at 6fps 😭

[donmccurdy]

I like the idea of including a section in examples for (minimal) showcases of external projects like this. It may help users make the right decision for their projects about when to use the 'official' raycaster/controls/loader/etc. and when to reach for an additional dependency. See also, related challenges in #23526.

Totally a nit — but I wonder if the section should be labeled "community" instead of "external libraries"? Or match the libraries and plugins page? To me it feels better, but maybe just leave this as-is unless at least one other contributor feels the same way. I don't mean to hang this up over naming things. :)

[gkjohnson]

Totally a nit — but I wonder if the section should be labeled "community" instead of "external libraries"? Or match the libraries and plugins page? To me it feels better, but maybe just leave this as-is unless at least one other contributor feels the same way. I don't mean to hang this up over naming things. :)

A name change sounds good to me -- I say we can merge and adjust the name later, though.

"Community" or "Libraries and Plugins" or just "Libraries" all sound good to me. I just wanted it to be clear that these were using logic outside the three.js codebase.

[gkjohnson]

Ping @mrdoob - is there anything else I can do to get this merged?

[looeee]

"Community" or "Libraries and Plugins" or just "Libraries" all sound good to me.

What about "Community plugins" or "Community extensions"?

[gkjohnson]

Just changed it to "community plugins" - thanks for the suggestions guys!

[looeee]

@mrdoob any opinion on adding this new Community Plugins section to the examples?

We can limit it to just a few of the highest quality projects out there, in which case I don't expect there would be many more than five or so examples.

Beside three-mesh-bvh, I can think of @yomotsu's camera controls, @gkjohnson's three-gpu-pathtracer, and @vanruesc's postprocessing as strong candidates.

[Mugen87]

Sidenote: webgl_loader_ifc should also be moved to the community plugins section.

[mrdoob]

Sorry for the delay...

I think it'll be better to name the example webgl_raycasting_bvh.
And in the info panel in the example mention that it uses three-mesh-bvh and link to it.

[gkjohnson]

@mrdoob okay I figured it might be nice to have a section to more explicitly promote community efforts - but I just updated the file names!

[looeee]

have a section to more explicitly promote community efforts

+1 from me 👍

I think it's a missed opportunity to help support the larger three.js community if we don't do this.

[mrdoob]

@looeee

I think it's a missed opportunity to help support the larger three.js community if we don't do this.

I definitely hear you. I'm just not sure that a section for it is the best solution.

I'm thinking about it from the point of view of the user/developer experience:

In this case I'm imagining the developer learning about the raycaster and going through the examples (which I'm about to clean up) and one of these examples is the bvh one. From there they can jump to learn more about three-mesh-bvh if it fits their need.

I'm thinking we could do something like this:

[ext] or [comm] or maybe an icon...

I think at the end of the day, we want to do two things:

1. Showcase the best external libraries from the community
2. Let the user understand that the example uses a library that is in a different repo

[gkjohnson]

@mrdoob the icon seems like a nice distinction and maybe we can also make the community plugins searchable by some term ("community", "external", "libraries") if users want to take a look at just the community library examples.

[mrdoob]

@gkjohnson exactly yes 👍

[mrdoob]

Design wise, I bet @marcofugaro will have opinions 🤓

[marcofugaro]

No design issues 😄

Just UX, maybe the naming ext could be confusing for new users, could it mean "extension"...? Also does comm mean "common"..?

Having the full name would be better in my opinion 🙂 here is how it would look:

[looeee]

@mrdoob that looks good to me :)

I agree with @marcofugaro that the full word "external" looks better. I would probably interpret "ext" as "extension" in the context of examples.

[mrdoob]

Thanks!