In Part 2, we used textures and UV coordinates to modify the appearance of a couple of basic meshes. In this part, we are going to learn about transparency and alpha clipping. Here is an example of a dithered transparency effect which uses alpha clipping:

Dithered transparency example.

Check out this tutorial over on YouTube too!

How Transparency Works

Transparency is handled a bit differently to opaque objects. For efficiency reasons, when rendering opaque objects, you tend to draw them starting with the closest object, because anything behind that object (be it a part-hidden or fully-hidden object) doesnā€™t need to be drawn at all. Itā€™s obscured by the closer object, and you get an efficiency win.

How opaque objects are rendered.

Transparent objects, on the other hand, need to blend their color with the color of the object behind it based on the alpha value of the object. This is called alpha-blended transparency.

First, that means all opaque objects need to be drawn first before any transparent objects are drawn, otherwise we canā€™t do any color blending. Unity enforces this with a queue system, whereby all shaders are assigned a queue number, and lower numbers are drawn before higher numbers. In code shaders, we specify the number manually, but Shader Graph will handle that for us.

Transparent rendering order.

Second, it means that transparent objects are rendered back-to-front, with the furthest objects drawn first, and objects closer to the camera drawn later. This ordering ensures that overlapping transparent objects get their colors blended properly - a front-to-back ordering would give incorrect results.

Transparency in Shader Graph

To implement transparency in Shader Graph, Iā€™m going to create a new Unlit graph called ā€œTransparencyExampleā€. It will look similar to TextureExample from Part 2, minus the scrolling UV functionality for simplicity.

Base transparency graph.

By default, graphs use opaque rendering. To change this, go to the Graph Settings tab on the Graph Inspector, and you will see an option named Surface Type. Change it to Transparent using the drop-down menu, and youā€™ll see an extra block appear on the output stack called Alpha.

Transparent surface.

Earlier, I referred to ā€œalpha-blended transparencyā€. In most image editing tools, you will work with RGBA color values. RGB is easy enough to understand - red, green, and blue - but alpha is sort of this extra, weird value which just means ā€œhow transparent the pixel isā€. Certain image formats donā€™t even support an alpha channel - such as JPEG - so make sure youā€™re using something like PNG, and youā€™ll be fine.

We need to wire something up to the Alpha output. You will notice that the Base Color output takes a Vector3 because of the 3 in parentheses after its name, but we are passing a Vector4 from the preceding Multiply node. This Multiply actually contains an RGBA color, and Unity is automatically truncating the vector - itā€™s losing that last component when we connect it to something that only expects three components. We need that last component for the Alpha output, so I will drag out a new wire from the Multiply node and add a Split node. As you can see, it splits the Vector4 into its components. We can then wire up the A component to the Alpha output, hit Save Asset, and come into the Scene View.

Transparent graph.

When we attach the material to an object and change the alpha value on the Base Color property, we can see the transparency working as expected.

Transparent object.


Subscribe to my Patreon for perks including early access, your name in the credits of my videos, and bonus access to several premium shader packs!

Patreon banner.


Alpha Clipping in Shader Graph

Weā€™ve now seen basic transparency, but thatā€™s not the only use of alpha. Sometimes you donā€™t actually want semi-transparency. Sometimes, you just want parts of an object to appear opaque and other parts to be cut away and not rendered, sort of like a visibility mask, or like a cookie cutter. This is where alpha clipping comes in. Alpha clipping can be applied to either transparent or opaque objects, but Iā€™m going to demonstrate it on an opaque object. With alpha clipping, we can set a threshold, and any pixel with alpha below the threshold gets culled - itā€™s not rendered. Letā€™s see how it works in Shader Graph.

Iā€™ll duplicate the TransparentExample shader and name the new one ā€œAlphaClipExampleā€. If we go to the Graph settings once more, Iā€™m going to change the Surface Type to Opaque. Then, Iā€™ll tick the Alpha Clipping option box further down the settings list. A new output block called Alpha Clip Threshold will pop up, which is the threshold I mentioned.

Alpha clip graph settings.

Iā€™ll add a new Float property called Threshold and attach it directly to the Alpha Clip Threshold output.

Alpha clip graph output.

In the Node Settings for the property, we can change the Mode to Slider, which gives us the ability to restrict the range of values we can set for this property. The default Min and Max values of 0 and 1 are perfect.

Alpha clip threshold property.

Hit Save Asset again, and in the Scene View, if we use a texture with partial transparency, we can cut it off at different points using the Threshold slider. Nice!

Alpha clip objects.

Dithered Transparency

Letā€™s make one more shader in this tutorial. Full-on alpha-blended transparency can be expensive, especially if you have lots of objects, due to the blending. Opaque objects that use alpha clipping have the ability to cull pixels, but each pixel that is drawn is opaque, so itā€™s still pretty efficient. Thereā€™s a technique I like called dithering where we can fake transparency by culling pixels in a dithered pattern, so on a screen with sufficient resolution, the object still sort of appears transparent.

Dithered transparency example.

Letā€™s see it in action in Shader Graph. Iā€™ll start by duplicating the AlphaClipExample shader and name the new one ā€œDitherExampleā€. Iā€™ll get rid of the Threshold property and delete the node going into Alpha Clip Threshold. Shader Graph has a Dither node which Iā€™ll add - it generates a dither pattern as you would expect.

If we change the In value to 1, youā€™ll see the pattern in the preview (itā€™s a bit blurry when you zoom in, so hereā€™s a crisp version):

Dither node pattern.

You will also notice that it takes a screen position as its second parameter, rather than a UV coordinate. That means this pattern will be applied in screen space, rather than over the surface of the object. Thatā€™s perfect for our use case! We can wire this node directly to the Alpha Clip Threshold output, hit Save Asset, come back to the Scene View, and now if we play around with the alpha component of the Base Color property, the object sort of looks like itā€™s fading out, but every pixel that is being rendered is still opaque! How about that.

Dither transparency graph.

Conclusion

We learned a lot about how Unity renders objects, and used that to make some transparency shaders. In the next part, weā€™ll learn a bit more about how opaque objects work by looking at the depth buffer. Thanks for reading!


Subscribe to my Patreon for perks including early access, your name in the credits of my videos, and bonus access to several premium shader packs!

Patreon banner.

Acknowledgements

Special thanks to my Patreon backers for Sep - Nov 2023!

JP SungHoon Kang Verisutha Jack Dixon Morrie Mr.FoxQC Josh Swanson Leonard pixel_Wing Alexis Lessard beany claudio croci dmitrii-t Hassan Karouni Jau Liu Jun Mikel Bulnes Ming Lei Muhammad Azman Olly J Paul Froggatt Ray J Will Poillion Zachary Alstadt ęŗ 刘