Actually there is something I don’t fully grasp about transparent materials : how come three.js is able to draw parts of a mesh with a transparent material several times on the same pixel ? Is the fragment shader executed several times ?
@Mugen87 I believe in this OIT case would render the overlapping section of both spheres rather than just rendering the closest face as transparent like the second image.
@felixmariotto You can use a depth prepass approach to render transparent objects like you have shown in your second image. See this other forum post for an example of the implementation and how it works:
The gist of it is that the transparent object is first rendered to depth only with out writing to color first. Then the transparent material is rendered and because depth has already been written to only the closest pixels will be rendered.
I’ve submitted PR #20673 to enable this more easily with a material flag because transparency artifacts are a common problem and this is a performant approach that I think improves things quite a bit.
To be more specific than in my original message, my exact use case is a double mesh, one with a front face material and one with a back face material, and both would hide parts of themselves in the background, but let other meshes in the background through… A bit convoluted and not easy to explain sorry…
@Mugen87 thanks for pointing me to this issue, it was an interesting read. pailhead depth peel exemple at the end is interesting, although it looks expensive.