Refraction ShaderGraph tutorial for Unity

[@marycrawford7209]

Good grief, I've spent the last few days going through so many Unity shader tutorials and this was the first one that just WORKED. Thank you, this was exactly it.

[@ed_halley]

Just to be clear, the string in the custom function needs to have uppercase/lowercase matching exactly, and also end in a semicolon which is hard to see in the video. Result=refract(View,Normal,Out); Otherwise you'll get a syntax error {!} mark next to the custom node.

[@Tarodev]

One of the only creators I don't play at 2x speed. I love your content and all the information you pack into each video!

[@PabloMakes]

Haha thanks for not giving me chipmunk voice!

[@AHSEN.]

@@PabloMakes Actually no chipmunk, since youtube compensates for the pitch change very nicely :). Good tutorial, thank you!

[@etrodai4875]

I started a year ago learning games Programming and got an interest in Shader & Particles. Now discovered your channel, thanks alot for the tutorials, really informative and easy to understand for beginner. Was quite surprised seeing Rebecca at end and then realised it, haha :D

[@anommymousse1224]

Another great performatic tutorial, nice pace and explanations.

[@PabloMakes]

Gotta spread the performatic ways!

[@TheEyebullet]

Really good tutorial, thanks! Keep up the good work!

[@PabloMakes]

Thanks!

[@tiagosousa5278]

Really enjoyed the video Normal textures for surface control is really good, learned something cool, thank you

[@PabloMakes]

Yeah it really adds a lot to the effect

[@2Spline]

Nice! Quick and efficient way to get this effect. Definitely useful for lots of different objects and handy building blocks for other materials! ✨

[@PabloMakes]

Could use this + wet shader to make a look out the window while sad simulator

[@Digressive]

Fantastic explanation and great tutorial! Thanks!

[@PabloMakes]

Thanks!

[@RetepOdaged]

This is so awesome!

[@Kirmm]

It worked for me in URP but it didn't work in HDRP. I tried to copy paste it in HDRP and tried to redo it step by step with no success. Any idea?

[@sanketvaria9734]

This actually looks much better than what unreal engine 4 has in terms of refraction without raytracing.

[@minhaestantemaluca3457]

OMG, that's perfect thank you so much!!!!

[@winnie8614]

How do you solve problem with edges of screen?

[@Finzlow]

Great tutorial, thanks so much!

[@sanketvaria9734]

A little problem here! What if I want to refract a transparent object behind another transparent object as well? I created a crystal and it refracts every opaque stuff that's behind it but not the line renderer which uses a transparent material. In fact the line renderer isn't even rendered if it's behind the crystal. I am stuck!

[@PabloMakes]

If you have reliable order you can play around with the materials draw order. But yeah transparent sorting is the stuff of nightmares. This effect relies on the opaque texture meaning there will be no transparent objects on it

[@sanketvaria9734]

@@PabloMakes exactly. I was wondering if there was any way to get transparent pass instead.

[@PabloMakes]

There’s some much more complicated setup you can do that may or may not work in your specific case. Like render your line into a render texture instead and then you can sample that render texture in the refraction and then composite it back in a post process , but yeah way more complicated once you want transparent in there

[@sanketvaria9734]

@@PabloMakes that's too much expensive. I don't think any android would process it without dropping frames below 60. Alternatively I had to turn laser into dither alpha clip. That solved the problem some what. Since dither alpha clip is opaque.

[@graig2558]

Hi this is a really great tutorial but my only problem is this also reflects the effect too. If I make a frosted window and put something in front of it you can see the reflection. Is there a way to make the effect work one way? Thanks

[@PabloMakes]

No, that’s one of the downsides. It’s waaay cheaper than other techniques, but it’s only faking refraction

[@graig2558]

@@PabloMakes Hey fair enough thanks for the great vid

[@Skyefaux]

Any way to make this work with an object inside the refraction object?

[@johnrossporter3439]

Unity now has a Refract node in 2022.2, but I couldn't figure out how to use it. Any idea?

[@PabloMakes]

Haven’t used it, so take this with a pinch of salt, but on other platforms it generally takes view vector, normal vector and an index of refraction

[@karimoh3154]

Is there any chance of getting this to work in the BuiltIn RP / Singlepass Instanced Rendering?

[@나랑드-i3y]

You're awesome! Thank you so much

[@readyforlol]

This IOR setup doesn't match real life IOR numbers. For example window glass usually has an IOR of around 1.5, but 1.5 IOR in this setup obviously doesn't match real glass. Is there a formula to derive what "IOR" values correspond to real life IOR numbers ?

[@PabloMakes]

Screen based refraction is a cheap way to fake it. If you want accurate refraction ray tracing would be your best bet

[@Nsuidara]

Hi, but is it Refraction ? mean, for me Refrection is like "mirror"

[@PabloMakes]

That is reflection, that is light getting bounced back.

[@gotnixmedi8461]

Thank you!

[@ShadabKhan-hz8cx]

awesome plz make more videos on unity materials

[@MelMacaluso]

I shouldn’t have watched this, now everything I make must have a tiny bit of refractive shader in it 😂

[@52RK]

Большое СПАСИБО, твой урок очень помог сделать, стекло похожее на Magica voxel. THANKS

[@GameDevNerd]

This technique has a lot of problems in real games. It will refract pixels of an object that is in front or above of the refraction surface even though it shouldn't be, and it creates weird artifacts and problems when you try to cut it off by some ugly work-arounds. Make a pool of shallow water with a couple objects on the bottom, then make a stack of cubes and shapes above water and move around the scene looking down at them. You'll see exactly what I mean, it's going to look really, really screwed up! AAA studios have been solving this problem in other ways for years, which is why you see a lot of indy games with either no refraction or a very ugly or "fake" version, or they're very limited in how much they can apply. Overall, indy devs do refraction very badly or avoid it. I'm actually working on a shader graph solution to these problems to help out Unity devs and indies. It's a bit complicated and there are tradeoffs to different techniques, but I'm reading NVidia's white paper and abstract thesis on the problem and real-time solutions to it that have worked for AAA games, so once I have found what works the best I'd be glad to talk about and explain it.

[@td4739]

DO you have an example project we can look at?

[@GameDevNerd]

@@td4739 what would you like an example of? 90% of the work I do is for commercial purposes, for my job, so it's (mostly) closed source stuff, but I do sometimes share examples and mini-projects that I do on the side. I've been busy working with DirectX12 and Win32/Windows SDK lately rather than Unity, building an absurdly fast little "mini-engine" for Windows-only PC/VR using C and C++20 ... but if there's a _specific_ example of something you're after though, I might already have one somewhere in my "source/testing" folder that I can clean up and share, or it might even be worth making a video about it or something. Water rendering is a huge subject (and a deep rabbit hole) and I've never worked on any two games that implemented it _quite_ the same way, but they do share a common "theory" for how water can be created from geometry and textures on a GPU, which is something I'll tell you how to learn ... A classic "secret weapon" for many long-time professional engine and game developers in the industry is the classic *_GPU Gems_* books by NVidia, which have free e-book versions online and articles/chapters which are widely known and widely available. The chapters _"Effective Water Simulation from Physical Models"_ and _"Using Vertex Texture Displacement for Realistic Water Rendering"_ both come to mind to understand the challenges of creating good water and getting it done for a real game. Be aware, Gems is _not_ designed to give you code/implementation to copy and paste, it's about truly understanding the theory of a rendering challenge and proven solutions. They don't assume you're using any particular engine or graphics API and they generally only give small, simple snippets of pseudo-code in a mock-C++ or HLSL style (very concise and easy to understand if you're a basic to intermediate level C# programmer). As for a full, viable water system for Unity I would suggest checking out something like "Crest" ocean system. Their Github repo has a working version of the water/ocean system for the built-in render pipeline available for free. The URP and HDRP versions are sold separately as Unity asset packages to fund the continued development of Crest. And if you look around, you'll find many other Unity assets for water systems, ranging from (mostly) total crap to a few half-decent ones, and a couple of really good ones. I haven't tried out Crest HDRP for a real project yet, but it was one of the few preexisting ones I found for Unity that looked like it might be good enough to ship a game with (customizing it to fit your game properly, of course). If you want more focused, specific examples of things like _just_ the reflection or _just_ refraction or caustics, there's also a ton of great professional articles and material out there for those things as well. Water is just a tough thing to get right and requires you to be competent with math, programming and the 3D rendering and shader fundamentals. That's why so many _bad_ assets exist for it, because people who didn't understand the problem or know the solutions just naively tried to make a Shadergraph for it and then called it an "asset". Let me know if that information helps take you in a good direction or if you're needing something else ...

[@laasanha1448]

This is the problem I've been facing and I can't seem to find a solution that doesn't require coding experience. It would be awesome to see a shader graph solution or any accessible solution at all.