Texture splitting: node material editor

in the beginning of this video, there are some wonderful movement/texture slicing effects (2D Texture Slicing in TouchDesigner Tutorial - YouTube)

I’m wondering if anyone has any examples of this in the node material editor?

1 Like

I took a shot at recreating a simple version in the NME! Babylon.js Node Material Editor
The idea is that I’ll pass modified uvs to the texture based on the u value. If it’s greater than certain value (let’s say, 0.5), I’ll add sin(Time x 2) to my v value. If it’s smaller, I’ll add sin(Time x 5). I think the tests could be chained to generate more regions, or there might even be a way to randomly generate those regions to “split” the uvs.

I’m glad for your question, I finally had a excuse to check the NME and it’s pretty fun to use! :smiley:

5 Likes

Glad you liked it!

quite neat; do you have any ideas about how to start stabbing at this specifically: “or there might even be a way to randomly generate those regions to “split” the uvs.”

I definitely think that randomizing, as well as making “bands” of texture movements would be an interesting shader that people would use here.

This is all very new to me, so I’m learning as best I can.

Love the way you used the math (sin) node…
I use a lot sin functions in Blender and After Effects, and I was looking for a way to use in Babylon too… thank you!

One option would be using the Random nodes, like the RandomNumber node, as in here: https://nme.babylonjs.com/#034B7Y#1

I also tried adding another “band” of movement, by chaining two comparisons. Depending on how the seeds are set, I end up getting no bands at all (probably because it generated a smaller value to compare against the second comparison. But by changing the seeds around a bit I managed to generate the bands.

Since you said you’re new to shader coding, I highly recommend The Art of Code’s videos! Shadertoy for absolute beginners - YouTube He uses shader language instead of the blocks in the editor, but his videos are pretty easy to follow and teach a lot of useful concepts!

1 Like

Thank you! Sines and cosines are extremely useful for creating shader effects!

2 Likes

Thank you. Check this out: Login • Instagram

I actually made a “random cuts” version, but I didn’t record it; I’ll recreate it and post it here soon.

How do you save on the node editor? I can’t figure that out.

I feel like it’s really hard finding a tutorial bc I’m only interested in very specific forms of texture manipulation, and 98% of al tutorials I’ve seen don’t concern themselves with that at all…

Here is an example of a cut and a movement layer, its closer to what im trying to get to

I have to figure out how to randomly scale the uv on a timer

When you say randomly scale on a timer, would it be something like this?
https://nme.babylonjs.com/#CUVXXB

Here I used the current time (scaled by three different factors) as inputs to the SimplexPerlin3D, which generates “random” smooth values.