Hi there, I haven’t done much of anything with shaders and I wanted to use the Node Material Editor.
What I’d like to do is kind of simple, I’m just not familiar with the editor or making shaders. So first,
Are there any recommended tutorials/videos on using the NME?
My idea is to make some “Islands” meshes, and I’d like the colors to be based on the world height of the pixel. So, the bottom section would be a sandy color, then a grassy color up higher, then a “tree” color, and then a rocky color. What are the steps to making that sort of shader? What would be some important inputs/outputs for me to focus on?
This one is great! Just what I’m looking for. I’m poking around and trying to apply the material to a standard Cube rather than an imported glb, but it just seems to turn the top face black.
Hey @BoldBigflank!, this is because this particular node material is masking it’s affect based on the vertex color:
This is because I only wanted to affect the very top portion of that particular mesh in this example.
Let’s go back to the MOST basic possible example and create it from scratch. Here’s a cube with a node material applied, where the fragment shader is influenced by a gradient based on height. I think this is the most simple example of what you’re trying to acheive.
The first thing we do is take the mesh’s positional data and split that apart so that I can have access to the y value.
after this we need to make sure that we reassemble the values and pass them back to the vertex shader.
Now we can ignore the vertex shader and focus on the bottom section of the graph:
We take the y value out of the vertex splitter and pass that to a remap node. The reason we do this is because in the playground above the size of the box that I create is 1 unit long…so if it creates it at origin, the y dimensions go from -0.5 to 0.5 for a total unit length of 1. So what this remap node does, is it essentially takes the y value and adds 0.5 to every number. (which is another perfectly valid way to do it btw)…so as we come out of the remap node, all of the y values are between 0 and 1, which is what the gradient node expects. Then what comes out of the gradient node is a color value associated with where you’re at on a scale from 0 to 1. Then we pipe that into the fragment output and we’re done!
So that’s it! Pretty straight forward! I hope that’s helpful…probably a little easier than trying to dissect that bigger Node graph from that video.
Thank you @PirateJC! This is definitely much simpler and easier to understand. I’ll enjoy tinkering with that and making colored islands.
I would like to also do he NoiseToHeight thing with a PerlinNoiseProceduralTexture or NoiseProceduralTexture, do you know any resources to teach me that?
Oh that’s really cool. I’m doing this as a part of the js13kgames.com game jam, so I’m just getting everything as small as possible. Your videos have been the most helpful for sure. Hopefully I can get through a bunch of this this weekend.
Hey I took some time to get the hang of this NME stuff, and now I’ve got a bit better of a grasp of what’s going on. I know it’s just a mix of what’s been done already but here’s how it looks now.
I can’t save it as an url bc I had a texture in it to test and I guess it’s still in the history, it makes the size too large. Seems to work for me. Next step I’m gonna use some Babylon built in noise function to make some islands.
If you use a height map to display your mesh, you will have to create custom code to detect collisions, as the real geometry does not really exist as triangles.
Unfortunately I need to be able to stand on the islands, so a shader is probably not what I’m looking for (at least modifying the vertex output). It’s nice to know what’s going on with this simple example though.
