Add Instancing with built-in material example

[takahirox]

Demo: https://raw.githack.com/takahirox/three.js/InstancingStandard/examples/#webgl_buffergeometry_instancing_standard

This example shows

• How to make InstancedBufferGeometry from regular BufferGeometry.
• How to use instancing with built-in material. Injecting the code for instancing with material.onBeforeCompile() to built-in MeshStandardMaterial and MeshDepthMaterial shaders.
• How to use instancing for dynamic objects. In this example I made InstancedMesh class controlling instance transform with Object3D.position/rotation(quaternion)/scale API.

webgl_buffergeometry_instancing_lambert and webgl_buffergeometry_instancing_dynamic examples may be for similar purpose. I think this example shows easier and more practical to use.

I don't do in this example, but I locally accomplished instanced SkinnedMesh with similar way.

https://twitter.com/superhoge/status/1112314633543737344

About code injection, if we introduce Node-based material system, I think that will be easier and safer.

I hope this example can be a good start to discuss mesh-level instancing API. I think it'll be easier for users to use instancing on Three.js if we have.

[takahirox]

We can rewrite to attribute mat4 instanceMatrix; if we merge #16141

[takahirox]

Note: As you know code injection may be fragile because if we update built-in material it can fail. Node-based system can do more safely.

[takahirox]

No one is interested in? Does it sound hacky?

[Mugen87]

TBH, I think the existing examples (webgl_buffergeometry_instancing_lambert and webgl_buffergeometry_instancing_dynamic) are already sufficient in this context.

[takahirox]

What do you think of replacing them with this? I think this example shows easier and more practical way of using instancing with built-in material, dynamic objects, and Shadow. For example, this example doesn't require ShaderMaterial and works with standard material. And instance's transform can be controlled with Object3D.position/rotation(quaternion)/scale.

[pailhead]

@takahirox

What do you think of replacing them with this?

I think there's quite a bit going on in this example to replace the webgl_buffergeometry_instancing_lambert example.

• How to use instancing with built-in material. Injecting the code for instancing with material.onBeforeCompile()

This was already done here #14098. (It only shows how to use the onBeforeCompile with the simple lambert instancing. )

• How to make InstancedBufferGeometry from regular BufferGeometry.
• How to use instancing for dynamic objects. In this example I made InstancedMesh class controlling instance transform with Object3D.position/rotation(quaternion)/scale API.

These two were addressed here #10750. They're focused only on instancing, not the onBeforeCompile semantics.

• I think using the simple instancing example is easier to follow alone than along with physics, rotation and more complex lighting.
• onBeforeCompile is somewhat hard to read, so confining an example using it to only the bits required to demonstrate a concept might be better.

There are also add on libraries in the wild that do all this already along with articles and tutorials on both instancing and material extensions using onBeforeCompile.

Note, these two cents of mine are specifically re: replacing the examples. I'd keep them around.

[mrdoob]

Closing in favor of #17505.

[mrdoob]

@takahirox Awesome demo though! I just want to get away from the InstancedBufferGeometry API...

[takahirox]

Thanks! I'm happy to know that somehow I helped to get InstancedMesh into core! Yeah, Mesh level API should be much simpler.