Shaders 101 - Intro to Shaders
HTML-код
- Опубликовано: 5 сен 2024
- Another video/tutorial thing. This time about shaders. Still trying to find my voice and my style for future videos. Let me know what you guys think.
Get the shader code used in this video here:
danjohnmoran.co...
Unity Documentation on Providing data to Vertex Programs:
docs.unity3d.co...
Unity Documentation on Blending:
docs.unity3d.co...
Background Music:
Tranquility Base - Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0
creativecommons...
Interactive Component Music:
Wii Shop Channel
1:30 boy, that escalated quickly.
"Shaders are a bottomless pit. There's always going to be more to learn."
Thanks :)
Last night I found your animation videos, and it helped solve a problem I was having.
I decided to watch the rest of your vids, since it was high quality and easy to understand.
While I didn't really pay much attention to the code aspect as I wasn't interested in making them, I ended up with a good knowledge of how they worked, including the little bit about Directional lighting's true workings.
Now, I've seen in your later videos, what kind of amazing stuff can be done with custom shaders, and I'm rewatching so that I can learn the code, and it's really simple to understand. Your stuff is, imo, better than most of the other unity youtubertorials, and way better than like, the entire official Unity channel.
Hey, I watched this when it came out and didn't really understand it. Then I got to a point in my project where I realized I needed some custom shaders. I went through some tutorials online and got to the point where I could try a dozen things out and wait for one of them to compile to get a sense of what's going on, but I still didn't understand what I was doing. So I went back and watched this and it all makes sense now. All the other online tutorials kind of miss telling you basic stuff, like the fact that v2f is a standard struct that the shader is expecting. I greatly appreciate this video.
Awesome! Glad to hear this video helped. I eventually plan on doing a video that should be even more gentle of an introduction and ramp a little bit slower. Sounds like you're ahead of the curve!
As for v2f, keep in mind that you can change that struct to better suit your needs and keep your code more legible. I'll often rename that struct to "FragIn" now a days. As well, this video totally doesn't explain things like how many interpolators you can have and what the acceptable semantics are for DX shaders. Those are the sorts of details I wish I had covered better at the time and will revisit in a later series (hopefully).
Until then, keep on makin' those video games!
Thanks man! I didn't understand a thing in the official Unity tutorials, but this video made so much sense it helped me break into actually making shaders. Thanks for the great tutorial!
this is one of the best tutorials I've ever watched
dude! your videos are amazing! keep them coming, because Unity community needs more quality tutorials!
Thank you for this awesome class! Im totally noob with shaders, but i'm keeping up with this video, it requires stopping, reading documentation, praticingm but in the end i'm learning a lot! Just wanted to give you the feedback, thanks again and please keep doing amazing content like this!
Hey man, it's been 5 years. How's your shaders progress going now?
I love that you give us small exercises to actually text what we learn. Thanks!
I can't believe it's taken this long for me to finally see a short basic intro that makes sense. Great job!
So happy to have found this channel. Its brilliant. Excellent job and please keep the videos coming!
We want shaders 104 please! You're no joke the best person on the internet explaining shaders to noobs, you've made us love you so now you have a responsibility!
Awesome short but rich and enlightening explanation. Also thank you Vaguely British fragment guy !
GREAT video!!! That's how you make interesting tutorials. Could watch this for hours without getting bored. I would gladly pay for tutorials with this level of quality.
How did you know I was wearing a top hat and a monocle while watching this?
Great explanation on shaders. Most of my knowledge (and this is how dated I am) is fixed function pipeline. I've done a little work in shaders, but watching this tutorial at least gives me a base to start experimenting with on my own.
I know this is old now, and I hardly understand anything still, but watching this a few times and picking apart your sample code I could actually make the specific shader I needed. It was harder than I imagined before I started, but easier than I imagined after looking into it 😅 Thanks for this anyway, and code samples are gold because typing what is seen in a YT video can be prone to errors, especially as visual studio doesn't do any kind of code completion or validation for shaders it seems.
You asked for comment, here's one: This is good 👍 instructional video.
Only improvement I can suggest: The ending "homework" part can be delivered slower, and somehow "delineated" with more text. Kind of like when one was given a homework. That would be great!
F***! thank you!! this is the most friendly explanation of how shaders works and actually makes you want to know more about it
this is exactly what I needed to see and learn. like the basic shit like wtf is all this template code is and why it's here. I'm so relieved. fucking finally
This is a REALLY helpful video!
Hey, I wanted to say thanks for making these tutorials and case studies, each time I watch one i'm like, yea yea, I know about this stuff already, and then you end up unloading a ton of stuff I didn't already know. It's great. I was hoping at some point you'd do a series on lighting in unity, I feel like a lot of people could learn a lot about making appealing lighting including myself.
man your videos are so high quality, best of luck with the channel. do you have any tips for mobile? Like are shaders slower than normal sprite rendering for example? I know there may not be a definitive answer
There sort of is a definitive answer: profile everything. You can try to reduce instructions, texture reads and fill rate all you want, but at the end of the day the only real way to determine if your shader code is mobile-optimized is to run it on mobile.
The iOS tools in XCode are very powerful, giving you gpu times down to the nanosecond for each draw call. This will allow you to see when a particle system or an expensive post processing effect is chewing up precious milliseconds of frame time.
thanks for the reply! Well for example, i was thinking about using the tint shader you mention here and use it on sprites so i can make seperate colored objects with from just one image texture. I wonder if you know on a real simple basis, like would rendering the tinted texture through a simple shader be slower than having a spriterenderer with the images already seperately colored from photoshop. theoretically would you say one is a better way to do it on mobile? like for some reason i have this idea in my head that shaders are 'expensive' and especially new to mobile.
dont worry i am gonna take ur advice and just see if something is slow through profiling, but i just wanted to get a clearer understanding of shaders relating to performance
This is actually a great example of what a lot of optimizations boil down to: taking up more gpu time or taking up more memory. Obviously having a bunch of pre-tinted textures would take more memory than having a single grayscale texture, but tinting the grayscale texture dynamically means more frame time!
Every project's requirements will differ, some teams will opt for higher memory/faster gpu because they have room in ram and are targeting 60fps, others will go the opposite route because memory is the bottleneck.
Your mileage will vary. Best of luck!
thanks so much
i realize i'm late to this series, but i was learning about shaders in class and my teacher recommended i check this series out. I think there's a lot of great info here and look forward to watching the whole series... like 20 times, lol.
for my 2 cents. i appreciate if people don't swear constantly in instructional videoes. Not because i'm butthurt and feel offended, but i just find it unnecessary and makes the video feel very unprofessional. and you don't get in trouble at school for your computer randomly spouting obsceneties.
thanks a lot for all of this information!
Although I know the topic in-depth, I watched the whole thing just for the presentation style. Nicely done.
you added my favourite study/focus music as background
OMG ! Thanks man at last some good stuff to learn deep things through this video , i know it's old but quite accurate.
Dan, just brilliant. You should charge for these!
Those who wish to support can do so via Patreon but otherwise my stuff will remain entirely free! :D
8 Exercises at end is very helpful ! Thanks!
This is still great tutorial for starting with shaders! I followed along with the exercises and it was really great for learning!
This video was really great! Nothing too advanced with the theory, but still enough to kind of see what's going on with the code. And you also encourage creativity with the interactive breaks, which I loved! Keep it up :)
Somehow everytime you say "v2f", it reminds me of "d2f" from Silicon Valley series.
Amazing Video with simple and begginer friendly tutorial
🤗
Quick and clean.Thanks.
For those who want to understand how the blend equation works google for the Porter & Duff blend mode.
Give me a shout if it still doesn't make sense.
A visual is worth many words:
page 111 of Google book :Digital compositing for Film & Video.
Amazing work! "Homework" at the end is great idea! :)
Yes! Just getting into writing my own shaders! This is perfect.
I stumbled upon this whilst doing some research. I was thinking of putting together a very similar video series - now I don't have to!
Spend far too long trying to get the tint to work, only to find out that I had transparency set to 0... haha Great tutorial, I hope you still plan on making more!
this explanation is amazing
my God , now this is a role model of tutorial.. anyway if i may , i recommend you to also add the start scene ( 0:29) so we can try what you code right away. but nonetheless this is already great
Thnaks for explaining how blend does work!
What a great tutorial, very clear. Thank you man, you are the best.
thx a lot!!!! a good start video to learn about shaders! really make me feel interested in shader!!!!
I'm just starting to get into coding / unity ... but watched this anyways.
I'd have to say, you did a great job man.
This is an incredibly to the point but accessible but thorough presentation .. how did you manage all of that at onceeee (thank you!)
I would pay for your tutorials , you are a talented teacher should consider it (:
Just wanted to say that your video is fantastic!
omg what a nice and simple video! keep going man! thanks!
2021 and fucking invaluable. THANK YOU
Love this shader tutorials
That was incredibly helpful!
I love you
return float4(i.uv.r, i.uv.g, 1, 1);
its also giving same "blue pink" result!
Nice video! A bit much for one video maybe but still a very cool entry point. What I would need is a shader that adds the tint color to the sprite, so it gets lighter not darker. Is that difficult to achieve? It almost seams as if the last example you mention does something like that.
I get an error for the unexpected token "}" even though everything is correct
EDIT: This is when I tried to make the change for the 'rainbow' look
amazing. I guess it couldnt hurt to ask if you could handle something like a system which has one sprite overlapping another, where one is the colors which you can change, and the other one is the lines and shade. (like a multiply layer effect). (skullgirls uses a system like this with another layer for lines)
Wow dude, you're really good at teaching! You should advertise yourself on unity subreddit, i think you could get a lot of viewers from there.
THANK YOU!!!!! Subbed, shared, and faved.
Is it possible to add outlines/borders on mesh using shaders? Great tutorial btw, looking forward to more of these!
These vidoes are great! Well done.
How to explain things in a simple way. Great 8^)
omg I'm learning so much!
thank you for making these videos!
just a general question,
where are some common usage of grayscale sprites in games?
I can only think of character death.
I had an error when setting up the Texture in Unity 5.2.2 I had to use the line:
_MainTex ("Texture", 2D) = "white" {}
Note the additional of the curly braces at the end. Not sure why but other shader examples I looked at had this and it fixed my parsing error.
Thx, bro! Please, return with new videos!!!
So cool!
Awesome, thank you for sharing this.
Thanks a ton for that video and the examples ! :)
Great explanation ☺
really great
We need more!
Hey, just a suggestion. You should try to have some helper text on the screen, especially during code-related sections.
I wanna be a graphics programmer but I dont really know where to start. What should I start reading about, shaders? Opengl? Webgl? Or just start with unity shaders since the ui and stuff can help me understand things better...
Unity is an easy place to start and a bit faster than writing your own OpenGL app for working with shaders. There are also things like Shadertoy and Shadron for just getting started experimenting with shaders.
I haven't got any good book recommendations at the moment, I still need to do more reading myself first. If you've got GDC vault access, there are many great talks on the subject in there worth watching.
Check out the website thebookofshaders. It teaches how to use GLSL shaders from drawing shapes to simulations with interactive code examples.
excellent teacher ever!
It's my first video I see on your channel and I'm trying to understand why you needed to curse in your previous TUTORIAL videos. :P haha
I am using Unity 2018.2pre and it seems that if we name of the texture parameter as _MainTex, the rendered texture ON CUBES looks like a fine mist of particles - This was solved by changing its name to _FirstTex, and it works fine on all objects.
Wow! Love this channel!
Thx for this great tutorial!
I still don't really understand shaders, but at least I'm slightly less afraid of them now. Thanks!
Great stuff
Hi! Awesome tutorial, but I didn't understand couple of things.
What is UV in this basic shader? I know that UV is a coordinates for 2d texture but i'm interesting in uv.xyzw/uv.rgba. For 1st quad there is no any texture attached. So what are values stored in uv.xyzw/uv.rgba ? Where did they come from? I can't understand how you got gradient for 1st quad, because it means in UV stored some sort of texture where every pixel has different values for r, g and b.
I always watch videos.I am looking for a car body shader like CSR2 racing game.They have done very beautifully.I was wonder if we can recreate such a shader?
Hello, can you explain how to create a shimmer effect? Such as in bejeweled games or candy crush? I can't find an explanation on how to do this in unity anywhere online. I need it for my dropped items that can be picked up in game as a visual que to the player that you can pick this item up. I'm working with 2D sprites. So it would be for a sprite image. Thank you!
The 2nd shader won't work unless the sprite (on the sprite renderer) is the same as the Texture on the shader. If not it will just be white. Why?
Thanks a lot, that was very interesting. I have one question, when doing the second shader whit color grading the quad. You say unity interpolate the color of each little fragment between the vertex. But how many fragment does unity generate? Is there a maximum? Can I control the number of fragment? For a practical case, I have a low res input texture that I do not want pixelated, so I would like to slowly interpolate fragment values between each pixel of the input texture. My texture is a planet map intended to fit on a sphere as large as I can (thus my question, is there a maximum).
In experimenting, I got an error that's confusing me. With the Colored UV Shader, if I enter the following at the end:
return float4(i.uv.x, i.uv.y, i.uv.z, 1);
or
return float4(i.uv.r, i.uv.g, i.uv.b, 1);
Unity gives me the error "invalid subscript" for the b/z values. If I try putting r, g, x, or y in that spot, it takes that just fine. Why am I not able to use blue or z in this place?
Because uv is defined as a float2. You have to define it as at least a float3 to access the z or b (the third) component.
Im new at this, but I thought UV was the texture coordinate space? How come you were able to get color from it (I assume that's rgb values) at 4:24?
They're just numbers! So the uv coordinates range from 0 to 1 for x and y, but we can interpret that as 0 to 1 for red and green instead. Also note colors in shader are expressed as decimals ranging 0 to 1 and not integers from 0 to 255.
I see. I was just confused since I thought UV was (x,y,z,a) and I thought that's all you can get from the uv variable you passed in.
But apparently it has r,g,b as well (4:22)? I guess I have to experiment myself and see what values are inside these structures.
I figured it out, this is what made me confused, in this video you have:
float color = float4(i.uv.r, i.uv.g, 0,1);
but in shaders 102 it's changed to:
float color = float4(i.uv.x, i.uv.y, 0,1);
Yeah I mentioned that in a comment elsewhere. They are called "Swizzles". rgba and xyzw are interchangeable. You usually just use the color swizzles when talking about a color, and the coordinates when talking about a coordinate.
Finally a term I could google. Thanks so much!
Greet, good man, I love you
Dude, You're awesome!
awesome, keep it up!
you are the best sir !!!!
Don't know if you still read these, but how do you interpolate between two textures using a slider? I don't feel like this video gave me the information I needed to figure it out honestly, as a complete beginner
Nevermind, I did some outside research and I learned that you simply lerp between the two textures, literally. I thought there would be more to it than that. My fragment function ended up looking like this if anyone else is stuck
fixed4 frag (v2f i) : SV_Target
{
float4 tex1 = tex2D(_MainTex, i.uv);
float4 tex2 = tex2D(_SecondTex, i.uv);
float4 lerpedTex = lerp(tex1, tex2, _Tween);
return lerpedTex;
}
Well done! Yeha I haven't hear that this video isn't quite "101" enough. One day I may revisit the intro to shaders video and expand on some basics even more. Working out solutions on your own like you've done though, is an awesome way to learn!
I don't know if I'd commit to saying this video isn't 101 enough it's just that this stuff is hard and learning is hard lol. This is a great resource and your channel as a whole is fantastic
I know this is an old comment, though I managed it without lerp, so it's definitely possible.
float4 frag(v2f i) : SV_Target
{
float4 color1 = tex2D(_MainTex, i.uv);
float4 color2 = tex2D(_SecondTex, i.uv);
color1 *= (1, 1, 1, 1 - _Tween);
color2 *= (1, 1, 1, _Tween);
float4 color = color1 + color2;
return color;
}
Awesome video, but i have one question. I'm trying to use this in my game, but i do not want it to glow through walls. Is it possible to change so that they do not glow through walls?
You are awesome.
THIS IS SO CCOOOOOOL
You are awesome! Thank you! :D
Can someone explain to me what the colons do? And what language these shaders are written/where I can learn the syntax? Thanks.
Never mind, I found what I was looking for in the second link of the description.
Thanks a lot man!
My sprite gets squished for some reason, do you know why?
Thank you so much
ouh mai gahd!
Well. .... You asked for comment on your video....??6 Right ??? I'll tell you something. Normaly poeple just show wow too do the stuff they want. But, in this video, we learning more in couple minute then other houre and houre tutorial and let"s us whit a bounch of question and never able to do more. So, please kepp go on and I thing you've prety mutch find your still. Of course is just a short video. But I want encourage you too keep going and making more. So, I put this site on my favorite and come back later. Cheer .... !