<p>The simplest solution is to do three passes:</p>

<ul>
<li>Render opaque meshes to a buffer (front-to-back, depth read/write on)</li>
<li>Render translucent meshes to another buffer (front-to-back, depth read/write on)<br>
This makes sure that only the closest translucent mesh is rendered.</li>
<li>Alpha blend translucent mesh on top of opaque buffer using opaque depth buffer. (depth read on)<br>
This will take care of opaque meshes blocking translucent meshes and preserving translucent opacity levels. Depth test for values less or equal for small early z test (potential) optimisation.</li>
</ul>

<p>EDIT: As mentioned below you could use the same depth buffer for the translucent pass and do the alpha blend then, the key is rendering the translucent pass front-to-back and depth write/testing.</p>

CC BY-SA 3.0
2016-09-12T16:52:09.167Z
This also works if you keep the same depth buffer for the two render passes without clearing it between them.
Julien Guertault
CC BY-SA 3.0
2016-09-12T13:46:16.877Z
2016-09-12T17:31:40.257Z
2016-09-12T17:31:40.257Z
Syntac_
<p>Disclaimer: I haven't actually tested this but it seems feasible.</p>

<p>I agree with <a href="https://computergraphics.stackexchange.com/users/231/trichoplax">trichoplax</a> that what you want could possibly be expressed more clearly but, assuming I've understood correctly, would the following do the job?</p>

<p>First I assume you can supply the opaque and translucent geometry separately, and that the opaque is sent first. I'm also going to assume there <em>may</em> be translucent geometry with exactly the same pixel Z values.(If this isn't the case, the stencil requirements could probably be dropped.)</p>

<p>To handle the "single translucent layer", clear the stencil buffer and send the translucent polygons to update the Z-buffer and set the stencil buffer on each pixel, but don't touch the frame buffer. </p>

<p>Submit the translucent data a second time (to actually update the framebuffer),  but change the Z test to 'equal' and only allow drawing on the pixels that are currently set in the the stencil buffer. Also clear the stencil for any pixels that pass the tests.</p>

<p>This, I think, should result in only the closest translucency layer being applied.</p>

CC BY-SA 3.0
2016-09-12T10:01:31.040Z
2016-09-12T15:36:30.583Z
2016-09-12T15:36:30.583Z
Simon F
<p>I would like to make certain objects in my scene transparent, but only the parts visible to the camera when opaque. </p>

<p>Currently, when I make objects transparent, I can see other transparent objects behind them, which I don't want. I only want to be able to see opaque objects behind transparent objects.</p>

<p>This is what happens now:</p>

<p><a href="https://i.sstatic.net/gRP4b.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/gRP4b.png" alt="enter image description here"></a></p>

<p>This is what I want:</p>

<p><a href="https://i.sstatic.net/vIumn.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/vIumn.png" alt="enter image description here"></a></p>

CC BY-SA 3.0
2016-09-10T05:33:32.203Z
Could you clarify what you mean? It may help to include your motivation for wanting this effect, and to use simpler example images using only 2 or 3 objects.
trichoplax is on Codidact now
<rendering><webgl><transparency>
Only show opaque objects behind transparent objects
roob
# Only show opaque objects behind transparent objects

(Asked by: username_0 on 2016-09-09)

I would like to make certain objects in my scene transparent, but only the parts visible to the camera when opaque.

Currently, when I make objects transparent, I can see other transparent objects behind them, which I don't want. I only want to be able to see opaque objects behind transparent objects.

This is what happens now:

[![enter image description here](https://i.sstatic.net/gRP4b.png)](https://i.sstatic.net/gRP4b.png)

This is what I want:

[![enter image description here](https://i.sstatic.net/vIumn.png)](https://i.sstatic.net/vIumn.png)

**Tags:** rendering, webgl, transparency

> **Comments:**
> **username_1**: Could you clarify what you mean? It may help to include your motivation for wanting this effect, and to use simpler example images using only 2 or 3 objects.  

---

## 2 answers

### Answer by username_2 on 2016-09-12. Score: 3

The simplest solution is to do three passes:

* Render opaque meshes to a buffer (front-to-back, depth read/write on)
* Render translucent meshes to another buffer (front-to-back, depth read/write on)  
  This makes sure that only the closest translucent mesh is rendered.
* Alpha blend translucent mesh on top of opaque buffer using opaque depth buffer. (depth read on)  
  This will take care of opaque meshes blocking translucent meshes and preserving translucent opacity levels. Depth test for values less or equal for small early z test (potential) optimisation.

EDIT: As mentioned below you could use the same depth buffer for the translucent pass and do the alpha blend then, the key is rendering the translucent pass front-to-back and depth write/testing.

> **Comments:**
> **username_3**: This also works if you keep the same depth buffer for the two render passes without clearing it between them.  

---

### Answer by username_4 on 2016-09-12. Score: 1

Disclaimer: I haven't actually tested this but it seems feasible.

I agree with [username_1](https://computergraphics.stackexchange.com/users/231/username_1) that what you want could possibly be expressed more clearly but, assuming I've understood correctly, would the following do the job?

First I assume you can supply the opaque and translucent geometry separately, and that the opaque is sent first. I'm also going to assume there *may* be translucent geometry with exactly the same pixel Z values.(If this isn't the case, the stencil requirements could probably be dropped.)

To handle the "single translucent layer", clear the stencil buffer and send the translucent polygons to update the Z-buffer and set the stencil buffer on each pixel, but don't touch the frame buffer.

Submit the translucent data a second time (to actually update the framebuffer), but change the Z test to 'equal' and only allow drawing on the pixels that are currently set in the the stencil buffer. Also clear the stencil for any pixels that pass the tests.

This, I think, should result in only the closest translucency layer being applied.


---

