Hi, documentation says that you can change color of a specific instance using .setColorAt( index : Integer, color : Color) method. But what if I need to change color only for a face (set of faces) of a specific instance? Does three js have such possibility? Any examples would be appreciated. Thanks in advance!
You can use DataTexture
to store colors, then process it in modified shaders (.onBeforeCompile
will help)
Thank you for your advice!
Also, I have found this example: https://codepen.io/prisoner849/pen/OJeXVad?editors=1010 (seems like yours) that helped me to understand how to reach my goal using ‘onBeforeCompile’.
So, it is not easy to write custom code for shaders and requires deeper knowledge. But changing face color for instancedMesh seems typical operation. It would be great to make this logic as a part of ThreeJS API… (@mrdoob , @Mugen87)
I don’t think this can become part of InstancedMesh; you will need custom shaders to do affect vertex-level properties of a specific instane in WebGLRenderer. We are, however, working to make it much easier to customize shaders in upcoming three.js versions based on WebGPU and TSL.
How would this API look like? If you were to make a proposal, how would you interact with it?
This is an old tutorial on onBeforeCompile
So, my vision was to add new function to InstancedMesh class, something like “.setColorAt(needed params here)”, that would change color for specific faces of a specific instance. And all difficult shader’s logic should be implemeted under the hood in this function using input parameters. But… It is just a vision. So, now I see that it is not so easy or even impossible to solve the problem using this approach.
Anyway, it is a good news that you are trying to simplify shaders customizing and to make work with it easier!
Yeah no. Its too specific of a use case (who does this, what could possibly be the use for this functionaility) and its too trivial to implement in about a million different ways. Dont think it warrants being part of the API.
I
For highlighting one, you could use a uniform, otherwise, as @prisoner849 said, a DataTexture is a way to go.