# Parallax not working. I know I am wrong

**URL:** <https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397>\
**Category:** Questions\
**Created:** [November 4, 2022, 10:19am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397 "2022-11-04T10:19:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Julien1](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@Julien1](https://forum.babylonjs.com/u/Julien1)\
**Post date:** [November 4, 2022, 10:19am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/1 "2022-11-04T10:19:35Z")

</div>

Hi,

I 've got an issue with parallax.  
[https://playground.babylonjs.com/#10I31V#419](https://playground.babylonjs.com/#10I31V#419)

Modifying the scale ratio won’t affect the outcome.  
Note: I have my diffuse, normal and height-map in png and separated.

Trying different solution, even cranking up the scale bias won’t do anything.

What did I miss?

Thanks

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [November 4, 2022, 10:46am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/2 "2022-11-04T10:46:23Z")

</div>

Hi,  
Well, it works. Sort of 😉  
Looks to me like your normal texture is ‘abnormal’ 😁  
Jokes apart I believe it really works but the values are incorrect to make a proper height for parallax occlusion.

> **[Babylon.js Playground](https://playground.babylonjs.com/#10I31V%23420)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

May be a quick a look at this topic:

> [@DynamicTexture and parallax occlusion](https://forum.babylonjs.com/t/dynamictexture-and-parallax-occlusion/34942):
>
> Is there a playground example showing a DynamicTexture being used w/ parallax occlusion? I’m trying to do some procgen stuff, but am struggling.

> [@DynamicTexture and parallax occlusion](https://forum.babylonjs.com/t/dynamictexture-and-parallax-occlusion/34942/15):
>
> Normals are in `rgb` and heights in `a`.
> 
> 0x809fff=rgb(128,159, 255)=(0.502, 0.623, 1)=`nt` after we divide by 255. To get the true normal, the shader code is doing `n=nt*2 - 1` and normalize the result.
> 
> For the alpha channel, 0xff is the highest height and 0x00 the lowest.

---

<div class="post-metadata">

**Author:** ![Julien1](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@Julien1](https://forum.babylonjs.com/u/Julien1)\
**Post date:** [November 4, 2022, 10:52am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/3 "2022-11-04T10:52:58Z")

</div>

@mawa : Thanks!  
Well, it means that my normals textures are wrong… That’s strange…  
How did you correct it? 🤜 🤛

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [November 4, 2022, 10:57am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/4 "2022-11-04T10:57:22Z")

</div>

They are not really wrong, in essence. They would work fine for a bump. But parallax occlusion uses the alpha for the height. The lowest could be either transparent or white (or black and then inverted). Your normal does not have these differences to make a proper height.  
Check out these two example textures and compare them to your version:  
[![Imgur](https://i.imgur.com/zVGaZNi.png "imgur.com") ](https://imgur.com/zVGaZNi)  
[![](https://i.imgur.com/GtIUsWW.png) ](https://i.imgur.com/GtIUsWW.png)  
You’ll see what I mean.

Edit: my apologies, the lowest needs to be transparent I believe. Not sure though. May be it converts it to alpha but then may be not. Best is to have it transparent; understand use the alpha for the height.

---

<div class="post-metadata">

**Author:** ![Julien1](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@Julien1](https://forum.babylonjs.com/u/Julien1)\
**Post date:** [November 4, 2022, 11:12am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/5 "2022-11-04T11:12:03Z")

</div>

Hmmm…

I will need to create a script to append the heighmap info from the heightmap to the normal alpha channel then… (correct me if I am wrong)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 4, 2022, 11:17am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/6 "2022-11-04T11:17:49Z")

</div>

> [@Julien1](#):
>
> I will need to create a script to append the heighmap info from the heightmap to the normal alpha channel then… (correct me if I am wrong)

Indeed. Or you can use the NME to create a procedural texture that will generate the texture for you:

> **[Babylon.js Playground](https://playground.babylonjs.com/#10I31V%23423)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Note that I need to do “1-height” for the height channel, else the effect was reversed from what it should be.

---

<div class="post-metadata">

**Author:** ![Julien1](https://avatars.discourse-cdn.com/v4/letter/j/71c47a/32.png) [@Julien1](https://forum.babylonjs.com/u/Julien1)\
**Post date:** [November 4, 2022, 11:51am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/7 "2022-11-04T11:51:35Z")

</div>

Thanks Evgeni,  
I have so many textures that a script will be much faster 🙂  
it’s a 5 min work anyway 👍 👍

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [November 4, 2022, 11:59am UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/8 "2022-11-04T11:59:10Z")

</div>

Lol. Devs always think it’s better to make it the fancy way 😁 I’m sure the script will do fine.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [November 4, 2022, 12:40pm UTC](https://forum.babylonjs.com/t/parallax-not-working-i-know-i-am-wrong/35397/9 "2022-11-04T12:40:42Z")

</div>

For me it was faster to make a node material because I have never worked out how to add an alpha channel (coming from an external pic) to a picture in Gimp!
