Introduction to shaders: Learn the basics!

0:00 Intro
1:24 What is a shader?
3:37 Setting up shaders in P5js
5:58 GLSL data types
7:00 Vectors
8:58 Attributes, Uniforms and Varying
10:19 Barebones fragment shader
11:00 Vertex shader
14:57 Fragment shader revisited
15:30 Gradients
16:45 FragCoord tangent
18:28 Mix function
21:22 Setting uniforms
22:43 Uniform images (sampler2D)
25:12 Uniform arrays
27:05 Circles and SDFs
31:47 Boolean logic
33:25 Debugging shaders
34:13 Conclusion

Resources:

Examples:

Shaders are an incredibly useful programming tool to have under your belt, especially for creative coding and generative art. They unlock a whole heap of potential, but they're a bit quirky to learn!
This video covers a lot of the fundamentals and will hopefully set you up well for using shaders in the future!
This is a bit of a long/dense video so be sure to take a break if you need, and you can always watch it more than once to help it all sink in!

This video and its examples use P5js in WEBGL mode, however the concepts are transferable to pretty much any environment that you can use shaders in (some syntax may vary, especially in the CPU code).

Follow me:

#shaders #graphics #creativecoding

[StarFury]

It's very important to note that in modern versions of OpenGL (3.3+) qualifiers "attribute" and "varying" are deprecated and replaced with "in" and "out". And instead of gl_FragColor we are encouraged to use user-defined "out" variables.
The logic of writing shaders is still the same, but none of this code will work in modern versions if allowance for the differences is not made.

[tirins]

Does anybody else feel like going for a second helping of this... only a little bit later 😅 The info is dense! Awesome, man!

[maxenceveilleux]

Only 3 minutes into the video and you answered so many of my questions. Thanks a ton already!

[StevesMakerspace]

Great job, Barney! Congrats on this video and your channel taking off! Well deserved.

[facr]

Love the pace and the insight that gave us on shaders! Great!!!

[DeniseNepraunig]

Thank you so much for putting this video together! Fantastic explanation of the SDF and I also liked the part about the logic a lot! You touched so many topics with such a great presentation, really amazing man!!

[gqkmoef]

This is better than the official learn OpenGL tutorial (mix of c++ and glsl)Nice one! Exactly what I needed on my Vulkan adventures

[tristanjohn]

Thanks loads for this! The comprehensive approach filled in literally all the gaps in my understanding of shaders.

[alexeyl]

Great stuff. Looking forward for more.

[discotecc]

Getting into graphics programming as a hobby thanks for the video, You're a great explainer. I wish I had gotten into this sooner instead of web development theres a lot of neat stuff to understand

[TechnicJelle]

What a great video! Thanks for making it :D

[akashdalvi]

Thanks man.. this really helped a lot. Thank you for putting this much time and effort into this❤

[bynightcore]

Hi, normally I really don't comment on YouTube videos. But man, this introduction was EXACTLY what I needed to get started with my university project. Thanks a lot man, keep up the good work :)

[boiimcfacto]

This is absolute fucking gold. I love you man. Crisp, clear and straight to the point. Your humour was never intrusive like with other tutorials and you even gave links for every checkpoint in the video. God bless you man, this was a fantastic video and I wish I could like it 10 times lol ♥

[jokosalsa]

this is bar none the BEST video explaining shaders I have watched in YT. Very very very well done!

[Seblean]

Fantastic introduction to shader programming! Thank you for this :)❤ I kept wanting to know more about everything you talked about, it really could have been an even more thorough introduction. Looking forward to a potential series or just more on this wondrous field of programming.

[misvr]

I absolutely adore this video and your presentation. Shaders seemed like black magic before this but you really helped me understand

[johnschmitt]

I love this. Lots of information and no wasted time. Very well done.

[nouveu]

I'm not really working in game dev but watched your video out of curiosity and it was a pleasure and nice relax for me. You have a great talent to explain things :)

[Shamysoza]

This is amazing! I am going through SimonDevs course but there is alot of clutter with threejs to make stuff happen, but using p5js is way simpler and really makes the javascript code as a secondary element and really focus on the glsl side of things. I hope this series keeps going.