Unity Shader Graph Basics (Part 5 - Vertex Shaders)

in part five of this series we're going to delve into the world of vertex shaders first we should talk about what a Vertex Shader actually is a mesh is made up of vertices these are the points that lie on the corners of the mesh and between those vertices We Have Faces which we can see each frame Unity needs to read the vertex data and figure out where exactly to show the vertex on your screen it does this through a series of transformation starting with just abstract mesh data where the vertex positions are defined relative to some mesh origin point this is called object space based on the transform position the vertices are moved into World space where they are now relative to the world origin then based on the camera's position and properties the vertices are transformed into clip space which is now relative to the screen traditionally this series of Transformations is is what the vertx Shader does in code you have to write it yourself with a bit of help from unit's built-in functions but Shader graph does all of this for you behind the scenes after the vertex Shader your mesh is rasterized I.E turned into pixels and then a fragment Shader runs on all those pixels to color your object this does open up an opportunity however even in Shader graph we have some control over those vertices during the ver Shader stage we can move them around if we want which is what we're going to do in this tutorial this wave Shader is a pretty good demonstration of what we can do in the vertex Shader in this example each vertex is moving up and down according to a sine wave but different vertices are at different points in the wave I'll create a new graph via create Shader graph urp unlit Shader graph and call it waves this time let's focus on the top half of the output stack which are the vertex stage outputs in most graphs there are only these three and for now we're going to just focus on the position output the position Vector that we slot into the output needs to be an object space as indicated by this little tag I'm going to add two properties both of type float one will be called wave speed and it will control how quick each vertex moves up and down and the other will be called wave strength which controls how far the vertex moves on the graph surface the first thing I'll do is get the seed value for the sign function as I mentioned each vertex should be on a different point along the sine wave if we just input a Time node into the sign function the entire mesh will bob up and down as a whole maybe that's what you want but those aren't terribly interesting waves to me instead let's use the wall position of the vertex as an offset value I'll do that with a position node which is set to World space you can set this to object space if you want but by using World space I'll be able to tile these meshes together in the world and the waves will connect up properly next I will add a timing mechanism by adding a Time node and multiplying it by my wave speed property here is where we decide what Direction those waves will travel in I'll use a split node to get the specific components of the position now if we were to add just the X component to the timer the ways will end up scrolling horizontally and if we used just the Zed instead they will scroll I guess this is still horizontally but the other horizontal in my example I have them scrolling diagonally which I can do by adding the X and the Zed which is what I'll do here this value can be passed into the sign node which essentially gives us the Y offset value we wanted I'll scale the offset by multiplying it with the wav strength property and then create a new Vector 3 with zero in the X and Zed fields and our y offset in the Y field now it's an offset Vector now all we need to do is get another position node this time it must be an object base and add our offset then connect the result to the position Gra output I also took the liberty of adding base color and base texture properties and wiring those up to the base color graph output in the fragment Shader stage but you should be familiar with that after watching Parts one and two of this series now in the seam view our waves should be rolling across the surface here I'm using unity's default plane mesh but you can see a lot of weird angular shapes on the mesh which isn't great there's three ways we can fix this method one is just rotate the mesh 90° that angular pattern is down to the way the triangles are arranged on the mesh so rotating it means the edges of the triangles are now aligned with the waves this still isn't great because there are still long flat lines across the surface method two is to use a much higher poly mesh there's one included in the GitHub repository that I made in blender and as you can see the wing are far smoother and more detailed the drawback being that now you need to process a lot more vertices method three is to use tessellation unfortunately urp Shader graph does not support tessellation for some reason although it really ought to by now oh well I can quickly show you how it works in hdrp tessalation is the ability to create new vertices between existing vertices right before running the vertex Shader this is super easy to implement just head over to the graph settings tab and take the tessellation setting which adds two new output blocks we'll need to change the first position node to use absolute World instead of world because hdrp uses camera relative rendering then instead of adding our offset to the existing vertex position let's remove these two noes and connect the offset directly to the new tessellation displacement out outut then we can input some number to the tessellation Factor output a value of one doesn't do anything to the mesh while values above that will subdivide the mesh into smaller pieces by adding vertices and faces between the existing ones let's use a value of three as you can see the waves are a lot more detailed now the tessellation Factor can go up to the hardware limit of 64 but that's over kill for our needs hopefully this has given you some idea of how vertex shaders can be used to animate the shape of your mesh play around with it and see if you can come up with some interesting effects just within the vertex Shader in the next part we'll finally delve into lighting and see how Unity handles physically based rendering thanks for watching and until next time have fun making shaders

Channel: Daniel Ilett

Views: 8,722

Keywords: unity, shader graph, unity shader graph, shader, urp, tutorial, shader tutorial, shader basics, beginner tutorial, vertex shader, fragment shader, vertices, vertex, mesh, mesh vertices, water waves, waves, wave shader, vertex waves, tessellation, hdrp tessellation, tutorial series, shader tutorial series, shader pipeline, matrix transformations, space transformations, transform component, camera component, shader graph basics

Id: 2KSLO9JnxHA

Length: 7min 25sec (445 seconds)

Published: Tue Feb 13 2024