# Decal zoffset changing floor mesh position

**URL:** <https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200>\
**Category:** Questions\
**Tags:** material\
**Created:** [October 27, 2020, 3:55am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200 "2020-10-27T03:55:51Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![amark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amark/32/25897_2.png) [@amark](https://forum.babylonjs.com/u/amark)\
**Post date:** [October 27, 2020, 3:55am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/1 "2020-10-27T03:55:51Z")

</div>

Hi,  
I am using decal to apply a texture to floor mesh to avoid flicker also added zoffset (0.2) to each decal creation. Here, The problem is floor mesh losing its position at the bottom of the room every time I apply. The below image is a reference.

decal.material = createTexture(imgSelected);  
decal.material.zOffset = zOffset;  
zOffset -= 0.2;

then, Applying to floor mesh.

![screenshot_10-27_9-18](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f61b67e0b90abf027d940d90288aceedc7e590a1.png)

---

<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:** [October 27, 2020, 8:12am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/2 "2020-10-27T08:12:26Z")

</div>

Maybe 0.2 is too big, you should try with smaller values.

A repro in the PG would also help people help you.

---

<div class="post-metadata">

**Author:** ![amark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amark/32/25897_2.png) [@amark](https://forum.babylonjs.com/u/amark)\
**Post date:** [October 27, 2020, 8:14am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/3 "2020-10-27T08:14:48Z")

</div>

for smaller value, While room rotation we can see overlap as flickering between textures. so finally using 0.2

---

<div class="post-metadata">

**Author:** ![amark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amark/32/25897_2.png) [@amark](https://forum.babylonjs.com/u/amark)\
**Post date:** [October 30, 2020, 3:55am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/4 "2020-10-30T03:55:20Z")

</div>

HI sorry for the late reply,

After digging and tried different cases with respect to the above (first image of the post) image, My **findings are** when the **decal size is greater than the floor mesh size**. you can see in the below image how i m using it. But I m using greater size as I dont know where the user will click, so I took larger decals size looks normal from any click.

I **s there any solution where I can restrict/limit the applied decal not to exceed floor mesh**

 ![screenshot_10-30_9-17](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/d/df640e78eafb827d1b91d86cfe44b9c96858395a.jpeg)

---

<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:** [October 30, 2020, 11:07am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/5 "2020-10-30T11:07:48Z")

</div>

That’s strange because the decal mesh is clipped if it is bigger than the mesh on which it is applied.

For eg:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/9e0a45a880ec65e90a735517853c2df1d21cb076.png)

I have outlined the border of the decal mesh in red: as you can see, it does not go over the grey plane on which it is applied, whereas the projected decal itself is bigger than the plane, the full image being:  
 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/5/5e0a9a2f674187aafd7f48f5de04a7af97f5953e.png)

---

<div class="post-metadata">

**Author:** ![amark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amark/32/25897_2.png) [@amark](https://forum.babylonjs.com/u/amark)\
**Post date:** [November 1, 2020, 1:56am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/6 "2020-11-01T01:56:27Z")

</div>

HI,  
The Zoffset was higher incrment. now  
the offset value is set 0.2 increments, problem looks ok but **got new issue** , in below every layer zoffset values are -1, -1.2, -1.4, but decal keed hiding on room rotation, i used  
decal.sideOrientation = BABYLON.Mesh.DOUBLESIDE;  
decal.material.backFaceCulling = true; but no use

[https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/362416127611a8b8a4d508fb022ca7bba2b99e2b.mp4](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/362416127611a8b8a4d508fb022ca7bba2b99e2b.mp4)

---

<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 1, 2020, 12:50pm UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/7 "2020-11-01T12:50:14Z")

</div>

It’s a common problem when you have planes that are coplanar. Even zOffset is not enough to fix the artifacts in all view angles.

One possible way would be to use the stencil buffer:

- render the floor in the stencil with a value of 2
- render all other objects in the stencil with a value of 1
- render the decals only where the stencil = 2. Disable z-testing when rendering the decals

Example without stencil: [Babylon.js Playground](https://playground.babylonjs.com/#LNHI0I)  
Example with stencil: [Babylon.js Playground](https://playground.babylonjs.com/#NECLBA)

---

<div class="post-metadata">

**Author:** ![amark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amark/32/25897_2.png) [@amark](https://forum.babylonjs.com/u/amark)\
**Post date:** [November 1, 2020, 1:04pm UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/8 "2020-11-01T13:04:54Z")

</div>

ok, let me try, it seems it will work, i will come back once done. Thank you for response

---

<div class="post-metadata">

**Author:** ![amark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amark/32/25897_2.png) [@amark](https://forum.babylonjs.com/u/amark)\
**Post date:** [November 2, 2020, 5:48am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/9 "2020-11-02T05:48:33Z")

</div>

This subject is new for, Just check below for Disable z-testing

engine.setDepthFunction(engine.\_gl.ALWAYS);

i found this, if so what is for enabling z-testing after rendering.

as well i have many number of objects in mesh and i m using loop like below

for (var index = 0; index \< scene.meshes.length; index++) {

```
          let nMeshName = scene.meshes[index].name;

    [nMeshName].forEach((m) => {
         m.onBeforeRenderObservable.add(() => {
        engine.setStencilOperationPass(BABYLON.Engine.REPLACE);
        engine.setStencilMask(0xFF);
        engine.setStencilFunction(BABYLON.Engine.ALWAYS);
        engine.setStencilFunctionReference(1);
            });
        });            

         }

```

the above one hangs my browser, dont know the reason

I don’t whether it will help you or not. below is my work link. i feel that it might wrong identification of the problem. when u open the below page, right side you will find tiles, take 24x24 size and click on floor, and take another tile, and in the bottom set tile count 1 and 3, and now click. Now you move the room you file to find the problem.

> **[wall and floor](https://wallandfloor.in/panel/babylon.php)**

decal is creating every time when new image will select with Zoffset value.

---

<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 2, 2020, 10:22am UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/10 "2020-11-02T10:22:17Z")

</div>

You must iterate on a mesh, not on a name: `[scene.meshes[index]].forEach(...)`

However, as you have a single mesh each iteration, you can simply do `scene.meshes[index].onBeforeRenderObservable.add(...)`.

Regarding z-testing, use the `depthFunction` property of the material, it’s easier:

```javascript
matDecal.depthFunction = BABYLON.Constants.ALWAYS;

```

For completeness, to reset the depth function use `engine.setDepthFunction(BABYLON.Constants.LEQUAL);` but you don’t need to do that if you use the `depthFunction` property.

Using several decals on top of each other work with the stencil technic too:

[https://playground.babylonjs.com/#NECLBA#1](https://playground.babylonjs.com/#NECLBA#1)

The order is important, however, the decals will be displayed in the order they are created.

---

<div class="post-metadata">

**Author:** ![amark](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amark/32/25897_2.png) [@amark](https://forum.babylonjs.com/u/amark)\
**Post date:** [November 2, 2020, 1:33pm UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/11 "2020-11-02T13:33:19Z")

</div>

tried iterate and below line too, mesh names in console.log i can see, when ever trying in onBeforeRenderObservable.

`scene.meshes[index].onBeforeRenderObservable.add(...)` .

this is throwing error -

Unable to import meshes from 3d/file/kit.glb: Error in onSuccess callback: TypeError: Cannot read property ‘add’ of undefined.

---

<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 2, 2020, 1:35pm UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/12 "2020-11-02T13:35:55Z")

</div>

It’s hard to say more without a repro in the PG…

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [November 2, 2020, 5:55pm UTC](https://forum.babylonjs.com/t/decal-zoffset-changing-floor-mesh-position/15200/13 "2020-11-02T17:55:40Z")

</div>

> **[How to quickly get an answer of Babylon.js Forum - Babylon.js Documentation](https://doc.babylonjs.com/resources/forum)**