Make 'Fake' Transparency Using Dithering | Unity Shader Graph

Learn how to create a dithering transparency effect similar to the one used in Super Mario Odyssey using Unity Shader Graph! This tutorial is also available in text format here: danielilett.co...
--------------
💻 Get the source on GitHub:
github.com/dan...
✨ Get the Robot Sphere on the Asset Store:
assetstore.uni...
🍕 See my new Bitesize Gamedev series on Twitter: / 1320515252098912261
--------------
📚 Get a copy of my shader book here: www.dpbolvw.net...
✨ Grab Snapshot Shaders Pro here: assetstore.uni...
------------
💬 Join the Discord: / discord
💖 Support me on Patreon: www.patreon.co...
☕ Or throw me a one-off coffee on Ko-fi: ko-fi.com/dani...
#unity #dithering #shader-graph

[@danielilett]

I've made an updated version of this tutorial for more modern versions of Unity, with a bit of additional context (and a better microphone): kzbin.info/www/bejne/hHnHYoObf8ussKc

[@omgtntlol]

Tips for confused or lazy developers: - 0:40 If you can't find the PBR Map, use the Lit Shader Graph option (Create > Shader > Universal Render Pipeline > Lit Shader Graph) - 2:39 You can do this just by pressing space in the newer versions of URP - "Albedo" is now "Base color" - 3:46 If you can't find an "Alpha" Option, In your graph settings (Usually Top right corner of shader editor window) change your "Universal > Surface" from "Opaque" to "Transparent" - 4:18 If you can't find an "Alpha clip" option you have to do the previous step but instead enable the checkbox next to "Alpha clip" (Under blend dropdown)

[@danielilett]

Couldn't have put it better myself. I made this video during a time when Shader Graph was still changing pretty rapidly. This comment pretty much sums up the changes between versions.

[@Designbyapro]

Well played sir.

[@BMourit]

3:46 Don't change this from Opaque to Transparent or you will still be dealing with transparency ordering and essentially making this technique more expensive than real transparency. Just use Opaque with alpha cutoff. If you don't see the "Alpha", the correct thing to do is enable "Alpha Clipping" option in ShaderGraph Graph Inspector.

[@SaturnsEscape]

This shader was a life saver. Needed to fade some complex meshes in and out in URP and setting the standard lit shader to transparent caused truly horrific zwrite problems. You are a gent and scholar, much appreciated!

[@davidwollen5818]

This was really well explained and structured - much better than other 'tutorials' I've seen on the same subject, thankyou!

[@madbeatstu]

Interesting use of dither, it is essentially a dynamic texture affecting the alpha clipping level of each pixel. You can also bypass dither and make a custom script to dynamically write to a texture and avoid the dither stylization I discovered today and benefit from the alpha clipping approach in other creative ways.

[@michaelkjellander9370]

Thanks a lot, the full graph at the website was very helpful.

[@JM-go6zx]

Thank you for this great video!

[@Lukeibol]

Very nice tut, I hope you have success in your life, currently using this for a project to the company I work. Thanks

[@simoncodrington]

Great easy to follow video mate, good work.

[@TSMSnation]

I'm not a master at this by any means. but If you find the result just being the object disappearing, I found connecting the R(1) to the multiply going to the alpha to work. 3:35

[@ignatiusreilly8280]

Thanks for the explanation, I am currently trying to get objects to fade out, and cannot manipulate the exposed Albedo from script. Let me now try it this way with dithering.

[@HaniSharif]

just a quick question though, How costly is this on CPU/GPU. is this good in performance? Great video btw

[@danielilett]

As with most things, it depends a bit on your hardware, but this is very unlikely to cause issues. I believe on certain mobiles, alpha clipping is slightly more costly than alpha-blended (i.e. 'normal') transparency. On desktop/console I believe it's the other way round (alpha clip has better performance than transparency). Either way, I doubt it will cause a noticeable decrease in performance!

[@tobiasmuller8601]

best intro ever!

[@ivanickij]

Does anyone have an idea how to make dithering work with normal/height maps?

[@BlackEliteGroup]

I cant understand how to make this shader for HDRP

[@timkruger7365]

Well done, enjoyed it greatly :)

[@smirelesz]

Thanks man! Very useful :)

[@JackLaPlante18]

Fantastic tutorial! I'm so glad I found your content! QQ: at 5:16 do you see how the shadow gets changed with the dithering effect? Is there any way to disable that so the shadow looks 'normal' (as it was before the effect was applied)?

[@danielilett]

Thanks! Yeah someone else asked about this the other day, and unfortunately I couldn't find an elegant way around this within Shader Graph. The solution (it's a bit hacky) that I found was: On the object using the dithering material, change the Cast Shadows setting on the Mesh Renderer to "Off". Then duplicate the Mesh Filter and Mesh Renderer onto a new child GameObject, give it the default material, and change Cast Shadows to "Shadows Only" (so it doesn't render the mesh, only the shadows). Hope that helps!

[@personmuc943]

Can I do this while surface type is set to opaque? I don't want to set it to transparent

[@danielilett]

Yep! That's the idea - set it to opaque and only render some of the pixels in a pattern that *appears* transparent, but actually isn't.

[@personmuc943]

​@@danielilett Thanks for the reply! But what I've seen in 3:49 is that you connected one of the nodes to the alpha channel, while the opaque surface type doesn't allow alpha.

[@brian1014able]

what a great tutorial !

[@ZacharyAghaizu]

Great tutorial!! Thanks

[@tenorgames]

Love your explanation.

[@Chillco600]

opacity should be renamed transparency, an opaque object would be the value of 0, opacity with a value of 0 makes it completely non opaque, and 1 makes it fully opaque, or just opaque, small nit-pick but still

[@Mikelica69]

THanks for this

[@danielilett]

Hope it was useful for you!

[@balasubramanimudaliar1336]

Very nice tutorial. Can we make fake transparent shader without dithering. is that possible? I try many thing but its not work. with transpernt mode its give many art fact so With opaque shader fake transparency possible?

[@o-manthehuman7867]

dani just said to check out ur channel brace for veiws

[@NemesisTWarlock]

This is great, but it *really* doesn't work in VR, as the Dither node is screen-based, causing the dither pattern to move with the player's head movement. any way of getting a world based dither system?

[@davidwollen5818]

Recreated this and it works really well, with one problem - the shadows dither too. Any ideas on how to fix that?

[@danielilett]

Unfortunately, that tripped me up too - I couldn't find an elegant solution. The best approach I could find was to apply the dithered material to your object and set the Cast Shadows setting on its Mesh Renderer to "Off". Then, duplicate the object (removing everything but the Mesh Filter and Mesh Renderer components), swap the material for the default material, and set its Cast Shadows to "Shadows Only". It's kind of a hack, but it works.

[@davidwollen5818]

@@danielilett that's what I ended up with too. Tbh it's good practice to use a lower poly shadow mesh anyway.

[@samueljacobs3834]

Great tutorial!

[@erickaquino8244]

Hi, I am trying to edit the your shader by removing the Dither filter but I don't get the same effect that fades the transparency, can you support me or guide me what to do?

[@Eric-pi2rn]

Hey, awesome tutorial! In Unity Editor it's working just fine. But exporting it to iOS causes the dithering transparency to flicker. Not the whole transparent gameobject, but the pattern of the dithering changes randomly at some random places. Any idea why that is? Thanks! Note: I Just tried to build your example project on iOS: Same Thing ... -.-

[@saikoraito]

how to make it fade out when near camera

[@linhbui7088]

Hi bro. Did you know how to render transparence in URP?

[@tkasch]

Thank you

[@iDerp69]

Great vid! Do you have a sense of how you'd dither an object that's occluding the player from the camera?

[@danielilett]

I'd probably raycast from the camera towards the 'target' object and enable dithering on anything caught in the raycast (except the target of course!)

[@iDerp69]

@@danielilett Interesting... there must not be a solution for a multiplayer (split screen) context? That would cause the object to become transparent for all players.

[@danielilett]

@@iDerp69 I've not had chance to try this out, but it's possible you can change the rendering behaviour for each player's camera. There's a BeginCameraRendering callback (docs.unity3d.com/ScriptReference/Rendering.RenderPipeline.BeginCameraRendering.html) which you might be able to use - just perform the raycast check (or an alternative approach if you've found one) for each camera inside that callback. There's also an EndCameraRendering callback which is called when each camera finishes rendering, so maybe you'll want to go back and make all the objects caught in the raycast opaque again inside the callback. Again, not tested this out, but hopefully that's somewhere to start?

[@Cogh_]

Can't seem to change my opacity value in the editor (can change the number but nothing changes). Other variables like dither size work though. Any idea where I might have gone wrong?

[@danielilett]

Besides just checking to make sure all the nodes are connected properly, I'm not sure. If you can link me a screenshot of your graph, I can try and see what the problem is!

[@menatrs1]

Is there a way to dither the player when the camera is close?

[@danielilett]

Shouldn't be too difficult to do that - if you give the player the dither material and set its opacity to full normally, you can then raycast forward from the camera position a certain distance and decrease the opacity if the raycast hits the player (i.e. the player is near the camera). Hope that helps! :)

[@menatrs1]

@@danielilett thx

[@nosh247]

how would you make this work with raycast? do i need to use material block property to change only that object's material and not affect all objects using the same material?

[@danielilett]

You shouldn't need to do anything other than use renderer.material.SetFloat("_Opacity", yourOpacityValue) to modify the opacity values of an individual renderer, using whatever reference value you used for the opacity value in the shader (I called mine "_Opacity"). I think that probably modifies a material property block under the hood, but you shouldn't need to directly do that yourself (if I understand you correctly!)

[@nosh247]

@@danielilett I'm working on a isometric-ish camera look and planning to use it to dither the buildings in between the camera and the player.

[@marianhak]

What version of urp were on? Because my shadows are all broken on any material that use transparency, even default lit.

[@danielilett]

I'm using URP 7.1.8. When you say shadows are broken, do you mean they don't render at all? Using the approach shown in this video, if you leave the PBR Master node's surface mode as "opaque", you should still get shadows (although they look a bit funky when lowering transparency).

[@marianhak]

@@danielilett I have master node as transparent. And now you made me confused. I thought I need to set to transparent because with opaque black parts of alpha texture are visible. What did I miss if you get transparency with opaque? If you can share

[@danielilett]

​@@marianhak In this video, we're setting the Alpha Clip Threshold so that any pixels with an alpha below that threshold get culled entirely. You don't need to set the master node to transparent for that, because every pixel is either drawn fully opaque or not drawn at all - there's no semi-transparent pixels drawn for that model. Hence, you can set the master node to opaque. The trick is that you arrange opaque and culled pixels to *fake* transparency - that's where the dithering pattern comes in.

[@marianhak]

@@danielilett oh my god, I wasted whole day looking for answer. You saved me big time!

[@danielilett]

@@marianhak Glad I was able to help! :)

[@pixitales5017]

Nice try, one issue is that the shadow is all dither too

[@allaze-eroler]

Your subtitles are broken…

[@vypur1345]

Jesus dude fix the tinnitus inducing whine in your video

[@plentynimrod6526]

Notice how 3/4 of your screen isn't being used. That window comes off your dock so you can maxamize it. Please don't tell me you are paid to educate people

[@Skycrafter328]

Please don't tell me you are paid to do motivational speeches

[@plentynimrod6526]

you can only see one node at a time... is this a joke?

[@Publicix]

Thank you, amazing video!