For transparent objects you can add two versions of the transparent object to the scene with the same transform (or make a multi material mesh) with one material that writes only to depth first and one that draws the blended transparent object. Here’s a js fiddle showing how:
With multiple overlapping transparent objects there are couple ways to do it. You could draw all transparent depth prepass objects first and then draw the blended materials afterward which will result in no transparent overlap effects but therefore also no “pop” effect as the transparent objects reorder when you move the camera. Here’s how the render order is set for that:
dpMesh1.renderOrder = 1;
mesh1.renderOrder = 2;
dpMesh2.renderOrder = 1;
mesh2.renderOrder = 2;
Or you could draw the depth prepass material just before drawing the blended material for a single object which would result in removing transparent rendering artifacts within a single mesh and retain transparent object overlap but you’ll still have the transparent resort popping:
dpMesh1.renderOrder = 1;
mesh1.renderOrder = 2;
dpMesh2.renderOrder = 3;
mesh2.renderOrder = 4;
And for reference here’s what it looks like with no depth prepass:
@donmccurdy this might be a pretty easy feature to add into three.js with an option per transparent material. Do prefer either of the approaches I listed above if I were to look into adding it?