Displacement Map bleeding couse artefacts

peterimg · November 5, 2020, 3:02pm

Hi

I wanted to understand more how to use a displacement map and how the vertex is positioned based on the map color. If I got ground subdivision: 3, do I need a map of 3x3 pixels or 4x4 pixels? so every pixel value will correspond to 1 vertex.

I made a small PG that is illustrating my bug (to see it uncomment/comment lines 48 and 49).

It looks like there is a small bleed that makes the displacement not aligned like expected. and create displaced mesh artifacts:

Displacement map

Texture Bleed:

Wrong mesh:

Expected result:

And if you can answer me this question:

If I got ground subdivision: 3, do I need a map of 3x3 pixels or 4x4 pixels? So every pixel value will correspond to 1 vertex.

Cause now I got this error and I can’t really tell.

UPDATE: 1
Actually, I see that my wrong mesh is what it should be, but the 3 corners are elevated with the error. So I should have a ground mesh 3by3 and texture 4x4px for that.

https://playground.babylonjs.com/#9SY040#1

But the UV scaling error is still there. And my fix is making it what it should be:

Regards
Peter

Gijs · November 5, 2020, 5:20pm

Hi Peter,

You can solve the texture bleed by changing the addressmode of the texture from the default wrap to clamp:

https://playground.babylonjs.com/#9SY040#2

peterimg · November 5, 2020, 11:10pm

Hi

Thanks for replying. But I’m not talking about the bleeding of texture for the diffuse texture. I’m talking about problems with displacement.

I predict that the UV unwrapping for the displacement texture is happening in the same way as for diffuse texture, and where the bleed happens in the corner where there is that white line, the displacement read white color instead of the black, making the corners go up to value 1 instead of reading black pixel value of 0, and there is no clamping setting for the displacement.

This makes the ground plane displaced in the wrong way.

Uncomment line 48 and comment out 49 to see the displacement error, from my initial PG and this happens:

https://playground.babylonjs.com/#9SY040#3

Gijs · November 6, 2020, 6:59pm

Ok, I found the problem in the CPU function that does the displacement (applyDisplacementMapFromBuffer):

github.com

BabylonJS/Babylon.js/blob/f03b68add831efc21590504755b08da74fe4e324/src/Meshes/mesh.ts#L2473




uvOffset = uvOffset || Vector2.Zero();

uvScale = uvScale || new Vector2(1, 1);



for (var index = 0; index < positions.length; index += 3) {

    Vector3.FromArrayToRef(positions, index, position);

    Vector3.FromArrayToRef(normals, index, normal);

    Vector2.FromArrayToRef(uvs, (index / 3) * 2, uv);



    // Compute height

    var u = ((Math.abs(uv.x * uvScale.x + uvOffset.x) * heightMapWidth) % heightMapWidth) | 0;

    var v = ((Math.abs(uv.y * uvScale.y + uvOffset.y) * heightMapHeight) % heightMapHeight) | 0;



    var pos = (u + v * heightMapWidth) * 4;

    var r = buffer[pos] / 255.0;

    var g = buffer[pos + 1] / 255.0;

    var b = buffer[pos + 2] / 255.0;



    var gradient = r * 0.3 + g * 0.59 + b * 0.11;



    normal.normalize();

It should multiply with heightMapWidth - 1 and heightMapHeight - 1 instead, because else a u or v of one will be remaindered back to zero, that’s why the four corners of your mesh are standing up – the (0, 0) pixel gets read.

Also, the uvOffset should be remaindered with 1.

Here are three demo scenes using the amiga.jpg texture:

This scene includes the original applyDisplacementMapFromBuffer function taken from babylon.max.js:

https://playground.babylonjs.com/#X1EQ35#1

This one has the fixes applied:

https://playground.babylonjs.com/#X1EQ35#2

This one does not have the remaindered uvOffset:

https://playground.babylonjs.com/#X1EQ35#3

And finally your scene working as expected:

https://playground.babylonjs.com/#9SY040#4

But this fix may also be a bug if the old behavior is expected, such as in the Amiga sphere examples from the PG:

Orginal: https://playground.babylonjs.com/#04JDPF#0
“Fixed”: https://playground.babylonjs.com/#04JDPF#32

Not sure how to proceed

Deltakosh · November 6, 2020, 7:28pm

you rock! I’m applying the fix for next nighty ;D

thanks a ton!

peterimg · November 7, 2020, 5:29pm

And I do not rock? (or I’m was just not mentioned) for finding it

Just kidding , but I hope I will help you with finding all that I can, and you will help me with what I need

Regards
Peter

Deltakosh · November 9, 2020, 4:46pm

You rock too OBVIOUSLY

peterimg · November 10, 2020, 8:22am

Topic		Replies	Views
Vertex normals and positions split at UV bolder points after displacement map applied Questions	5	335	January 27, 2023
Displacement Map Questions	7	3538	August 5, 2019
Issue with Displacement map Questions	1	203	March 25, 2023
Displacement map flipped vertically when load by default? Questions mesh	6	583	January 13, 2023
Texturing Issue? Bugs	3	490	March 23, 2022

Displacement Map bleeding couse artefacts

Related Topics