Weekly Video: PBR Nodes in the Node Material Editor!

Hey Gang,

@PatrickRyan kicks off a new video series this week, how to use the brand new PBR nodes in the node material editor. We know this was a BIG ask from the community, and are stoked that it’s now available in Babylon.js 4.2!


Part 2 is here folks! @PatrickRyan is back with a deeper look at the new PBR node in the Node Material Editor. This time he shows us how to combine PBR lighting with punctual lights for some seriously killer materials!

Starting playground for this video:

Final playground from this video:


Hey I’m excited about this series, but my interest has gone to the glass/liquid part and not what’s in part 2. Is there a nme playground of the bottle lying around I could poke around in?

Pinging the Bottle Master @PatrickRyan!

1 Like

@BoldBigflank, I am building through several different material types in the series, ending with transmission/refraction as it’s the most complex of the concepts. It also requires more nodes, so I am trying to break it down step by step, adding complexity with each one. But for now, you can dig through all the code and node materials in the bottle playground to get a head start.


Part 3 is here! @PatrickRyan shows off how to use clear coat and emissive textures in this one!


Time for Part 4! @PatrickRyan is back to show us how to hook up sub-surface translucency and refraction to create some awesome acrylic looking materials!

Follow along with this playground:

Final playground from this video:

1 Like

@PirateJC Ahh … another video series to watch. The images I see of @PatrickRyan and a 20 sided die for each video take me back to my old days of playing ADD.

Stay Safe All, gryff :slight_smile:

1 Like

I would be lying if I said I didn’t have literal pounds of dice in my house. But the reason I chose to use them for the demo was that they are more interesting than a sphere, offer me some interesting techniques to show for texture packing and masking, and have both flats and rounds that can really show off environment lighting. And it was a subject that made sense to have sheen, clear coat, emission, and subsurface translucency/refraction as options in a relatively simple mesh.

Great video!

This is quite badass:

dice.d20_right.onBetweenPassObservable.add(() => {
    diceParameters.rightFrontFace.value = 1.0;
    let subMesh = dice.d20_right.subMeshes[0];            
    diceMats.d20_right.bindForSubMesh(dice.d20_right.getWorldMatrix(), dice.d20_right, subMesh);


Using the FrontFace block instead of the rightFrontFace uniform in the node material could help, but you would need to remove separateCullingPass = true, leading to wrong display as you showed in the video. Enabling facet sorting could fix the problem, but for some reasons setting the vertex buffers to “updatable” (by doing something like dice.d20_right.setVerticesData("position", dice.d20_right.getVerticesData("position"), true) - sorting facet data needs that) does not work for your meshes…

1 Like

I had started with the FrontFace block in NME, but quickly hit the issue you mentioned with needing a separate culling pass due to the alpha transparency. While brainstorming how to do it with @Deltakosh, we landed on a new observable to tell us when we are between render passes being a good starting point to be able to update the shader between passes. And it fit with the other observables we have to let you know before and after we render.

Yes, but you have to call bindForSubMesh by hand as you are deeply burried inside the rendering code, and the code in this observable is not really WebGPU-friendly code :wink:

So I tried to think of some other solutions, but did not find anything really appealing…

I did change the Observable to provide the submesh instead of the mesh