# Displacement Map bleeding couse artefacts **URL:** \ **Category:** Bugs\ **Created:** [November 5, 2020, 3:02pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449 "2020-11-05T15:02:41Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![peterimg](https://avatars.discourse-cdn.com/v4/letter/p/50afbb/32.png) [@peterimg](https://forum.babylonjs.com/u/peterimg)\ **Post date:** [November 5, 2020, 3:02pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/1 "2020-11-05T15:02:41Z")
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). > **[Babylon.js Playground](https://playground.babylonjs.com/#9SY040)** It looks like there is a small bleed that makes the displacement not aligned like expected. and create displaced mesh artifacts: Displacement map ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/f/f8fc549baf0bf11e56cbb00148e0456dea50859e.png) Texture Bleed: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/3/3c165e12637ef2f69bcb8afe2c51107e8a678daa.png) Wrong mesh: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/9/9fa113d994375d564a24345a0c721fb07240ae7f.png) Expected result: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/614a0ae58f09ee88c45dbf5e51a7a1c125f8ba18.png) 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](https://playground.babylonjs.com/#9SY040#1) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/0/0ef7dd0a9cc33fe14dc84f3417dbc243cfa83119.png) But the UV scaling error is still there. And my fix is making it what it should be: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/2/228840bb36607888b4526f88df533d93131e9575.png) Regards Peter ---
**Author:** ![Gijs](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gijs/32/44_2.png) [@Gijs](https://forum.babylonjs.com/u/Gijs)\ **Post date:** [November 5, 2020, 5:20pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/2 "2020-11-05T17:20:18Z")
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](https://playground.babylonjs.com/#9SY040#2) ---
**Author:** ![peterimg](https://avatars.discourse-cdn.com/v4/letter/p/50afbb/32.png) [@peterimg](https://forum.babylonjs.com/u/peterimg)\ **Post date:** [November 5, 2020, 11:10pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/3 "2020-11-05T23:10:56Z")
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](https://playground.babylonjs.com/#9SY040#3) ---
**Author:** ![Gijs](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gijs/32/44_2.png) [@Gijs](https://forum.babylonjs.com/u/Gijs)\ **Post date:** [November 6, 2020, 6:59pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/4 "2020-11-06T18:59:57Z")
Ok, I found the problem in the CPU function that does the displacement (`applyDisplacementMapFromBuffer`): > 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](https://playground.babylonjs.com/#X1EQ35#1) This one has the fixes applied: [https://playground.babylonjs.com/#X1EQ35#2](https://playground.babylonjs.com/#X1EQ35#2) This one does not have the remaindered `uvOffset`: [https://playground.babylonjs.com/#X1EQ35#3](https://playground.babylonjs.com/#X1EQ35#3) And finally your scene working as expected: [https://playground.babylonjs.com/#9SY040#4](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](https://playground.babylonjs.com/#04JDPF#0) “Fixed”: [https://playground.babylonjs.com/#04JDPF#32](https://playground.babylonjs.com/#04JDPF#32) Not sure how to proceed ---
**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 6, 2020, 7:28pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/5 "2020-11-06T19:28:24Z")
you rock! I’m applying the fix for next nighty ;D thanks a ton! ---
**Author:** ![peterimg](https://avatars.discourse-cdn.com/v4/letter/p/50afbb/32.png) [@peterimg](https://forum.babylonjs.com/u/peterimg)\ **Post date:** [November 7, 2020, 5:29pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/6 "2020-11-07T17:29:06Z")
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 ---
**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 9, 2020, 4:46pm UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/7 "2020-11-09T16:46:26Z")
You rock too OBVIOUSLY 😃 ---
**Author:** ![peterimg](https://avatars.discourse-cdn.com/v4/letter/p/50afbb/32.png) [@peterimg](https://forum.babylonjs.com/u/peterimg)\ **Post date:** [November 10, 2020, 8:22am UTC](https://forum.babylonjs.com/t/displacement-map-bleeding-couse-artefacts/15449/8 "2020-11-10T08:22:41Z")
![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/6/64241601abeec6a9bca47b666339a933c656ed76.jpeg)