This is a minimal example of the problem I have. Settings on the renderer as they are, are required.
My main problem is that shader material is not calculating depth properly with logarithmic depth buffer on the renderer even after adding required shader chunks needed for logarithmic depth buffer. Topic I took this info from: shaderMaterial: render-order with logarithmicDepthBuffer is wrong - #3 by berkaycirak
In a bigger project I need also to keep depth writing and depth testing on materials.
Goal: Transparent material(blue) should hide behind the first shader material mesh(purple) and allow to see another shader mesh inside
Codepen minimal example: https://codepen.io/jakp3/pen/PoMjjGe
Although I had tried it in webgl, I can’t get it to work yet, so unfortunately I can only offer you a WebGPU example that looks like these screenshots
WebGPU works significantly differently than webgl and webgl2. Since webgl is no longer maintained by Threejs anyway, I recommend at least switching to webgl2. In any case, I had no problems getting this done with WebGPU.
The whole thing also works with tsl, i.e. Fn, but I use wgsl very often and therefore wgslFn in the example.
1 Like
Thank you for your time on this one!
I unfortunately needed a way to do it with this setup. After some more time with it, it turned out that just ShaderMaterial was working correctly, and I still couldn’t make the RawShaderMaterial work with logarithmicDepthBuffer.
“I had no problems getting this done with WebGPU” sentence will push me into more WebGPU use sooner rather than later!
As I found a not perfect but working solution, I will mark yours as the solution, as it does exactly what I needed but with a different setting.
