top of page
tiling.webp

Exploring Texture Magic in Unity Shaders

Welcome to this section where we uncover the secrets behind texture sampling, tiling, and offsetting in Unity shaders. From understanding UV grids to creating mesmerizing animations, this is all about making your shaders come alive. Let’s dive into the math, creativity, and a little bit of shader sorcery! ✨

What We’re Doing

We’re diving into:

  • Texture Sampling – Understanding how UV coordinates work and how shaders decide what color each pixel should display.

  • Tiling and Offsetting – Scaling and shifting textures to create repeating patterns or dynamic effects.

  • Animating Textures – Using shader variables and Unity’s built-in time functions to slide textures and create motion.

Step-by-Step Breakdown

1. Setting Up the Shader

We’ll start with a simple quad in Unity and apply a basic texture material. The shader begins with an unlit base where we’ve stripped unnecessary elements like fog. From here, we’ll display UV coordinates directly, showing how textures are mapped.

​

2. Understanding UVs

  • UVs are coordinate systems that help shaders decide which pixel to sample from a texture. Think of them as a grid:

    • (0,0) represents the bottom-left corner.

    • (1,1) represents the top-right corner.

  • By modifying UVs, we can scale (tile) or shift (offset) textures dynamically.

3. Texture Sampling

Here’s how texture sampling works:

​

​

  1. We declare a Main Texture property in the shader:

Properties
{
    _MainTex ("Texture", 2D) = "white" {}
}

2. We use a sampler to connect the texture to the shader:

sampler2D _MainTex;

3. Using tex2D, we sample the texture:

fixed4 col = tex2D(_MainTex, i.uv);
return col;

4. Tiling Textures

  • Tiling stretches the UV coordinates to repeat the texture.

  • Example:

uvs.x *= 2; // Repeat the texture horizontally

5. Offsetting Textures

  • Offsetting shifts the texture by modifying UVs.

  • Example:

uvs.x += 0.5; // Shift the texture to the right

6. Combining Tiling and Offsetting

Unity allows you to control these values through a built-in TRANSFORM_TEX function:

uvs = TRANSFORM_TEX(v.uv, _MainTex);

This function handles tiling and offset math for you, using the _ST properties Unity automatically assigns to textures.

7. Animating Textures

Using Unity’s _Time variable, we can animate textures by changing their offset over time:

uvs.x += _Time.y; // Animate texture movement horizontally

To keep animations smooth and avoid large numbers causing pixelation, we wrap the value using frac:

uvs.x += frac(_Time.y);

This ensures the offset resets after reaching 1.0.

8. Enhancing Animation Control
​
We add a custom property for animation speed:

_AnimateXY ("Animation Speed", Vector) = (0, 0, 0, 0)

And use it to control the motion:

uvs.xy += _AnimateXY.xy * _Time.y;

What You Can Create

With these techniques, you can:

  • Add dynamic backgrounds to UI elements.

  • Create scrolling textures for water, clouds, or conveyor belts.

  • Develop visually striking animations for game environments.

Final Notes

  • Always set the texture wrap mode to Repeat in the Inspector to enable proper tiling.

  • Use frac to keep animations smooth and bounded.

  • Experiment with combining tiling, offsetting, and animation to create unique effects.

​That’s a wrap for this session! If you’re as excited as I am about shaders, keep experimenting and pushing the limits of what you can do. And hey, if you’ve got questions or cool shader ideas, drop them in the comments. Let’s make shader magic happen! ✨

bottom of page