Create a full-screen Dithering shader with color

In the previous tutorial, you created a full-screen dithering shader that converts the rendered scene into a black-and-white dither pattern. In this section, you'll enhance that shader to preserve portions of the original scene colors while still applying the dithering pattern. You'll add a DitherOpacity control that allows you to blend between the fully dithered effect and the original scene colors, creating a colored dithering effect with adjustable intensity.

Important: This tutorial is part of the Get Started with Shader Graph course, which covers different units focused on different types of shaders. In case you haven't downloaded the project files, follow these instructions on how to create a new project and import the project assets.

Rather than building from scratch, you'll duplicate the existing DitherFullScreen shader and expand it with color. This reuses all the work you've already done. Complete the Create a full-screen Dithering shader tutorial before continuing this tutorial.

To duplicate the original shader, follow these instructions:

1. Duplicate the Dithering shader

• In the Project window, open to the Shaders folder.
• Select the DitherFullScreen shader and press Ctrl+D (macOS: Cmd+D).
• Rename it "DitherColorFullScreen".

2. Open the shader

• Double-click the DitherColorFullScreen shader to open it in the Shader Graph window.

You'll modify this shader to add color preservation.

You can add Renderer Features to the Renderer Asset to extend URP's rendering capabilities. The Full Screen Pass Renderer Feature allows custom fullscreen shaders to process the rendered image.

To create a new Render Feature, follow these instructions:

1. Create a material

• Right-click the DitherColorFullScreen shader and select Create > Material.
• Rename it "DitherColorFullScreen".

2. Add the Renderer Feature

• With the Renderer Asset selected, in the Inspector window, select the Add Renderer Feature button.
• Select Full Screen Pass Renderer Feature from the dropdown.

Important: If you forgot where to find the Renderer Asset follow the Locate Renderer Asset instructions.

3. Assign the dithering material

• In the newly added Full Screen Pass Renderer Feature, drag the DitherColorFullScreen material from the Project window into the Pass Material property box.

4. Configure Injection Point

• Locate the Injection Point property.
• Set it to Before Rendering Transparents.

Because the effect will be controlled through the script, you should disable the Renderer Feature so it’s inactive by default.

5. Disable the feature

• In the Renderer Asset’s Inspector window, disable the Full Screen Pass Renderer Feature property.

The dithering effect disappears from the view. It will be re-enabled by the EquippableGlasses script when you interact with the HeadsetDither GameObject.

You could set up the shader directly to a scene right now, but because you need to apply it to the render pipeline, doing so would not only affect the other shaders you’ve already created, but it would also affect any scene in your project. To keep this effect independent from the rest of the project, you will instead trigger it through an interactable GameObject.

1. Open the Development_Scene

• In the Project window, open the _GetStartedWithShaderGraph > Scenes folder.
• Double-click the Development_Scene to open it.

You can create a Prefab Variant of the HeadsetDither prefab you created in the last tutorial that already has the EquippableGlasses component attached. This component is responsible for enabling and disabling the Renderer Feature when the player interacts with the HeadsetDither GameObject.

2. Add the HeadsetDither GameObject to your scene

• In the Project window, locate the HeadsetDither prefab inside the _GetStartedWithShaderGraph > Prefabs > _My Objects folder.
• Drag the HeadsetDither prefab into the Hierarchy window.
• In the Scene view, position the HeadsetDither GameObject over the small table that's already placed in the scene
• Rename the HeadsetDither GameObject “HeadsetDitherColor”.

Important: If you need to create the HeadsetDither GameObject from scratch, place the original HeadSet prefab in the scene and manually attach the EquippableGlasses script to it.

3. Assign the Renderer Feature

• In the EquippableGlasses component, assign the Full Screen Pass Renderer Feature you created in the last step to the Renderer Feature property.

Important: Make sure you assign the correct Renderer Feature and do not reuse the one created for the original dithering shader. You can select the Renderer Feature to highlight it in the Project window and verify which material is assigned to it in the Inspector window.

The script will now enable the Renderer Feature when you interact with the HeadsetDitherColor GameObject (press E) and disable it when you interact again. The HeadsetDitherColor GameObject is now ready for testing the colored dithering effect.

You'll modify the shader to blend colors, so you first need to disconnect the current output.

To disconnect the Step node from the Base Color, follow these instructions:

1. Disconnect the connection

• In the Shader Graph window, locate the Step Out to the Base Color connection.
• Select the connection line and press Delete to disconnect it.

The shader output is now disconnected, ready for the new color logic.

You’ll create a new property to regulate the strength of the dithering effect over the original colors of the scene.

To add opacity control, follow these instructions:

1. Add the DitherOpacity property

• In the Blackboard, select the Add (+) button and select Float.
• Rename it "DitherOpacity".
• Set the Default Value property to 0.5.

The DitherOpacity property controls how strongly the dithering effect is applied to the screen. A value of 0 means no dithering is applied and the screen displays the original scene colors. A value of 1 applies the full dithering effect, producing the same result as the original DitherFullScreen shader. Values between 0 and 1 create a blend between the original scene colors and the dithering pattern.

2. Multiply the Dither effect by opacity

• Right-click in the Workspace, select Create node, and search for and add a Multiply node (Math > Basic > Multiply).
• Connect the Step Out output to the A input.
• Drag the DitherOpacity property from the Blackboard into the Workspace.
• Connect the DitherOpacity output to the B input.

This multiplies the dithering logic already created by the opacity amount. When DitherOpacity is 1, the full dithering effect applies. When it's lower, the dithering is reduced, allowing more of the original colors to show through.

At this point, you have the logic that determines where the dithering pattern appears on the screen. What you need now is the opposite information: which pixels should keep their original color. To achieve this, you’ll create an inverse mask that identifies the pixels where dithering is not applied.

1. Create a One Minus node

• Right-click in the Workspace, select Create node, and search for and add a One Minus node (Math > Range > One Minus).
• Connect the Multiply Out output to the In input.

The One Minus node inverts values by calculating output = 1 − input. This flips the value range, making it useful for creating inverse masks.

Now multiply the inverted mask with the scene colors. This operation preserves the original colors in the pixels where dithering is not applied, while removing them in the pixels where the dithering pattern is visible.

To blend the original colors, follow these instructions:

1. Multiply inverted mask with the scene colors

• Right-click in the Workspace, select Create node, and search for and add another Multiply node (Math > Basic > Multiply).
• Connect the One Minus Out output to the A input.
• Connect the Scene Color Out to the B input.

The inverted mask determines how much of the original color shows through. By multiplying it with the Scene Color node, the result is a colored dithering effect where the pattern is visible but colors are preserved.

The last step is to connect the logic of your dithering effect back to the shader output in the Master Stack.

To connect to the Base Color, follow these instructions:

1. Connect to Base Color

• Locate the Fragment Master Stack.
• Connect the Multiply Out output (from the last step) to the Base Color input.
• Save your shader with Ctrl+S (macOS: Cmd+S).

The colored dithering shader is now complete.

The final step is to verify that the fullscreen dithering with color effect works correctly.

To adjust the colored dithering parameters, follow these instructions:

1. Test the effect

• Select the Play button in the Unity Editor.
• Move close to the HeadsetDitherColor GameObject and press E to interact with it.

Move the camera in the Game view. The entire scene should now display the same dithering pattern as the original shader, while the non-dithered areas preserve the original scene colors. You can fine-tune the appearance of the effect by adjusting the tiling values in the material.

2. Adjust DitherOpacity

• In the Project window, select the DitherColorFullScreen material.
• In the Inspector window, locate the DitherOpacity property and adjust it.

This value controls the balance between the dithering pattern and the original scene colors.

Note: A good starting value is 0.5, which provides a balanced blend between the dithering effect and the original scene colors.

3. Exit Play mode

• Press E again to disable the effect. The screen returns to normal rendering.
• Select the Play button again to exit Play mode.

Your colored dithering shader creates a unique aesthetic that blends retro pattern effects with modern color rendering.

Once your DitherColorFullScreen shader is finished, save your work and create a prefab so the HeadsetDitherColor GameObject can be reused easily.

To create a prefab and save your work, follow these instructions:

1. Create a prefab of the HeadsetDitherColor GameObject

• In the Project window, open the Prefabs > _My Objects folder.
• Drag the HeadsetDitherColor GameObject from the Hierarchy window into the _My Objects folder. This creates a prefab that stores the GameObject, its material, and its components.
• In the Hierarchy window, select the HeadsetDitherColor GameObject and disable the checkbox in the GameObject header to deactivate it. This helps keep the scene organized.
• From the main menu, select File > Save.

Important: Saving (Ctrl+S (macOS: Cmd+S)) with the Shader Graph window open only saves the shader. Scene changes must be saved separately.

The prefab is now saved and ready to reuse, and the shader can be applied to any other GameObject by creating new materials from it.

Take a moment to review the final shader graph created in this tutorial and compare it with your own. Make sure all nodes are properly connected and that all properties are correctly declared.

Congratulations!

You've expanded the fullscreen dithering shader by adding color processing, allowing the effect to preserve portions of the original scene colors while maintaining the retro dither pattern. You worked with nodes such as One Minus and Multiply to control how the dithering pattern blends with the original image.

You’ve completed this unit and created the shaders introduced in this section. This unit is part of the Get Started with Shader Graph course, which is organized into multiple units that explore different shader techniques, we encourage you to check out our other units.