How can I overlay a 2D image to simulate *color* noise/grain?

I need to overlay a custom 2D “noise” texture over my 3D scene and be able to set the alpha AND the blend mode. Layers gives me blend modes, but no alpha control. A GUI image gives me alpha control but no blend modes.

For context, I’m just trying to get color noise/grain in my 3D scene. I would otherwise just use the grain postprocessing effect, but in the DefaultRenderingPipeline it’s grayscale and I need colored noise. It looks like I could supply my own noise texture if I was using the LensRenderingPipeline, but I need to use the DefaultRenderingPipeline because I also need Exposure, Contrast, and Tone Mapping.

Thanks for anyone that has any ideas for this! :slight_smile:

Seems that you may use Node material for that.
Here is the example with animated noise - https://nme.babylonjs.com/#JNQ200#30
You can make your node material according your needs and have full control over it.

Thanks @labris. I’ve not ventured into Node materials yet, but that looks really amazing. If I went this route, would I apply my custom material to a plane or something that sits between the camera and my scene? For clarity, I’m trying achieve something like this:

Something like that - Babylon.js Playground
This plane could be bigger to cover all view.
You need to tune your Node material, of course.

Actually, I’d steer you towards using one of the brand new Node Material MODES in the Node Material Editor.

@jonarnold since you want this to cover the entire scene, we have a Post Process Mode in the Node Material Editor that would be perfect for you.

A post process is an effect that’s applied on top of the rendering of the entire scene.

Our NME master @Deltakosh made a great video about this very subject:

I tried this out myself for a demo for our 4.2 release and it was REALLY handy and easy to make your own effect that covered the entire scene. Feel free to use this as reference on how to call the post process that you create in your code.

https://playground.babylonjs.com/#3K69VT#1

And as @labris points out…the Node Material Editor is perfect for this…we even have two noise nodes already available for people to use!

Hope this helps!!!

2 Likes

Also have a look at this beautiful example from @Cedric - https://playground.babylonjs.com/#AHYXMJ#3

2 Likes

omg thank you so much @PirateJC, that is perfect. You too @labris for awakening me to the NME in general. Can’t wait to dive into this!

1 Like

One last thing…there’s a TON of video tutorials on our YouTube channel about NME and how to use it. Depending on how familiar you are with shaders and graph systems, it can be a little intimidating to jump into at first, but it’s one my the BEST tools we’ve got!

And shameless plug, if you haven’t already done so…consider subscribing because we add content to this channel almost weekly!

:slight_smile:

2 Likes

Ha yeah I was just on the BJS YouTube channel looking at all the NME vids. I’ve done some shader building w graph systems in Unity, but I don’t feel like I actually know what I’m doing yet – I may need to hunt down some more basic tutorials on that (Lmk if you have any you’d recommend for beginners). Thanks for all this info!

Well I’m obviously extremely bias on this one, but I generally nudge people towards this series:

Mainly because it starts from the VERY beginning and goes through step by step on creating a pretty complicated shader.

Some of the material here is a little outdated…it doesn’t take advantage of “custom frames” for example, but it’s still a pretty solid place to start if you want a full step by step tutorial.

And as always…the forum/community is here to help you learn as well!

1 Like

Well, I know what I’m doing this weekend :slight_smile: Thanks so much @PirateJC !

2 Likes

@PirateJC I went through the mystery demo series over the weekend and…wow! It was quite the awakening for me on the power of shaders, which is something I had been resisting because it felt hopelessly confusing. I still have a lot to learn – going to read through the whole shader section in the docs – but with NME it feels within reach to learn and harness the power of shaders. Thank you, and thank you @Deltakosh for building such a great tool!!

3 Likes

@jonarnold - So incredibly happy to hear that it’s helpful. NME is a complete game changer for me. Shaders intimidated me like crazy until this tool came online. Funny enough I actually wrote a blog post about that very subject! LOL

One thing I’ve learned is that everything is learnable with the proper time, drive to learn, and confidence. :slight_smile:

Once you start diving into the world of shaders, it’s like your eyes are opened to an entirely new world that you don’t ever want to leave. LOL

1 Like