Bug in parallax mapping (and possible fix)

Help & Support
1

Hi,

the parallax mapping looks quite wrong. I investigated the code (i mean trial and error :D)
and found out with a small fix, it looks much better

uniform float material_heightMapFactor;

void getParallax() {
    float parallaxScale = material_heightMapFactor;
    float height = texture2DBias($SAMPLER, $UV, textureBias).$CH;
    height = height * parallaxScale - parallaxScale*0.5;
    vec3 viewDirT = dViewDirW * dTBN;

    // the fix
    viewDirT.y *= -1.0;

    viewDirT.z += 0.42;
    dUvOffset = height * (viewDirT.xy / viewDirT.z);
}

I’m not hundred percent sure, if this is the right fix.
There could also be an issue with tangent calculation.

image
image1778×764 100 KB

Left broken, right Fixed

image
image1185×312 51.1 KB

There is also a small demo, in movement its much more clear.

https://playcanvas.com/editor/scene/548876
fix-parallax.js

I can prepare a fix PR on github, if you agree that it helps

2

@mvaligursky @Gustav_Sterbrant , what do you think?

3

Hi @HellG - I’m not convinced I see it working correctly in your example either.
I’ve created a ticket: Confirm our simple parallax mapping functions as expected · Issue #5209 · playcanvas/engine · GitHub

4

hi, i updated the test to a heightmap from a good old tutorial
and i could reduce the height multiplier to be a more real world example

image
image1920×770 76.3 KB

thanks for reporting this on github :+1:

1 Like