Awesome

Cyberpunk 2077 Scanning Effect

This effect Recreated By:

Seyed Morteza Kamali

Mohammad Zamanian

1. Introduction

This tutorial will describe step-by-step how to write a cyber punk like scanning effect in unity. The effect is made from different parts such as outline, pixelation and fill effect. You can see the effect in the following images:

Our Implementation

https://twitter.com/ShaderGuy/status/1217308220034899969?s=20

Full Video:

https://twitter.com/ShaderGuy/status/1217315711401582594?s=20

2. Objects mask

As you may know, we can implement outline effect and fill effect easily in regular object shaders using vertex distortion and screen space overlay effects, but the third effect which cannot be implemented using regular shaders is pixelation effect, this effect can only be created using image effects because it goes outside the object with this effect applied. The problem with this implementation is that we cannot apply the image effect on specific objects and it will be applied to the whole screen. So we need a way to mask our objects in our image effect shader. There are two ways to implement object mask to use it in our effect: 1.Using unity’s pre-rendered stencil buffer 2.Using stencil buffer along with command buffers 3.Using command buffers

2.1 Using stencil buffer

A stencil buffer is an extra data buffer, in addition to color buffer and depth buffer. The buffer is per pixel and works on 8bit integer values. In the simplest case, the stencil buffer is used to mask area of rendering. For example, you want to render a character everywhere but in a sphere. As shown in the image below, before anything is drawn in stencil buffer, the buffer is filled with zeros for each pixel and is black and we can make it white by replacing the buffer values in the area of the object we want to mask with.

// Make my area of rendering’s stencil buffer white.
Stencil
{
    Ref 1
    Comp Always
    Pass Replace
}

Then create another default shader called “MaskedShader” and add the following lines as you did before, create a material of it and add it to the human.

// Draw me where stencil buffer is black
Stencil
{
    Ref 0
    Comp Equal
}

// old image effect technique and description

Using stencil buffer along with command buffer

Using only command buffers

// describing command buffers

Image effect

Outline effect

Fill effect

Pixelate effect

Applying to multiple objects

Useful links:

Image effect on specific part of objects

ToDo

Complete the Tutorial