How to make ZOOM Shader Effect! (Unity Tutorial Shader Graph)

hello and welcome i'm your code monkey and here let's learn how to make a simple zoom shader so it zooms on the area just behind the object now i was actually researching this topic in order to make a video to teach you multiple ways on how you can make a zoomable reference scope i thought this method would be quite easy but as it turns out there's one extremely tricky part of this effect that took me a couple of hours to figure out so i'm making this video separate just in case someone is searching exactly for this effect and then stay tuned for the riflescope video coming soon alright so here i've got my demo scene i have it set up using just urp these assets are from the cintiq battle rail and the city pack there's links in the description if you want to get it so just a very basic demo scene over here i've got a simple sphere right in front of the camera and i've got a script just placing it along with the mouse so as i move the mouse i'm moving the sphere so that's it very simple now the goal is for the sphere to work as the zoom area so if i put the sphere up there on top of that building i want to zoom in on that building okay let's begin by making our shadow graph so let's create let's go into shader go into urp and we're going to want to make a new unlit shadow graph let's call the zoom shader okay here's the empty shader now the most important thing for this effect is getting the colors behind the object and for that you can use the same color node so if we just put this and we connect this directly into the base color and as always when working with shadowgraph make sure you hit on save ascent and just create a material and just apply this material onto the sphere and just like this now we actually see the very first issue that i encountered so it kind of works but as you can see it's extremely buggy look at that it's kind of seeing behind it but it kind of stays behind it doesn't update all the time so it's a bit weird so this one also took me quite a while to figure out but this one is pretty simple just on the graph inspector going to the graph settings and over here just on the surface instead of making it opaque make it transparent so just hit on save asset and yep there you go now it works perfectly so now you can't see anything about the sphere because the entire sphere is being tinted with the exact same colors behind it so right now we've got a completely see-through sphere which means that with just this we already have the colors behind the sphere now all we need to do is just zoom in on those colors so the way that we can do that is by adding a telling and offset node this one outputs a uv input which is going to be our input on the scene color and if we just put it like this we get this very weird effect so now we want next thing we need is over here the input on the italian offset so the input uv and that one we want that to be the position on the screen so we can get that with the node screen position so this gives our uv and this one is going to be our input so if we hit on save yep there you go now we're back into normal so we're just doing a commonly see through sphere now the next thing that we can play around is over here with the telling node so if we put it on one one then we get the exact normal scale now if we put it at more than one say 1.1 and hit on save and yep now that one is 10 smaller so if we go above one then essentially we're zooming out and if we go below one so let's say 0.9 then with this we are essentially zooming in if i put at 0.5 to make it a lot more intense here we can see yep it is indeed being quite a bit more zoomed in so let's make a property so we can easily modify this so just on the blackboard let's add a new one let's make it a simple float for the zoom amount then let's give it a proper name so underscore zoom amount and for the mode let's make it a slider going from let's say just point one to a maximum of one and you just connect this one into the tally node okay so with this if we now look in the shader we've got our nice slider something like that as you can see as that one goes down it is indeed zooming in now that doesn't make much sense as the zoom amount goes down it's zooming in so it makes more sense if it's inverting so let's do that so just here just add a one minus node very simple just connect this one so this one pretty much inverted so with this yep if we bring it down actually let's make the minimum at zero so if we bring it down to zero then we've got our normal see-through sphere and as we increase yep we are indeed zooming in all right so far so good however here is the part that took me quite a long time to figure out as i increase the zoom you can see that it's not really zooming in directly it is zooming in but it's zooming in like from the corner so the image is essentially being stretched from the corner so as if you were in photoshop and you grabbed on this corner and increased the size so it does zoom in but it is not zooming in directly on top of it so in here as i zoom in you would expect this area to be zoomed in but nope it goes down into the corner so this is the main issue and the solution to that is we need to play around over here with the offset as i increase the zoom amount it's essentially increasing the image to the right and up so that means that over here we need to also increase the offset as we increase the zoom now in order to see what the offset is doing if i change the offset from 0 to 0.1 and i hit on save look at how this image changes and if there you go it moves to the left so as i increase the offset on the x it's going to move the final image to the left as increase on the y it's going to move it down and if i go into negative numbers and goes the other way all right so now we know that we need to modify this based on the zoom so the question then is how much now if we do some simple testing we can see that if we put the zoom amount at 0.5 then over here we offset by 0.25 and 0.25 if we do that yep it is indeed perfect so right there it is zooming in directly on top of the middle house so just with this it seems like it's correct however if i now move the sphere to the right you would want to zoom in on that little door there so if i go there nope doesn't actually zoom in on the door so that means that the offset cannot be just a fixed value it also has to be based on the screen position so the next thing that i tried was really just connecting the screen position onto the offset but if you do that nope it does not actually work gets a weird strange very different result so that's not the solution this was the problem that took me quite a long time to figure out and the main issue is that the way that the shader works is on a per pixel basis meaning that all of these nodes like for example the scene color this one is working on a per pixel basis so for example it goes through this pixel right here on the sphere and gets the color of the scene right behind it then runs the exact same logic on this pixel this one this one this one and so on so that means that the whole sphere has different values if i connect the screen position directly into the base color you can see exactly what i mean there you go you can see that the entire sphere is nothing in just one shade but this corner here is much more green this one corner here is much more red so that means that every single pixel on this sphere has different values whereas the final thing that i realized for this to work is that we need to have all the pixels all the pixels on the sphere they need to run the same logic based on the object's center position and not on a per-pixel basis so after much trial and error the only option that i found that worked was passing in the object screen position directly through code so here on blackboard create a new vector2 let's call it the object screen position then just make sure you've got a reference and now here you take the object screen position and you multiply it by the zoom amount and then you take this output and you fit it into the offset okay so this is the shader now we need to pass in the object screen position through code then i have this very simple script it really just takes this transform position use the camera to convert a warm point into a screen point and then just take the screen point which is set in pixels and just divides it by the screen.width in order to get a normalized value so then i've got a normalized value for the screen position and just send it into the material so with this if we now test so here i am in the center it works just as usual but now if i want to go into that corner there and as i go any up there you go it does indeed zoom in directly on that corner and if i go into the top of that building it zooms in there they shop down there yup it zooms in so everything works perfectly alright awesome so here is the shader fully working i can look anywhere and everything zooms exactly as intended so if i want to zoom in the center it works zooming on the corner and everything works perfectly okay so hopefully if you were looking for how to do this just like i was hopefully this video helped you so you don't have to spend all the hours that i spent going crazy trying to figure all this out as an example here is a shader with all the approaches that i tried while researching this so i tried remapping the screen position then splitting to grab the x y and z and do different things with it i tried to use the object position object scale and tried to do something with it doing lots of things with the view object world and so on so i try tons and tons of possible approaches before i found the right method and here is the final result working great so if you come across this issue then hopefully this video helped you now stay tuned for that upcoming video where i will cover three methods for doing a rifle scope where one of the methods is this one alright hope that's useful check out these videos to learn some more thanks to these awesome patreon supporters for making these videos possible thank you for watching and i'll see you next time [Music] you

Channel: Code Monkey

Views: 18,168

Keywords: unity scope shader, unity scope zoom, unity rendertexture, unity zoom shader, code monkey, unity zoom, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity, game design, game development, game dev, game development unity, unity 2d, unity 3d tutorial, programming, coding, c#, code, software development, learn to code, learn programming, unity tutorials, how to make a game, unity rifle, unity scope, unity scope tutorial

Id: IC5JoS0wX0s

Length: 8min 59sec (539 seconds)

Published: Mon Oct 25 2021