# Semi-transparent shader with groups

**URL:** <https://forum.babylonjs.com/t/semi-transparent-shader-with-groups/40108>\
**Category:** Questions\
**Created:** [April 22, 2023, 6:57pm UTC](https://forum.babylonjs.com/t/semi-transparent-shader-with-groups/40108 "2023-04-22T18:57:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![somerandomguy83](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/somerandomguy83/32/2624_2.png) [@somerandomguy83](https://forum.babylonjs.com/u/somerandomguy83)\
**Post date:** [April 22, 2023, 6:57pm UTC](https://forum.babylonjs.com/t/semi-transparent-shader-with-groups/40108/1 "2023-04-22T18:57:42Z")

</div>

Hi guys,

Can someone please advice if it is possible to make objects with this see-through shader to stay on top of another mesh if sprite.renderingGroupId \>mesh.renderingGroupId ?

Lines 88-93

> **[Babylon.js Playground](https://playground.babylonjs.com/#CUH660%2372)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [April 23, 2023, 11:47pm UTC](https://forum.babylonjs.com/t/semi-transparent-shader-with-groups/40108/2 "2023-04-23T23:47:18Z")

</div>

What are you trying to achieve exactly? What should be the right rendering from the PG?

---

<div class="post-metadata">

**Author:** ![somerandomguy83](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/somerandomguy83/32/2624_2.png) [@somerandomguy83](https://forum.babylonjs.com/u/somerandomguy83)\
**Post date:** [April 24, 2023, 4:59am UTC](https://forum.babylonjs.com/t/semi-transparent-shader-with-groups/40108/3 "2023-04-24T04:59:12Z")

</div>

Just trying to make it respect the render order set by id and become fully opaque when its above another mesh in order.

I guess the shader code is preventing this, so i’m wondering if there is something I could tweak in the shader itself to achieve it, or maybe I’m missing some other solution

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [April 24, 2023, 10:02am UTC](https://forum.babylonjs.com/t/semi-transparent-shader-with-groups/40108/4 "2023-04-24T10:02:22Z")

</div>

This cannot work because the technique relies on the sprite and other objects being rendered in the same pass and using the same depth buffer.

When a sprite is rendered (after the opaque objects, because it is transparent), the depth buffer must have been filled with the depth of the opaque object. If you put a sprite in group 0 and the opaque objects in group 1, the depth buffer will be empty when the sprite is rendered and the output will not be as expected.

I don’t see how to make this work…

---

<div class="post-metadata">

**Author:** ![somerandomguy83](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/somerandomguy83/32/2624_2.png) [@somerandomguy83](https://forum.babylonjs.com/u/somerandomguy83)\
**Post date:** [April 24, 2023, 10:16am UTC](https://forum.babylonjs.com/t/semi-transparent-shader-with-groups/40108/5 "2023-04-24T10:16:32Z")

</div>

Thank you for your analysis, appreciate it.