Is there the way to use Parallax Mapping for node material?

Questions
,
21

@Evgeni_Popov was braver than me :wink:

1 Like
22

Hmm, when i try to load this page (Babylon.js Node Material Editor) i got an a error:

image
image1267×209 38.4 KB

And i cant find a parallax block on NME page.Sorry if i dont understand smth. :sweat_smile:

23

*parallax property in perturb normal block

24

The changes are not deployed to the Playground yet.

And i cant find a parallax block on NME page.Sorry if i dont understand smth. :sweat_smile:

It’s not a new block, it’s the existing PerturbNormal block that will have some new inputs/outputs when the changes are deployed to the Playground:
image

25

Got that, Thanks!

26

@Evgeni_Popov You are a hero! Thanks, will test this ASAP!

27

Note that the Playground is not updated yet (probably tomorrow).

28

Playground is now updated!

29

Really cool to see this implemented! Is there an example on how to use the parallax offset?
I tried to add it to the UV before plugging it into the albedo texture. But the shader doesn’t compile anymore.

Here is a playground: https://playground.babylonjs.com/#NSG82E#3
There should be another cube that looks like the first. But it isn’t rendered because of the shader not compiling. If I connect the UV directly to the albedo texture it works. But of course no offset.

This is the error:

10:52:28: Shader compilation error: VERTEX SHADER ERROR: 0:195: ‘dFdx’ : no matching overloaded function found ERROR: 0:195: ‘=’ : dimension mismatch ERROR: 0:195: ‘=’ : cannot convert from ‘const mediump float’ to ‘highp 3-component vector of float’ ERROR: 0:196: ‘dFdy’ : no matching overloaded function found ERROR: 0:196: ‘=’ : dimension mismatch ERROR: 0:196: ‘=’ : cannot convert from ‘const mediump float’ to ‘highp 3-component vector of float’ ERROR: 0:197: ‘dFdx’ : no matching overloaded function found ERROR: 0:197: ‘=’ : dimension mismatch ERROR: 0:197: ‘=’ : cannot convert from ‘const mediump float’ to ‘highp 2-component vector of float’ ERROR: 0:198: ‘dFdy’ : no matching overloaded function found ERROR: 0:198: ‘=’ : dimension mismatch ERROR: 0:198: ‘=’ : cannot convert from ‘const mediump float’ to ‘highp 2-component vector of float’ ERROR: 0:269: ‘gl_FrontFacing’ : undeclared identifier ERROR: 0:269: ‘’ : boolean expression expected

Thanks in advance!

30

You need to help the system a bit so that the parallax code is generated in the fragment shader and not in the vertex shader by setting the target of the Add block to Fragment:

https://playground.babylonjs.com/#NSG82E#4

1 Like
31

Perfect! Thank you!

32

I think I need some more help here. I find myself at the point again where I need to blend more than one normal. But as soon as I do all the parallax effect is gone. Did I miss something there or do the necessary texture lookups not work with blended normals?
Same happens when I try to calculate the parallax height node with an add node or something similar.

Here is an example where I tried to blend the normal with the same one scaled double. The normal itself blends but the parallax is gone.
https://playground.babylonjs.com/#NSG82E#5

33

It can’t work because the PerturbNormal block is expecting that the normalMapColor input is coming from a texture block. That’s because it needs to sample the texture multiple times to achieve the parallax effect.

2 Likes
34

@Evgeni_Popov So what could be a possible solution, either short-term or long-term? You’ve mentioned in another thread that there should be only one PerturbNormal block and a BlendNormal block should be used for blending. In the current state of affairs this does not work with parallax occlusion (which is fine, since the other thread predates PO).

In the 4.1 times we’ve monkey-patched the shader locally to make this work so in theory this should be possible somehow, but I can’t say what would be a good and proper solution instead of a tacked-on hack.

35

I can’t think of another way to do it than by writing a custom shader and doing it by hand. The current code for the parallax mapping is using the texture() function in the shader to lookup different values in the normal map, but in your case you would need to change that to perform the normal blending computation instead.

If your normals are static, it would be far easier for you to simply generate an already blended normal map from two (or more) other normal maps as a pre-process.

1 Like
36

I still found some other quirks that may need to be taken a look at.
Scaling and rotation of the textures doesn’t work at all if parallax occlusion is active.
If only parallax is used (everything connected but the switch for parallax occlusion off) then the depth part seems to scale and rotate but the normal does not. Also the albedo texture cannot be scaled or rotated anymore.

Here is a playground to play around with. Both cubes use the same albedo and bump textures
https://playground.babylonjs.com/#NSG82E#7

37

Given how the parallax thing has been implemented in the nme, you can’t rely on the those properties of the texture, you need to apply the transformations directly on the uvs:

https://playground.babylonjs.com/#NSG82E#8

2 Likes