Introduction to shaders: Learn the basics!
264,952
Published 2023-07-30
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)
24:58 p5.filterShader
25:12 Uniform arrays
27:05 Circles and SDFs
31:47 Boolean logic
33:25 Debugging shaders
34:13 Conclusion
Resources:
Inigo Quilez YouTube: youtube.com/@InigoQuilez
Inigo Quilez shader: www.shadertoy.com/view/ldScDh
Kishimisu YouTube: youtube.com/@Kishimisu
Kishimisu shader: www.shadertoy.com/view/mtyGWy
Types of shaders: www.khronos.org/opengl/wiki/Shader
GLSL Data Types: www.khronos.org/opengl/wiki/Data_Type_(GLSL)
All available p5js shader attributes and uniforms: github.com/processing/p5.js/blob/main/contributor_…
gl_FragCoord: registry.khronos.org/OpenGL-Refpages/gl4/html/gl_F…
mix function: registry.khronos.org/OpenGL-Refpages/gl4/html/mix.…
p5.filterShader Library: github.com/BarneyWhiteman/p5.filterShader
2D SDFs: iquilezles.org/articles/distfunctions2d/
Examples:
All examples: editor.p5js.org/BarneyCodes/collections/g_0h6nsR-
Vertex shader example: editor.p5js.org/BarneyCodes/sketches/ZPnUfPUaE
Fragment shader gradient example: editor.p5js.org/BarneyCodes/sketches/2Sa9hgvNn
Fragment shader position example: editor.p5js.org/BarneyCodes/sketches/NJYQgvpU6
Fragment shader image example: editor.p5js.org/BarneyCodes/sketches/Ema18Yjqj
Fragment shader array example: editor.p5js.org/BarneyCodes/sketches/QxtF99hH9
Fragment shader SDF example: editor.p5js.org/BarneyCodes/sketches/AQHT3p4Pz
Fragment shader logic example: editor.p5js.org/BarneyCodes/sketches/z114LFTfL
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:
Support the channel: youtube.com/@BarneyCodes/join
Twitter: twitter.com/BarneyCodes
Reddit: www.reddit.com/user/BarneyCodes/
#shaders #graphics #creativecoding
All Comments (21)
-
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.
-
seems a little shady to me 😅
-
Does anybody else feel like going for a second helping of this... only a little bit later 😅 The info is dense! Awesome, man!
-
Only 3 minutes into the video and you answered so many of my questions. Thanks a ton already!
-
Finally finished! This video took ages to put together, so if you enjoyed it, it would be great if you could give it a like and share it with anyone you know who needs to learn about shaders! Also, I forgot to mention the amazing www.shadertoy.com/ which is another great resource and an easy way to get stuck into shader programming in your browser. If you'd like to see what else I'm working on, it would be great if you could wishlist my game Star Mining Co. on Steam! s.team/a/2584800/
-
This was just the video I needed to get started with shaders. I knew very little about them or what they even did or were capable of, but this video really showed me, on a beginner level, just how indepth this really goes. Thank you so much for all the effort you put into this video. You explained so much indepth, while also making it simplistic, while not watering anything down. The care and passion you put into making this really shows.
-
this is bar none the BEST video explaining shaders I have watched in YT. Very very very well done!
-
Great job, Barney! Congrats on this video and your channel taking off! Well deserved.
-
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!!
-
Love the pace and the insight that gave us on shaders! Great!!!
-
For the first time in my life, I understood what that Shader code was all about. Thank you for the quick explanation. I'll definitely need more couple of years to be able to write my first shader script to create a simple black circle on screen because is too hard, but this video is definitely one of the best to see about the topic.
-
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.
-
This is better than the official learn OpenGL tutorial (mix of c++ and glsl)Nice one! Exactly what I needed on my Vulkan adventures
-
This is all new to me. I can see the potential for a lot of this stuff, and I can see you've barely scratching the surface of this powerful tool. Man... this is going to take a few watches just to even get started :|
-
This is better than the official learn OpenGL tutorial (mix of c++ and glsl)❤Nice one! Exactly what I needed on my Vulkan adventures 😃
-
Thanks loads for this! The comprehensive approach filled in literally all the gaps in my understanding of shaders.
-
I love this. Lots of information and no wasted time. Very well done.
-
Thanks man.. this really helped a lot. Thank you for putting this much time and effort into this❤
-
Small clarification, HLSL is the language used by DirectX, meaning it is windows only. Where as GLSL is multiplatform.
-
26:50 you can also use the spread operator, which has the added bonus that it works with any number of arrays, i.e.: const colours = [...col1, ...col2, ...col3]
