NME Beginner - How to make an island color Shader

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 doesn’t actually answer your question but have a look here: Babylon Engine for HTML5
Source available here: Website/build/Scenes/WorldMonger at master · BabylonJS/Website · GitHub
BTW: I’m highly interested in a NME version of this shader as well

I think this video from @PirateJC will help you:

Also, you can find a lot of videos related to the NME on the YouTube channel:
https://www.youtube.com/c/BabylonJSEngine/videos

2 Likes

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.

The original PG is here:
https://playground.babylonjs.com/#ZS9SYI
How could I use that generated nodeMaterial in line 33 on a cube?

just do cube.material = nodeMaterial;

https://playground.babylonjs.com/#ZS9SYI#6

that’s what I’m trying, it doesn’t have the same effect (Note I tried a CreateGround too without changing all the variables)

This is a question for @PirateJC who is the author of the material :slight_smile:

Here’s a more straightforward example. Created a cube, applied the material to the same thing, ended up with a black box.

https://playground.babylonjs.com/#ZS9SYI#7

1 Like

Hey @BoldBigflank!, this is because this particular node material is masking it’s affect based on the vertex color:

image

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.

https://playground.babylonjs.com/#AST2G5

Let’s walk through the node material that’s applied to this cube:

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.
image

after this we need to make sure that we reassemble the values and pass them back to the vertex shader.
image

Now we can ignore the vertex shader and focus on the bottom section of the graph:
image

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.

Cheers!

4 Likes

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?

1 Like

Oh yes I LOVE this stuff.

You might be interested in the current video series that we’re currently in the middle of releasing:

We’re not QUITE to the point of the height stuff just yet, but we’ll be releasing videos on this in the coming weeks.

For now the video that @Evgeni_Popov pointed you to, goes through the concepts pretty well.

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.

1 Like

We LOVE js13kgames! Our own @sebavan is a judge this year! Can’t wait to see what you come up with!

2 Likes

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.

I have one question, how do you make the containers that you see in this one?
Babylon.js Node Material Editor

Use shift + left mouse click and drag.

1 Like

Cool, it’s coming along

How would I update the collision to match the new mesh layout?

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.

2 Likes

Here’s an update, I was able to make my islands rounded by adding a “distance from the center” block.
https://nme.babylonjs.com/#L8Y24Q

The outcome is pretty nice looking

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.

3 Likes