Search the Community
Showing results for tags 'displacement map'.
Found 4 results
Hi, I'm using the DisplacementFilter in Pixi.JS v5. I would like to understand exactly how displacement map images displace pixels. As they are normally grayscale, I'm wondering what the color value (0-255) denotes for a given pixel. If anyone can explain this to me or link an article explaining it, I would be very grateful. Thanks!
Hi, I am trying to find out if it is possible to adapt this 'sphere.applyDisplacementMap ("/ assets / amiga.jpg", 0, 1.5);' of this example https://www.babylonjs.com/demos/displacementmap/ on an object create in blender with the adapted uvs. To make it simple I would like to be able to change the shape of my object with a heightmap. I do not need to animate it. I do not find a track to create this effect so I ask the question as to whether it is really possible. Thank you
Hi All I am experimenting with displacement mapping and have had a degree of success, but have encountered some issues that the community might be able to help with. Looking at the <shape>.applyDisplacementMap() function it can be seen that it does not support the ability to control how a displacement map texture is applied to the shape. Therefore, if you create a complex 3D model that requires greater control over how the displacement map is applied (i.e. tiled) to it then unfortunately you will encounter problems. I started out by creating a 3D model and then applying texture, bump and displacement map to it. I used the standard applyDisplacementMap() function which produced the following result: http://www.babylonjs-playground.com/#1PLEVL#1 The above example illustrates how the displacement map is being stretched across the entire geometry of the shape – which is not what I want. I want the ability to control how the displacement map is tiled across the geometry of the shape – similar to that of uScale & vScale for bumpTexture: e.g. mat2.bumpTexture.uScale = 5; mat2.bumpTexture.vScale = 9; I looked at the underlying functionality of applyDisplacementMapFromBuffer() in an attempt to try and extend it to have greater control over the tiling – but TBH I am not understanding how some of the key lines of code are working. So, I decided to take another approach. Before I explain my solution “I KNOW” this is not a scalable solution and not efficient on many levels. However, it enabled me to apply a tiled displacement map to small geometry shapes – this allowed me to envisage what shapes will look like when displacement maps are applied correctly. NOTE: the main issue with the approach I took is memory allocation – i.e. you will hit out of memory if you try and apply my method to a large 3D model mesh. The interim solution I created is to create a displacement map texture (image) that is sized and tiled appropriately such that I can apply it to the 3D model geometry using the applyDisplacementMapFromBuffer() function. The solution I created is below: http://www.babylonjs-playground.com/#1PLEVL Explanation: line 94: obtains the displacement map image (not tiled) line 97: creates a tiled displacement map image (mirroring that of the bumpTexture uScale/vScale) line 99: apply tiled displacement map to 3D mesh line 101~102: free resources (because line 97 is very resource intensive!) The above solution generates nice results as per the PG example – but this is not something that is scalable (the right approach is ofcourse to tile a smaller texture across the geometry of the 3D mesh). I am hoping (praying) that one of the Babylon JS arch master developers can tweak the applyDisplacementMap() function such that the uScale/vScale tiling can be controlled. Perhaps someone can point me in the right direction so I can do this myself? Anyway, I hope this example is of some use to the community.