Per the title. If you set “renderingGroupId” to anything other than 0 for any mesh, it will mess up order independent transparency for the entire scene.
Disable line 11 (scene.meshes.renderingGroupId = 1) to view the correct behavior.
Edit: I realize I’m setting the skybox, so that may mask the issue at hand since they overlap. but if you change the mesh index into the mesh array to 2 or greater, you can still see the issue persist on the dragon, even though nothing overlapping it is affected by the group id.
Hello, welcome aboard!
It doesn’t make sense for me to set the
renderingGroupId to a value higher than the the loaded model’s meshes
renderingGroupId values. The skybox has to be rendered first.
scene.getMeshByName('Sphere 1').renderingGroupId = 2; // red sphere
scene.getMeshByName('model').renderingGroupId = 2; // dragon
This seems to be OK for me. Maybe I didn’t get your question right.
Right, ignore that I was setting the skybox, that was not intentional (just typing too fast).
Your updated demo showcases the issue also though. See how the dragon and the red sphere (with the modified rendering group ID) are rendered correctly. However, the other objects in the scene are no longer rendered properly with OIT. The inner most blue sphere should be mostly obscured by the green and red spheres around it.
If you look at the stripes on the spheres, the two spheres with the “X” on them look like they are only rendering the backfaces of the mesh. You can only see the stripes going in one direction.
You should move all transparent meshes to the same rendering group. Only moving some and not others won’t work as expected: