Transparency within radius using Shaders in Three.js

Question

I'm trying to use a Shader material to create an area of transparency around my camera. To achieve that, I'm checking if a vertex is inside a given radius, if so, I set its color with a custom opacity value < 1, such as 0.4.

This is working fine, but sometimes some transparent geometries are blocking the elements behind it. I took a look into the docs and some other similar question and figured out that usually we set the depthWrite = false and transparent = true only to transparent materials.

My problem is that I have only one material representing all my geometries but I want to set depthWrite = false; transparent = true to all vertices inside the radius and depthWrite = true; transparent = false to the ones outside it. Does anyone knows if this is something achievable or if there is another possible solution?

Thanks in advance

Answer 1

answering my own question! Hope this can help someone

It looks like it was not possible the way I was doing because I had only one material for the visible and transparent part. Then, I decided to have 2 different shader materials rendering the same geometries, the visible and transparent ones, to set the depthWrite and transparent properties accordingly. Also I discarded, using the fragment shader, the visible portion inside my transparent area and discarded the invisible one in the visible area. It looks like it's working fine now