Intro to Unity Shader Graph (Part 3 - Transparency and Alpha)

in part two we used textures and UV coordinates to modify the appearance of a couple of basic measures in part three we are going to learn about transparency and Alpha clipping 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 doesn't need to be drawn at all it's obscured by the closer objects and you get an efficiency win 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 Q system whereby all shaders are assigned a q 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 second it means that transparent objects are rendered back to front both 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 so how do we use transparency in shaders I going to start with a graph named transparency example which is the same as the texture example Shader from part two without the scrolling UVS for Simplicity 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 dropdown menu and you'll see an extra block appear here on the output stack called Alpha 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 this sort of extra weird value which just means how transparent the pixel is we need need to wire something up to this Alpha output you will notice that the base color output takes a vector 3 because of the three in parentheses here but we are passing a vector four from this multiply node this multiply actually contains an rgba color and unity is automatically truncating the vector it's losing that last component when we connected to something that only expects three components we need that last component for the alpha output so so I will drag out a new wire from the multiply node and add a split node as you can see it splits the vector 4 into its components we can then wire up the a component to the alpha output hit save asset and come into the seam view 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 we've now seen basic transparency but that 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 with Alpha clipping we can set a threshold and any pixel with Alpha below the threshold gets C it's not rendered let's see how it works in Shader graph I'll duplicate the transparent example Shader and name the new one alpha clip example 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 box a new output block called Alpha clip threshold will pop up which is the threshold I mentioned in fact I'm going to just leave it how it is smash that save aset button and go into the seam View to demonstrate how alpha clipping works I'm going to assign this texture to the material it's a fully white texture but the alpha gets lower the further from the center you get if I put it on this Cube then each face renders as a smaller Circle because the outer parts of the texture have Alpha values below the threshold back in Shad graph I'll add a new fluid property called threshold and attach it directly to the alpha clip thrh threshold 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 that we can set for this property the default Min and Max values of zero and one are perfect hit save asset again and in the seam view we can play around with the slider to make the circles bigger or smaller great let's make one more Shader in this tutorial full-on Alpha Blended transparency be expensive especially if you have lots of objects due to the blending opaque objects that use Alpha clipping have the ability to call 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 think transparency by coloring pixels in a dithered pattern so on a screen with sufficient resolution the object still sort of appears transparent let's see it in action in Shader graph I'll start by duplicating the alpha clip example Shader and name the new one dither example I'll get rid of the threshold property and delete the node going into Alpha clip threshold Shader graph has a div node which you'll add it generates a d pattern as you would expect if we change the in value to one you'll see the pattern in the preview although it's a bit blur if we zoom in so here's a crisper version 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 seam View and now if we play around with the alpha components 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 in the next part we'll be exploring the depth buffer and effects like silouettes my biggest thanks to the patreon supporters who should be appearing on screen right now subscribe today for perks such as Early Access and free assets until next time have fun making shaders

Channel: Daniel Ilett

Views: 3,924

Keywords: unity, shader, shader graph, unity3d, urp, rendering, gamedev, graphics, shader node, split node, transparency, transparent shader, alpha clip, alpha clip shader, alpha blending, alpha blended transparency, alpha clipping, alpha cutout, cutout shader, cull, culling, shader cull, fragment shader, dither, dithering, dither transparency, screen door transparency, dither shader, screen door shader, rgb color, rgba color, alpha

Id: ig2IVZh9pCk

Length: 7min 25sec (445 seconds)

Published: Mon Dec 11 2023