Lighting InstancedBufferGeometry

Is there a library or a reference for lighting an InstancedBufferGeometry?

There is significant complexity in providing support for directional, hemispherical, point and ambient lights through a shader to replicate what can be done with Lambert or Phong materials yet have the performance gains of batch rendering.

Is there existing code to implement these lights (without shadows, transparency or even specular lighting)?

GLSL is very challenging for a beginner like me, so any help is appreciated!

https://pastebin.com/UUUCFLxV This is a copy of the shaders I am using and some general methods to add and remove objects from the geometry. The fragment shader doesn’t compile currently, however, I can’t find any references for how to work with structs or an array of lights. Most of the documentation I can find refers to an older spec where structs aren’t used.

There is an example that demonstrates how to enhance MeshLambertMaterial for instanced rendering (so lighting and shadow mapping works). You can use it as a template for your own enhancements.

https://threejs.org/examples/webgl_buffergeometry_instancing_lambert

Thanks for this.
For anyone interested in a generic TS implementation, I created this class for use in my project: https://github.com/DakotaLarson/BattleTanks-Client/blob/develop/src/arena/scene/BatchHandler.ts. I don’t use per instance coloring nor per instance shadow, however, the code is in the class anyway.

I use this for projectiles: https://github.com/DakotaLarson/BattleTanks-Client/blob/develop/src/arena/ProjectileHandler.ts. The initialize function is called on program init, before any create call is made.

Hope this helps someone.

1 Like

What exactly would be the difference between modyfying the material in this way, and copying the Lambert fragments, modifying them and then feed them to ShaderMaterial, @Mugen87 ?

Could the latter method result in breaking shadows?

@Fedor_van_Eldijk

There’s a helper function: Function to extend Materials
At least, you can give it a try :slight_smile:

1 Like

No, I don’t think so.

Ok, I’ll mock up a demo and start a new topic…

@Fedor_van_Eldijk
@Kotamigo

If you are willing to explore articles and packages that are not in /mrdoob/threejs there’s stuff floating around:



If not https://threejs.org/examples/webgl_buffergeometry_instancing_lambert is probably a good place to start, however it’s a bit basic when compared to the rest of three’s functionality IMHO (like no shadows, or other materials etc).

@pailhead Thanks for the articles. I was able to solve my problem with a custom solution by creating a “clone” of the mesh lambert material similar to the last link in your post.

For everyone:
I chose this method because I needed the objects lit with multiple light sources of different types. I had no interest in re inventing the wheel with my own material to support the lights in the scene, so I extended the lambert material.

I chose to implement my own batch system over examples I could find on the web (Sorry, I don’t have links) to support expanding the number of instanced objects as time goes on. As you add (or remove), instanced objects, the list will expand if needed. It doesn’t shrink currently.

There might be a market for a framework to deal with instanced rendering to encompass all the problems one might face. What if someone wants to use StandardMaterial for example or instance render a mesh with multiple materials and geometries? I know it’s trivial in Babylon. I can’t do that in Three.js currently and it will take a significant amount of work to make that happen.

Lastly, on top of all this, implementing additional Three.js libraries that interact with the global THREE object can be very challenging to implement when you use the modular system. This is a documented problem, however, there are no official solutions yet to the best of my knowledge. If anyone is interested in my workaround, check out the repo linked in my previous comment. I use Require.js (AMD).

Three.js doesn’t have a plugin system other than the examples. I think thats the issue you’re describing in your last paragraph.

@pailhead Sorry, I am a little off topic here, however, I am mainly talking about the scripts included in the “examples” directory. For example, if I want to load models into my game in any format, I need the files from the examples directory which load models. And if I am bundling code together and importing modules from three, then I will run into a major challenge where the model loading scripts are not in scope.