@Deltakosh is back again to show you how to take any shader you’ve created in the Node Material Editor, and use it within your Babylon scene!
Can you tell we’re getting excited about the Node Material!??? LOL
5 Likes
Wow! What a workflow… can’t wait to deep-dive!
1 Like
@Deltakosh or @PirateJC, I think I followed that video exactly but I can’t get it to work with NME post processing material:
https://playground.babylonjs.com/#PB9SAE#1
What I am doing wrong?
Hey @jonarnold
This is a FANTASTIC question. It’s not your fault, it’s our fault. Since this video was created we added several new modes to the node material editor. As you’ve discovered, one of those new modes is creating a post process using the node material editor.
Here’s the problem…when you create a node material through code, the system assumes that you’re creating a node material in MATERIAL mode as opposed to the POST PROCESS mode that you’re using here. So the problem is that you have to tell the node material what type of mode you’d like it to be, after the node material has been built, but BEFORE you try to create a post process from it.
This video was made before these new modes existed, so it’s missing this new important piece of information.
So the magic you need is this simple:
nodeMaterial.mode = 1;
I’ve added that into line 131 in the playground here:
https://playground.babylonjs.com/#PB9SAE#2
It’s hard to tell that the post process is working by visual inspection, but if you look in the inspector you can clearly see that it gets created under the post processes section.
Here’s a cheat sheet for the different modes:
0 = Material
1 = Post Process
2 = Particle
3 = Procedural Texture
Sorry that the video doesn’t touch on this new feature…an unfortunate side effect of the technology advancing past the videos. LOL
Thanks again for flagging this, hopefully this thread helps others who might get stuck on this same subject in the future!
1 Like
Thanks @PirateJC for the fast and detailed response. Makes perfect sense. Weirdly though, I can’t get that #2 PG to load. Tried it in multiple browsers too, and other PGs continue to load fine. Maybe some temp voodoo going on – will try again later, but just fyi. Thanks!
UPDATE: I had my PG set to v5.0 – I set it back to v4.2 and the PG renders now, but I’m still not seeing any post processing in the inspector.
UPDATE 2: Just noticed the NME is v5 alpha – does this mean I have to use BJS v5.0 alpha? When I keep the PG at v5 I DO see the post process in the inspector, but the screen doesn’t render.
Ok yeah something strange seems to be happening here.
I’ve created a VERY simple black and white post process:
The Node Material Post Process can be found here:
https://nme.babylonjs.com/#C24DEF
When you parse this in the playground as a Post Process it works just fine:
https://playground.babylonjs.com/#PB9SAE#3
However when you export the post process and build it manually through code it doesn’t seem to work:
https://playground.babylonjs.com/#PB9SAE#4
Definitely beyond my expertise.
Calling in @Evgeni_Popov for help on this one.
OK figured it out!
Looks like we’ve got a small bug in the “GenerateCode” button that doesn’t fully make a connection that’s needed.
In the case of this black and white treatment, it was line 85 that was causing the issue.
positiond.output.connectTo(PositionD.xy);
needs to be:
positiond.output.connectTo(PositionD.xyIn);
The PositionD input was named incorrectly and so the screen position vector 2 was never being passed through to the Position3D node.
@jonarnold it looks like the same bug bit you as well!
here’s your playground all fixed:
https://playground.babylonjs.com/#PB9SAE#6
I’ve filed an official issue for the output bug in the “Generate Code” button in NME.
1 Like
It’s the same problem than described here:
Pinging @Deltakosh
Do you want me to fix it?
I’m on it
1 Like
Awesome thx everyone! @PirateJC thanks for the updated PG – I did have to set the PG version to 5.0.0 alpha12 for it to work though. I’m pretty excited about NME (specifically doing more custom post processing stuff) so does this mean I need to migrate my project to v5 alpha?
That’s odd. Since we introduced the new Modes in version 4.2 it seems like they should work in any version past that.
Can you post the error your seeing in other versions?
Sure thing. You’ll notice the post processing shader isn’t working (no red overlay), but I’m seeing an error in the console; if I comment out the mode line, that error goes away (of course, the shader is still broken for reasons you explained earlier)
Does this PG work for you in 4.2 and show the red overlay?
Edit: In case this matters, when I try to set that mode property in my local TypeScript, it complains that that is read only. And looking at the docs, I only see a getter for that property. Did this particular API change in v5?
There was no setter for mode in 4.2. You should use _mode instead.
2 Likes
Thanks @Evgeni_Popov! @PirateJC if I change mode to _mode in that PG, I don’t get console errors, and best of all the post process shader works! 
1 Like
Thanks @Evgeni_Popov! Yes we just added the setter this week…this totally makes sense!
Is the new setter just in v5 then? And when do updates and fixes become available via yarn or npm? (or is there a better way I should be setting up and maintaining my local dev environment to get latest updates?)
Yes. Already on npm (5.0-alpha11)
1 Like