Displacement Map Tiling

Recommended Posts

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:

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:

        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:

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.


Share this post

Link to post
Share on other sites

Hi Deltakosh


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?

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.