Three.js transparency artefact on not transparent object

Question

Transparency artefact problem

Hello, I have an issue with three.js. I import a "big" glb model on my scene which is not transparent, but if the model is covered by itself on the camera view, the foreground become transparent. (as you can see on the picture, the background montain is on foreground)

I tried some solutions like :

• depthTest to false on glb material
• sortOrder to false
• Use logarithmicDepthBuffer
• Change material transparent to false
• Change alphaTest from 0 to 1 by 0.1 steps

But nothing works. If someone have the solution :)

Thank you !

Answer 1

Rendering of transparent objects cannot be done quite properly. You first need to render any non-transparent objects, and then render transparent surfaces from back to front, so that any new ones blend on top of what was behind it. There are a number of cases where this cannot be done, especially when rendering transparent objects that may overlap themselves.

Fixing this would involve cutting the problematic objects (even single triangles) into smaller pieces so that the ordering can be preserved, and that is often nearly impossible. Since you are working with Three.js, see if you could alter your design so that this isn't a problem, or that the artifacts of incorrect rendering order aren't too much noticeable.

Answer 2

Thanks to donmccurdy which have find my solution on the three.js forum.

Finally my glb file was Transparent :( So there is two solutions.

Solution 1:

Find how the model is transparent and fix it.

Solution 2:

Changing it back to opaque, and restoring the default depthWrite value.

mesh = content.getObjectByName('mesh_0');
mesh.material.transparent = false;
mesh.material.depthWrite = true;