# Issue with OIT feature **URL:** \ **Category:** Bugs\ **Created:** [February 23, 2022, 2:45pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900 "2022-02-23T14:45:26Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/michael/32/21769_2.png) [@Michael](https://forum.babylonjs.com/u/Michael)\ **Post date:** [February 23, 2022, 2:45pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/1 "2022-02-23T14:45:26Z")
When I enable OIT through `scene.useOrderIndependentTransparency = true;`, the edges of translucent triangles are visible. They are not visible if OIT is disabled. Any idea? PG here (sorry, the file is ~100MB, so it takes a few seconds to load): [https://playground.babylonjs.com/#YIU90M#717](https://playground.babylonjs.com/#YIU90M#717) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/7/17953be345124f20949f38a53abbe860cc044d6f.jpeg) ---
**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:** [February 23, 2022, 4:13pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/2 "2022-02-23T16:13:21Z")
w000t never seen this before and I have even no idea how it is possible, let me add @CraigFeldspar to the thread ---
**Author:** ![CraigFeldspar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/craigfeldspar/32/45631_2.png) [@CraigFeldspar](https://forum.babylonjs.com/u/CraigFeldspar)\ **Post date:** [February 27, 2022, 6:31pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/3 "2022-02-27T18:31:39Z")
hello @Michael Looked at your PG, and found that you have lots of opaque and alpha meshes in your model. ![Capture d’écran 2022-02-27 à 19.29.25](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/6/266434dd64d914e5aa031230ae49af619a9b12b9.png) Can you check that you don’t have 2 meshes layered on top of each other that share the exact same depth ? This usually doesn’t play well with OIT Let me know ---
**Author:** ![lPaul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lpaul/32/22511_2.png) [@lPaul](https://forum.babylonjs.com/u/lPaul)\ **Post date:** [March 2, 2022, 7:39am UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/4 "2022-03-02T07:39:24Z")
Hi, thanks for the answer and sorry for the delay. Indeed, at the exact location of the edges bug, there are two meshes at the exact same depth. But in the playground and in my Babylon.js v5.0.0 locally, I do not reproduce the issue (even without moving the meshes to have different depth…) So I don’t really know what happened here. However, I found what it looks like a bug when using OIT : in my code I : - Activate OIT - append a glTF file as a file containing semi-transparent textures - Clear the mesh using mesh.dispose() - Add another mesh using Append Then, if OIT is activated, all the textures that are semi-transparent **are not cleared** and remains in the scene. Even if I clear all the scene by iterating over scene.meshes, the semi-transparent textures are not cleared. This issue is not here if I disable OIT. Do you have any ideas ? I am trying to reproduce the issue in the playground ---
**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:** [March 2, 2022, 4:18pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/5 "2022-03-02T16:18:59Z")
@CraigFeldspar will fix it in no time with a playground sounds like a dispose issue 🙂 ---
**Author:** ![lPaul](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/lpaul/32/22511_2.png) [@lPaul](https://forum.babylonjs.com/u/lPaul)\ **Post date:** [March 2, 2022, 5:09pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/6 "2022-03-02T17:09:52Z")
Here is the [playground](https://playground.babylonjs.com/#WGZLGJ#4514) Sorry for ugly code, but the issue is here. If you disable oit it works, but if you enable it, you notice that the transparent textures stay at the same location on the screen. It looks like we are not flushing the dual-depth peeling framebuffers or something like that ! ---
**Author:** ![Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/michael/32/21769_2.png) [@Michael](https://forum.babylonjs.com/u/Michael)\ **Post date:** [March 7, 2022, 12:34pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/7 "2022-03-07T12:34:12Z")
Thanks, @CraigFeldspar for your feedback. My previous PG is not working anymore, please try this new one: [https://playground.babylonjs.com/#YIU90M#757](https://playground.babylonjs.com/#YIU90M#757) I managed to run Spectorjs on this one, showing that even the first draw call is showing these black edge artifacts, so I don’t think it’s related to two meshes at the same location: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/c/fce3ddd8a6fbdac367f056717ec2650db6268487.png) ---
**Author:** ![Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/michael/32/21769_2.png) [@Michael](https://forum.babylonjs.com/u/Michael)\ **Post date:** [March 7, 2022, 12:57pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/8 "2022-03-07T12:57:22Z")
@CraigFeldspar My guess on the issue: my glTF doesn’t have tangents attribute, so the TBN matrix is computed using `dFdx` and `dFdy`. However, the derivatives must be called unconditionally, and it seems that the shader can `return` before `cotangent_frame` which uses the derivatives. ---
**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:** [March 7, 2022, 3:20pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/9 "2022-03-07T15:20:17Z")
That s a pretty good catch, @CraigFeldspar should be able to look into it soon 🙂 ---
**Author:** ![Michael](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/michael/32/21769_2.png) [@Michael](https://forum.babylonjs.com/u/Michael)\ **Post date:** [March 15, 2022, 7:26am UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/10 "2022-03-15T07:26:21Z")
@sebavan @CraigFeldspar any update? I was able to confirm that the bug isn’t visible when my glTF file includes tangents, so it’s definitely related to `cotangent_frame` being called after the potential `return` resulting in undefined derivatives. ---
**Author:** ![CraigFeldspar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/craigfeldspar/32/45631_2.png) [@CraigFeldspar](https://forum.babylonjs.com/u/CraigFeldspar)\ **Post date:** [March 15, 2022, 11:03am UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/11 "2022-03-15T11:03:47Z")
Hi Michael, Sorry I’m really swamp these days, I may be able to look into it over the weekend. I’ll keep you posted ---
**Author:** ![CraigFeldspar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/craigfeldspar/32/45631_2.png) [@CraigFeldspar](https://forum.babylonjs.com/u/CraigFeldspar)\ **Post date:** [March 21, 2022, 11:03pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/12 "2022-03-21T23:03:59Z")
So it all boils down to this line in `bumpFragmentMainFunctions.fx`, l44 : ` float invmax = inversesqrt(max(dot(tangent, tangent), dot(bitangent, bitangent)));` The expression inside the inverse square root can be sometimes 0, so the inverse op breaks the shading of the pixel. I was able to have a correct shading by safeguarding the value : ` float invmax = inversesqrt(max(0.00001, max(dot(tangent, tangent), dot(bitangent, bitangent))));` I really don’t like this solution though. @sebavan @Evgeni_Popov would you happen to know in what case `dFdx(p)` would return 0 ? This op is related to the neighbouring fragments, so something may happen there. Btw I tried to move the OIT part that was returning before the use of derivatives, as @Michael suggested, and it has no effect 😕 Maybe we need to find a way to avoid this branching at all ? ---
**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:** [March 22, 2022, 12:37am UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/13 "2022-03-22T00:37:44Z")
Are you sure it is `dFdx(p)` which returns 0 and not `dFdx(uv)` / `dFdy(uv)`? We already had a problem with `dFdx(uv)` / `dFdy(uv)`, see [Anisotropy Issues - Worse on Mac OS - #9 by Evgeni\_Popov](https://forum.babylonjs.com/t/anisotropy-issues-worse-on-mac-os/21466/9). The fix would be to explicitely provide tangents instead of trying to compute them with the cotangent frame. However, your fix may well be ok, to avoid crashing the shader. ---
**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:** [March 22, 2022, 3:02pm UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/14 "2022-03-22T15:02:11Z")
I am fine with safe guarding @CraigFeldspar could you create a PR ??? ---
**Author:** ![CraigFeldspar](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/craigfeldspar/32/45631_2.png) [@CraigFeldspar](https://forum.babylonjs.com/u/CraigFeldspar)\ **Post date:** [March 23, 2022, 7:46am UTC](https://forum.babylonjs.com/t/issue-with-oit-feature/27900/15 "2022-03-23T07:46:03Z")
[Safeguarding derivates in bump shader by CraigFeldspar · Pull Request #12242 · BabylonJS/Babylon.js · GitHub](https://github.com/BabylonJS/Babylon.js/pull/12242) Here you go 🙂