Intro to Shader Graph in Unity (Part 2 - Textures and UVs)

in part one we learned about the Shader graph interface and we made a very basic Shader that lets us pick a color for an entire object in part two we are going to learn all about textures and texture mapping a texture is basically just an image it's a 2d array of color values and we can apply those color values to objects in lots of different ways usually that involves mapping the 2D texture to a 3D object and just painting the object with those colors but we can use texture data for color gradients based on the y coordinate of the object or we can pack a Sprite sheet animation inside a single texture and flip between each individual Sprite or we can use textures to modify the way lighting interacts with the object surface but I'm getting quite far ahead of myself basically you'll be using textures a lot right now I'm going to use a texture to change the surface surface color of the object but that raises an important question where do textures come from well when a mummy artist and a daddy artist love each other very much I I can't say that you can make textures yourself using practically any image program like Photoshop but there are great sources of free textures on the internet the two I recommend most are ambient CG forly ccz textures.com which hosts a bucket load of realistic textures for three D and Kenny who creates an absolute Deluge of Sprites for 2D among other assets both creators use the cc0 license for most of their stuff which basically means we're free to use them for fies and for commercial purposes I'll grab something from ambient CG like this grass texture but this tutorial will work with any texture let's build on our work from part one by duplicating the color example Shader and renaming it texture example we still have our base color property from before but I want to blend that color together with a texture I'll add a second property by clicking the add button and this time I'll choose texture 2D as the type let's name it base texture over in the settings window for the property we can choose a default texture so I'll click the Little Dot next to the box and find my texture as we did with the base color property we can drag the base texture property onto the graph however we can't just connect this texture node to the base color output just yet when it comes to reading textures we need to know where to read the data from to do so models have some attached data called UV coordinates which are a mapping between the vertices of the mesh and some position on a texture setting up UVS on your own custom models is a topic outside the scope of this tutorial but unit privative measures do have UVS already set up for you the cube Maps a texture to each of its six faces the sphere tries to ramp the textures horizontally around the equator but there's a lot of distortion as you get to the North and South Pole Unity prevents you from connecting a texture node directly to the base color output because it wants us to specify which UV coordinates we want to use to sample the texture we do that using a node called sample texture 2D to add a new node onto the graph you can right click and choose create node or just press the space bar and the node dialogue will open type sample texture 2D and pick it from the list just be careful because there are lots of similarly named nodes this node appears a lot more complicated than the property nodes we've used so far on the left it takes a texture as input so we can go ahead and connect our base texture to it and and a set of UVS by default it uses uv0 which is the first set of UVS attached to the model like the ones I mentioned for uni defa Cube and sphere to put it simply we sometimes don't need to manually attach UVS to this SL it's useful having the option here though because it's possible to modify UVS or generate entirely new UVS directly inside the Shader the node has several outputs but don't let that intimidate you the top output is rgba which is the full color of the texture and the other four outputs are just the individual red green blue and Alpha transparency components of the color to combine this texture and the base color from the first tutorial we can multiply the two together using a multiply node this is the most basic way of combining colors which takes both red values and multiplies them together then takes both green values and multiplies them together and so on the result of the multiplyer can be outputed to the base color block on the output stack let's click save asset in the corner and return to the scam view to see our Shader in action let's try something a little bit more exciting earlier I mentioned that UVS can be manipulated inside the Shader for all kinds of effects so let's scroll the UVS in a particular direction over time for this I'm going to add a new Vector 2 property so I will name it scroll veloc with this property we can control the scroll Direction and we can use a larger or smaller Vector to control the scroll speed I'll set mine to a value of 1 comma 0 by default I mentioned already that the sample texture 2D no takes a UV input so we will be passing something into this pin let's drag the scroll velocity property onto the graph then I will right click and add a time node time time is an extremely useful node for animating within shaders as it provides a few different time values although the one you will probably use most often is simply labeled time which is the number of seconds since the scam was loaded by multiplying score velocity and time we end up with a vector that grows and grows in the same direction over time a bigger initial score velocity just grows faster than a small score velocity this is offset Vector which we will apply to the measure's default UVS remember these default UVS are the ones we are currently using to sample the texture luckily Shader graph has a node that makes it easy to apply offset vectors like this it's called tiling and offset if we connect the output of the multiply node to the offset field then this node calculates a new set of UVS for the offset applied we can just leave the tiling values at one but changing it would have a similar effect it would zoom in or out of the texture the last step is to connect the output of the tiling and offset to the UV field on Sample texture 2D so that we can sample using the new scrolling UVS the preview window will start scrolling our texture so we can see the changes live that's one of the powerful features of Shader graph seeing your changes applied in real time for faster prototyping remember to hit save facet in the corner back in the scam view it's a similar story the textures on our Tes models will start to scroll it might look a bit strange on the seams though that's it for this part the next part of this tutorial will cover transparency and Alpha clipping thank you so much to my patreon supporters who are flashing on screen right now you can get extra bonus goodies like premium Shader assets and early access to videos and tutorials if you sign up now until next time have fun making shaders

Channel: Daniel Ilett

Views: 2,257

Keywords: unity, shader, unity shader, gamedev, shader tutorial, unity tutorial, shader graph, unity shader graph, shader graph tutorial, textures, texture shader, uv, uvs, uv mapping, texture mapping, texture sampling, sample texture 2d, tiling and offset node, fragment shader, scrolling texture, uv scrolling

Id: jVNC0Z2p9qw

Length: 8min 2sec (482 seconds)

Published: Mon Dec 04 2023