ThreeJS transparency output is not correct

I was testing transparecny in ThreeJS editor with MeshPhysicalMaterial. There seems to be some kind of noise in the output. Can anybody tell what could be causing this issue? My hunch is that its depth buffer calculation errors. Output & material properties snips are attached.


image

Does depthWrite → false change this? Can you share the model?

The renderer cannot sort triangles before rendering, and so alpha blending is affected by the order. There’s no perfect fix for that – you ideally want triangles further away (or on the interior) to render first with alpha blending, but sorting them on every frame is usually prohibitively expensive. If the mesh has something else you could sort on (UVs?) that might get a somewhat less noisy result.

I guess this could also be something weird about the mesh structure, but I can’t see much of that from the screenshot.

depthWrite to false makes it look weirder. I didn’t get your point on rendering the interior first. This is a single mesh with single-Sided Material. Let me check if I can share the asset.

Also, is there a way I can tell threejs to z-sort my triangles?

Unfortunately no, three.js doesn’t sort triangles itself. You’d need to reorder the buffergeometry index. I don’t think that would fully fix the issue, but it would likely look less random.

Actually one thing you could try would be using the gltf-transform cli, if this is a gltf or glb file?

gltf-transform reorder input.glb output.glb --target performance

This doesn’t exactly z-sort triangles, but it does sort for cache locality and that might work out similarly.