How to fix this render order issue in threejs?


I have built some modules to show. have some questions about the render order.

1, Add an opaque module behind an transparent one. Somtimes the opaque module will not render at all, why?

2, Add 2 objects very close. when I rotate the camera, sometimes the further triangle will be shown instead of the nearer one. For example, adding a plate on floor, sometimes we will see the door directly, some parts of plates vanish.

It usually depends on the configuration of the materials you are using on meshes (an easy way to break the rendering like that is to set transparent property to some float value, instead of true / false, for example.) If you have a specific case of a broken rendering that you’d like to fix, and you can show it - it may be easier to help :thinking:

It’s an unfortunately quite popular phenomenon called z-fighting. It’s not limited to three.js (although there are solutions to it.)