Random Tile Position on NME

Yeah we’re getting into some pretty exciting but advanced territory. TOTALLY learnable, but a bit tricky to wrap your head around at first.

Check This Out: Babylon.js Node Material Editor

What I’ve done here is turned NME into Procedural Texture mode instead of Material mode. It’s the same tool, but instead of generating a material, it uses screen space to allow you to create a texture. That texture can be used just like any other texture inside of Babylon. It can EVEN be passed back into another Node Material. Inception NME!!!

Confused yet?

Ok so I took the frame from the first NME link in this thread, and modified it slightly to work with screen space instead of UV space. UV’s go from 0-1 where Screen space goes from -1 to 1…at least how we handle it in NME. SO I had to add a remap node for x and y to map -1 to 1 to become 0 to 1.

After that, notice that I set this material up to have 4 total chunks of space. 2 wide, but 2 high.

For each one, there is a branch of this tree that has a copy of the pixel frame. This pixel frame has unique coordinates for each pixel of the texture grid. They’re already set in this new link.

So essentially what we have is a texture that’s be created on the GPU. That texture is 4 chunks of space…each one with a different color.

The part where this gets more complicated is if you want a much larger texture. You don’t want to create that by hand. So you will want to create each branch (since they’re identical) with a loop in your code. Essentially you’ll have n number of branches for n chunks of space. With a simple loop in your code, you’ll create these branches. Note that you can also hook up to the colors for each chunk of space. So in your code you can randomly assign different color values if you like.

Lastly you can USE that procedural texture just like any other texture as referenced here in this doc:

Hope this sheds some more light on it!

1 Like