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.
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.
So, at that time what I did to solve this was to render all the opaque objects before transparent with depth write and depth test on. And then I rendered transparent with just depth write off so it was only compared against the opaque objects depth.
To solve the problem of object with both transparent and opaque parts, I had to render it twice, in both opaque and transparent render order.
In opaque render order I set the alpha cuttoff to <1 to only render opaque part of it.
In transparent render order I set the alpha cutoff to ==1 to only render transparent part of it.