Procedural Node Material Shaders: 3 Tips For Getting Started
--
Ok let’s get something out of the way, right out of the gate. This post is not for the faint of heart, we’re going to dive into something fairly mind-bending, but don’t give up…stay with me and I promise you’ll have some fun!
When Babylon.js introduced the Node Material Editor in version 4.1, it was a complete game changer for me. It’s like someone handed me a car when I had been crawling for my entire life.
It was a gift, a tool that allowed me to embark on an absolutely crazy journey, from overcoming some pretty crippling self-doubt, to attempting to recreate some of the earth’s most beautiful natural patterns.
You see, I like math. I like it a lot, but I’m also more ignorant on the subject than I’d care to admit.
Combine that ignorance with a relentless stubbornness for learning, and you end up with a strong drive to overcome what you don’t know. The Node Material Editor has empowered me to drive faster and further than I ever thought possible in the area of using math to drive visuals.
For anyone who isn’t familiar with the Node Material Editor in Babylon.js, it is an incredibly powerful node-based tool that allows you to visually assemble programs that run specifically on the GPU, or more commonly known as “shaders.” You can drag in a variety of different nodes, hook them together and turn something like this:
into something like this:
Most people use the Node Material by creating shaders by hand, dragging and connecting nodes inside of the editor. Many, however, don’t know that there is an entirely different way that you can do it as well. One that shifts into a whole new gear of power!
