Introduction to shaders: Learn the basics!

[@StarFury2]

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]

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]

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]

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]

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]

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.

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

[@tirins]

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

[@BarneyCodes]

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]

Me!

[@Seb00lean]

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]

​​@@Seb00leanGlad 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]

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

[@RhogerAnacleto]

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]

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!

[@bc3f4a]

Same.

[@BarneyCodes]

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/

[@Ibbys_space]

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

[@nepp9574]

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]

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

[@rrutter81]

perfect no-nonsense introduction to shaders. The pacing was perfect from start to finish. well done.

[@BarneyCodes]

Thanks, glad you liked it!

[@iulianradu1869]

You're such a good teacher ! Great job breaking down complex concepts and touching on little details that novices will be confused about.

[@BarneyCodes]

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

[@SandMagnum]

single most helpful vid on shaders I've seen yet (from an absolute beginner's perspective)

[@BarneyCodes]

That's great to hear, I hope your shader adventure is going well!

[@bynightcore4868]

Hi, normally I really don't comment on KZbin 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]

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

[@MichaelBurchard-l1z]

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

[@nouveu1]

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]

Thanks so much!

[@WarriorAlexOG]

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]

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!

[@thisguy.-.]

I'm going through a similar experience drawing primitives in MonoGame, and I'll say it really is handy to have this context because the documentation and tutorials for this stuff are really obscure! Thanks @BarneyCodes for the tutorial, seriously

[@jokosalsa]

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

[@BarneyCodes]

Thank you so much! Glad you found it helpful!

[@markrolandmakes]

This is fantastic, thank you! I've been casually interested in shaders for a couple of years and this video was a great introduction. I'm excited to try this out!

[@BarneyCodes]

Glad you found it useful! They're incredibly useful, and this video only just scratches the surface, have fun!

[@StevesMakerspace]

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

[@BarneyCodes]

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!

[@Lycanthronaut]

As a software engineer that uses the standard python and java / C# dabbles, this is like a wizard learning a different school of magic lol, so interesting

[@facr]

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

[@BarneyCodes]

Thanks so much, glad you enjoyed it!

[@boiimcfacto2364]

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]

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

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

[@BarneyCodes]

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

[@renanlecaro]

Very nice intro, lots of useful hints to get started, thanks !

[@BarneyCodes]

Thanks so much, glad you found it useful!

[@TechnicJelle]

What a great video! Thanks for making it :D

[@BarneyCodes]

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

[@Seb00lean]

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]

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]

​@@BarneyCodes shaders in wgsl!

[@Phenylalanin1979]

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]

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]

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

[@tristanjohn]

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

[@BarneyCodes]

No problem, glad you found it so useful!

[@MiguelRodriguez-gs3pi]

this video is pure gold. Thank you so much

[@BarneyCodes]

No worries at all, glad you found it useful!

[@emmettdja]

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

[@mis4vr877]

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

[@BarneyCodes]

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

[@bwabbel]

Bro you just made shaders make sense to me! 🤯 "You're a wizard, Barney"

[@BarneyCodes]

So glad to hear it! They're a lot of fun :)

[@hmmm1482]

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

[@BarneyCodes]

No worries, glad you found it helpful!

[@AD-Dom]

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

[@BarneyCodes]

No worries, glad it was helpful!

[@smooshymemes]

Better than my public education 11/10

[@chfr]

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]

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

[@johnschmitt9158]

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

[@BarneyCodes]

Thanks so much, glad you found it useful!

[@Shamysoza92]

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]

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?

[@xKond3i]

Really well structured video and easly explained subject. Keep up the good work! 😉

[@BarneyCodes]

Thanks so much!

[@mitchellrcohen]

Swizzling is my new favorite word. Thanks for the video!!! Color coding the vectors helped! I come from unreal blueprints.

[@BarneyCodes]

Glad you found it useful, swizzling is a great word haha

[@Jun127]

This is a great resource. :)

[@BarneyCodes]

Glad you found it useful!

[@samdavepollard]

Only half way through but this is gold. I've dabbled a little with real basic shaders in opengl using c++ but all that VAO, VBO stuff gets pretty old very quickly. I've also dabbled in p5.js a fair bit but never used shaders (didn't even know until recently that shaders in p5.js were possible). Pretty excited to see what I can create with p5.js shaders. Many thanks for getting me started, much appreciated.

[@BarneyCodes]

Haha yea setting all that up can be a bit of a chore, P5 is great for just messing about and getting something on the screen quickly! Have fun!

[@speckdratz]

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

[@BarneyCodes]

Hahaha wow, thanks so much!

[@djneils100]

this channel rocks - please keep going!

[@BarneyCodes]

Thank you so much! Definitely more to come!

[@AlexEscalante]

This is so very well explained!

[@BarneyCodes]

Thanks, I'm glad you found it useful!

[@gandrew97]

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

[@jarrettonions3392]

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

[@BarneyCodes]

That's great, nice work!

[@atibyte]

Nice intro to shaders, thank you!

[@BarneyCodes]

Thanks, glad you liked it!

[@wazawoo]

You are amazing at explaining and visualizing things

[@BarneyCodes]

Thank you, that's very kind!

[@ttaylor7604]

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

[@BarneyCodes]

Better late than never I guess?

[@MarekFajkus]

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]

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

[@mikecu2249]

Great Guide! Amazing video!

[@BarneyCodes]

Thanks so much, glad you found it useful! :)

[@mireymackey]

Top-tier video!

[@BarneyCodes]

Thanks so much!

[@Niktmnieniechciej]

One of the best on youtube.

[@BarneyCodes]

Thanks so much!

[@TarousDT]

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

[@BarneyCodes]

Thanks for clarifying!

[@MrKiraBR]

Awesome tutorial, thank you!

[@BarneyCodes]

Thanks, glad you found it useful!

[@moodragonx2]

Very very cool video. I really appreciate the detailed explanations.

[@BarneyCodes]

Glad it was helpful!

[@revenevan11]

This video is the best one I've found so far. The pro tip around 32:00 makes a ton of sense but I hadn't thought of it yet, glad you caught me writing my if statements lol. For context I've been working on my very first shader today! Coincidentally also in P5js like your examples. I came here because of confusing syntax errors I've been getting and although I'll have to troubleshoot those some more (or maybe explicitly define the webGL version the syntax I've learned is correct for? 😅) I think this is helpful. The project I'm writing a shader for is rendering the mandelbrot set, moving the load to the GPU as an upgrade to my current p5 sketch for it. The current version I already built has scrolling to zoom in and mouse-drag panning support, as well as using arrowkeys to change the canvas resolution on the fly... but especially at higher resolutions it's taking minutes to render, so it's far from responsive lmao. I failed to make the rendering function render asyncronously to a graphics object *and* have p5 move or zoom in on the last rendered frame while the next one loaded though, I guess because it's not waiting for 1 long operation or fetch and only for a bunch of small calculations, so doesn't ever hand control back while awaiting, so p5 just shows the preview change for a split second after the next image finally renders and then immediately slaps the new one it's been waiting for over it lol. So I'm skipping that idea since I don't feel like learning web workers for it and instead going straight to shaders for the real performance gains! Before watching this video I'd already ported over (from JS to GLSL) my functions for complex number multiplication, mandelbrot iteration, checking if points are inside the set (need to change to using step function now 😆😅), and for coloring points based on the number of iterations each complex number takes to escape... I was trying to pass some uniforms into it for things like the number of iterations and user input for zooming, but I haven't gotten it to load once without getting syntax errors 😒. I mean I also haven't finished some of the basic features like properly mapping between the fragcoords to mandelbrot space *while* taking the zoom input into account, but I made a map function for it that I was about to test when I got weird syntax errors while trying to load my shader for the first time. Previously in the non-shader cpu version I was mapping from pixelcoords to the complex plane (within a range depending on the zooming and panning) so it'll be a bit different and I'll need to make sure I don't stretch the image by the aspect ratio again like I initially did in the cpu bound pixel version, but it's a work in progress and the whole point of this project was for fun and learning!!! 😁

[@BarneyCodes]

Rendering fractals with shaders is a lot of fun and a really great project to get familiar with shaders! If you get stuck, I've got a video on my channel about making a mandelbrot shader ;)

[@theshoulderofgiants]

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]

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

[@DetectiveConan990v3]

watching this to hopefully understand how this stuff works for my graphics class

[@BarneyCodes]

Hope it's helpful! Let me know if you've got any questions :)

[@Wkaelx]

Oh no! I have recivied the power to create an alternate reality in javascript, i shall use this power to conquest the world.

[@accumulator4825]

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

[@BarneyCodes]

Thank you and no worries!

[@alexeyl22]

Great stuff. Looking forward for more.

[@j_uice]

yessssssss thanky ou for this!

[@BarneyCodes]

No worries!

[@reik2006]

Really good introduction! Thank you

[@BarneyCodes]

Thanks, glad you liked it!

[@wlgemini1991]

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

[@BarneyCodes]

Thank you!

[@akashdalvi5369]

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

[@syntaxerorr]

Great video.

[@BallardRobinett]

excellent video! really appreciate this

[@BarneyCodes]

Glad it was helpful!

[@pengain4]

Awesome video. Very entertaining and educational

[@BarneyCodes]

Thank you, glad you enjoyed it!

[@SirSnowman]

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]

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

[@SirSnowman]

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

[@D.E.Nicolas.Goncalves]

Oh man! Greatfull by your content!

[@BarneyCodes]

Glad you find it helpful!

[@bigfin20]

it's insane just how much stuff inigo has done for shader community. You can't read about them for five minutes without running into a reference to him

[@BarneyCodes]

He's truly a gem, so grateful that he's shared so much of his knowledge with us!

[@okie9025]

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]

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

[@onlylikenerd]

Hey nice video. Good stuff

[@BarneyCodes]

Thanks, glad you liked it!

[@doublemax77]

Excellent video, thank you so much!

[@BarneyCodes]

No worries, glad you liked it!

[@elisthetic]

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]

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!

[@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 KZbin. 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 :)

[@bespokeprogramming]

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

[@BarneyCodes]

Wow, thanks so much! Glad you liked it!

[@marsovac]

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]

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

[@SeasonalMike]

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

[@mooshy5944]

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

[@BarneyCodes]

No worries, glad it was helpful!

[@simonnesvadba9757]

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

[@thatalbeeguy]

thank you so much this is an incredible tutorial!

[@BarneyCodes]

No worries, glad you found it useful!

[@jermaineallgood]

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

[@BarneyCodes]

No worries!

[@FurryWrecker911]

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]

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

[@zmf1425]

Very good. Thank you

[@BarneyCodes]

No worries!

[@ceruleansky6670]

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

[@BarneyCodes]

Hahaha I'll be more specific next time

[@amirhosseinmaghsoodi388]

Very interesting indeed. Here's a minor issue, in the Data Types section, you say it's strongly typed which is true. But it is also statically typed which is what you seem to have meant. Statically typed means that each variable has a predefined type which is unlike how it is done within Python and JS. However strongly typed means that you have to use explicit type conversion to use data where you need it. So Python is strongly typed and will give you errors if you give it the wrong type. But something like C is loosely typed.

[@BarneyCodes]

My bad, I always get the two confused! Good pick up :)

[@FrankBudino]

Summary of this shader tutorial: "But...I'm not gonna go into a lot of details..."

[@WhatDoYouWant000]

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]

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!

[@mathvisuallyexplained6839]

This is awesome

[@mycollegeshirt]

that was great!

[@alexandrewatrin8293]

Really really well made video thanks

[@BarneyCodes]

No worries, glad you enjoyed it!

[@brokenumbrellagames]

Thank you!

[@BarneyCodes]

No worries!

[@noemiklimpel5691]

This was f*ing awesome

[@JsbWalker]

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]

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]

@@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]

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!

[@hunam_]

thank you very much

[@BarneyCodes]

No worries!

[@theobgshow]

Superb! Thank you 😊

[@BarneyCodes]

No worries!

[@tommysanger6659]

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]

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]

@@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]

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]

"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.

[@JoeFly2009]

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]

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

[@LBCreateSpace]

Awesome video Ty!

[@Cypekeh]

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]

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