Weird Material Behaviour


I am getting weird behaviour where materials from entirely separate meshes (have verified the materials are not shared) appear to be shared between objects. The only thing that changes when the objects move slightly is the depth order. The geometry of “Codebots” is created using SVGLoader.

Any ideas of what is going on?

Thank you,


Can you resolve the issue by defining a fixed render order for the meshes?

You can do that by setting consecutive numeric values starting from 0 up to Infinity to Object3D.renderOrder.

The shader for Materials is cached using a key derived from the contents of the shader built from the material. The uniforms of the material are still unique to the material, but the underlying shader may be shared. I’m guessing that is in play here… how are you changing the color on click?

edit: looks like you found a solution so… nvm :slight_smile:

I was able to hard code all of the “codebots” meshes to use a really big render order number and yes it solved the problem

The colour isn’t being changed on click. The only thing that changes is the transform of the thing being moved

1 Like

Thank you anyway :slight_smile:

1 Like

Is this something that is required for ThreeJS to work correctly or is it just to get around a known bug?

Um, I’m not sure what happens if SVGLoader would always define a fix render order according to the shape order in the SVG.

In any event, it’s not the first time this issue comes up and using renderOrder as a solution seemed to always worked so far.

1 Like