Introduction to shaders: Learn the basics!

Подписаться 15 тыс.

Просмотров 266 тыс.

50% 1

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)
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 RU-vid: / @inigoquilez
Inigo Quilez shader: www.shadertoy.com/view/ldScDh
Kishimisu RU-vid: / @kishimisu
Kishimisu shader: www.shadertoy.com/view/mtyGWy
Types of shaders: www.khronos.org/opengl/wiki/S...
GLSL Data Types: www.khronos.org/opengl/wiki/D...
All available p5js shader attributes and uniforms: github.com/processing/p5.js/b...
gl_FragCoord: registry.khronos.org/OpenGL-R...
mix function: registry.khronos.org/OpenGL-R...
p5.filterShader Library: github.com/BarneyWhiteman/p5....
2D SDFs: iquilezles.org/articles/distf...
Examples:
All examples: editor.p5js.org/BarneyCodes/c...
Vertex shader example: editor.p5js.org/BarneyCodes/s...
Fragment shader gradient example: editor.p5js.org/BarneyCodes/s...
Fragment shader position example: editor.p5js.org/BarneyCodes/s...
Fragment shader image example: editor.p5js.org/BarneyCodes/s...
Fragment shader array example: editor.p5js.org/BarneyCodes/s...
Fragment shader SDF example: editor.p5js.org/BarneyCodes/s...
Fragment shader logic example: editor.p5js.org/BarneyCodes/s...
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: / @barneycodes
Twitter: / barneycodes
Reddit: / barneycodes
#shaders #graphics #creativecoding

Опубликовано:

22 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 296

@StarFury2 5 месяцев назад

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.

@BarneyCodes 5 месяцев назад

Good call! I think WEBGL is a little behind, but I think that's about to change with WebGPU and WEBGL 2. Thanks for the comment!!

@nepp9574 5 месяцев назад

I was about to write exactly this. This is indeed pre glsl 1.3 syntax so very old. 1.3 and later uses above syntax and is incorporated into WebGL2 since 2017. This is coupled with OpenGL ES 3.0 which might be worth noting. For anyone interested in these facts, the above video of course still applies ❤

@BarneyCodes 5 месяцев назад

I didn't realise how long WebGL2 has been out! I think P5js only started supporting it recently. I've used the newer syntax in other projects, but everything web related I've been using the old syntax. Might be time to change that! Thanks for the comment!

@StarFury2 5 месяцев назад

I guess what I noted is quite obvious to an experienced user, but me being a noob with OpenGL, it was strange why compiler throws so many cryptic errors in my python+pyglet environment. I saw that built-in classes use default shaders with "in" and "out" qualifiers. Asked ChatGPT and it was like "Dude, you're using an ancient syntax!"😅 Of course, all the love for the author, video is still relevant and definitely a must watch for anyone starting to mess with shaders!❤ @@BarneyCodes

@ecruz2317 4 месяца назад

if anyone wants traction for their channels, coding for marmoset will get you some traction, just a heads up, i only need to code 1 shader for myself and that is the "engine", i am using to get the results i want, it combines hlsl and glsl.

@fr3ddyfr3sh 5 месяцев назад

seems a little shady to me 😅

@bloodaid Месяц назад

Never trust shaders

@tirins 9 месяцев назад

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

@BarneyCodes 9 месяцев назад

Hahaha yea sorry about that! There's just so much that I wanted to include in the video! I think shaders are just one of those things that take a few goes to sink in. Thanks for the comment!

@rmt3589 7 месяцев назад

Me!

@Seb001ean 6 месяцев назад

I go back every week. Such a great starting place. Will there be a part 2 to this? Do you have ideas of what you’d want to include in it?

@BarneyCodes 6 месяцев назад

@@Seb001eanGlad to hear you're finding it helpful! I'm thinking I'll do smaller videos that focus on one topic at a time instead of another video like this one. That'll hopefully mean they're more frequent but will also let me go into a little more depth each time. A few weeks ago I put out a video on how to use a noise texture in a shader if you want to check that out! I've got a few ideas such as using normal maps and creating very basic lighting, using vertex shaders to manipulate objects and a few others. Is there anything you would like to see cover?

@OctagonalSquare 5 месяцев назад

I haven’t even gotten past the ads and yet know I’ll have to come back haha

@maxenceveilleux Месяц назад

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

@BarneyCodes Месяц назад

Glad you've already found it useful!

@jokosalsa 14 дней назад

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

@BarneyCodes 14 дней назад

Thank you so much! Glad you found it helpful!

@WarriorAlexOG 27 дней назад

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.

@BarneyCodes 27 дней назад

Thank you so much! I'm so glad you found it helpful, shaders can be an amazing tool so getting more people creating and playing around with them is exactly what my goal was! All the best on your shader journey ahead!

@BarneyCodes 9 месяцев назад

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/

@IDGs_space 25 дней назад

oh yeah, don't forget graphtoy, it's a graphing calculator specifically with glsl in mind !! there's also a few websites in kishimisu's video on shader art coding but youtube tends to delete comments with links, they're still worth checking out though!!

@StevesMakerspace 4 месяца назад

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

@BarneyCodes 4 месяца назад

Thank you so much Steve, I really appreciate all the support you've shown me! I still can't really believe how well this video has done!

@DeniseNepraunig 5 месяцев назад

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!!

@BarneyCodes 5 месяцев назад

Thanks so much, I'm glad you found it useful!

@bynightcore4868 7 месяцев назад

Hi, normally I really don't comment on RU-vid 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 :)

@BarneyCodes 7 месяцев назад

Thanks so much, glad it was helpful and I hope your project goes well!

@johnschmitt9158 12 дней назад

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

@BarneyCodes 10 дней назад

Thanks so much, glad you found it useful!

@facr 5 месяцев назад

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

@BarneyCodes 5 месяцев назад

Thanks so much, glad you enjoyed it!

@tristanjohn 7 месяцев назад

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

@BarneyCodes 7 месяцев назад

No problem, glad you found it so useful!

@RhogerAnacleto 4 месяца назад

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.

@BarneyCodes 4 месяца назад

Thank you so much! You've got this, it took a couple of tries before it started to sink in for me as well, I think that's very normal because it's definitely a different sort of programming from what most of us are exposed to, but I promise it does get easier! If you have any questions or need help, please feel free to reach out!

@mis4vr877 7 месяцев назад

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

@BarneyCodes 7 месяцев назад

Thanks so much for the kind words! I'm really glad to hear this video helped!

@chbrules 2 месяца назад

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 :|

@BarneyCodes 2 месяца назад

It took me so many cracks at trying shaders before it started to stick! Not meant to discourage you, just letting you know you're not alone in feeling that way! I think it's just you have to approach it in a pretty different way from most programming so it can just take some time to get used to, I'm sure you'll get it though - if you have any questions or anything, just let me know :)

@discotecc 5 месяцев назад

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

@hmmm1482 20 дней назад

the best shader tutorial ive watched so far!!!! THANK YOU!!!!!!!!!

@BarneyCodes 20 дней назад

No worries, glad you found it helpful!

@akashdalvi5369 3 месяца назад

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

@user-gq3km7oe2f 5 месяцев назад

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

@TechnicJelle 9 месяцев назад

What a great video! Thanks for making it :D

@BarneyCodes 9 месяцев назад

Thanks so much for the support! Glad you enjoyed it!

@nepp9574 5 месяцев назад

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

@BarneyCodes 5 месяцев назад

Wow, thank you so much! Hope your adventures go well!

@Seb001ean 8 месяцев назад

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.

@BarneyCodes 8 месяцев назад

Thanks so much! It was pretty hard to decide what to keep in and what to leave out and it still ended up being a long video! I do plan on doing more videos with shaders in the future, is there any topic in particular you'd like to see in more depth?

@geelemo 27 дней назад

@@BarneyCodes shaders in wgsl!

@alexeyl22 4 месяца назад

Great stuff. Looking forward for more.

@boiimcfacto2364 5 месяцев назад

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 ♥

@BarneyCodes 5 месяцев назад

Thank you so much, that's so encouraging to hear and I'm glad you found it useful!

@nouveu1 5 месяцев назад

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 :)

@BarneyCodes 5 месяцев назад

Thanks so much!

@AD-Dom 2 месяца назад

Um, thank you. Wow. This is exactly the type of rundown I've been seeking.

@BarneyCodes 2 месяца назад

No worries, glad it was helpful!

@mooshy5944 6 месяцев назад

Thanks! this was exactly the sort of tutorial I’ve been looking for 🎉

@BarneyCodes 6 месяцев назад

No worries, glad it was helpful!

@Shamysoza92 5 месяцев назад

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.

@BarneyCodes 5 месяцев назад

I love Simon's videos, they're really great! But yea I think P5js is pretty much as straightforward as it gets for setting up shaders which is why I use it so much! There are some limitations with it though, like the ModelView matrix being combined in the vertex shader so that you can't do world space calculations. What topics would you like to see in the next video?

@Phenylalanin1979 4 месяца назад

Brilliant video, really a great way to visually teach complex topics. Very informative and I can appreciate how much work this video must have taken all in all. Also the two Edges was a nice touch :).

@BarneyCodes 4 месяца назад

Thanks so much, I'm glad you enjoyed it! And I think you're just the second person to comment on the Edge joke, good to know there are a few cultured people out there hahaha

@Phenylalanin1979 4 месяца назад

@@BarneyCodes Wait a minute ... is cultured code for old?

@accumulator4825 5 месяцев назад

You're very good at explaining. Thank you for this video!

@BarneyCodes 5 месяцев назад

Thank you and no worries!

@atibyte 5 месяцев назад

Nice intro to shaders, thank you!

@BarneyCodes 5 месяцев назад

Thanks, glad you liked it!

@emmettdja 4 месяца назад

it helps that p5js just recently made it much easier to use shaders with their library!

@wazawoo 4 месяца назад

You are amazing at explaining and visualizing things

@BarneyCodes 4 месяца назад

Thank you, that's very kind!

@LBCreateSpace 9 часов назад

Awesome video Ty!

@jermaineallgood 8 месяцев назад

Thank you so much!!!! I appreciate this as it will help tremendously!

@BarneyCodes 8 месяцев назад

No worries!

@pengain4 8 месяцев назад

Awesome video. Very entertaining and educational

@BarneyCodes 8 месяцев назад

Thank you, glad you enjoyed it!

@thatalbeeguy 7 месяцев назад

thank you so much this is an incredible tutorial!

@BarneyCodes 7 месяцев назад

No worries, glad you found it useful!

@doublemax77 5 месяцев назад

Excellent video, thank you so much!

@BarneyCodes 5 месяцев назад

No worries, glad you liked it!

@ttaylor7604 7 месяцев назад

I really needed a video like this about 2 years ago, when I studied this at university

@BarneyCodes 7 месяцев назад

Better late than never I guess?

@mycollegeshirt День назад

that was great!

@reik2006 4 месяца назад

Really good introduction! Thank you

@BarneyCodes 4 месяца назад

Thanks, glad you liked it!

@Cypekeh 8 месяцев назад

Great video, thanks I had some shaders in uni, but I didn't really get it Hopefully I'll start using them more often and learn them, but this video is a great introduction

@BarneyCodes 8 месяцев назад

Thanks! Hope the video is helpful, let me know if you have any questions!

@chaosordeal294 4 месяца назад

The benefit of a strongly-typed language like C++ is that the developer is in control and well-informed. The advantages of loosely-typed languages are as many and varied as the reasons to be loose with variables in a computer program.

@chaosordeal294 4 месяца назад

(none, there are none)

@BallardRobinett 6 месяцев назад

excellent video! really appreciate this

@BarneyCodes 6 месяцев назад

Glad it was helpful!

@okie9025 7 месяцев назад

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]

@BarneyCodes 7 месяцев назад

Oh that's really good! Thanks for the suggestion!

@Jun127 9 месяцев назад

This is a great resource. :)

@BarneyCodes 9 месяцев назад

Glad you found it useful!

@TarousDT 5 месяцев назад

Small clarification, HLSL is the language used by DirectX, meaning it is windows only. Where as GLSL is multiplatform.

@BarneyCodes 5 месяцев назад

Thanks for clarifying!

@theobgshow 7 месяцев назад

Superb! Thank you 😊

@BarneyCodes 7 месяцев назад

No worries!

@djneils100 9 месяцев назад

this channel rocks - please keep going!

@BarneyCodes 9 месяцев назад

Thank you so much! Definitely more to come!

@theshoulderofgiants 9 месяцев назад

thank you ❤amazing work.... i hope you make this is a series..i would love to learn about vertex shaders..looking forward to ur next video 😁

@BarneyCodes 9 месяцев назад

Thanks! There will definitely be more shader videos! I'll have to think of something cool to do with the vertex shader!

@wlgemini1991 6 месяцев назад

视频做的真棒, 每一步都介绍的很详细👍

@BarneyCodes 6 месяцев назад

Thank you!

@jarrettonions3392 7 месяцев назад

Todays the day bro!! :D been so long coming... finally got some bloom and reflective water up and running in unity... wow

@BarneyCodes 7 месяцев назад

That's great, nice work!

@bespokeprogramming 8 месяцев назад

Mate! I love glsl, but your explanation is dope! Thank you!

@BarneyCodes 8 месяцев назад

Wow, thanks so much! Glad you liked it!

@speckdratz 5 месяцев назад

Rating: 12/10 on all levels. This is YT-hall-of-fame material 🏆

@BarneyCodes 5 месяцев назад

Hahaha wow, thanks so much!

@syntaxerorr 5 месяцев назад

Great video.

@SeasonalMike 8 месяцев назад

Wow, I can't wait to learn how to draw a cube!

@zmf1425 7 месяцев назад

Very good. Thank you

@BarneyCodes 7 месяцев назад

No worries!

@D.E.Nicolas.Goncalves 6 месяцев назад

Oh man! Greatfull by your content!

@BarneyCodes 6 месяцев назад

Glad you find it helpful!

@JsbWalker 18 дней назад

I really wasn't expecting this video to be this difficult to adapt for Java Processing, but it's proving to be incredibly hard to make this example code work there.

@BarneyCodes 16 дней назад

What issues are you running into? There are definitely some differences in getting the environment set up, but the actual shader code should be usable between both (you might just need to check what uniforms/attributes are available by default in Processing vs P5js) If you're getting any error in particular I can try to give you a hand to get it sorted out!

@JsbWalker 12 дней назад

@@BarneyCodes That's what I thought as well. When I first copied everything down the shaders just refused to compile, so I figured the names of the attributes must just be different. It took me a while to find any documentation about what attributes were available in the Processing environment (the official site has pretty much nothing that I could find about implementing shader functionality despite this being a feature for years at this point) vs P5, but eventually I found examples in an old backup of a blog that went pretty in depth about how this stuff worked for Processing. After replacing all of the attributes with their correct counterparts the shaders were finally able to compile and run, but specifically the vertex shader just doesn't have the expected behaviour. It refuses to shade anything in 2d that isn't a square that fills the whole screen. I've been tinkering with it off and on for a while trying to figure out what in the implementation is different enough to make this not work, but I don't have enough experience or documentation support to really know what's up here

@BarneyCodes 10 дней назад

I've only used shaders in Processing for full screen effects, so unfortunately can't be too much help there sorry! A few of the example Processing shaders I've seen have different defines at the top, eg: #define PROCESSING_TEXTURE_SHADER or #define PROCESSING_COLOR_SHADER maybe something like that helps? I know Processing also lets you either supply a vertex shader or just use their default one, not sure which route you've been going down (maybe both already!) but it could be good to try them both out to see if that helps at all. As a last resort, the Processing source code is all available on GitHub so you can also dive into that (if you're feeling brave enough!) to try and figure out what's going on and why it might be behaving strangely! Sorry I don't have a more concrete bit of advice for you, but hopefully there's something in there that's helpful? Good luck!

@smooshymemes 2 месяца назад

Better than my public education 11/10

@mireymackey 5 месяцев назад

Top-tier video!

@BarneyCodes 5 месяцев назад

Thanks so much!

@adeidara9955 9 месяцев назад

This is great, thank you! Ps. There is a low humming or noise in the background , I don’t mind it but some people could be sensitive to it ^^

@BarneyCodes 9 месяцев назад

Glad you found it useful, and thanks for the feedback, I'll look into eliminating it for future videos!

@simonnesvadba9757 2 месяца назад

This gives my brain a nosebleed, but in a good way like in anime ❤

@jackmalcolm Месяц назад

Great video. Wish I understood it. I get the general concepts but a lot of the technical stuff flies over my head. Having a tough time learning basics of coding because I don’t have anything to code, a lot of tutorials/learning resources just feel like I’ve been given a list of a languages syntax.

@BarneyCodes Месяц назад

It can definitely be that way when you're first getting started! Thankfully you'll start to notice that there are a lot of similarities between languages so once you get a bit more familiar with one, it'll be easier to pick up more. Keep at it and you'll get there! I highly recommend finding a tutorial for something that genuinely excites you, it makes it a lot easier to stick with it! (For me it was a really really basic game, I think it was a bit like space invaders or something!)

@jackmalcolm Месяц назад

@@BarneyCodes I guess a follow up question would be where would/should I do something like that? Would you do that in a game engine like unity? Or just barebones? I feel like using a game engine might be a detriment to some of the learning process because the bells and whistles are already there, but I also don’t want to give myself an additional level of frustration for no reason.

@jackmalcolm Месяц назад

@@BarneyCodes though, I guess it’s just personal preference and in finding a tutorial like that I’d get my (or an) answer.

@BarneyCodes Месяц назад

@jackmalcolm I think if your aim is to learn to code, I'd probably recommend not using an engine. A really great starting point would be to check out "The Coding Train" here on RU-vid. Dan, the bloke that runs the channel, has hundreds of videos for all skill levels and his enthusiasm is infectious! In fact I think he may have pretty recently released a course on getting started programming, which could be perfect! EDIT: It's called "Creative Coding for Beginners - Full Course!" if you want to look it up :)

@hk_labs 7 месяцев назад

Thank you!

@BarneyCodes 7 месяцев назад

No worries!

@chfr 2 месяца назад

Neat video! I went through the (current state of the) book of Shaders. I later saw people being critical on it in forums, saying it has some limitations, and your video helped me see one of it. The book of Shaders tackles pretty much only the contents of the .frag files, but thanks to the "circles array" example you made, I realize the importance of the "CPU" side of things, and passing custom variables.

@BarneyCodes 2 месяца назад

Glad you found it useful! I had similar frustrations with a lot of shader tutorials, so happy to hear that my one has helped in that regard

@FurryWrecker911 5 месяцев назад

Im a 3d artist who has been wanting to get into technical art seeing that it's tight competition to get a job doing 3D stuff, but everyone and their mother needs like 5-10 tech artists. This is my gateway into securing my future. Did 3D stuff or 7 years under my last employer, but it's still tight as ever to get in anywhere else.

@BarneyCodes 5 месяцев назад

Best of luck! Hopefully this can get you started on your shader journey!

@hunam_ 6 месяцев назад

thank you very much

@BarneyCodes 6 месяцев назад

No worries!

@j_uice 9 месяцев назад

yessssssss thanky ou for this!

@BarneyCodes 9 месяцев назад

No worries!

@WhatDoYouWant000 22 дня назад

This introduction explains al ot about shaders even tho its just an intro it is really worth watching oh also i wanted to ask is it possible to learn GLSL and opengl at the same time?

@BarneyCodes 22 дня назад

Glad you found it helpful! I definitely think it's possible to learn both at the same time, in fact it's probably necessary to learn a little bit of GLSL to do anything with OpenGL, but I think it's probably best to just do the basics of one, enough to let you explore the other, and then you can come back and learn the first one properly, just so you're not too overwhelmed!

@onlylikenerd 5 месяцев назад

Hey nice video. Good stuff

@BarneyCodes 5 месяцев назад

Thanks, glad you liked it!

@elisthetic 5 месяцев назад

i would like you to know that this video is SO WELL MADE and beautifully explained, that me, a person with 0 prior experience to coding, no idea what the brackets even do, are able to understand the concepts perfectly well. Thank you so much, my journey of learning how to make games is looking a lot less dim now 😭

@BarneyCodes 5 месяцев назад

Wow, that's amazing! Glad you found it so useful and good luck on your journey! Feel free to reach out if you have any questions!

@MarekFajkus 7 месяцев назад

The only bad thing about this video is that it didn’t exist yet back when I was learning this the first time. From now on this will be the introduction I recommend. 👏👏👏

@BarneyCodes 7 месяцев назад

Wow! Thanks so much for that, very encouraging to hear!

@JoeFly2009 4 месяца назад

Great Video! I saw another comment talking about Minecraft's Vanilla Shaders (Vanilla means that it's the default version, without any API like OptiFine), and I think it would be interesting to make a video about it. Two great examples are bradleyq's shader-toolkit and VanillaPuddingTart. (The default files can be obtained by extracting Minecraft's jar file)

@BarneyCodes 4 месяца назад

Thanks! I'm actually really interested in pursuing this idea so I'll definitely check out both of those!

@SirSnowman 7 месяцев назад

If you delete "Chapters:" in the videodescription an start right with 00:00 ... you'll get the chapters also in the videotimebar as well

@BarneyCodes 7 месяцев назад

Thanks so much for that! I moved some things around in the description which must have screwed them up!

@SirSnowman 7 месяцев назад

@@BarneyCodes no problem, I delete my comment tomorrow, to keep you tutorial clean :)

@__Rizzler__ 7 месяцев назад

thanks breh

@BarneyCodes 7 месяцев назад

No worries!

@Mtaalas 5 месяцев назад

Draw a circle... then draw the rest of the fucking pantheon! :D Great video, straight to the point :)

@BarneyCodes 5 месяцев назад

Hahahaha thanks, glad you liked it!

@pentachronic 6 месяцев назад

The edge joke cracked me up!! Would be interested if Shaders are used for physics and engineering math calculations ? At the end of the day it’s just doing a load of parallel float (or other) ops.

@BarneyCodes 6 месяцев назад

I'm glad somebody got it, it's the first time someone mentioned it hahaha That's a really great question! There's a type of shader called a compute shader that is often used for exactly that! Compute shaders are basically a really flexible type of shader where the programmer gets to define most things about how it is run, and can read/write into "shader storage blocks" so you're not limited to just outputting to textures and you don't need to render geometry to trigger it to run. Before I learned about compute shaders, I did try to use textures to store particle positions but I couldn't get it to work too well. I'm sure that it's possible though!

@ceruleansky6670 7 месяцев назад

Instructions unclear about beverage choice grabbed vodka now I have to rewatch the video 11/10

@BarneyCodes 7 месяцев назад

Hahaha I'll be more specific next time

@ruadeil_zabelin 5 месяцев назад

More specifically HLSL is used by Direct3D, while GLSL is used by OpenGL and Vulkan. It is also worth noting that crosscompilation through for example spir-v is possible which means you really only need to write 1 language (typically hlsl) to support a wide variety of graphics apis.

@BarneyCodes 5 месяцев назад

I'll have to check the cross compilers out, didn't know that was a thing! Thanks!

@ruadeil_zabelin 5 месяцев назад

@@BarneyCodes The way I do it in my game engine is write everything in HLSL. Then i use glslang to compile to Spir-V. From there i use spirv-cross to "decompile" to either GLSL that targets opengl or vulkan; at which point you can use the opengl commands to compile it or precompile back to target opengl spirv or vulkan spirv (yep.. they're not compatible with eachother; they have their own spirv flavour). You have to take this decompile step because the HLSL resulting spir-v is not compatible with opengl. Supposedly it works with Vulkan but i couldnt get it to work. But with this it works flawlessly across d3d11, 12, opengl 4.6 and vulkan 1.2. The decompiled GLSL isn't even half bad either.. it looks pretty clean.

@BarneyCodes 5 месяцев назад

@@ruadeil_zabelin Thanks for explaining! I'm guessing your engine allows people to choose which renderer they're using then? If so, that's impressive! The only other scenario I can think of where you might need to do something like this is if you're porting a game from one renderer to another. Are there other use cases for such a thing?

@ruadeil_zabelin 5 месяцев назад

@@BarneyCodes You can pick a renderer yes, but I made it so it just suggests what I think is the "best" supported one for that platform. So on windows it always defaults to d3d11; on linux its Vulkan, on mac its opengl (though i might try metal someday). I basically studied how unreal engine handles their render api abstraction and found that its basically very similar to the d3d11 api. I wrote a similar interface and just implemented all the function calls for all the graphics api's. If you choose the abstraction well its not all that difficult to do. The only hurdle was the shaders so the possibility of crosscompiling was really nice.

@BarneyCodes 5 месяцев назад

@@ruadeil_zabelin Ahhh that makes a lot of sense! Sounds like a really cool project! Thanks for all the info :)

@auditdb7433 4 месяца назад

Lost me at swizzling, but guess it helps to have 3d coding knowledge. Really hard to find a simple tutorial that goes deep on the basics. I really like the style of this vid and you had me for the first ten minutes. I will persevere.

@BarneyCodes 4 месяца назад

Sorry to hear that! Honestly, you can get away with not using swizzling so I'd encourage you to just skip that part and keep going! All you need to know for swizzling is, if you see something like vec.xxy, it's the same as saying vec3(vec.x, vec.x, vec.y) Hope that helps!

@auditdb7433 4 месяца назад

@@BarneyCodes thanks 🙏

@crab-cake 7 месяцев назад

not really familiar with shader languages but recently i've been looking into webgpu. in particular the wgpu rust crate. i think webgpu has a lot of potential. only downside is that there aren't many resources to learn outside of the spec since it's so new.

@BarneyCodes 7 месяцев назад

I did have a look into webgpu a little while ago, and like you said there aren't many resources. I'm not sure how many browsers support it at this point either? Looks really cool though, excited to see what it brings!

@tommysanger6659 5 месяцев назад

Great video! A couple questions I have. If shaders are meant for the GPU, what happens when running on a system with only a CPU? For the background image, is there a difference in handling png, jpeg, etc? Or are they passed as just the pixel data? For video games, are shaders drawing everything? Or do they receive the frame (like the background image) and then apply additional changes to that? This is the first shader video I've come across, so I'm sorry if these are commonly answered questions.

@BarneyCodes 5 месяцев назад

Really great questions! Most mordern CPUs will have some sort of on-board graphics which is essentially like having a mini GPU built into it. A dedicated graphics card will be a lot faster and usually perform better too. You can get CPUs without graphics in built, but they're the exception not the norm. The CPU is where the work of opening/reading the files happens, and it then will just pass the pixel data to the CPU, so there shouldn't be any difference between different file types. If you're doing it yourself (ie not using an engine/framework), you'll have to set what form that pixel data takes using the graphics API you're using (this will be things like whether its RGBA or ARGB etc) In games, shaders will be drawing everything, but if you're using an engine or framework they will have shaders that do pretty much everything for you, you'll just tell it what models/textures/sprites to use and it will handle the rest. You'll almost always be able to write you own shaders though, if you need to do something a little obscure or want a custom effect. I hope that helps!

@tommysanger6659 5 месяцев назад

@@BarneyCodes Yes that helps a bunch! I did look some other stuff up and it seems there are more than just vertex and fragment shaders. Are the others just variants of these two that focus on specific aspects which could be combined into the base 2? Also, an additional question. I know NVIDIA applies their DLSS stuff that uses AI to make games look better. Are these just game specific shaders that are created using machine learning? Or does the regular image render from shaders, and then have another round in the GPU where DLSS polishes up the finished frame?

@BarneyCodes 5 месяцев назад

That's great to hear! Yea there are a bunch of types of shaders, and they are all their own unique thing and are used at different steps. You hear of vertex and fragment shaders the most though because they are required to draw stuff on the screen, where as the others are optional. The most common non-fragment or vertex shaders are probably geometry and compute shaders. Geometry shaders basically lets you turn a vertex into a group of vertices (eg you could turn a single point into a cube). Compute shaders are essentially just a way for you to use the parallel power of the GPU outside of the rendering process. It uses Shader Storage Buffer Objects (SSBOs) to transfer data between the CPU and GPU, so once the compute shader is finished you can read the SSBOs for the output and then use that information however you want. I don't know too much about DLSS but I had a quick look and it sounds like it's all done AFTER the rendering has finished. I think the idea is that you render to a lower resolution so that it's really fast, then DLSS upscales that smaller frame to a larger resolution. It uses special hardware on modern GPUs that is purpose built for running AI!

@AntonioNoack 5 месяцев назад

"For video games, are shaders drawing everything? Or do they receive the frame (like the background image) and then apply additional changes to that?" Yes, shaders are drawing everything, but at the same time, for things like transparency, you can enable blending (glEnable(GL_BLEND)), and then it will combine your calculated color with that of what you have drawn previously. Unfortunately, transparency in 3D is a complicated topic, so I'd recommend avoiding it when starting.

@marsovac 5 месяцев назад

Nice video. Just one nitpick. The grayscale is incorrect, since human eyes don't treat colors equally. It depends on the use case and the color space but the general simple formula is: 0.2126 R + 0.7152 G + 0.0722 B. There are ones with square root and squaring of colors that aproximate it better, but are much more expensive in terms of performance.

@BarneyCodes 5 месяцев назад

Huh, that's really interesting! Thanks for the info!

@rmt3589 7 месяцев назад

For a videogame, is there any reason we would want more code in the pixel shader? (I already forgot what it's called) Seems like keeping it minimal would be the goal for performance.

@BarneyCodes 7 месяцев назад

It really depends on the use case, but in games the most common use is for visual effects (think shaders in Minecraft, it doesn't have an affect on gameplay but completely changes how it looks). It can have applications outside of just visuals as well though, for example I'm working on a game at the moment where I use shaders, and in particular the fragment/pixel shader, to calculate the damage to the terrain on a per-pixel level. If you want to learn more about that, I've got a playlist with my devlogs here: ru-vid.com/group/PLlaA0JvEhcG_rFyz7oa7BR6GM02oQeo8b As with anything performance related though, it's worth using a profiler and finding out where the actual bottlenecks are, because generally the GPU is very fast, but only if you use it "properly" if that makes sense. Adding more effects and shaders won't necessarily have a negative affect on performance, but the best way to find out is to try it and see what happens! Hopefully that helps, let me know if you have any other questions!

@rmt3589 7 месяцев назад

@@BarneyCodes Thank you so much. I'm taking a swing at making my own engine after the Unity debacle, and finding out that many calculations were happening a frame shocked me. Glad it's not usually an issue.

@BarneyCodes 7 месяцев назад

It's pretty amazing how fast computers really are! Hope your engine project goes well!

@miguelmyers8929 9 месяцев назад

can you cover generating normals with the shaders? tangent space and world space?

@BarneyCodes 9 месяцев назад

We can definitely look at that in a future video, great idea!

@MBAXAXAX 14 дней назад

❤

@Vodboi 12 дней назад

Question about the example shown at 30:18 : One natural optimization to me is to break the for loop if d is 0, as you don't have to check any more circles if you know it is inside one of them. But I've also heard that having conditionals in shader code could be non-optimal. Or have you done it like this here just to keep it simple? EDIT: Oh you mentioned this a bit later. Still though, how does this downside weight up against potentially not having to check 80-90 circles if you landed inside one in the first iteration?

@BarneyCodes 12 дней назад

This is a really great question! I think I forgot to include this in the video, but shaders are only as fast as the slowest case, which is probably a bit different from how you're used to things working on the CPU! On the CPU, since things are happening one after the other, if you can move on quickly to the next iteration you can save time overall. However on the GPU, because all the pixels are being calculated at the same time, the shader has to wait for all the pixels to finish before it can finalise the result, meaning that even if 99% of the cases break early, the shader still has to wait for the pixels that are in that final 1% that are taking their time! I don't think the optimisation you've suggested would hurt the performance at all, but it's better to focus on speeding up the worst case, rather than speeding up the most cases (which can take a bit of getting used to!) Hope that helps clear things up a bit, let me know if you have any more questions :)

@Vodboi 11 дней назад

@@BarneyCodes Thanks for the answer, and thanks for the video! I still have one more question if you don't mind: You say "All the pixels are being calculated at the same time", so I'm trying to get a grasp of how gpu's do this. Say the gpu has 1000 cores. If a scene has a million pixels, each core would still have to do multiple pixels each. Can these calculations be parallel within one core, or does each core calculate "sequentially"? Because if they at some point have to do sequential calculations, then I feel like there should be a benefit to optimizing by breaking, as that core could then process more pixels. So I guess the question is if each core utilizes some internal parallelization technique, or if one core can only handle one calculation at a time?

@BarneyCodes 10 дней назад

You know what, I don't actually know! I've read that they're all done at the same time before, but hadn't stopped to actually think how that would work in practice. I just did a bit of googling and it looks like each core can run multiple threads at once (each thread calculating a single pixel), but it's still not enough to actually do "all the pixels at the same time"! From what I've read the GPU executes a block of pixels at the same time, and only moves to the next block only if EVERY pixel in the first block has finished, so it's kind of a mix of what we were both saying! With my example code though, it's pretty likely that a lot of the blocks would be able to finish early, so your optimisation would definitely have an impact. I think it depends a lot on what you're actually doing in the shader and it wouldn't be quite as significant as the same optimisation on the CPU. Thanks again for the great question, I learned some new stuff, and hopefully that helps you as well!

@Vodboi 10 дней назад

@@BarneyCodes I see, thanks again for the reply!

@alister_ 7 месяцев назад

Damn! If I had the chance to hug you I would surely do!

@BarneyCodes 7 месяцев назад

Glad it was helpful!

@butchcassidy1717 День назад

link in the description for the data types is broken, its missing the closing ")". It appears to be text after the link

@BarneyCodes День назад

Thanks for catching that! I've hopefully fixed that up now :)

@CodeDisease 5 месяцев назад

0:40 coffee time

@zaftnotameni 8 месяцев назад

crazy that nowadays a 30 min video is referred to as "quite a long video"

@BarneyCodes 8 месяцев назад

As in 30 mins is a long video or it's not? 😂

@zaftnotameni 8 месяцев назад

hahaha, I meant it's not, specially if it is informative like this... : )

@BarneyCodes 8 месяцев назад

@@zaftnotameni Glad you found it informative! I think part of it being a "long video" in my mind is because it took a long time to make!

@MuhammadRafay-gg6gi 6 месяцев назад

I tried to follow along and wrote the code shown at 11:09 in p5.js web editor but could not get it to work. I went back to 5:20 to look at the previously shown code but somehow couldn't see how these two codes link together. Please help

@BarneyCodes 6 месяцев назад

In the code at 5:20 you can see on line 5 the call to the loadShader() function. This is how we load the code you're writing at 11:09 with the JavaScript code. You'll need to make sure the names you use in the loadShader() function exactly match the filenames you use for your vertex and fragment shaders!! What error message do you get when you run your code? There's also the example code linked in the description, so feel free to have a look at that, it might be easier to see what you're missing there! Hope that helps!

@TsingYiTube 8 месяцев назад

0:36 I am an asshole!! 😂

@davidcadavid7909 3 месяца назад

Hello. First of all great video. I am just getting started with this topic and learning more about how games work in general so this has been a great introduction to many concepts. I have a question: For the code shown at 31:49: float colour = 1.; for(int i = 0; i < num_circles; i ++) { float d = length(pos - circles[i].xy) - circles[i].z; d = step(0., d); colour *= d; } gl_FragColor = vec4(colour, colour, colour, 1.); I don't understand how the "colour" calculation works here, meaning, if it is 0 in the first iteration, it will already be 0 for all other circles in the loop since the initial value is outside the loop . Also the gl_FragColor is outside the loop, so we only paint once even though we calculate a value for all circles ? What am I missing?

@BarneyCodes 3 месяца назад

Very good question! I think my variable name makes it not very clear, it probably should have been called something like "outsideCircles" or something similar. Basically, colour will stay as 1 only if it's not inside any of the circles. If it's inside any single circle, it will become 0, which will turn that pixel on the screen black (which is why I called it colour even though I probably shouldn't have!) You're right that if it turns to 0 in the first iteration, then it will always be 0 making the rest of the looping a bit redundant. However, because of the way GPUs parallelise things, you're only as fast as the slowest pixel, so if one pixel has to loop through all the circles, then there's no real speed to gain from breaking out of the loop early for other pixels. I hope that makes sense, please let me know if you've got any more questions!

@davidcadavid7909 3 месяца назад

@@BarneyCodes Wow thanks so much for the fast response. I think i understand what you are saying. At first i was seeing it as something sequential but I remembered that the code is executed in the context of a single pixel, and then it is executed for all pixels in parallel, so if I understand correctly we are basically checking if at least one circle is present in the pixel we are checking against and if it is, we paint that pixel black, otherwise we paint it white. Let me know if that is correct or if I am missing something (again 😅) Thanks again. Greetings from Colombia!

@BarneyCodes 3 месяца назад

No worries at all, and yep, that is exactly what's happening! Each pixel is checking if it's inside any one of the circles and turning black if it is! It can definitely take some time to think about the code in this context and totally normal to find it confusing! But it gets easier the more you do it and it seems like you're picking it up really well!

@KittenKatja 7 месяцев назад

Can you do a video about changing Minecraft's Vanilla shaders? (it's also GLSL) To get started, you simply need to create a resource pack, and hit F3+T to reload resource packs in-game, from there, it would be like copy/pasting shader files into the resource pack, and modifying them there. (legally, you would need to create the modified file)

@BarneyCodes 7 месяцев назад

That sounds like a really fun idea! I've never made Minecraft shaders before so I'll have to play around with it a bit before making a video, but I really like that idea! Thanks for the comment!

@teamruddy611 7 месяцев назад

What even is the language that you paid with javascript? I've never heard of it, likely less common.

@BarneyCodes 7 месяцев назад

If you mean P5js, it's just a javascript library that makes it really easy to draw on a canvas, but not necessary at all, it just makes the demos easier. And GLSL is a very common language for writing shaders! Hope that clears things up a bit!

@ecruz2317 4 месяца назад

How does one attach or combine vec to a slider bar that controls the intensities? i am close but don't know how to combine say 3 calls into 1 call in a slider format and not separated x, y, z, w, + thanks if anyone helps.

@BarneyCodes 4 месяца назад

I think if you want to control each aspect of the vector individually you're going to have to use multiple sliders. You should be able to combine the values from each slider into a single vector though and set that in your shader. Pseudo code might look something like: shader.setUniform("mySliderValues", [slider1.value(), slider2.value(), slider3.value()]); Hope that helps

@ecruz2317 4 месяца назад

i'll give it a shot when i can and probably return with any progress, appreciate it, i do not do this, it is more like a new thing to learn, thank you.@@BarneyCodes

@BarneyCodes 4 месяца назад

@@ecruz2317 Sounds good! I think the best way of learning is doing what you're doing and trying things a bit outside your comfort zone! Hope it goes well!