Creating Screen-Space UV Distortion Effects

In this lesson, you will learn how to manipulate screen-space UV coordinates to warp the background, creating fluid heat haze or underwater refraction effects.

Understanding Screen-Space Distortion

Up to this point, you have mapped textures to specific mesh UVs. However, screen-space distortion works differently: it treats the rendered image of the world as a single, massive texture. By grabbing the current screen position of a pixel and adding a small offset derived from a noise map, you force the GPU to sample a neighboring pixel instead of the intended one. This creates the illusion that the scene behind your object is bending or rippling.

The Logic Pipeline

To achieve this in Shader Graph, you rely on the Scene Color node. Here is the conceptual flow:

1. Screen Position: Use a Screen Position node to retrieve the raw coordinates of your pixels.
2. Distortion Source: Use a Sample Texture 2D node (a scrolling Normal Map or Perlin Noise is best) to generate a movement vector.
3. Offsetting: Use an Add node to combine your Screen Position with the result of your noise texture. You should multiply the noise by a Distortion Strength property to ensure the effect remains subtle.
4. Sampling: Feed this "distorted" coordinate into the UV input of a Scene Color node.
5. Output: Connect the output of Scene Color to the Base Color of your Master Stack (set to Transparent).

Conceptual Implementation

Think of it like looking through a glass of water: the light isn't changing the objects behind the glass, but the refraction is shifting where your eye sees those objects. By using a time-offset noise map as your displacement source, you make the "glass" appear to ripple dynamically.

// Concept: Screen Position + (Noise * Strength) = Distorted UV
float2 uv = screenPos.xy + (tex2D(_NoiseMap, uv + _Time.xy) * _Strength);
float4 sceneColor = tex2D(_CameraOpaqueTexture, uv);

By keeping the distortion values small and using a Normal Map (which provides values in the -1 to 1 range), you create clean, professional-looking ripples that feel grounded in your environment.

Key Takeaway: Screen-space distortion works by offsetting the coordinates used to sample the Scene Color buffer, causing background pixels to appear shifted based on the values of a dynamic noise texture.