Decal zoffset changing floor mesh position

Questions
1

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

2

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

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

3

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

4

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.

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

screenshot_10-30_9-17
screenshot_10-30_9-171600×1600 120 KB

5

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

For eg:
image

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

6

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

7

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
Example with stencil: Babylon.js Playground

8

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

9

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.

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

10

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:

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

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

11

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.

12

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

1 Like
13