<p>Use the depth texture you mentioned, comparing it to the fragment's current depth to apply an alpha factor to your color. Remember to enable blending on the host. You can also upload the color texture and apply a more controlled blending on the shader.</p>

<p>The shader code involved would look like this:</p>

<pre><code>#version 430 core

out vec4 finalColor;

...

in vec2 screenUV;

...

uniform sampler2D depthTexture;

...

void main()
{
    float texDepth = texture(depthTexture, screenUV).r;
    float alpha = texDepth &lt; gl_FragDepth? 0.5 : 1.0;

    ...

    finalColor = vec4(..., alpha);

}
</code></pre>

CC BY-SA 4.0
2018-11-08T11:03:23.193Z
Okay thank you this has given me a good start as I did not know about gl_FragDepth. The part I am struggling with now is transforming the sprite UVs to screen UVs in order to sample the right part of the depthTexture. Any thoughts?
Snicklefritz
CC BY-SA 4.0
2018-11-08T11:21:08.327Z
@Snicklefritz To get the screen UVs, upload the screen size as uniform vec2. Then, divide gl_FragCoord.xy by the screen size and you will have them. You might have to flip the y coordinate as 1 - y
Nadir
CC BY-SA 4.0
2018-11-08T11:46:07.570Z
thank you for the sanity check as that's what I am doing. Still not getting the right result though.
Snicklefritz
CC BY-SA 4.0
2018-11-08T15:24:06.163Z
All sorted now, the problem was that my depth texture size was wrong, I have supersampling as a PP step so the size I was giving was wrong. I wish I could just use textureSize() in shader but it's not supported with the WebGL version Threejs uses. Thank you for your help.
Snicklefritz
CC BY-SA 4.0
2018-11-08T15:28:38.037Z
@Snicklefritz Great! I believe it is better not to be supported, its a performance killer :)
Nadir
CC BY-SA 4.0
2018-11-06T14:43:46.397Z
2018-11-06T14:43:46.397Z
Nadir
<p>I have a scene with camera facing billboards drawn with depth write off so they appear on top of other objects. I would like to draw each sprite so that any  obscured pixels are drawn with a very low opacity. So that obscured portions of each sprite are visible but very faint.</p>

<p>Could anyone point me in the direction of a solution? I am using Threejs but I imagine the solution will be shader (glsl) based. I already have the depth texture for the scene available.</p>

<p><a href="https://i.sstatic.net/2iJbr.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/2iJbr.png" alt="Diagram showing desired effect"></a></p>

<p>Sketchfab implements this with its annotations, which is the effect I would like to acheive.</p>

<p><a href="https://i.sstatic.net/jItdi.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/jItdi.png" alt="Sketchfab example of desired effect"></a></p>

<glsl><webgl><three.js>
Using depth texture to mask local pixels
Snicklefritz
# Using depth texture to mask local pixels

(Asked by: username_0 on 2018-11-06)

I have a scene with camera facing billboards drawn with depth write off so they appear on top of other objects. I would like to draw each sprite so that any obscured pixels are drawn with a very low opacity. So that obscured portions of each sprite are visible but very faint.

Could anyone point me in the direction of a solution? I am using Threejs but I imagine the solution will be shader (glsl) based. I already have the depth texture for the scene available.

[![Diagram showing desired effect](https://i.sstatic.net/2iJbr.png)](https://i.sstatic.net/2iJbr.png)

Sketchfab implements this with its annotations, which is the effect I would like to acheive.

[![Sketchfab example of desired effect](https://i.sstatic.net/jItdi.png)](https://i.sstatic.net/jItdi.png)

**Tags:** glsl, webgl, three.js


---

## 1 answers

### Answer by username_1 on 2018-11-06. Score: 0 | Accepted answer

Use the depth texture you mentioned, comparing it to the fragment's current depth to apply an alpha factor to your color. Remember to enable blending on the host. You can also upload the color texture and apply a more controlled blending on the shader.

The shader code involved would look like this:

```
#version 430 core

out vec4 finalColor;

...

in vec2 screenUV;

...

uniform sampler2D depthTexture;

...

void main()
{
    float texDepth = texture(depthTexture, screenUV).r;
    float alpha = texDepth < gl_FragDepth? 0.5 : 1.0;

    ...

    finalColor = vec4(..., alpha);

}

```

> **Comments:**
> **username_0**: Okay thank you this has given me a good start as I did not know about gl_FragDepth. The part I am struggling with now is transforming the sprite UVs to screen UVs in order to sample the right part of the depthTexture. Any thoughts?  
> **username_1**: @username_0 To get the screen UVs, upload the screen size as uniform vec2. Then, divide gl_FragCoord.xy by the screen size and you will have them. You might have to flip the y coordinate as 1 - y  
> **username_0**: thank you for the sanity check as that's what I am doing. Still not getting the right result though.  
> **username_0**: All sorted now, the problem was that my depth texture size was wrong, I have supersampling as a PP step so the size I was giving was wrong. I wish I could just use textureSize() in shader but it's not supported with the WebGL version Threejs uses. Thank you for your help.  
> **username_1**: @username_0 Great! I believe it is better not to be supported, its a performance killer :)  

---

