Applying SSR to node material

Hello Team,
I’m Trying to implement ssr for the scenes in babylon it is working fine with the standard and pbr materials but for the node materials im unable get the reflections
ps find the node material link

Ps: point me in right direction so that i can implement it with node material…

It’s not yet supported, we have created an issue for it:

It’s not specific to SSR, it’s a global limitation due to the use of the prepass renderer.

3 Likes

Hi!

I can see in 7.0 it was fixed:

But SSR still does not work with node materials in both ways (they do not reflect, and other materials do not see them)

Maybe I need to properly setup something to make it work?

It does work for me:

In this PG, SSAO and SSR are enabled, and a node material is applied to both the sphere and the ground.

Yes, it works, but when I changed the sphere material to the standard and ground to the water material from the node material examples - it stoped working:

You have to use the PrePassOutput block in your node material, and connect the right values to the “viewDepth”, “viewNormal” and “reflectivity” inputs for SSR to work with your node material. See how it is done in the node material used for the plane in my PG above:

Here’s what it looks like when the ground material is updated:

Yeah, that was what I have missed/did not knew, thank you!

Hmm, when I transferred code into my build, I got a strange result for ground done using node material. Projection in ssr always faces normals straight up from the point on the ground. As a result, ssr reflections are incorrect, they see only bottom part of objects and reflections located strictly under the object itself no matter where is the camera. With standard materials, all works properly, you can check screenshots

I assume that it is because i use es6 modules and probably did not import something crucual, i imported this:

import '@babylonjs/core/Materials/Node/Blocks';
import '@babylonjs/core/Materials/Node/Blocks/Fragment';
import '@babylonjs/core/Materials/Node/Blocks/Vertex';
import '@babylonjs/core/Materials/Node/Blocks/Input';
import '@babylonjs/core/Materials/Node/nodeMaterial';

Can you please help me to understand what i missed?


I think you would get an error if an import was missing. Are you able to setup a live link somewhere so that we can have a look?

I saw that before, when I import classes sometimes it is not enough. Something start to work incorrectly without errors because there are some side-effects inside the modules

You can use top-right panel to disable some post-process but it does not affect this problem

Also there are at the bottom of the menu button that activates babylon inspector window

source code is done from es6 modules and combined to single file but not minified for debugging

There are two planes below ship with standard and node material


Here is example link: Boat Viewer - Professional Boats Visualisations