In this lesson, you will learn how to manipulate UV coordinates within Shader Graph to create the illusion of infinite motion for textures like flowing water or industrial conveyor belts.
The Logic of UV Scrolling
At its core, a texture is mapped to a mesh using UV coordinates, which range from (0,0) to (1,1). By programmatically adding values to these coordinates over time, you effectively "slide" the texture across the surface of the mesh. Since textures in Unity typically wrap by default (the Wrap Mode is set to Repeat), shifting the UVs creates a seamless, infinite scrolling effect.
Implementing in Shader Graph
To achieve this, you need to manipulate the UV channel of your texture sample. Instead of plugging the default UV node directly into your texture sampler, you perform a bit of vector math:
- Time Node: This provides a continuous stream of time since the game started.
- Vector2 Node: Create a property for
Scroll Speed(e.g., X: 0.1, Y: 0.0) to control the direction and velocity. - Multiply Node: Multiply
Timeby yourScroll Speed. - Add Node: Add the result of your multiplication to the default
UVnode. - Texture Sampler: Plug this new, calculated UV output into the UV input of your Texture Sampler.
Your graph logic looks like this:
NewUV = UV + (Time * ScrollSpeed)
This math shifts the origin of the texture coordinates every frame. Because the coordinates are always increasing, the texture appears to move steadily across the geometry.
Pro-Tips for Visual Fidelity
- Tiling: If you want to change the density of the texture before it scrolls, use a
Tiling and Offsetnode before adding the time-based motion. - Performance: Since this is handled entirely in the GPU via the shader, it is extremely performant—far more efficient than moving actual game objects or animating material offsets via C# scripts.
- Directionality: By using different X and Y values in your
Scroll Speedproperty, you can create diagonal movement or create complex "panning" effects by combining multiple scrolling layers with different speeds.
Key Takeaway: By adding a time-driven vector to your texture's UV coordinates, you bypass the need for transform-based animation, creating seamless, performant motion directly on the shader level.