Hi,
I am trying to figure how implement the dynamic of this video, Endless materials in Unreal Engine 4 (Part #1) - YouTube, which I already used on UE4, but now in NME.
I picked some code already done by some experts here and tryed to evolve it, Babylon.js Node Material Editor, in fact I tryed to use an approach of masking some changed textures to generate an new one, but without sucess.
So, if anybody can help I apreciate!
pinging our NME expert @PirateJC
Sorry for the delayed response…I’ve actually been wrapping my head around the best way to showcase how to do this.
The main difference between what you’re seeing in Unreal, vs NME is the tiling node. That tiling node allows you to essentially break up a larger space into smaller chunks of space. Since we don’t have that node, we have to get pretty creative in NME to achieve the same type of thing.
Check out this Node Material: Babylon.js Node Material Editor
The light blue frame that you see is an operation I pulled together to do exactly that. It takes UV space and breaks it apart into smaller chunks.
There are two main inputs to consider:
Where this gets a bit more advanced, is when you consider that you’ll need one of these frames for EACH chunk of space. In the default case I have gridsize set to 4…which creates a 4x4 grid of smaller spaces…that’s a total of 16. So in this case you’ll want 16 individual small chunks of space, each needing their own frame…so 16 total frames.
As you can imagine, this can get pretty wild pretty fast. Can you imagine if your gridsize was set to 1024? Yikes! You definitely wouldn’t want to create that many frames by hand.
So there are two tricks to consider here…Custom Frames (to reuse a subgraph of frames), and creating node materials in code, so you can loop through the creation of node trees the number of times you need.
Luckily, we actually have 2 videos that talk in depth about both of these topics:
Custom Frames: https://youtu.be/_bxAQM0pnzs
Node Materials Through Code: https://youtu.be/GrmVObi6caQ
Once you have one of these frames for each separate smaller chunk, you could then multiple each region by random values in the code to create a random color for each chunk.
I know that’s a lot to digest. I’m actually going to use this as a use case in an upcoming demo.
I hope this is helpful!
Hey @PirateJC
Sure is helpful!
But I need to understand it more. How I use the generated chunk space to UV map a texture? Or to apply all of generated chunks simultaneously in one texture?
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!
@PirateJC
Now you excuse me for delayed answer!
It is more clear now! So, by your approach suppose I want to cover an floor with some tiles and do not want they repeat, I can generate separate tiles textures, like the colors of your sample, and randomly apply it on the floor. The main advantage that I see, in relation of UE4 approach, is that can be used with any number of tiles which do not need to be defined in a square texture.
Thanks so much for point a way.
Yes this is one of the positive outcomes of doing it this way agreed!
The negative view of it, is that you have to loop through to create a unique branch for each “tile.”
But you also get a LOT more control that way!
Glad this helped!