# OIT & Z-Offset for transparent objects

**URL:** <https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485>\
**Category:** Bugs\
**Created:** [November 6, 2023, 12:38pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485 "2023-11-06T12:38:16Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![antl](https://avatars.discourse-cdn.com/v4/letter/a/7feea3/32.png) [@antl](https://forum.babylonjs.com/u/antl)\
**Post date:** [November 6, 2023, 12:38pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/1 "2023-11-06T12:38:16Z")

</div>

Hi all,

A quick bug I just found regarding material z-offset & the depth peeler, here is the PG:

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

The problem seems to arise only for materials with alpha & a z-offset.

It is not in the known limitations, so I guess it should be posted here.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 6, 2023, 11:00pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/2 "2023-11-06T23:00:52Z")

</div>

Adding @Evgeni_Popov who can help with OIT.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [November 6, 2023, 11:00pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/3 "2023-11-06T23:00:57Z")

</div>

Assigned @Evgeni\_Popov on November 6, 2023, 11:00pm UTC



---

<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:** [November 7, 2023, 12:58pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/4 "2023-11-07T12:58:04Z")

</div>

The depth peeler only deals with transparent objects. When you set alpha=1, the material is not transparent anymore and the corresponding mesh won’t be handled by the depth peeler. You can set alpha to 0.9999 instead if you want it to appear as solid but still be handled by the depth peeler.

---

<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:** [November 7, 2023, 12:58pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/5 "2023-11-07T12:58:08Z")

</div>

Unassigned @Evgeni\_Popov on November 7, 2023, 12:58pm UTC



---

<div class="post-metadata">

**Author:** ![antl](https://avatars.discourse-cdn.com/v4/letter/a/7feea3/32.png) [@antl](https://forum.babylonjs.com/u/antl)\
**Post date:** [November 7, 2023, 4:40pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/6 "2023-11-07T16:40:24Z")

</div>

Sure, sorry not to be clear enough then.

My goal is that I would like to avoid Z-fighting by adding a z-offset to some carefully choosen mesh materials.  
This works like a charm without the depth peeler or with it and alpha = 1 (which is the same as you mentionned). But as soon as the depth peeler is on AND material’s alpha are \< 1, z-fighting comes back, as if it was ignoring the z-offset value.

I hope you can see the problem in the PG now, z-fighting should be nowhere to be seen on the left and right cases.

---

<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:** [November 7, 2023, 5:01pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/7 "2023-11-07T17:01:53Z")

</div>

Indeed, the shader code that handles z-peeling itself does depth comparisons and I suppose the calculation should be updated to take z-offset parameters into account. However, I’m not sure how to update this code, and we’d have to pass two new parameters (`zOffset` and `zOffsetUnits`) to the shader, because these are currently only used by the underlying graphics system (WebGL or WebGPU) without the shader knowing.

This seems a little complicated for such a specific case, as you should try not to use `zOffset` in the first place, because `zOffset` is often not sufficient to correct all artifacts due to coplanar geometries. Using a reverse depth buffer may help here (but won’t solve all problems), but it only works in WebGPU:

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

You should really try not to have coplanar geometries in your scene…

---

<div class="post-metadata">

**Author:** ![antl](https://avatars.discourse-cdn.com/v4/letter/a/7feea3/32.png) [@antl](https://forum.babylonjs.com/u/antl)\
**Post date:** [November 10, 2023, 2:25pm UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/8 "2023-11-10T14:25:40Z")

</div>

So this bug may be in fact just a “known limitation”.  
Let me be more specific then about what I try to achieve.

In fact I would like to render some choosen edges on top of meshes.  
The main feature I need for performance reasons is to reuse the position buffer from the base mesh to create the line mesh. This lie mesh can then be zOffset.  
Here you can find a PG showing what I mean:

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

You can find 2 bugs (among 4 issues) in my opinion:

- **OIT is ON** → no AA (known limitation)
- **OIT is ON** → zOffset not working (known limitation? discussed above)
- **OIT ON, alpha OFF then alpha ON again** → the lines are not depth tested anymore.
- **OIT OFF** : zOffset not working on lines

What’s your opinion? Are they truly unexpected behaviours?

---

<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:** [November 11, 2023, 11:04am UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/9 "2023-11-11T11:04:35Z")

</div>

Yes, no AA and no zOffset support are current known limitations.

Regarding:

> - **OIT ON, alpha OFF then alpha ON again** → the lines are not depth tested anymore.

When you re-set alpha=0.75, you also set it to the line materials, so now the lines are also considered transparent. As they are drawn after the cubes, they appear in full color. You should exclude the line materials when updating the alpha color:

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

> - **OIT OFF** : zOffset not working on lines

Yes, it’s a WebGL (OpenGL) limitation, it does not work for lines / points.

---

<div class="post-metadata">

**Author:** ![antl](https://avatars.discourse-cdn.com/v4/letter/a/7feea3/32.png) [@antl](https://forum.babylonjs.com/u/antl)\
**Post date:** [November 12, 2023, 2:27am UTC](https://forum.babylonjs.com/t/oit-z-offset-for-transparent-objects/45485/10 "2023-11-12T02:27:23Z")

</div>

Oh sure you’re right, sorry for the mistake regarding the third case 😢

Ok so we can conclude that none of this is possible, and registered as limitations.  
Thanks very much for your help and your time, I’m very grateful.
