In this lesson, you will learn how to generate infinite color variations and geometric patterns directly within Shader Graph to reduce your project’s memory footprint and reliance on external texture assets.
Beyond Texture Files
While texture maps provide immense detail, they are static and consume disk space and VRAM. Procedural patterns use mathematical functions to calculate pixel colors on-the-fly. By manipulating UV coordinates and utilizing mathematical operators, you can create smooth gradients or complex tiling patterns that are resolution-independent and infinitely scalable.
Constructing a Basic Gradient
To create a simple gradient, we focus on the UV node. UV coordinates range from 0 to 1 across the surface of your mesh. By splitting the UV node (using a Split or Swizzle node), you can isolate the horizontal (U) or vertical (V) axis.
If you pass the U component into a Lerp node, you can define two colors—Color A and Color B—to act as the start and end points of a smooth transition:
// Conceptual logic inside the Graph:
// 1. UV Node -> Split (R) -> Lerp (A: Color, B: Color, T: Split R)
Creating Patterns with Math
You can create more complex patterns by applying the Fraction or Modulo nodes to your UV coordinates. These nodes force coordinate values to wrap back to zero at specific intervals, effectively tiling a shape across the surface.
For example, by passing your UV coordinates through a Tiling and Offset node and then a Fraction node, you create a repeating grid. You can then use a Distance node comparing these repeating coordinates against a constant value to generate procedural shapes like circles or dots. Because these are generated via math, you can expose these as Properties in your Inspector, allowing you to animate the scale, rotation, or frequency of your patterns at runtime without ever creating a new image file.
This approach is highly performant because the GPU calculates these values during the fragment shading stage, freeing up your project from the memory overhead of high-resolution textures.
Key Takeaway: By leveraging UV coordinates and mathematical nodes like Lerp and Fraction, you can generate flexible, memory-efficient visuals that adapt dynamically to any mesh surface.