Shaders 101 - Intro to Shaders

hello and welcome to another video about making stuff look good in unity today the topic is going to be shaders this is a massive subject so we're only going to scratch the surface in this video but this is a topic I see people requesting tutorials and resources on all the time now I got a note about my last video that should watch my language and I agree with that so I'm going to avoid using words like shape this time cool cool let's get started so here we have four basic quads each of the different shader applied to them I'm working on a 2d perspective here because that's the dimension I typically work in but a lot of what I talk about it's going to be relevant in 3d as well especially if you get into image effects down the road now I'm going to simplify the rendering process quite a bit here because the goal today is to get you authoring cool shaders as fast as possible without regurgitating everything I've ever learned in books in school about graphics traditionally in graphics programming you'll have two small programs called the vertex shader and the fragment shader the vertex shader takes data from the mesh and manipulates it in some way and passes along fragments to the fragment shader 3 vertices make up a triangle and could generate a couple hundred fragments based on how much of the screen that triangle occupies and a fragment is like a potential pixel it can be manipulated or discarded all before it becomes a concrete colored pixel on the screen there's a lot more we could say about this process but again we're just scratching the surface today so let's see how this stuff applies to unity here's the shader code for the plain white quad there's a lot of code here just to produce white pixels so we're going to go over what all this does just to achieve like the most boring shader imaginable there are four key parts of this shader we've got a struct called app data it defines what information we are getting from each vertex on the mesh then we've got a struct called v2f it defines what information we're passing into the fragment function next we've got a function called vert it takes our app data struct as a parameter and returns v2f and finally we have a function called frag it takes our v2f struct and returns a color in the form of a float for variable so let's see what the vert function is doing all it looks at on the mesh is the position of the vertex that's typically going to be like a vector3 in the meshes local coordinate system all this vert function does is initialize a v2f called au and it sets it for a text variable using this special function I'm going to keep this short and gloss over complicated less important stuff so all I'll say about this function is that it does an operation called matrix multiplication on that local vertex to take it from a point relative to the object and transform it into a point on the screen and that's it for the super simple vert function now it's the frag function like the fragment shader I mentioned earlier it turns potential pixels into colors on the screen we don't get to change the position that was already locked in by the vertex function instead we just get to return a color at that given position for this super simple basic frag function we just return the color white where the four numbers are red green blue and alpha respectively and that's how you get white pixels on the screen it seems like a lot of work but believe me unity is doing a lot of the heavy lifting for us but with all this boring stuff sorted we can start messing around with a shader and get something more interesting on the screen so in that image from before I showed the fragment shader turning the pixels Orange we can edit our basic fragment shader to do just the same thing where we plugged in four ones into a float for earlier we can just put in some new numbers that result in a nice shade of orange and tada and have orange pixels but just returning the same color for every pixel is still pretty boring so let's bring in some more data from the mesh and do something more interesting a lot of field to the app data struck of type float two and add the text cord zero identifier a quick note which data you can grab from the mesh or limited to a short list of values so I'll put a link to the unity Docs in the description with more info on providing data to vert functions we'll do the same thing with our V to F so we can pass along UV data to the individual pixels now let's change up the verb function there's no unity magic functions this time we're just going to pass along the UV as is to our Frank function once that's done we can change up our frag function we'll base our color off the values we got from the UV and return that BAM but Dan you asked a triangle has but three vertices if our photo text shader only executes three times how long are we getting such a splendid display of colors that's a good question vaguely British unity developer you remember when I said that even though a vert shader only runs three times it can still generate hundreds of fragments well it also linearly interpolate Sitz values over those generated fragments so even though our virtue aider really only passes along four unique UV values we end up getting every value in between okay now we're done with that tangent we're like five minutes in so how about a little break for me I mean while I'm on break see if you can get the quad to look like this remember we fit in the x and y values of the UV into the red and green parts of the color but we left the blue at zero welcome back did you get it all you had to do is set the Blue Valley one in our float for I wasn't really tricky or anything but I figured you might want to experiment or whatever anyway so moving on so at this point you know how to color some pixels using some data from the mesh let's take a look at how to texture the quad I'm using a small texture of pushing the cat it's got transparency which is what's causing those crazy lines around the sprite you can use whatever texture you want but later on you're going to want one with some transparency in it so just grab a sprite for the game or something now back in shader land we're going to define a set of properties for our shader before the sub shader region this is the syntax for including a texture as a property and a default value of white for one node texture is assigned as soon as you've done that the texture picker will appear in the inspector when you select the material in the editor in our frank function we'll use the text 2d function to get the color value from the main text at the provided UV value we also need to define main text in the scope of our CD program as a sampler 2d otherwise our shader will compile and with that we should have a textured quad it's not too shabby but this is supposed to look like a sprite we know with transparency around the edges and not these ugly lines so now we'll fix that the way to have transparency in your shader is to define how each pixel will blend with the pixel beneath it on the screen there's a finite number of these blend modes and so again I'll point you to the unity Docs where you can learn more about them for our purposes we'll be using what's referred to as an alpha blend and it looks like this what this means is we take the source color and multiply it by the source alpha and we add that to the destination color multiplied by one minus the source alpha you can take a second and think about why that makes sense and hopefully whatever visuals I give this part of the video aid your understanding of how alpha blending works the other thing you'll need to do is define the cue tag as transparent this just makes our sprites render after the Oh peg geometry in the scene I'll along with all the other transparent stuff if you skip this step you'll find weird rendering quirks whenever you have your custom shader overlapping with opaque geometry and that's alpha blending in 60 seconds we should now have a textured quad alpha blending over top of the scene it's taken us a while to get here because I've taken a bunch of teachers from here to there but I hope it feels like it was somewhat worth it once you get a handle on this stuff you'll start being able to experiment with shaders on your own and make some really unique looking effects here are a couple ideas you can try to reinforce your shader knowledge add a color property and multiply the texture color by that for a tinting effect use the U visas colors like we did way before but this time multiply that by the texture color instead add a second texture and a range slider then have your fragment shader interpolate the two values while you move the range slider make sure your texture is set to repeat and then multiply the UV value by 2 to get tiled sprites combine the tiling thing and the UV coloring thing at the same time to make like an Andy Warhol look in painting use this equation for luminance and calculate an accurate value you can plug into all three of the red green and blue values to get a grayscale sprite combine the grayscale sprite with the color tinting from earlier change the blend mode to blend 1:1 and see what happens ok that does it for this video shaders are a bottomless pit there's always going to be more to learn if you knew nothing about the world of shaders before this hopefully you know a good idea of what they are and how you might go about creating and editing them I'll include the code for the four basic shaders and the eight exercises below I kind of like making these videos so I'll probably do more later on and we'll explore more shader e goodness leave your comments if you have questions want to show off a shader you came up with or if you just want to suggest a topic for a future video thanks for watching

Channel: Makin' Stuff Look Good

Views: 213,346

Keywords: Unity3D, Game Development, Graphics Progamming, Shaders, GLSL, Unity (Game Engine), Tutorial, Unity3D Tutorials

Id: T-HXmQAMhG0

Length: 9min 44sec (584 seconds)

Published: Wed Feb 24 2016

Reddit Comments

[u/Broxxar]

Hey all! I made another tutorial/video thing. This one is a whirlwind tour of shaders. It really just covers the absolute basics. The idea is that this will give us a foundation to build in in future tutorials, so eventually I can teach people how to do some of the crazier shader tricks I've learned over the years.

I'm also just throwing a bunch of stuff at the wall in this video to see what sticks. Animations, humour, take home challenges... I'm hoping you guys will let me know what's working and what's not! I'm pretty fond of vaguely British Unity developer though... so he's probably sticking around whether you all like him or not.

Anyway, hope this helps. Feedback is very welcome!

[u/NoCSLenoi]

Subscribed. Please make more :)

[u/viriss]

Much better tutorial! Thank you! More please, even one that's more basic and covers explaining vert and frag would be great. Love the images you used.

[u/notimpotent]

Subscribed. Look forward to more vids. Funny and informative!

[u/Sarkahn]

I thought it was great for the most part, I would definitely watch more if you made more. I didn't really like the pause in the middle, you had a nice fast pace going and it was a bit weird to just have it grind to a halt. The "homework" idea with the hints is great for the end of the video, not so great for the middle (in my opinion).

[u/chanyap92]

wow..you targeted the hardest things to learn for all unity beginner..nice work and i subscribed since your fire particle video

[u/AlbinoGrimby]

Great video. I like how straightforward and informative it is. I did graphics in college, but most of it fixed function pipeline stuff (I guess I'm dating myself). I only marginally did shaders so I found your video really useful for getting started in experimenting in Unity. I thought the general explanation you gave of vertex and frag shaders was decent enough to get me going.

I'm mostly interested because we're using Unity's mobile/diffuse shaders for our iOS game and I don't know much about the number of passes or how much time it takes to run those versus writing your stripped down shaders. So maybe this could be some kind of optimization down the line.

[u/Athaa]

You got one more subscriber, awesome work!

I also checked your Particles 101 tutorial because that's the thing I thought I knew the least about before, and I liked it muuch more than the shader one, I actually think words like "shitty" make it more interesting and fun to watch..

I have one constructive critic (atleast I think it's constructive), when you did the fire effect, you could've just glossed over other other variables with few words.. For instance, I'm really wondering what that "inherit velocity" thingie does..

[u/animflynny2012]

Please do more in depth shaders!

I've just started getting into them recently, absolutely loving them. Would love to be more confident in them, my latest project I had to create a shader that would tint a portions of the screen with 2 separate colours..

http://imgur.com/TtijS1z