Displacement Map Tiling

[Rolento]

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.

 

[GameMonetize]

Tadam!

Check line 94: http://www.babylonjs-playground.com/#1PLEVL#2

I added two new parameters: uvOffset and uvScale(https://github.com/BabylonJS/Babylon.js/commit/0a69de96d7adb9d632792065164ed674770782e6#diff-275ef6355aab4f0ea954727a7a424f72)

 

[Rolento]

Hi Deltakosh

Awesome!!!!!

But... I have a problem (I think) - when I click on the PG link for some reason the rendered scene does not seem to have the displacement map applied correctly (i.e. it looks stretched as per the original PG I posted). 

Would I be correct in assuming that the PG is not referencing the latest source code as contained within the GIT repo?

[GameMonetize]

Just clear your cache

[Rolento]

DOH!  Yep that fixed it!

Deltakosh you are....  a super star!  Thanks for this enhancement (im sure others will love this too).