# Depth testing with transparency

**URL:** <https://discourse.threejs.org/t/depth-testing-with-transparency/87712>\
**Category:** Questions\
**Created:** [October 24, 2025, 11:07am UTC](https://discourse.threejs.org/t/depth-testing-with-transparency/87712 "2025-10-24T11:07:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![munhunger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/munhunger/32/63361_2.png) [@munhunger](https://discourse.threejs.org/u/munhunger)\
**Post date:** [October 24, 2025, 11:07am UTC](https://discourse.threejs.org/t/depth-testing-with-transparency/87712/1 "2025-10-24T11:07:37Z")

</div>

I am mucking about a little bit with creating a custom material that extends RawShaderMaterial.

But I am having some issues with depth, that I could use some help with.

So here is my model (the pink parts). It is essentially the edge of a cylinder.

The dimmed part is the backside of the mesh that is wrapped around the cylinder.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/9/69e7df24504820d116c6c5d090d66b0d7b7a72c9.png)

So oddly enough, the backside is rendered on top of the frontside.

since the frontside is closer to the camera, I think this behavior is wrong.

In the constructor of my shader I have this

```javascript
        super({
            uniforms,
            glslVersion: GLSL3,
            transparent: true,
            polygonOffset: true,
            polygonOffsetFactor: -0.1,
            depthTest: false,
            side: DoubleSide,
            vertexShader: vertex,
            fragmentShader: common.trim() + "\n" + fragment.trim()
        });

```

where super is the `RawShaderMaterial`.

I’ve tried fixing it by setting `depthTest` to `true` which almost works

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/7/b70379cbf4d97602867119a1449f47d79a226828.png)

the front face does indeed get rendered infront, but where the front is transparent it doesn’t fall back into the backside.

Is there something obvious I can do to fix it?  
If I recall correctly, using a “normal” material doesn’t produce this issue. However I would prefer to fix my custom shader if possible.

I don’t know if it is relevant, but currently I am “setting” alpha like this in the shader

```glsl
out vec4 fragColor;
...
void main() {
...
    fragColor = vec4(colour, alpha);
}

```

so it is nothing fancy.

---

<div class="post-metadata">

**Author:** ![grml](https://avatars.discourse-cdn.com/v4/letter/g/e36b37/32.png) [@grml](https://discourse.threejs.org/u/grml)\
**Post date:** [October 24, 2025, 11:25am UTC](https://discourse.threejs.org/t/depth-testing-with-transparency/87712/2 "2025-10-24T11:25:16Z")

</div>

The polygons of geometry are rendered in the order they are in the buffer, distance to camera is not relevant here.

Alpha testing should do the trick:

```javascript
void main() {
...
    if(alpha < 0.01) // adjust as needed
        discard;
    fragColor = vec4(colour, alpha);
    // fragColor = vec4(colour * alpha, alpha);
}

```

The edge might look bad; the commented line is for premultiplied alpha blending, which you should use here to get clean blending.

---

<div class="post-metadata">

**Author:** ![munhunger](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/munhunger/32/63361_2.png) [@munhunger](https://discourse.threejs.org/u/munhunger)\
**Post date:** [October 24, 2025, 11:28am UTC](https://discourse.threejs.org/t/depth-testing-with-transparency/87712/3 "2025-10-24T11:28:35Z")

</div>

amazing!

first time seeing the `discard` keyword. Exactly what I needed and works like a charm 🙂