Displacement map flipped vertically when load by default?

Hey folks,

Found when I apply a displacement texture on to mesh, the displacement map have to be flipped vertically before loading it into scene. Otherwise if I load the displacement map directly into the scene, it can’t line up with other channels on the shader:

Is there a reason or explanation for this set up? Also is there an easy fix for it?

Many thanks!

It’s probably because by default the textures are loaded with invertY=true (4th parameter of the Texture constructor - it’s because textures are Y-inverted in WebGL by default, so invertY=true put them in the “right” way). If you set invertY=false when creating the texture, you don’t need to flip the displacement map.

1 Like

Gotcha! Thanks for the response! @Evgeni_Popov

Is there way to use BABYLON.Texture class to load the displacement texture? In that case, I can only apply invertY=true to displacement texture. Want to keep all texture invertY to true if it is possible.

No, it seems applyDisplacementMap accepts only a string url, not an instance of a texture.

Note that you can make it work without changing the invertY value of the diffuse texture by passing the right value for uvOffset and uvScale:

1 Like


Aha! gotcha! This workaround makes sense! Love it!

Is there a plan to make displacement texture loadable using BABYLON.Texture?. I know this texture is applying to meshes instead of materials. Just wondering if there is a plan to unify all texture loadings no matter its for materials or for mesh.

No, it will stay a url only because the current code does not deal with a texture internally, but with a HTML image object instead. It would be too slow to use a texture because we would have to readPixels from it.


@Evgeni_Popov I see! Thank you very much again! The solutions you mentioned are great enough. :smile: