Three.js: Revisit Interactive Instances GPU Example

[WestLangley]

This example seems a bit complex to me -- interesting, but complex.

https://threejs.org/examples/webgl_interactive_instances_gpu.html

Perhaps it can be simplified. What is the point? What is it we want to show?

[WestLangley]

@mrdoob @Mugen87 Can you please provide your opinions on this?

What do we want to demonstrate with this example? How can it be simplified -- or should we leave it as it is?

[Mugen87]

I think it's good to have an example that provides a comparison between instancing, geometry merging, single material usage and multiple materials. Especially since the number of draw calls is reported.

How can it be simplified

It would be nice if the example would have a somewhat cleaner UI since the large banner at the top is a bit ugly. However, I don't think it's that urgent. Could be a nice "first issue" for new contributor.

[donmccurdy]

Somewhat related, I do think the instancing examples should be revisited. Looking at the full list:

- instancing / suzanne
- interactive / instances / gpu

webgl / advanced
- buffergeometry / instancing
- buffergeometry / instancing2
- buffergeometry / instancing / billboards
- buffergeometry / instancing / dynamic
- buffergeometry / instancing / interleaved / dynamic
- buffergeometry / instancing / lambert

Only one of those uses THREE.InstancedMesh, which will strongly give the impression that other approaches are more common or recommended.

A few suggestions, for starters:

• [ ] InstancedMesh should be one of the options on interactive / instances / gpu
• [ ] interactive / instances / gpu should perhaps be renamed to instancing / interactive
• [ ] Several of the "advanced" InstancedBufferGeometry examples should be converted to simpler InstancedMesh examples, if possible.

[mrdoob]

These suggestions sound good to me 👌

[donmccurdy]

I started to convert buffergeometry / instancing / dynamic to use InstancedMesh (https://github.com/mrdoob/three.js/pull/18033) but then decided it didn't really demonstrate anything the "instancing / suzanne" demo didn't show already. Unless we want to have very similar demos where one uses InstancedMesh+BufferGeometry and the other uses InstancedMesh+InstancedBufferGeometry? So... let me expand those suggestions a little more:

| example | proposal |
|---|---|
| instancing / raycast | ✅ No change. |
| instancing / suzanne | ⚠️ Rename as instancing / dynamic. |
| interactive / instances / gpu | Rename as instancing / interactive, use InstancedMesh without ShaderMaterial. |
| buffergeometry / instancing | ✅ No change. |
| buffergeometry / instancing2 | ❌ Removed. |
| buffergeometry / instancing / billboards | ✅ No change. |
| buffergeometry / instancing / dynamic | ❌ Removed. |
| buffergeometry / instancing / interleaved / dynamic | ⚠️ Remove. Or keep as example of InstancedMesh + interleaved attributes? |
| buffergeometry / instancing / lambert | ✅ No change. |

^links: https://threejs.org/examples/?q=instanc

For now I'm just suggesting we clean up and trim the existing examples, but there might be other helpful examples worth adding in the future such as:

• InstancedMesh + physics
• InstancedMesh + NodeMaterial
• InstancedMesh + grass or foliage effect
• InstancedMesh + UV offsets on texture atlas

EDIT: Update table to reflect changes made.

[Mugen87]

InstancedMesh + UV offsets on texture atlas

This would be indeed useful since I've referred to this during user support multiple times^^. I'm fine with removing the suggested examples, however I would keep the one with interleaved attributes (as an advanced example).

[WestLangley]

InstancedMesh + physics

From @takahirox :-)

https://raw.githack.com/takahirox/three.js/InstancingStandard/examples/webgl_instancing_physics.html

[donmccurdy]

@takahirox is way ahead on this 😁

[donmccurdy]

I'm also working an an example that distributes instances randomly across the surface of another mesh. In the process, I'm rewriting a significant portion of GeometryUtils.

[donmccurdy]

The voxel painter example would benefit from InstancedMesh, too: https://threejs.org/examples/?q=voxel#webgl_interactive_voxelpainter

[donmccurdy]

^I've kind of hijacked this issue, heh, but I think my suggestions above have pretty much been addressed now... going back to the OP, remaining tasks here are:

• [ ] instancing / interactive example should have InstancedMesh as an option.
• [ ] (Optional) instancing / interactive any other changes? Clean up UI with dat.gui?
• [ ] (Optional) any other new InstancedMesh demos to add?

[WestLangley]

The fact that the file has been renamed to webgl_instancing_interactive.html has not solved the issue that that example is too complicated by a factor of 10. Cleaning up the UI would be merely cosmetic.

I think webgl_instancing_interactive.html should show how to implement interactive instancing in a performant way. If we already have other examples of that, then this example can be removed.

That's my view, anyway.

[donmccurdy]

webgl_instancing_interactive.html should show how to implement interactive instancing in a performant way. If we already have other examples of that, then this example can be removed.

instancing / raycast is a solid example of that, yes.

The code could be reduced to 100-150 lines while still providing a comparison of InstancedMesh, merging geometry, and non-instanced geometry. I'd suggest we omit the picking and use a single builtin material for all three.

[WestLangley]

@donmccurdy I trust your judgment. :-)

[donmccurdy]

Well, my judgment that it'd only take 150 LOC was poor, but here's https://github.com/mrdoob/three.js/pull/18254. 😅

[WestLangley]

(Optional) any other new InstancedMesh demos to add?

18256