Screen Effect Shaders

Our journey through the world of modern Unity shaders is almost over, and we’ve looked at quite a number of examples. In the past few chapters, we explored a gallery of 2D and 3D shaders, and we learned several handy tricks for boosting our visuals and creating easy-to-tweak effects on our sprites and meshes.

In this final chapter, we’ll discuss one last common type of shader – the fullscreen effect shader. These are global filters applied to the entire render image that make it possible to make our own custom postprocessing effects and improve the overall atmosphere of the scene.

Still, if you’ve ever lurked around the Unity forums and the shader-related threads, you’ve probably seen how the arrival of URP has sadly complicated things a little for screen effects... so we’ll definitely have to take a moment to talk about the required setup for using fullscreen shaders in URP.

In this last chapter, we’ll...

Technical requirements

To try out the shader examples shown in this chapter, you will need to install Unity with a version from 2022.2 or later and make a project using the URP pipeline.

All the shaders and assets for this chapter are also available in the GitHub repository of this book at https://github.com/PacktPublishing/Become-a-Unity-Shaders-Guru/tree/main/Assets/Chapter%2014

Using fullscreen shaders in URP

Before we get to actually creating fullscreen shaders, let’s take a second to see how this kind of shader works in URP, and in particular how this render pipeline evolved to gradually make this feature easier and easier to use.

In this first section, we’re going to have a quick look at the old way of doing things with the built-in render pipeline, and then we’ll see how the URP pipeline changed over the years to eventually incorporate fullscreen shaders as a readily available tool.

The case of the built-in render pipeline

In the past, any shader creator who worked with the built-in render pipeline was fairly pleased to create a fullscreen effect shader, because it was simple. You would just need to do three things:

1. Prepare your screen shader.
2. Create a new material asset using this shader.
3. Add a MonoBehaviour script to your scene camera object containing the OnRenderImage function, to essentially apply this...

Creating a security camera effect

To continue our study of fullscreen shaders, let’s work on a classic security camera-like render, with a single-colored image, some glitchy scanlines, a bit of lens distortion, and a grainy filter (see Figure 14.10).

Figure 14.10 – Demo of our soon-to-be fullscreen Security Camera shader

To do this, we’ll rely on both a fullscreen shader and a couple of built-in postprocessing effects. We’ll start by implementing all the base features of our security camera effect, before adding in the postprocessing filters to boost the result even further.

Implementing the color tinting and scanlines

Our security camera effect will be handled by a SecurityCamera Shader Graph asset that is, once again, based on the Fullscreen Shader Graph URP template.

We will start by using the URP Sample Buffer node to get our initial render image, and multiply it by a single green color to tint it globally, as follows...

Making a fullscreen box blur

Up until now, we’ve seen how to implement some screen effect shaders thanks to the URP Sample Buffer node, and we’ve played around with the original render image in various ways. In this last section, we’re going to discuss another method for creating fullscreen shaders with the Shader Graph tool and apply it to a box blur filter effect.

We will start by getting a quick reminder of how the box blur effect works; then, we’ll see how to implement it thanks to a Sub Graph asset; and finally, we’ll re-integrate this Sub Graph into a fullscreen URP shader to apply our box blur filter to the whole render.

What is a box blur?

The box blur is a very simple low-pass filter that lets us easily blur an image thanks to a few mathematical operations. It relies on a basic idea, which is to replace the initial value of each pixel in the image with the average of their neighbor pixel values.

This technique is far from perfect...

Summary

In this final chapter, we’ve studied fullscreen effect shaders.

We first examined how the built-in and URP pipelines compare in terms of tooling for fullscreen effects, and we set up our first URP screen effect to turn the scene render black and white. Then, we worked on a common screen effect – a security camera-like filter that turns the image green, adds scanlines, and uses a few built-in postprocessing effects to set up lens distortion or vignetting. Finally, we talked about another method for accessing the screen data and discussed how to implement a basic 2D box blur filter effect with Shader Graph in Unity.

This marks the end of our adventure!

Throughout this book, we’ve studied the art of shaders and discussed a lot of techniques for using the new URP render pipeline in Unity. We’ve explored optimization tricks and plenty of examples, dived into writing modern Unity shaders using HLSL code, and learned how to use the node-based Shader...

Going further

If you’re curious about screen effect shaders, here are a few interesting resources to check out or continue your journey with:

• Custom post-processing, official Unity URP documentation: https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@16.0/manual/post-processing/custom-post-processing.html
• How to create a custom post-processing effect, official Unity URP documentation: https://docs.unity3d.com/Packages/com.unity.render-pipelines.universal@16.0/manual/post-processing/post-processing-custom-effect-low-code.html
• Full Screen Shaders in HDRP, URP, and Built In Renderer, Game Dev Bill (2020): https://gamedevbill.com/full-screen-shaders-in-unity/
• Custom Post Processing in Unity URP, Febucci (2022): https://www.febucci.com/2022/05/custom-post-processing-in-urp/
• Full Screen Shaders in URP?, Unity forum thread: https://forum.unity.com/threads/full-screen-shaders-in-urp.1228512/