Unite Europe 2016 - A Crash Course to Writing Custom Unity Shaders!

than you or thank you to anyone who's not Dutch um I had to walk on stage and kind of do a Hollywood thing apparently which is kind of weird but yeah cool hi um so this is going to be an hourong talk which is a crash course to writing custom Unity shaders exclamation mark um now this talk is kind of going to be a intro level to writing un shaders for many many reasons I'm going to write some code I'm going to show off various crazy silly things um so hopefully everyone's okay with that and you're in the right place um so firstly put your hand up if you are a programmer or you copy paste code you okay okay put your hand up if you're an artist of any variety okay put your hand up if you're a game designer it's basically your job to annoy everyone okay put hand if you working Q&A technically everyone should put their hands up but that's fine can you hand up you work in audio okay are you in a band uh well I used to you used to okay that's fine so every time I ask that question someone who works in the game industry with audio always puts their hands up and they're in a band it's like a global thing your company doesn't know well they do now so yeah um so my name is Andy uh I'm a Unity of angelist my family asked me so that's Tom Cruz stuff which is a Scientologist they're very different things so Tom Cruz hangs out planes and sits on top of buildings which sounds fun but I actually do other stuff uh so my name is Andy I'm on Twitter it's basically my name but minus a space and I'm a Content evangelist which means I'm happy with my job no it means I basically um create content and use unity and work at unity and understand what we're doing then come and educate and show people how to do wacky things and interesting things for Unity and then take what people say what they like what they don't like what games they make and sort of like fun it back into the company so I'm kind of that weirdo middleman thing I don't go knocking on people's doors asking if they want a leaflet um and I do this in Europe Middle East Africa and Russia which is just a few small places so shaders so I'm guessing but everyone here either doesn't know how to write shaders or they want to write shaders or they're very scared of writing shaders um yes okay so I'm going to be talking mostly about shaders put your hand up if you've written a Shader before okay put your hand up if it turned pink it's just about everyone okay so this is going to go from kind of the barebones basics up into doing many different things with shaders so some people already know bit some people won't know bits so it kind of covers that whole entry point so hopefully before this talk what the is a Shader after this talk I know Shader Kung Fu um that's basically my goal of this talk um so most people when they think of shaders they see pink and basically pink is kind of the error Shader that gets swapped in for if something's wrong with your code or something's gone a bit wrong if you're making a game that's entirely magenta then it's a great Shader to have and a great trick um but most of you are not making pink Minecraft so ultimately you don't want things to be pink and a lot of people Google like shaders beginner shaders 101 and they see all sorts of crazy algorithms like this which there's some familiar things like polygon and vertex a lot of people know what these things are but then you get to stuff like this you're like okay it's it's getting Hefty um you get to stuff like this and you're like I just want to make things look nice and pretty why do I need to learn this and then you get to stuff like this and then like uh I don't still don't know what gorad is um someone here is probably thinking yep yep yep that sounds all okay that sounds good but uh basically this talk is going to be a kind of a crash course without actually relating to kind of these big algorithms it's going to be a very simple barebones Basics and because it's being recorded no doubt someone on YouTube will disagree with everything I say so but that happens in every YouTube clip so I resorted to Wikipedia for useful advice um so it says a program tells a computer to draw something in a specific way which is actually pretty damn accurate for Wikipedia so well done whoever filled that bit in and ultimately that's what I'm going to be talking about how to make things appear on screen in a certain way using Code so but why learn Shader programming the buil-in shaders and unity are for generic uses therefore things like this has lights this does this they're not like grass fur cat Shader dog Shader um underwater cell shaded Wind Waker Shader they're not very specific towards specific games they're more for general purpose in General Uses you can create unique and custom visuals if you know how to write shaders you can create all sorts of interesting wacky amazing things you can do some really weird stuff and most of this talk is going to be really weird stuff optimization if you know what's going into the Shader you can then take bits out or replace bits so actually understand kind of what's going slow I've seen so many so many games that use very expensive uh Global illumination really complex shaders on like an iPhone 4 and they're like why does my game run slow and it's like well you does your match 3 Clone really need Global illumination probably not so don't use it um but if you actually understood how shaders work you can then strip that bit out Shader skills a gold dust probably not after this talk it probably become silver dust but generally When I visit a studio I said how many people know how to write shaders and it's normally like one in 10 actually has someone actually understands kind of this so but after this talk it's kind of ruins that like statistic um so if you know how to write shaders you it's a it's a beneficial thing they aren't actually that scary so I'm going to break it down into saying these are basically your variables in a shade these are basic your functions in the Shader and kind of similar things that you can um understand from other scripts or other programming uh forms and they're actually really fun to play with so I'm going to have a lot of fun I'm actually hate I actually hate PowerPoint a lot so a lot of this talk is actually going to be in the unity editor so Unity shaders they're written using Nvidia CG C for graphics but they're wrapped in unity Shader lab so if we take a standard Shader like this or just a normal Shader it basically it's built up into kind of like two chunks you have CG which is the middle block and then Shader lab which is wrapping around the outside edge that's basically because CG needs to send information to Unity or the unity editor in display and then that has to send information back into CG so C Shader lab is kind of like a middle thing front end like almost like a front end developer is and CG is kind of like a backend developer driving a lot of sort of like key uh values now I'm going to be talking about three different types if I actually have time which probably I won't um vertex and fragment shaders surface shaders and image effects um and a lot of people always get kind of confused what's the difference between vertex and fragment Shader and a surface Shader so without me showing big fancy pants algorithms which is probably the more accurate and probably better thing to do I'm going to use a car example so the vertex and fragment shed is kind of like building up a car from scratch and then you can kind of choose what things you put in like if you want so so you can see here she's installing a steering wheel but of course you can build a car without a steering wheel if you choose um of course on the right hand car buying a brand new shiny thing you can take out the steering wheel but then it's uh difficult to drive if you're racing go-karts one on the left you could build a go-kart that's pink has three wheels and a squeaky horn from scratch and integrate those things but if you took this uh I don't know cars what is it an L Lexus okay uh you can take this Lexus if you try and drive it on a go-kart course or a go-kart track um it's probably not going to fit and not be too good that's kind of like a Bare Bones concept no one stand up and said wrong yet so that's a good sign um so yeah I'm going to be talking about both of those things and some people get the Lexus and try and dve D it on like an iPhone 4 or a lowend tech is kind of a bit wonky whereas vertex frame you have to build your car or build your Shader from scratch but you can put different things I'm going to show both of these um sort of methods so let's talk about this one so the kind of shade of flow is you need to gather your needed information so in this case um measures so robot Kyle which is like the most downloaded asset store asset I think um that has a model which has various data in so this is such as like uh the vertices the normals the UVs all sorts of things like that so you need to gather that information for the Shader to use step two you then need to build it so in this case in the vertex function then building this object from this data that you have such as the vertices the normals the positions and things like that kind of think of it like you go to a place and you buy kind of parts for a house and then this is then you like build the house somewhere in the world now the vertex of fragment is basically the process of taking this and taking a snapshot and putting it on the screen somewhere because you need to be able to get it to draw so basally sending data to the screen so you can see we have our um robot Kyle and you can see you have like the old Unity blue background as well telling that it's being drawn on the screen then the last step is the fragment function you're then color in it screen pixels so basically you go to each pixel and you say this is white this is red this is yellow this is where you can have fun with actually coloring it in so let's say for example you're building a house you buy all the parts you then build your house you then take a photo of it and then you get a pen and you sort of color in kind of that photo and put it on Instagram or whatever um so yeah that's kind kind of the Rough and Ready process without algorithms and then it's done hooray your object is rendered and it does it for this each object that has a Shader as part of this image effects as well they're also shaders and basically everything that you see on screen this is basically my this probably took me more time than anything because PowerPoints a nightmare to actually get boxes to align with stuff um so you have your object data which is the stuff like position and normals and things um you then pass that to vertex function you build your object you then send it to the screen and you sort of color in different things in the pixel Shader uh or the pixel function and then you then render your object now at various points you can also pass in custom data and most of you have probably done this in some form but not realized it so custom data is things like you plug in a texture or you you have like a little slider value to make something shiny or you have a script that modifies a value in the Shader and stuff that's all custom data that hasn't come with a model but it's instead been passed through via script via an animation or basically anything you can pass in custom data to the vertex function the actual building which is how you can get shaders that kind of like animate and stuff like this or waves that kind of do this or fragment to basically get things to kind of look in a different way and a different style everyone okay with that so far or everyone here is Dutch and they have no idea what I've just said cool thank you V okay D yeah I hate PowerPoints so let's do stuff okay so I have a cat um is it easier this skin or like the other one one hang on uh that's probably easy to see right cool nice okay so we have here a cat and this cat is um has a material on it and has the standard Shader which is unities built in Shader that automatically is put on each material when you create one and you also have I also have here three objects one is a sphere and one is a cube of course because everyone everyone knows this and uh one is a quad and the quad is basically going to represent if I took the cat and kind of rolled it out as a flat thing so when I manipulate this texture and when I make the texture bounce or animate basically you can see kind of what it's like if it's uh rolled out with a rolling pin um poor cat so you can see here we have four different objects and they're all using the same material so as I manipulate things in the Shader you'll be able to see what it actually looks like in a sphere a cube on a quad and on the actual object that's intended to be on all in real time now everyone here I hope everyone here at least knows this window down here so when you have a material on an object whether it's a mesh render or skin mesh render or Sprite render or something like that you have this material lookup window and this is being driven generally by Shader lab to basically say what you can slot in and we have the standard Shader which has different sliders you can then like set things to be like uh like like red cats and stuff like that and you have all these different exposed options now Unity has built in like a ton of shaders I actually can't remember how many in here and you can use all these things these are the generic built in use cases but we want to create a custom Shader from scratch so to do that we go down into our project folder go to our shaded talk materials well the folder I call shaded talk materials and underneath Shader this I think this is from M 5.3 or 5.2 um you actually have four different options of kind of templates to get going so you have a standard surface Shader like the car you're buying a brand new Lexus um unlit shaders is kind of the one that you build up from scratch you integrate the pieces an image effect Shader is suited for an image effect and I don't know anything about comput shaders so yeah so instead I'm going to create an analy Shader to begin with and it just creates it as a simple asset I'll go down here let's rename it someone give it a name dog Shader what no okay I'm not going to crowdsource names um okay so what's cat in Dutch is it literally cat really wow okay uh so cats uh unit uh Shader yeah okay cats unite Shader so what I could do is I open this up and I'm going to use Sublime um and I'm going to set it to C for graph uh C so you can actually see no and got that joke but that's fine um so we have here basically a builtup Shader that has a texture you can assign and various other things now what I'm going to do is I'm going to delete all of this I'm not going to start from scratch and I'm going to build up this Shader with all the sections piece by piece by piece to explain how it works and I'm going to build up a very simple Shader to begin with one which is just a texture and a color but then I'm going to plug in all sorts of weird stuff like turn into cheese and get it to animate and do all sorts of pulsing and stuff like that are people okay with that vindar I mean thank you so you begin with writing at the top of your Shader in Shader lab Shader that's a pretty good start right and then here you can then write what the Shader name is or how it's going to be displayed in unity so in this case I can write custom SLT talk SL unite slash was it cat Shader if I can type properly now if I save this and I go back into Unity if I go to my cat and go down into my little material uh drop down you can see here that I have custom now I already have some custom shaders that are pre-written all in the folders if I go to talk oh talk unite cat Shader and I can then set this Shader to be part of the cat you can basically choose it to be in different files otherwise if we didn't do that for all these there would be like a list of like 500 elements or whatever it is and everyone get really angry so yeah we've successfully made a P cat well done if you this is sort of the style of game that you want you can leave now and you basically achieved it so and no one left that's a good sign I said that once and someone once left and I was like oh okay what a boring game so the next thing that we need to write in Shader lab is properties so properties are basically your public variables that you've probably been plugging data in and out of um for any other material or any other uh yeah Shader material so in here we can type in different variables so if I write sort yeah like variables so in here I can add different little texture slots that you can then use so for this one I'm going to write a main texture let's zoom out a bit so I actually have some space I can then set that's the reference name um I can then set what is public name is so if you work with artists you can actually set up public name saying this uses the r Channel or this uses the alpha or don't touch this value here or something like that um so I'm going to set main color and it uses RGB or let's just say RGB uh hello just to prove that it's not going to autofill and stuff um I can then set what type of variable it is so in shaders you can have color you can have like a 2d which is texture you can have a float you can have a range between two values and there's a whole range of other things which are on our um uh documentation and then just like any other variable I can then pre-type it with some information so I'm just going to say if nothing's there then I can just default to yes I'll buy Sublime um I can then default to everyone here uses Sublime I can then default to um like a white texture so it doesn't like render pink and then I can do this also for color so let's do this with color uh let's do this for what's color in Dutch is it literally cooler k l clear thank you thank you well um clear so here I can then set this um oh actually oops so that's a texture for sure and then this one's going to be a color so textures you can pass in 2D textures which are flats or you can pass in Q Maps as well um I forgot that and then here I can then Auto set it to be like 11111 which is basically white so if I go back into Unity hey Presto we actually have main color hello and clue awesome we've already done lots of stuff so if I click this little section here I can actually set different colors already and shade a lab then automatically allows me to have a Color Picker range although it doesn't actually do anything cuz I have these values coming into the Shader but they're not actually doing anything with the object and I also have a little texture slot here so I could set this texture slot to basically be like anything I want like like bricks and it doesn't even render because I'm told the bricks to render okay so let's go back to the Shader and type more stuff because currently this Shader is really boring so the next step that we do is after we have our variables is we create a sub Shader now a Shader in unity can have multiple sub shaders so you can have something a bit like this and you can use sub shaders for having different values depending on things such as like different uh Target platform so let's say for example you're releasing a game on iPhone kind of low-end iPhone uh kind of like uh Xbox One and then kind of like a desktop like beefy desktop obviously on an iPhone 4 you're not going to want to PR compute like lighting and GI and all these sorts of things but on like Xbox One you do and then on PC you will do but you want to turn up to 11 and things like that you can actually create a subshader for different properties in this one thing now most I think just about every student Studio I speak to or I meet in my job uh always splits it into like mobile version of the Shader and this so they have their separate pieces here and there rather than having one massive long Shader with like a billion things in it so but you have that option so I'm just going to delete sub Shader and just use one because I'm not going to I'm not going to build the Shader to anything but I just want to use one so the next thing that we do is inside this sub Shader we create a pass now everyone sort of use passes it's basically a way of taking the data and then drawing it to the screen now in a Shader you can have multiple passes so I could have a pass a pass um a pass and what they will do is inside the first pass it will do various elements second pass it will do some more things and the third pass it'll do some more things but that equates to one draw call two draw call three draw call it multiplies the number of things being drawn and then you have all the stuff inside the passes like shadows and things like that so I've seen some people go wild and put like like 10 passes in one Shader and it's like uh um you want to get this running on lowend Android uh don't so my general device is try and use as few passes as possible or use all sorts of other tricks so there's some instances that you would have to use multiple passes for that you can't really get around and I'll show those a bit later on but for the time being I'm going to use one pass cool right so that's basically Shader lab bit done for the time being there's a lot more you can plug into and just like with anything in un we have lots of magic methods that do like a billion things automatically that are somewhere in our documentation um but next we're then going to write the CG bit so we've done all kind of the front end bit we've got our uh data being shown we said this is going to be a past now we can actually do the meet and veg and actually kind of generate stuff so in this one we're going to open CG and close CG so this is basically a way of saying okay we've kind of we're now going to start rating SE for graphics so think of it as like in a Shader you you're basically writing kind of two sort of languages and they're sort of talking between each other as well no one's cried yet so it means that I'm getting everything right um so at the beginning of this we need to create two functions in the end so we need to create the vert function or the vertex function and we need to create the fragment function and the vertex function if you can remember when I highlight uh when I said earlier on is basically build things so it's going to Bas build the uh object so this is basically going to take the data that you're giving it and it's going to build it somewhere in the world in a position fragment shade uh fragment shade or the fragment function is basically going to then color in color in so basically I end up needing these two functions now the first thing I want to do is basically get data from the object to then use in this case we're going to write struct app data and in this struct we then pass in the values that we want to get and we can choose what we want to retrieve so we could choose to retrieve something like from the objects from the objects such as like the vertices choose to pull the normals we can choose like the if there's a Vertex color you can choose to pull like the UVS and stuff like that and you basically choose so if you're not going to use the normals at all you don't have to include the normals in sort of the pull and for the time being I'm going to import in the vertex the objects uh vertices and also the UV so I can wrap a texture around it and I can start off by writing this so I'm going to write it out and then I'm basically going to explain what this means so float 4 vertex uh position and then float 2 uh UV texture coordinate zero so this is a way of storing data within the Shader so I'll explain so float 4 and Float 2 and things like that but here is basically our name for what we're importing in so I could call this Vertex or uh vertex points from mesh or basically anything I'm just calling vertex just for Simplicity this is basically kind of the variable name next is basically what I'm going to pull so the variable type and then the next thing is kind of what data struct or what data format it's stored in so a float 4 is basically um for uh values and a float two is basically uh two Val vales and they can be different things now a position is of course going to be XYZ W CU I want to get the XYZ W of each point and then the UV is basically to be X and Y and you can get a normal of X and Y and you basically can pull different things so for a free Unity t-shirt which everyone was already given um so they've already distributed it what would a color be can anyone guess go for it float 4 yeah and what values would those be yeah yes so a color would be rgba and that's how it stood hopefully that sort of makes sense so the float bits I'll explain a bit later on when I've got more code down so we pulled in all our stuff to use the next thing I want to do is I want to then build up my um building function so this is the one that's actually going to build my object now the first thing that I need to do really in CG is actually Define what the vertex function is going to be and what the fragment function is going to be later on so I can set up pragma vertex vert so the vertex function is going to be called vert but I call this a Vertex function for example actually why not let's do that and then this one's going to be fragment uh fragment function so we're basically saying okay we're going to have a Vertex function that's going to build the object and a fragment function to then uh color in the object at some point and there's another thing you can also do you can also include different things in different libraries or CG includes so in this we can actually include let me go to my cheat sheet hopefully it doesn't run out of battery or I'm basically toast um the unity CG C file which has lots of helper maths and helper functions that we can actually use to do different things there's also one for like lighting there's one for like uh all all sorts of other things and you can actually download all like the libraries and all the built-in Unity shaders on our website and play around with them piece them together understand the source and chop and change them so you can then include those things there so we defined our vertex function we divined our fragment function so what I'm going to do now is I'm then going to create them so we have our vertex function and the vertex function is going to Output or return to the vertex to fragment function but I'm going to abbreviate to v2f as most sort of like uh Unity shaders you'll see it's called v2f for the actual taking it and sending it to the screen and we're actually going to pass into this in the parameter um app data so we're going to take the app data that we've gathered or like the house pieces and actually now build it this is basically the weirdest function in the whole thing and everyone's being so calm and this is amazing thank you so what we're going to do is we're going to uh return the vertex of fragment function or ver vertex fragment struct and inside here we're then actually going to build up our object but the next thing that we need to do which is probably one of the most important things the most important part of this whole process is uh this piece here so the vertex function is going to do various bits and pieces is and it's having fun building objects it's then got to funnel it into kind of little funnel and then eventually go to the fragment function so you need to say what we want to take from one thing to another thing and in this case we want to take the um object's position and we also want to take the object's UVS to then color it in and the cat's still pink don't worry cat we'll be done very soon so what we need to do is we then need to create the struct of struct v2f and then here we then are going to position I'll explain what SV underscore position means it's a bit of a weird uh thing and there so we're basically going to return a position to the screen and then a UV of the object to the screen as well now svore position from what I could understand is um it's something to do with DX platforms like one of DX platforms came out and said oh you have to include it and I think PS4 does as well and if I deleted this and didn't include it the Shader would work on basically everything in unity except for PS4 and I think DX 9 or DX 10 or DX 11 one of those or you can write three characters and then it would be fine so just write three characters and if you're releasing shaders like the asset store or whatever into the wild write that otherwise you'll get like a really angry message from some PS4 developer and oh you didn't write three characters why are you so lazy yeah so what we can then do is we can then build it up so we can then do this is actually the fun bit so we the fun bit yeah uh we can then build our object so inside here we can then say the output of the position equals something and then the output of the UV equal something so the position we need to get the positions of the ver objects vertices and the UV we need to get the objects UVS and then basically pass them to the screen so here I'm going to probably write the weirdest bit of code you you will see today and that is we're going to multiply because basically because uh we using CG Nvidia has like a ton of helper functions like lurp and all sorts of things and Nvidia CG um nvidia's do mentation for this is actually really good so you can see here that the CG standard library has all of these things you I mean you're probably going to be very familiar with some of these like ceiling or uh uh like lurp and length and stuff like that and basically you can use all of those things automatically so what we're going to do is we're going to multiply the um okay this is a really weird thing I'm about to write Unity Matrix MVP I originally asked someone a very talented shaded programmer does that mean most value player and they were like you're an idiot so yeah um we're going to multiply the positions by MVP now MVP is kind of a unique thing what it stands for is model view projection so it's basically get the model it's going to get the view from the camera it's going to get the projection from the camera as well and then that's going to send to the screen it's why if I go to here and you okay this is going to look a bit weird it's why if I go to here and now my camera is of a perspective basically this object's being presented to the screen from a perspective depth however if I go to here instead it's orthographic model the model and the view and the projection is basically going to equal it to being orthographic with no Zed depth so it's basically going to take into account kind of like how the camera is built and what sort of data the camera is going to be sent and things like that and we have all sorts of other ones like unitym Matrix MV for just the models view without the projection and you have all sorts of other things but basically that gets it to the screen that's probably the weirdest bit of code I'm going to write everything else makes sense everyone okay so far no one crying yet wow you're so quiet this is amazing or everyone's just waiting for the party yeah so the next thing is we need to take the UVS from the uh fragment and send it to the vertex this is a really complicated bit of code we're going to take the input and just do that there we go Tada so that's it we built our object now what we're going to do or after I finished up this sort of bit and then we test this Shader is I'm going to come back and I'm going to start messing around with it and moving all the vertices and doing all sorts of crazy stuff what I'm going to do now is I now need to draw it to the screen so in this is the oh uh draw the pixels to the screen so color it Inay so here I'm then going to return a fixed four and I'll explain the difference between float fix and fixed in a second uh it's the fragment function and here we're passing in that v2f data and then at the end it's kind of the end so we have to write svore Target to basically Target it to the screen it's just something have to put in there otherwise everything completely breaks now this function is a bit weird so whereas with this we're passing data in and then data's then being passed out this one is kind of the end so we then need to return a four values so rgba we have to return a color for that pixel now the best way to describe this is is kind of like a glorified for Loop and someone here is going to get angry at me saying that so the vertex function is kind of going to go through all the vertices of the object and basically cycle through them and update their positions on the screen screen so that's where you can modify them and then they can bounce around fragment's going to go through all the pixels and then color it in depending on that so that's for example why like an image effect that's taking up a full screen is going to be costly because it's going through pixel pixel pixel pixel across whereas if you look at say like the cat it's then going to be like not the full screen and stuff like that that's kind of the reason why so when I get to here I then have to end up with a end color of something or some form so the next thing I need to do is then take the texture and take the color and then combine them so I'm going to get the texture and then multiply the color by the texture now I've imported these things in here but that's been in Shader lab so you can see here underscore main texture and underscore color but we need to get these things into the CG part of our code because basically they're in Shader lab and CG needs to know what they are and needs to know what this data is this is really easy to do all we can do is we can then go down to here now It'll recognize kind of this underscore or basically recognize this reference so we can go down to somewhere inside our CG and then write uh float to nope it's a color so it's a float four uh underscore color because the color is coming as rgba as the gentleman I can't really see any one yep person did that yeah and then the next thing we need to do is we need to sample the texture so we're going to write sampler 2D because it's a 2d texture and bring in the yeah that's basically all you need to do and every time you add something to the properties you want to use in CG you then have to reimport it into the CG part so next now we need to do this so we then need to get the we need to get the uh texture and then basically store it as an rgba value to then return so in this I'm going to write a float 4 rgba and then this is going to stand for uh texture color and this is going to use a function in CG called text 2D where you pass it in a texture you pass it in the vertices you're going to apply it to uh the UV and you sort of combine them together so in this it's going to be underscore main texture um and then in. UV so we're going to take the texture and then wrap it around the object and then draw that to the screen and then next thing that we're going to do is remove end color and actually just tell it to do texture color multiplied by so we're going to get pixel multiply it by can you guess what I'm going to use there's literally two options yeah color thank you so thank God for that we basically have written a Shader now when you create a brand new Shader from scratch um in unity it automatically will write all this out including fog and I think one or two other bits and pieces but the purpose of me going through so you can understand this bit is what does this this bit does this this bit does this and hopefully that has been useful maybe everyone's asleep that's cool so if I go back into Unity hey Presto we now have a cat and I can then implement or basically change various values such as the texture so I can go to texture and I can say uh set up this weird sort of St glass window I can then also set up the color and do all sorts of these things it's basically going to take the texture wrap it around the UV and then it's also going to multiply it by the color so I could do all sorts of wacky stuff so I could go in here instead of multiply by the color add the color and everything becomes brighter because rather than taking the two numbers and multiplying it adds them on top of it I but that looks silly so I'm going to go back here now the reason why I'm passing in a texture that doesn't fit into the UV of the cat is because it hasn't been set up in that way now I have a cat here uh the cat texture here which has all been set up um already in some other 3D modeling package so I can then uh find my cat and then assign it and then you can see here that I'm basically going to use the cat and it's also wrapping to all the other objects so you can see here I can set the color and then the cat can then change in tint all right so we basically built a Shader that's already in unity that you can already use now what we can do now is I'm going to show you how you can then manipulate this Shader and do different things by basically plugging in different data and I'm going to do two things to this Shader uh to this Shader and this cat first one is I'm going to turn it into cheese and cut holes out of it and with basically very few lines of code and the other one I'm going to do is basically um animate so you can animate all directly in the Shader so if I go back into the code I'm going to input in two values so do you want the cheese or the um animate one first I had chees variation so I'm going to do the cheese one so what we're going to do is we're going to pass in a dissolve texture so we're going to use a texture to basically cut out the cut out the object and then this is going to be uh cheese um then going to import this in as a texture and then set this to be white so that's just the default and then I'm also going to do a dissolve amount which isn't going to be a color and isn't going to be a texture instead going to be a number so I have a little slider or a value I can put in so I'm going to do cheese uh cut out uh amount yeah that that'll do and this is going to be a float and then let's set this to be default of one so as I go into here you'll notice that if I delete that I then now have a second texture slot I then also have a number or like a uh little text box with a for a float value that I can basically scroll up and down and set different things now if I set something into this like let's say like bricks it's basically not going to do anything it's not going to cut it out and not do anything crazy so we now need to go through the process of adding in our elements from uh Shader lab into the CG and this is kind of the workflow you're going to do most of the time because most people here will just go Shader unlit Shader okay let's get going from there and actually remove things and put things in and out so we've got our two variables we want to set up I'm going to go down I'm going to go into CG okay let's import these values in so because we have the dissolve amount that's just a float that's one single value it's not RGB or anything it's just one value now the next thing I want to do is I want to pull in the texture so sample of 2D underscore dissolve texture now for each type of variable that you import in in our shaded documentation it's got all the all the options are basically going to explain all the different bits and pieces about that so I'm offloading a lot of stuff to them so next thing I'm going to do is then choose what to use this so could someone shout out am I going to dissolve the texture or cut out the texture in the fragment or the vertex yes everyone said fragment someone said vertex and they're either like guessing or just said I'm going to go against the grain and hope it like everyone else was wrong or Andy explained it wrong so I'm not going to do it in the building part I'm going to play with the building part later I'm going to do it in the fragment so because I have a texture and I want to use the pixel colors from the texture I'm going to create another texture color let's call this dissolve color it's also a texture 2D because I'm importing a texture it's dissolve texture there and I'm passing in the UV because I basically want to wrap it around the cat now because we're using CG and we have all those options CG has lots of different helper functions that to do very thing uh things very very quickly so for example we can use clip which basically if I look in this CG documentation clip would then it's quite a fun function it says kill the current pixel that sounds horrible kills the current pixel output if any component of the given Vector blah blah blah is negative so this allows us to take the texture set it to whatever the slider is and then basically kill that pixel so if I show you what that actually does clip let's get the dissolve color and let's get RGB so all sort like the three values of the texture and let's subtract this by dissolve amount so with sort of like basically one two three maybe four lines of code you can then already do something like this so I have my cat let's pick a more appropriate texture like this one and then I can then set my value so if I set my value to zero and as I increase my value to like 0.1 oh wow it doesn't work uh why that's fine that's fine okay okay that should be fine uh maybe I should do this so what I can do here is rather than use a float for like a one value I can instead set up a range because you see that the texture Slide the float slide is basically too too erratic so you don't want your artist to be plugging in like negative 20 million they say oh it's broken I away you can then instead do something like 0 to one and then it would then remain within that range hopefully this will work no it doesn't brilliant uh but the range should be I did what with the what H okay wow that's weird okay it was Unity I'll follow bug report later it's fine uh okay anyway let's oh let's try this that's weird my my cheat sheet has worked or someone in Sab no Pon uh yeah yeah okay never mind um I will okay I'll move on and do something else sorry about that oh maybe oh yeah okay never mind I'll I'll sort it out later okay let's do something that actually works so what I'm going to do instead is I'm going to take the vertex and then basically manipulate it well I say that I hope this works so I'm going to extrude all the normals and pull them out and animate the cat in a different way so I'm going to extrude by an amount I'm then going to set extrude amount basically I'm going to set up a value and then in here I'm going to set up a float which is definitely lowercase or well I'm not even going to trust that anymore and set this up as another value that I can manipulate now if I want to take my cat and basically take all the points in the cat and offset the normals or offset the positions I need to pull in that data so in here I'm then going to set float three normal [Music] and do that so basically I'm bringing the position I'm bringing the texture coordinates and I'm also bringing in the normals of the cat in all the ways that the uh points are facing now if I go down into here now that I've got the normals I can then go into the Builder function that then builds up my uh cat and I can then set this up and play around with it now one thing you'll notice here is that I'm passing in the vertex so I can manipulate the vertex before I actually pass it into the screen so in here I can say invertex xxyz plus so I'm going to offset the value by in. normal doxyz uh multiplied by oh I haven't imported that in so float uncore extrude amount amount okay wow okay so we actually have a result so if I set the extrude amount to zero then my cat looks like this now as I increase and decrease the value basically it's going to take the cat and all the vertices and then offset it in a way so that way I can set the value to something like 0.2 oh actually who and then I'm basically taking my object and then sort of puffing it out you can see here the the cube box actually like takes the points and then offsets them so you can see the Box sort of opens you can actually infold the box which is super weird and super strange and this is where the float slider comes in uh the range slider comes in use and I hope this doesn't break it's a shame really wanted the cheese thing to work uh let's set this between like netive 0.1 and 0.1 and say this to be like .3 or something so here we then have the slider so you can see that the slider then has the limitation of the edge and you can't even like plug in a value here it basically just return the maximum uh or the minimum depending on the way that way I could take my cat and actually kind of like do some actually really horrible stuff um but then we can animate this so basically built into the unity sort of like uh CG you have different things such as the time value so the time value allows it you to animate something over time now we can do this by manipulating different things um so if I go to here and I multiply this by uncore time doy so time is actually a float 4 and I didn't learn this for a long time so basically uh time is XY z w so X is basically like uh 20th speed Y is like actual speed Zed is like I think double speed or something like that so the Y value is kind of the true speed so now if I jump into here my cat is basically just going to keep increasing forever and ever in size that's not good and I knew that would work yeah I knew that bit would work um so what we can do is we can instead wrap this in a sine wave so what this is going to do is it's then going to pulse in and out and this is going to look horrible where's my cat so I got my cap so let's set the value to like 0.1 actually that oh that's really mean yeah so now I have a sine wave and animating my cat someone will find a use of this in a game someone somewhere you can see that also the um the texture here is then P coming on out because the normals are then facing in that direction the sphere is just kind of pulsing in and out like that it's kind of okay um and you see the Box here is also kind of folding in on itself and then folding out on itself as well so you can actually animate all within the Shader and do different unique things like that now that's kind of some things that you can do you can also do lots of other wacky wild things so if I go to my cat I can then choose some other shaders that will hopefully actually work um so if I go to My Demo you can do things such as a dissolve which should work so I have my cat and I have two different skins for it orange and uh Pink you can see I've got two different texture slots I then can use a dissolve guide which is basically the same bit of code I was going to use to kill all the pixels but I'm going to lurp between one stat of a cat and another status of a cat by this dissolve Mount so as I change this dissolve Mount you can see here and let's turn down the tiling then my cat then dissolves between one thing and another thing like that by that second texture or that third texture so I could do I could pass in all sorts of super weird stuff like uh bricks so my cat will know resolv by a brick texture and it's then going to take the RGB values and then uh multiply them or offset them and stuff like that cool which is actually kind of funky now other things that you can do um is stuff like this so you could also set up an outline so using two passes you could have the first pass which is the outline around the outside and then the second pass which is then actually going to draw your detail something kind of like left for dead but I think left of dead uses an image effect as opposed to a object Shader so you can see here that all it's doing is in the first pass it takes the vertices offsets them and colors them one color then the second pass it actually does the coloring in properly of how you want it to be and you can do all sorts of stuff like you can set the outline width like really long and then uh like blue so now my cat kind of has a blue aura around it I could take that blue pass and actually set a texture to that so my cat has like a shield wrapped around it doing stuff like that um and you can see it's also happening on kind of like the sphere and the Box is doing all sorts of weird weird stuff as well um another crazy thing you can do is um do this so currently my cat is completely invisible and I can pass in a noise map or any texture and then access the data from that so if I then give it like this Cliff we can then take the noise and then you can see that it then uses the noise and then manipulates it and that you that's part of a function or a thing called grab pass so who has played The Sims okay your hand up if you made the Sims nude everyone put their hands down what what's going wrong um so in The Sims you kind of have that pixelated kind of like you can tell I have so you have that pixelated kind of box over the Sim so you can't see the nudity and it's but you can see kind of the color of the pixels behind it now with grab pass you can do that grab pass then gets the data of that it's taking up on the screen and then you can then manipulate that in a type of way so what it's doing here is I'm using grab pass and call it grab texture but of course I could call grab texture something else um I can then go down I can then take grab texture and then I can distort it using a texture so I could take a texture take grab texture and then distort it in a type of way now if I go into here um I can also do various things such as this so you can also get data that's not necessarily obvious but um is usable as well so you could get the position of the object in the world so if I set this up I then have my object and it has a green color and red color and a blend amount now as I move my object in the world you'll notice that it'll actually change color based on its y position as well so if you had a game with say uh objects underwater when objects are closer to the surface they kind of have more color you could set when the negative of a y value the deeper they go kind of the darker they get or you could have mountains so tops of mountains are white automatically the bottoms of the mountains are like brown and things like that so you can actually take uh data such as World space and then translate them into the Shader and do things like that um if I look at the Shader code for this one and set it for C so you can see what it's doing I have no properties being passed in here which is you know the position instead I can go down into my vertex and I can output the position which we've already done before and I I can also output um a second uh value which is World position and unity has built in things such as underscore object to World get to get where the vertices are in the world somewhere and then basically in the color I can then lur between one color a second color by uh the well position of Y so you can actually take that data and take things that are baked in you don't have to have a script that then gener passes a value or pushes a value in there's some things and in our documentation it says that you can also tweak things so I have not much time left um so let's go back to my slides and show you some cool stuff or some other stuff I'm actually guttered that the cheese thing didn't work I'm really annoyed so surface shaders so that's all good and all well but what what about it comes to lighting so surface shaders do a lot automagically which is kind of like the unity way like you click VR mode and it enables about a billion things um and surface shaders do a lot so they light up objects using different uh object lighting ambient lighting Reflections Unity I think has like six types of light mapping light probes and it probably do a whole lot more and when you do the final drawing to the screen the vertex and fragment Shader ends up with a pixel color whereas the surface Shader ends up with you output in a beo map you output a metalless you output smoothness so if you're used to the standard Shader those are the values then that you then output now the left one is then the surface default so when you create a default surface Shad it's like 401 lines of code or something and it does Lots automatically without you having to set up these things and surface shaders are there to they're kind of like a macro to allow you to do a lot of things very very quickly so that brings a lot of overhead but if you look on the left you have the surface Shader that does all the lighting and everything of Unity on the right you have a vertex and fragment uh Shader that just does textures and Reflections on the right you have that something that just does one light and Shadows on the right you have just what a Shader that just does light mapping and then you sort of combine those together and piece these all up and it still doesn't do as much as surface Shader so surface Shader is kind of like a quick way to get a lot of things automatically working especially when it comes to lighting so they do a lot automatically but this makes them a bit Overkill so it's kind of a macro Shader so the surface shad basically kind of boils down into a vertex and fragment Shader and it automates code which is overhead it's pretty basically a big no no for like mobile and and super lowend stuff like you're making a match do you need PBR outputs you're making a 2d Sprite pixel platformer do you really need like an occlusion map on that object so the surf shade is amazing for getting lots of things and do working with unity lighting very quickly but it's very expensive if you don't need all those fancy pants stuff but it also makes it easier to cust Uh custom lighting is easier to create so for example you have the standard lighting falloff so we have the light up here and this is just a sphere using the standard Shader and you see that the light is then making this side of the sphere light and then this side of the sphere Dark and then you basically have this nice falloff now a lot of people always say oh how do you make sell Shader games like Zelda or uh Wind Waker or like uh that's not a game neither is that one but they'd be pretty cool as games um how do you do things like that and basically you can see here on Link's tunic that rather than having a smooth fall off that's wrapping around it actually has kind of a cut off here and you can see as well that on uh the comedian that um you have a light source about here and you have kind of a highlight of yellow and then sort of like a beish color and then sort of an orange and then a red so you kind of have a different colored fall off and then here at the bottom from Sin City you basically have white and black so they want to be able to do different things and manipulate things like that and luckily it's actually really easy to do so they use a sort of a theme called color ramp texture so you basically use a texture and you set up this texture so at this point of the falloff use this color at this point use this color at this point use this color and so on and you can do this I think that's the exact one from Team Fortress 2 they've just put it on the website which is pretty cool um you can also do things like blur sort of like the chunks or the pieces you can also set like very specific you can even use like colors in kind of the lighting falloff so ultimately this is my Microsoft Paint took me about 4 hours to create type thing we basically can take the texture and then wrap it to the falloff and then do something a bit like that so that's quite easy to do so what I'm going to do is I already have the code pre-written so nothing will go wrong right yeah and I have two minutes left so if I go to this custom lighting fall off or let's go to the standard Shader and remove the normal map from the cat you can see here that my cat automatically has kind of like some shininess and this nice falloff if I go to the sphere and I delete my texture and set my color to be something sane like white you can see that if I look at my sphere from here you have the light in the top left corner and then darkness in the bottom right when you create from the asset window create Shader surface Shader it will automatically have all these things set up ambient lighting you change the Sky Box it affects it and things like that now what we want to do is we want to have a look at what that Shader code looks like which is basically if I have a look here now it has a lot of common Properties or things that you'd be used to when it comes to um like shaders so you you name the Shader at the top that we're already used to that we've learned that you have your properties it's exactly the same before because it's Shader lab um you also have here magic methods so here we can say this is an opaque object but we can go and we can change this to different things we could set the render type to be transparent for example you can also set the LOD level um and here we then open up CG program then end CG programs this is stuff that you're already familiar with like what half an hour ago so yeah sample the texture now surface Shad are a bit weird in that they basically end up having a surface sh uh function that then basically inputs everything and then outputs everything as well and rather than returning a color or returning a float 4 value we have here A texture slot another texture slot or another value slot and you basically output into these chunks now if I put this uh one here and if I go back into Unity I've already pre-written what you would do to basically plug in like a ramp or like a color fall off so if I go to my texture and I go to custom torque lighting ramp you can see here and let's turn off Shadows cuz it kind of makes it look a bit weird and let's make the lighting light you can see here that with my cat now you can see that I have my cat let's move it to here I can then choose a different texture and it's then going to use that lighting fall off from the position of the lights and then basically wrap all the way around I could even like pass in the cat's actual texture itself and then we have something that looks basically like that and that looks absolutely horrible but it's all possible so if I select my cat and then have a look at its uh texture or its script so let's have a look so we've got our properties at the top on the right properties on the left that's fine but you notice that this one here for the custom lighting ramp has underscore ramp and it has that texture slot as we scroll down we import that texture slot as we go down here you'll notice that I've actually written and this is when you when you uh go to assets import package and I think it's under effects or cell shading or something like that basically you can then manipulate in different ways so here I'm basically taking the texture ramp using text 2D and then manipulating that on the lighting fall off now I have oh wow I've gone over by one minute I'm really sorry Elena should sorry um so I have to basically wrap up super super quickly sorry I've had to cut this short so what now so we have the Shaded documentation which you can go in basically everything I said is in there um you can actually download all of the built-in Unity shaders and mess around with them so if you go to the unity download archive you can see here that we have a little drop down and then we have them built-in shaders you can actually download that as a big package and dig through them play around with them chop and change them do different things um you can also go to Nvidia CG documentation which is actually pretty good um and the community as I like to call it the wild west because you go there and they've written all sorts of crazy shads do fire and flames and water and things like that and the for for shaders is pretty good now I've got here um a gift that won't work okay whatever and you can also do this so uh I'm a big fan of Team Fortress 2 so just for fun our typ in Team Fortress 2 rendering techniques and valve have actually written like a big render document about how they do all the lighting and all the cell shading and things like that so you can see here that we have the albo the warp diffuse and basically they plug in all these values and multiply them and set them up so you can actually search for things like GDC talks like firewatch how do they do kind of the lighting and that sigraph papers which are quite more technical but a lot more interesting and things like that and that's basically the end of my talk I kind of ran out of time so I apologize I'm sorry that no cheese was made but uh thank you

Channel: Unity

Views: 103,273

Keywords: Unity (Software), Unite Europe 2016

Id: 3penhrrKCYg

Length: 58min 1sec (3481 seconds)

Published: Tue Jun 28 2016