BiteSizedChunks.comLearn one small thing at a time.
Course contentsShow
← Unity Game Development
Lesson 665 of 82810. VFX and Post-ProcessingFree lesson

Applying Screen Space Refraction Effects

Utilize screen color nodes to create realistic glass or heat haze distortions that warp the background behind your transparent objects.

In this lesson, you will learn how to use the Screen Color node in Shader Graph to create realistic refractive materials that warp the background behind your transparent objects.

The Core Concept: Sampling the Screen Buffer

When light passes through glass, water, or hot air, it doesn't travel in a straight line; it bends, which causes the image behind the object to appear shifted. In Unity’s Shader Graph, we simulate this by sampling the Screen Color—the buffer containing everything rendered before our transparent object—and offsetting the UV coordinates based on the object's surface normals.

Implementing the Distortion

To achieve this, your shader must be set to the Transparent surface type. The magic happens by manipulating the Screen Position node. Instead of using raw screen coordinates, you add a distortion value to them before passing them into the Screen Color node:

  1. Calculate Normals: Use the Normal Vector node (in World or View space) to determine the direction the object's surface is facing.
  2. Offset UVs: Feed the Normal Vector (specifically the Red and Green channels) into an Add node combined with the Screen Position node.
  3. Control Strength: Use a Multiply node between the Normal vector and a float property (e.g., RefractionStrength) to dial in the intensity of the warp.
  4. Sampling: Plug this adjusted position into the UV input of your Scene Color node.

This creates the illusion that the object is "grabbing" pixels from the background and shifting them. For heat haze, you can replace the static normal map with a Simple Noise node animated via the Time node, which will cause the background to ripple dynamically.

Practical Considerations

Because this effect samples the existing screen buffer, your object must be rendered in the Transparent queue so that the background is fully drawn before the refraction shader executes. If you see the background "bleeding" through in a weird way, ensure your Opaque geometry is rendering correctly to the depth buffer first.

Key Takeaway: Refraction is simply a technique of sampling the background screen buffer using distorted UV coordinates, allowing you to manipulate the visual fidelity of your scene dynamically.