Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Instancing with built-in material example #16161

Closed
wants to merge 2 commits into from

Conversation

takahirox
Copy link
Collaborator

@takahirox takahirox commented Apr 5, 2019

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.

'attribute vec4 instanceMatrixColumn1;',
'attribute vec4 instanceMatrixColumn2;',
'attribute vec4 instanceMatrixColumn3;'
].join( '\n' ) + '\n';
Copy link
Collaborator Author

@takahirox takahirox Apr 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

shader.fragmentShader = shader.fragmentShader
.replace( '#include <common>\n', '#include <common>' + fragmentParsChunk )
.replace( 'vec4 diffuseColor = vec4( diffuse, opacity );\n', colorChunk )

Copy link
Collaborator Author

@takahirox takahirox Apr 5, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Collaborator Author

takahirox commented Apr 9, 2019

No one is interested in? Does it sound hacky?

@Mugen87
Copy link
Collaborator

Mugen87 commented Apr 9, 2019

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

@takahirox
Copy link
Collaborator Author

takahirox commented Apr 9, 2019

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
Copy link
Contributor

pailhead commented May 6, 2019

@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
Copy link
Owner

mrdoob commented Sep 16, 2019

Closing in favor of #17505.

@mrdoob mrdoob closed this Sep 16, 2019
@mrdoob
Copy link
Owner

mrdoob commented Sep 16, 2019

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

@takahirox
Copy link
Collaborator Author

takahirox commented Sep 16, 2019

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

@takahirox takahirox deleted the InstancingStandard branch Sep 16, 2019
@takahirox takahirox restored the InstancingStandard branch Sep 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants