@@fonzanedelungini I didn't find it to be dense enough that it would require me to research on my own, but that's probably because I already have an idea as to how shaders work beforehand and the thinking that each individual pixel is its own process. Although I guess some of the functions that were used in this video might indeed make someone research it on their own to check the input parameters and the return values.
@@astral6749 Yes, I assume that for you this video is more of a summary of topics you've already spent time on than an introduction (which it is for me).
Wow. _WOW_ I'm blown away by this tutorial. I can't BELIEVE how well this is made, and how well you explained this subject. Even as a coder (as a hobby), shader coding has always been this gigantic terrifying unknowable thing, and half an hour later it feels so down to earth and doable. Here's a like, Here's a sub, here's a comment. More shader content _please_ !
This is good to know others thought it was easy to follow, I was impressed, but very lost. Feels like I have a lot to learn about math/coding before this will make more sense to me.
@@campbellwinslow6986 take everything step by step, pause and do it yourself for each step, write notes in comments next to the thing you do (only move on once you understand and play around with it a little yourself) & don't merge the different parts together like he does. The videos 20 minutes but if you want to learn, you can easily spend a couple hours here. Its an amazing introduction. Don't be afraid of looking for resources and explanations on specific things you don't quite understand, some reaserching is gonna have to be done. You can definitely do it! Good luck
Are you a friggin wizard genius savant? Because until today I had absolutely zero understanding of this art and only ever appreciated it. Today I can write it. And its entirely due to your 20min video. I'm beyond amazed. Further, the most perfect metering, speech, explanations, volume, calmness, and even lofi background music. The production value and quality of this video is 10x what I've seen or learned from in life. I never comment.
This tutorial will probably be the go-to tutorial to anyone who wants a quick hands on introduction to shader code. I am a programmer but i wanted to learn shader coding. I started learning through this tutorial, because the end result looked amazing. You introduce hard but useful concepts in a digestable manner, and it inspired me to stop and think more than once so I could grasp the unfamiliar math formulas and usages. Every step teached me something and allowed a checkpoint to let the concepts sink in. I am not surprised you did not release a lot of videos (2 atm), probably because you put so much effort into the presentation. I thank you for your efforts and for the wonderful tutorial - Condensing years of experience into very insightful 22 minutes.
No, I _did not_ notice the voice was AI, only that it was polished and articulate. This is one of the most fascinating YT videos I've watched. All the more so because I only _barely_ understood most of it-but *did* understand some of it. I'm 75 years old and have no experience with coding except for a thorough understanding of HTML, and a basic knowledge of JS and CSS. My original background and training are in the fine visual arts-i.e., predigital age, hands-on drawing, and painting with RW physical materials. That said, I've lived in the SF Bay Area for most of my adult life, occasionally rubbing shoulders with more technically-minded peers. Even so, I had little interest in computer technology until the mid-to-late 1990s when the internet came along. Before that, from the mid-1980s, although I had played around a little with visuals on what were then high-end systems belonging to friends who were more into emerging digital arts, I couldn't take them seriously. In those days, the only way to show anyone a digital image was to put it on a floppy disk and boot it up on someone's system. OR-Alternatively-take a 35mm film SLR photograph of the image on the highest resolution monitor available, then have the film processed and a print made from the film. - IOW, the way I saw it, there was no way to share the digital image produced with a mass audience _in the medium in which it had been created._ The internet changed all that as it was now possible to share digital images globally. Thus it was only then that I began to take digital imaging more seriously as an art form. It still remained more of a 'novelty' to me than something I regarded as a 'genuine' art. Along the way, I bought my first Apple/Mac system, began learning Adobe Illustrator and Photoshop, and discovered I had an aptitude for HTML (that was a big surprise). This was in the days when we wrote it by hand in MS Word, saving it in a .text format-then opening the .html in a browser. This led to a grasp of hexadecimal color values, and, later the addition of CSS and a sufficient sprinkling of JS to (at least) be able to modify code someone else had written-to adapt an JS slideshow on a web page, for example. The small publishing company I worked for at the time (1996-98) was sufficiently impressed with my skills that they wanted to send me up to Seattle for further training. But I _refused_ this generous offer because, bottom line, _I was a fine arts painter who only worked a job to support his art (large, up to 8x10 feet, very visceral-action based- abstract paintings) and did _*_NOT_*_ want my attention to become absorbed by the non-physical digital realm of emerging AR, etc._ The way I thought about it at the time was, "The ability to a) modify a digital image with infinite iterations, and b) infinitely distribute reproductions of those iterations as visual impressions, reduced any inherent value of that image to absolute *_ZERO._* " I still feel that way today! LOL But, putting all philosophical questions regarding the "inherent value" of _any_ image aside, this initial tutorial is fascinating! I didn't understand a lot of it (math skills stagnated at high school level Algebra II-Trig seemed beyond my comprehension and was of no interest whatever) but I understood enough. I already understood that pixels are like cells in a spreadsheet, and that image editing apps were performing mathematical operations on those cells -but now I FINALLY have a glimmer of understanding of what a _vector_ (as in vectors drawn in Illustrator) _*is*._ If I were 15 or even 25 and not 75 years old I'd probably be all over this, flinging my time and attention into fine-tuned digital image generation at the coding level! But as it is-I think I've had quite enough of this world already. I'll leave it to you youngsters to wander off into the virtual realm, and over the cliff of infinite iterations, of the emerging all-mighty (oxymoronic) AI. All I'll add is, "GOOD LUCK" - you're gonna need it!
Much love and respect for you. It's powerful and inspiring to know you, out there are learning this for the first time at 75 years old. May i be full of that curiosity when im older. Much respect)!
All art now is being made in the shoulders of those who came before. Composition, techniques, an eye for aesthetics… the technology may be different, but the *passion* is the exact same, and I’m thrilled that your aren’t just immediately snubbing your nose at it as “this isn’t *ART, where’s the brush?!” Much respect to you!
it should also be the first step for people making educational videos themself. It's 20 minutes short, had a nice build up, easy to follow steps and great result. And to be honest GSLS isn't the easiest language around.
The fact that my eyes were glued to the screen from start to finish and I immediately checked your channel for more videos… instant sub. Can’t wait to try this out and I can’t wait for more!
I have a bunch of experience making photorealistic pathtracing shaders but I've always lacked the reasoning for creative projects like these. This was super helpful thank you
This tutorial was phenomenal. No setup required, everything is free and you can follow along in real time. I have not looked into your supplemental websites but seeing those tools for graphing and calculating the color palettes has really inspired me to look into this more. For a little history of myself, I have been fascinated with what I called "fractal art" as well as "visualizers" that came most music players at the time, but I had no idea you could replicate one with a few lines of code and half an hour of your time this easily! Thank you for inspiring me when I have grown bored of coding tutorials, game design feels too complex, and "app" design sounds so boring that it's basically just modern day web design in a container. But this? This is art, math, and science mixed into one easily accessible package!
God tier tutorial, absolutely unreal that this is the first video on your channel. This is where production quality and planning goes from being a comfort to being a legitimate pull for new people to the subject you’re covering. Mega cheers dude.
This is honestly one of the best tutorials i've come across. Period. Amazing view into a topic i was only mildly familiar with and broke it down in very approachable and informative ways. The illustrations showing everything as code was updated really blew me away! Great work.
Thank you, this kind of shader art or math art tutorial is really cool! One small note: at 13:20 (and throughout the rest of the video) when you multiply the argument of sin() by 8 and divide the result by 8, you are multiplying and dividing different things. Multiplying the argument by 8 increases the frequency, which is what gives multiple rings. But dividing the result by 8 only has an effect on the amplitude of the resulting sine wave, which will oscillate between -0.125 and 0.125 instead of -1 and 1. So you might have just kept the oscillation between -1 and 1 and adjusted the argument to smoothstep(). Further on, at 15:05, in the same way you can remove the division by 8 and adjust the coefficient of the inverse function (0.16 instead of 0.02) The reasons for doing this would be 1. to avoid any confusion that the two 8 in sin(d*8.)/8. have any relation to each other (they don't, except for keeping the derivative close to ±1 when the sine wave crosses the x axis, which doesn't have much use in this case because you're inverting and scaling the resulting value anyways) and 2. to avoid division, which is still a costly operation in hardware, hence the fewer divisions you perform, the faster your code will be. Check out Quake III's famous Fast Inverse Square Root algorithm for an example of the effort programmers will do to avoid dividing numbers.
This is completely true, I was also stumped with this explanation when it's completely obvious that the two factors are completely unrelated. sin returns -1..+1 by definition regardless of the frequency. However, I don't agree with the division remark that much, mainly because I've tested this idea. While it used to be the case that the division was significantly slower than multiplication (around 8-9 times), this is no longer the case. At least on a CPU the difference in performance is about 5-10%, however GPUs tend to be even more optimized in this regard because floating point math instructions are what they're made for. In other words Quake III is no longer relevant, however you are also conflating square roots and divisions which are completely unrelated things. This shader does a square root 9 times, has 3 natural exponentiations, 1 arbitrary power, and 2 divisions, per fragment! If you wanted to improve performance, first thing you would do would be to notice there are two length(uv0). Second because uv0 doesn't change inside the loop, both length(uv0) and exp(-length(uv0)) can be computed before entering the loop. This cuts square roots from 9 to 4, and exponentiations from 3 to 1. Finally there are ways to fudge the math slightly so that the compiler uses multiply-add instructions instead of having to multiply-then-add or divide-then-add. And after you convert the loop counter to integer (to let it unroll natively), this would improve the performance of this shader. Here I also got rid of one of the divisions by reciprocating the first expression. Here's what you end up with. (I've actually verified that this gives the same result.) Sadly it's crazy difficult to actually benchmark the difference, so I'll leave that to someone else. void mainImage( out vec4 fragColor, in vec2 fragCoord ) { vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y; vec3 finalColor = vec3(0.0);
float luv0 = length(uv); float exl = exp(-luv0);
for(int i = 0; i < 3; i++) { uv = fract(uv * 1.5) - 0.5;
float d = length(uv) * exl;
vec3 col = palette(luv0 + .4 * (float(i) + iTime));
d = abs(8. / sin(d * 8. + iTime)); d = pow(0.01 * d, 1.2);
In the example d = sin(d*8. +iTime)/8. and then d= 0.02/d. How do you avoid d not blowing up when the sine cycles through 0 ? Or does d = sin(d*8. +iTime)/8. never return 0? Would not this crash?
@@squarerootof2 Shaders do not crash from division by zero. (Nor does C# while we're at it, since floating points have a legal division by zero result, called NaN or "not-a-number".) Depending on the hardware, division by zero would either: a) return black, b) return NaN, or c) discard. NaN is hardware-specific and can be interpreted as an "error color", typically bright magenta (1,0,1) or again as black. Discard is more rare, but is present as an option in some GLs. In this case the pixel is simply skipped, though discard is expensive (because of branching) and problematic if the screen was not cleared first, and thus always discouraged by default.
This is such an unbelievably concise resource containing everything needed to get started, along with being so well presented. Massive props, thank you
your first video's already a banger! the animations are brutally good, and the pacing and style of explaining are both top notch. bro please keep creating. can't to see what else is put out!
I’ve never thought of shaders being used artistically like this, just for games. Fascinating and illuminating to see maths meet art like this- the results speak for themselves.
Thank you for making this video! This is the kind of shader tutorial I had always wished existed. I feel confident for the first time that I can start playing around with shaders and graphics programming.
Holy shit. Best channel for digestible and comprehensive explanations with excellent visuals for learning, to boot. Inspiring channel, excellent video. Great work, thank you for your thoughtful contribution to the art community.
Your introduction was the missing link for my curiosity about shaders. I feel capable of exploring and applying the technique of shader programming! Thanks so much and I'm very much looking forward to what comes next
This was such a great video. It definitely makes me wanna dive into it. I also love and appreciate the final statement as sometimes even with regular coding, we don't take the time to appreciate what we've built already because we're so focused on what it is we need to build. Love the content. Subscribed !
Everything about this makes my brain happy. Everything from the approachable, well organized way of presenting the material, to the the color schemes and graphic choices. Even the AI voice and bg music is thoughtfully chosen.
This tutorial/video is so clean, my standards gone up like f(x)=x^2. On a serious note, even if the video is packed towards the end, it is still explained cleanly, pausing/replaying and thinking about it works, great work
I really enjoyed your video! I've been teaching math, physics, and computer science in high schools for over 40 years. I've always been very interested in math art, and this is perfect! I'll be using your video with my computer science students starting next month. Thank you!
Simply superb! Can't believe this is your first video. The way you illustrated by tweaking the same few lines of code into beatiful art is just mesmerizing and very inspiring. Twenty minutes well spent.
My man, you are a god sent ! As a GameMaker dev, I strugled so much to find any bits of clear info about 2d shaders. I was proud of what i could achieve so far but you certainly blew my slight windows of opportunity into a vast horizon. Thank you !
Lovely video, I've been coding shaders for a couple years now and this is a fantastic introduction to this topic! Will definitely be sharing this with friends that are interested in this topic.
I started watching this video just like every other shader introduction video i tried in the past: "Meh, sure, let's put it on the second monitor..", 3 minutes in and i get the realization "Wait a minute, this video actually explain things, i may actually learn shader this time if i pay attention!!! I can stop procrastinating learning shaders!!!" This video has my full attention now and got promoted to the main monitor. Absolutely amazing video! Thank you so much!
You have done huge job on this! Using voiceover was totally cool with me on this video, calm temp helped me to follow the explanations. Visuals, animations, the way you explain how you twist the code and how you introduce new ideas to expand the creative idea is brilliant. You made making shaders looks simple and very creative, which is a really hard job. You are a good teacher. All the applauses. 👏👏👏👏
This was a good standard format for education, I don't understand why 99% of educational videos need to be so much worse than this straightforward explanatory approach.
As a first video, it was made on an absolutely wonderful level. This inspires me a lot. Also, utilisation of AI technologies is a nice trick) Looking forward to seeing more of your work
You don't need a graphics card to run shaders, just a GPU. This is such a good tutorial, seriously next level. By far the coolest coding tutorial I've ever seen, hands down.
For a first video this is astoundingly great. While I don't see a beginner programmer feeling confident that they could recreate the work from scratch, an intermediate programmer with decent math skills can definitely run with what you gave them and recreate the work within a day or so. That's awesome, given that a lot of great programmers have shied away from shader programmer due to a lack of resource and resolve. I say that being one of those without resolve 😂
Man, that's a LOT to take in. Thank you so much for the tutorial and useful links! A little bit of this, a little bit of trial and error, and we'll see where it leads :)
awesome! Best shader tutorial I ve seen so far for what I want to do. I like that you can get infinite variations just by adding a ''ceil'' , a ''floor'' or a ''sqrt'' in certain places.
I thought the vocal track sounded just slightly disjointed, then I saw that you used AI to generate it. Very neat way to communicate when you're not totally comfortable with your own voice. Had you not said anything in the description, I'd probably think you were either uncomfortable recording voiceovers, or had hired someone to do it from fiverr. Very good video!
I'm entirely mindblown, shader programming is something really different than what one is used to. This video shows with great detail the steps to getting a piece of art done, and it looks like magic. Very exciting a concept to introduce to many artists, and even explore yourself as a challenge.
The best intro to shaders I’ve seen. Informative without being overwhelming, while still allowing a newcomer to dip into the “good stuff” right away, which creates a self-motivating loop to learn more! Thank you! 🎉
At this point I don't even mind AI voice overs anymore, the level which it is at combined with a creator making a great script like here, it channel clarity about a subject someone may already have into a way people can consume it more easily. Great tutorial.
After about 19:30 I stopped paying attention and ultimately had to rewind hahah. You make it seem so easy! Incredible instructional and highly inspiring - great job!
One of the best introductory videos on a topic I have come across. I didn't know anything about shader coding before seeing this and feel very well equiped for exploring this field on my own afterwards. Thanks a lot for this video!
I have been manifesting this video to pop into my life for years now. A short, pragmatic way to use code for creating gorgeous visual content. It’s everything i ever wished for. Also great job on the video quality, its superb! And no, i did not think it was an ai voice :)
If you ever have the time could you do a deep dive of ShaderED? Especially going from Vertex to Pixel shader, I think that would be go a long way to get more people involved with graphics programming and shaders. I found when learning on my own in a Game Engine It was a challenge to piece together both realms of graphics programming and learning how debug shader render passes.
this is a great starting point for complete beginners, I'll be sharing this! and I like that you still end up with a pretty shader, that's something I struggle with in quick lessons. the ai voiceover is pretty good quality but I'd still recommend getting a decent usb mic (yeti or cheaper is fine, you don't need to go xlr), human voice is more engaging and personal. and the accent might even help
Thanks for the feedback! I'll probably try to make a video using a better mic and my real voice to test it out. Unfortunately I will never achieve this level of clarity and comprehension!
this was extremely easy to follow (for context: experienced programmer, shader newbie) and awe inspiring, exciting, beautiful... i can't wait to see more from you
Great video thanks. More of these please! There's not enough shader tutorials on RUclips. Don't worry about using AI for the speech, not everyone has a great presentation voice, as long as it doesn't sound too robotic I think it's fine. What is the name of the AI you're using?
I've been wanting to play with coding for art for some time, just didn't know where to start with the limited time I have free. This tutorial has that "winamp visuals plugin vibe" which is an aesthetic I actually what I want to play with, and eventually hook up to active datasets and an AI platform with input/output visualisation (think interactive visual exhibitions that react to what the audience are doing/the data tells it to do...). So, thanks to this very informative and intelligent video! At 17 minutes in I realised that I already have enough basic coding knowledge for a solid (2d) start; which is probably also testament as to how well and far coding visuals has come along. I hope you find another topic to cover soon, keep up this already high standard!
This is amazing! I 've been diving more and more into shaders using materials in Unreal. And i was able to reproduce this step by step using your video. It's really beautiful.
Hey, just wanted to let you know that I've been working up the motivation to start learning shader programming for well over two years now. Today I finally got off my ass, learned how to use Xcode, followed your example on my laptop, and coded up the same shader art in Metal. I'm so proud of myself and am eagerly awaiting another video. Thanks!
I did learn about shaders during my engineer courses, but it was only a small part of those courses and it focused only about the technical behaviour and not showing any graphical results, seeing this, with a graphical output gives a really good view and makes it crystal clear to learn, thank you !
dangi just wanted to conceptually know what a shader is but this video was so well done that I stayed and watched the whole thing and now im messing around in shadertoy. You're a great content maker.
What an absolutely incredible tutorial. I've ALWAYS struggled with learning shaders, having tried on several occasions, and the quality of this tutorial alone puts others to shame. If this is an indication of the level of clear, concise, and effective communication one can expect from this channel, then you've got a new subscriber. Cheers, and thank you so much!
My first experience with shaders was when I tried to implement the Half Lambertian diffuse shading model in Unity (this was 2023, not 2006, by the way) and I found out how fun shaders were. Thanks for making it easier for me and other people to learn more about this technology!
"The Art of Code" is another good channel on the topic. There is plenty to learn so I am just highlighting another source to learn from (in addition, not instead of). Shaders can do some incredible things, and Shadertoy is so easily accessible, there is no reason not to try these (even if you just tweak other peoples' work).
Great tutorial. I was mind blown at the use of fractals and combining that with well known math functions to produce very interesting results quickly. The palette function also seems incredible useful for creating color compositions to anyone's liking!
Best Inspiring Hello World tutorial! Explaining in simple steps how to achieve a jaw-dropping beautiful mathematical art and making it seem simple and achievable definitely inspires beginners and motivates them try out more on their own! Thank you, kishimisu!
you gave me hope for understanding shader and giving me confidence to develop a game, there are lots of shader tutorial out there you demonstated how it can be easily done with visuals to guide us viewers what is currently happening in the graph. You totally nailed this one out, Thank you, Subbed
This is what ai should be used for, a tool to make communication easier for people who have something to say or teach but maybe not the resources or skills to do it with their own voice. Great video, will be going back to it a lot.
Just a tip I have noticed when trying to play with the code to understand it, if you subtract from finalColor it is easier to see the geometry created by the for loop and the line "uv = fract(uv * 1.5) - 0.5;" specifically the effect of 1.5 or other values in this line Also holy f this tutorial is the most immaculate thing Ive ever seen
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
This is probably the best shader introduction in RUclips. It's very informative and it's also less than 30 minutes.
I think this is one of the best instructional demonstrations I have ever seen, even beyond shaders.
Yes, Exactly, the best and most easy
But also very dense in information. If you truly want to understand what's going on, you have to do some research on your own.
@@fonzanedelungini I didn't find it to be dense enough that it would require me to research on my own, but that's probably because I already have an idea as to how shaders work beforehand and the thinking that each individual pixel is its own process. Although I guess some of the functions that were used in this video might indeed make someone research it on their own to check the input parameters and the return values.
@@astral6749 Yes, I assume that for you this video is more of a summary of topics you've already spent time on than an introduction (which it is for me).
So you drop this absolute banger of a first youtube video and go dark for months at a time?
What a madlad
>Creates account
>Uploads the best shader tutorial on yt
>Stops posting
>Refuses to elaborate
🗿
@@fullysemi-automaticmemes3888just like davidrandmiller
This is the most productive 22:30 minutes of my life. I wish every tutorial could explain such difficult concepts in such an engaging way.
Yeah bro, People talking too slow and not being concise enough is a big pet peeve of mine
@@v69-o2f who knew that an AI voice could provide information audibly better than a human could?
Wow. _WOW_
I'm blown away by this tutorial. I can't BELIEVE how well this is made, and how well you explained this subject. Even as a coder (as a hobby), shader coding has always been this gigantic terrifying unknowable thing, and half an hour later it feels so down to earth and doable.
Here's a like, Here's a sub, here's a comment. More shader content _please_ !
This is good to know others thought it was easy to follow, I was impressed, but very lost. Feels like I have a lot to learn about math/coding before this will make more sense to me.
@@campbellwinslow6986 take everything step by step, pause and do it yourself for each step, write notes in comments next to the thing you do (only move on once you understand and play around with it a little yourself) & don't merge the different parts together like he does. The videos 20 minutes but if you want to learn, you can easily spend a couple hours here. Its an amazing introduction. Don't be afraid of looking for resources and explanations on specific things you don't quite understand, some reaserching is gonna have to be done. You can definitely do it! Good luck
I feel same even as a professional developer.
kudos!!! Literally #ExactlyThat
@@campbellwinslow6986 This is bringing back high school algebra pre-cal and college trig
Are you a friggin wizard genius savant? Because until today I had absolutely zero understanding of this art and only ever appreciated it. Today I can write it. And its entirely due to your 20min video. I'm beyond amazed.
Further, the most perfect metering, speech, explanations, volume, calmness, and even lofi background music. The production value and quality of this video is 10x what I've seen or learned from in life. I never comment.
And yes I read that you used AI, but its still a feat and did require you to seed it.
This tutorial will probably be the go-to tutorial to anyone who wants a quick hands on introduction to shader code.
I am a programmer but i wanted to learn shader coding. I started learning through this tutorial, because the end result looked amazing. You introduce hard but useful concepts in a digestable manner, and it inspired me to stop and think more than once so I could grasp the unfamiliar math formulas and usages. Every step teached me something and allowed a checkpoint to let the concepts sink in.
I am not surprised you did not release a lot of videos (2 atm), probably because you put so much effort into the presentation. I thank you for your efforts and for the wonderful tutorial - Condensing years of experience into very insightful 22 minutes.
I always wanted to take a deep dive into shaders but never took the time to do so. Thank you so much for providing such a brilliant introduction.
Take a look into the demo scene, there used to be competitions about this stuff
Fr shaders are really important !
No, I _did not_ notice the voice was AI, only that it was polished and articulate. This is one of the most fascinating YT videos I've watched. All the more so because I only _barely_ understood most of it-but *did* understand some of it. I'm 75 years old and have no experience with coding except for a thorough understanding of HTML, and a basic knowledge of JS and CSS. My original background and training are in the fine visual arts-i.e., predigital age, hands-on drawing, and painting with RW physical materials. That said, I've lived in the SF Bay Area for most of my adult life, occasionally rubbing shoulders with more technically-minded peers. Even so, I had little interest in computer technology until the mid-to-late 1990s when the internet came along. Before that, from the mid-1980s, although I had played around a little with visuals on what were then high-end systems belonging to friends who were more into emerging digital arts, I couldn't take them seriously. In those days, the only way to show anyone a digital image was to put it on a floppy disk and boot it up on someone's system. OR-Alternatively-take a 35mm film SLR photograph of the image on the highest resolution monitor available, then have the film processed and a print made from the film. - IOW, the way I saw it, there was no way to share the digital image produced with a mass audience _in the medium in which it had been created._ The internet changed all that as it was now possible to share digital images globally. Thus it was only then that I began to take digital imaging more seriously as an art form. It still remained more of a 'novelty' to me than something I regarded as a 'genuine' art.
Along the way, I bought my first Apple/Mac system, began learning Adobe Illustrator and Photoshop, and discovered I had an aptitude for HTML (that was a big surprise). This was in the days when we wrote it by hand in MS Word, saving it in a .text format-then opening the .html in a browser. This led to a grasp of hexadecimal color values, and, later the addition of CSS and a sufficient sprinkling of JS to (at least) be able to modify code someone else had written-to adapt an JS slideshow on a web page, for example. The small publishing company I worked for at the time (1996-98) was sufficiently impressed with my skills that they wanted to send me up to Seattle for further training. But I _refused_ this generous offer because, bottom line, _I was a fine arts painter who only worked a job to support his art (large, up to 8x10 feet, very visceral-action based- abstract paintings) and did _*_NOT_*_ want my attention to become absorbed by the non-physical digital realm of emerging AR, etc._ The way I thought about it at the time was, "The ability to a) modify a digital image with infinite iterations, and b) infinitely distribute reproductions of those iterations as visual impressions, reduced any inherent value of that image to absolute *_ZERO._* " I still feel that way today! LOL
But, putting all philosophical questions regarding the "inherent value" of _any_ image aside, this initial tutorial is fascinating! I didn't understand a lot of it (math skills stagnated at high school level Algebra II-Trig seemed beyond my comprehension and was of no interest whatever) but I understood enough. I already understood that pixels are like cells in a spreadsheet, and that image editing apps were performing mathematical operations on those cells -but now I FINALLY have a glimmer of understanding of what a _vector_ (as in vectors drawn in Illustrator) _*is*._ If I were 15 or even 25 and not 75 years old I'd probably be all over this, flinging my time and attention into fine-tuned digital image generation at the coding level! But as it is-I think I've had quite enough of this world already. I'll leave it to you youngsters to wander off into the virtual realm, and over the cliff of infinite iterations, of the emerging all-mighty (oxymoronic) AI. All I'll add is, "GOOD LUCK" - you're gonna need it!
Much love and respect for you.
It's powerful and inspiring to know you, out there are learning this for the first time at 75 years old.
May i be full of that curiosity when im older.
Much respect)!
All art now is being made in the shoulders of those who came before. Composition, techniques, an eye for aesthetics… the technology may be different, but the *passion* is the exact same, and I’m thrilled that your aren’t just immediately snubbing your nose at it as “this isn’t *ART, where’s the brush?!” Much respect to you!
@@neohavic6012 Why, thank you neo-I appreciate your comment-respect to you as well!
This video is a masterpiece. It should be everyone's first stop when learning shader code.
It should be used in schools to inspire maths studies.
It inspired me to start my glsl journey.
Taking a deep dive into the demo scene would definitely motivate some of you guys
it should also be the first step for people making educational videos themself. It's 20 minutes short, had a nice build up, easy to follow steps and great result. And to be honest GSLS isn't the easiest language around.
I'm lucky then because I started to learn shaders and this video came up first
The fact that my eyes were glued to the screen from start to finish and I immediately checked your channel for more videos… instant sub. Can’t wait to try this out and I can’t wait for more!
I have a bunch of experience making photorealistic pathtracing shaders but I've always lacked the reasoning for creative projects like these. This was super helpful thank you
This tutorial was phenomenal. No setup required, everything is free and you can follow along in real time. I have not looked into your supplemental websites but seeing those tools for graphing and calculating the color palettes has really inspired me to look into this more.
For a little history of myself, I have been fascinated with what I called "fractal art" as well as "visualizers" that came most music players at the time, but I had no idea you could replicate one with a few lines of code and half an hour of your time this easily!
Thank you for inspiring me when I have grown bored of coding tutorials, game design feels too complex, and "app" design sounds so boring that it's basically just modern day web design in a container. But this? This is art, math, and science mixed into one easily accessible package!
God tier tutorial, absolutely unreal that this is the first video on your channel. This is where production quality and planning goes from being a comfort to being a legitimate pull for new people to the subject you’re covering. Mega cheers dude.
This is honestly one of the best tutorials i've come across. Period. Amazing view into a topic i was only mildly familiar with and broke it down in very approachable and informative ways. The illustrations showing everything as code was updated really blew me away! Great work.
Thank you, this kind of shader art or math art tutorial is really cool!
One small note: at 13:20 (and throughout the rest of the video) when you multiply the argument of sin() by 8 and divide the result by 8, you are multiplying and dividing different things. Multiplying the argument by 8 increases the frequency, which is what gives multiple rings. But dividing the result by 8 only has an effect on the amplitude of the resulting sine wave, which will oscillate between -0.125 and 0.125 instead of -1 and 1. So you might have just kept the oscillation between -1 and 1 and adjusted the argument to smoothstep(). Further on, at 15:05, in the same way you can remove the division by 8 and adjust the coefficient of the inverse function (0.16 instead of 0.02)
The reasons for doing this would be 1. to avoid any confusion that the two 8 in sin(d*8.)/8. have any relation to each other (they don't, except for keeping the derivative close to ±1 when the sine wave crosses the x axis, which doesn't have much use in this case because you're inverting and scaling the resulting value anyways) and 2. to avoid division, which is still a costly operation in hardware, hence the fewer divisions you perform, the faster your code will be. Check out Quake III's famous Fast Inverse Square Root algorithm for an example of the effort programmers will do to avoid dividing numbers.
This is completely true, I was also stumped with this explanation when it's completely obvious that the two factors are completely unrelated. sin returns -1..+1 by definition regardless of the frequency.
However, I don't agree with the division remark that much, mainly because I've tested this idea. While it used to be the case that the division was significantly slower than multiplication (around 8-9 times), this is no longer the case. At least on a CPU the difference in performance is about 5-10%, however GPUs tend to be even more optimized in this regard because floating point math instructions are what they're made for.
In other words Quake III is no longer relevant, however you are also conflating square roots and divisions which are completely unrelated things. This shader does a square root 9 times, has 3 natural exponentiations, 1 arbitrary power, and 2 divisions, per fragment!
If you wanted to improve performance, first thing you would do would be to notice there are two length(uv0). Second because uv0 doesn't change inside the loop, both length(uv0) and exp(-length(uv0)) can be computed before entering the loop. This cuts square roots from 9 to 4, and exponentiations from 3 to 1.
Finally there are ways to fudge the math slightly so that the compiler uses multiply-add instructions instead of having to multiply-then-add or divide-then-add. And after you convert the loop counter to integer (to let it unroll natively), this would improve the performance of this shader. Here I also got rid of one of the divisions by reciprocating the first expression.
Here's what you end up with. (I've actually verified that this gives the same result.)
Sadly it's crazy difficult to actually benchmark the difference, so I'll leave that to someone else.
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y;
vec3 finalColor = vec3(0.0);
float luv0 = length(uv);
float exl = exp(-luv0);
for(int i = 0; i < 3; i++) {
uv = fract(uv * 1.5) - 0.5;
float d = length(uv) * exl;
vec3 col = palette(luv0 + .4 * (float(i) + iTime));
d = abs(8. / sin(d * 8. + iTime));
d = pow(0.01 * d, 1.2);
finalColor += col * d;
}
fragColor = vec4(finalColor, 1.0);
}
I made it on Rust ruclips.net/video/OwzqkKFdjYo/видео.html
That algorithm was simply insane. Watched with Primgeagen
In the example d = sin(d*8. +iTime)/8. and then d= 0.02/d. How do you avoid d not blowing up when the sine cycles through 0 ? Or does d = sin(d*8. +iTime)/8. never return 0? Would not this crash?
@@squarerootof2 Shaders do not crash from division by zero. (Nor does C# while we're at it, since floating points have a legal division by zero result, called NaN or "not-a-number".)
Depending on the hardware, division by zero would either: a) return black, b) return NaN, or c) discard.
NaN is hardware-specific and can be interpreted as an "error color", typically bright magenta (1,0,1) or again as black.
Discard is more rare, but is present as an option in some GLs. In this case the pixel is simply skipped, though discard is expensive (because of branching) and problematic if the screen was not cleared first, and thus always discouraged by default.
This is such an unbelievably concise resource containing everything needed to get started, along with being so well presented. Massive props, thank you
What a fantastic production. You absolutely nailed that delivery. Thankyou!
The combination of code and math resulting in such beautiful visuals is wonderful
your first video's already a banger! the animations are brutally good, and the pacing and style of explaining are both top notch. bro please keep creating. can't to see what else is put out!
I’ve never thought of shaders being used artistically like this, just for games. Fascinating and illuminating to see maths meet art like this- the results speak for themselves.
Thank you for making this video! This is the kind of shader tutorial I had always wished existed. I feel confident for the first time that I can start playing around with shaders and graphics programming.
Holy shit. Best channel for digestible and comprehensive explanations with excellent visuals for learning, to boot. Inspiring channel, excellent video. Great work, thank you for your thoughtful contribution to the art community.
Your introduction was the missing link for my curiosity about shaders. I feel capable of exploring and applying the technique of shader programming! Thanks so much and I'm very much looking forward to what comes next
This was such a great video. It definitely makes me wanna dive into it. I also love and appreciate the final statement as sometimes even with regular coding, we don't take the time to appreciate what we've built already because we're so focused on what it is we need to build. Love the content. Subscribed !
Everything about this makes my brain happy. Everything from the approachable, well organized way of presenting the material, to the the color schemes and graphic choices. Even the AI voice and bg music is thoughtfully chosen.
This tutorial/video is so clean, my standards gone up like f(x)=x^2. On a serious note, even if the video is packed towards the end, it is still explained cleanly, pausing/replaying and thinking about it works, great work
I really enjoyed your video! I've been teaching math, physics, and computer science in high schools for over 40 years. I've always been very interested in math art, and this is perfect! I'll be using your video with my computer science students starting next month. Thank you!
Simply superb! Can't believe this is your first video. The way you illustrated by tweaking the same few lines of code into beatiful art is just mesmerizing and very inspiring. Twenty minutes well spent.
Watched a lot of shader tutorials but this is the first time I've understood
I hope you keep making tuts like this one. Very well explained and showed.
My man, you are a god sent !
As a GameMaker dev, I strugled so much to find any bits of clear info about 2d shaders.
I was proud of what i could achieve so far but you certainly blew my slight windows of opportunity into a vast horizon.
Thank you !
Fantastic introduction! I’ve been wanting to take a dive into glsl and you did a amazing job explaining everything!
This is incredible, thank you for putting this intro together and for sharing some useful websites. Looking forward to what you make next!!
Just queueing up to say this content and its quality is phenomenal. Such good pacing, easy to digest and straight to the point. Please make more!
Lovely video, I've been coding shaders for a couple years now and this is a fantastic introduction to this topic! Will definitely be sharing this with friends that are interested in this topic.
I started watching this video just like every other shader introduction video i tried in the past: "Meh, sure, let's put it on the second monitor..", 3 minutes in and i get the realization "Wait a minute, this video actually explain things, i may actually learn shader this time if i pay attention!!! I can stop procrastinating learning shaders!!!" This video has my full attention now and got promoted to the main monitor. Absolutely amazing video! Thank you so much!
You have done huge job on this!
Using voiceover was totally cool with me on this video, calm temp helped me to follow the explanations.
Visuals, animations, the way you explain how you twist the code and how you introduce new ideas to expand the creative idea is brilliant.
You made making shaders looks simple and very creative, which is a really hard job. You are a good teacher.
All the applauses. 👏👏👏👏
This was a good standard format for education, I don't understand why 99% of educational videos need to be so much worse than this straightforward explanatory approach.
As a first video, it was made on an absolutely wonderful level. This inspires me a lot. Also, utilisation of AI technologies is a nice trick)
Looking forward to seeing more of your work
Very cool. Lots of good stuff in those showcased shaders
You don't need a graphics card to run shaders, just a GPU.
This is such a good tutorial, seriously next level. By far the coolest coding tutorial I've ever seen, hands down.
For a first video this is astoundingly great. While I don't see a beginner programmer feeling confident that they could recreate the work from scratch, an intermediate programmer with decent math skills can definitely run with what you gave them and recreate the work within a day or so.
That's awesome, given that a lot of great programmers have shied away from shader programmer due to a lack of resource and resolve.
I say that being one of those without resolve 😂
Man, that's a LOT to take in. Thank you so much for the tutorial and useful links! A little bit of this, a little bit of trial and error, and we'll see where it leads :)
All in one tutorial, in the same format as Derek Banas, a comprehensive lecture touching upon all the main points!
Holy hell, I didn't realize the entire video was AI voice generated, My mind is blown. Amazing work on this video 👏👏
awesome! Best shader tutorial I ve seen so far for what I want to do. I like that you can get infinite variations just by adding a ''ceil'' , a ''floor'' or a ''sqrt'' in certain places.
I thought the vocal track sounded just slightly disjointed, then I saw that you used AI to generate it. Very neat way to communicate when you're not totally comfortable with your own voice. Had you not said anything in the description, I'd probably think you were either uncomfortable recording voiceovers, or had hired someone to do it from fiverr. Very good video!
I didn't even noticed until i saw your comment. I wouldn't mind the AI Voiceover at all, keep going with it.
Mindblowing, I never thought it was an AI voice-over, long time since lokendo xd
Would love a video on how to put together a video with AI voice over
THAT WAS AI??? This is the first time I've actually been fooled by an AI voice (to my knowledge lol)
Now i cant watch the vid without noticing
thank you very much for this intro, i've been coding for 15+ years and this was very digestible
I'm entirely mindblown, shader programming is something really different than what one is used to. This video shows with great detail the steps to getting a piece of art done, and it looks like magic. Very exciting a concept to introduce to many artists, and even explore yourself as a challenge.
What an impressively edited and high quality video you've made! Waiting for more :=)
The best intro to shaders I’ve seen. Informative without being overwhelming, while still allowing a newcomer to dip into the “good stuff” right away, which creates a self-motivating loop to learn more! Thank you! 🎉
At this point I don't even mind AI voice overs anymore, the level which it is at combined with a creator making a great script like here, it channel clarity about a subject someone may already have into a way people can consume it more easily. Great tutorial.
After about 19:30 I stopped paying attention and ultimately had to rewind hahah.
You make it seem so easy!
Incredible instructional and highly inspiring - great job!
Incredible tutorial ! The video editing with sources / code is perfect the AI voice is nice too
This was amazingly well explained. Thank you for making it. You are a teacher of the future, Mr kishimishu.
I'm coming from twitter after seeing your post about your work labelled as "impressive AI generation". impressive work btw.
One of the best introductory videos on a topic I have come across. I didn't know anything about shader coding before seeing this and feel very well equiped for exploring this field on my own afterwards. Thanks a lot for this video!
10:30
vec2 uv = fragCoord / iResolution.xy ;
// 좌표 노멀라이즈.
⇓⇓
vec2 uv = fragCoord / iResolution.xy - 0.5 ;
// 캔버스 가운데 (0,0)
⇓⇓
vec2 uv = (fragCoord / iResolution.xy - 0.5) * 2.0 ;
// 캔버스의 범위를 (-1 ~ 1)로 만듦.
⇓⇓
vec2 uv = fragCoord / iResolution.xy * 2.0 - 1.0 ;
// 수식 정리.
⇓⇓
vec2 uv = fragCoord / iResolution.xy * 2.0 - 1.0 ;
uv.x *= iResolution.x / iResolution.y ;
// 가로세로 비율고정.
⇓⇓ (수식정리 uv.x , uv.y 각각 생각함.)
vec2 uv
( (fragCoord / iResolution.x * 2.0 - 1.0) * iResolution.x / iResolution.y
, fragCoord / iResolution.y * 2.0 - 1.0 )
⇓⇓ (수식정리 : 분배)
vec2 uv
( (fragCoord * 2.0 / iResolution.y - iResolution.x / iResolution.y) , fragCoord / iResolution.y * 2.0 - 1.0 )
⇓⇓ (수식정리 : x, y 비슷하게)
vec2 uv
( (fragCoord * 2.0 - iResolution.x) / iResolution.y ,
(fragCoord * 2.0 - iResolution.y) / iResolution.y )
⇓⇓ (결론)
vec2 uv = (fragCoord * 2.0 - iResolution.xy) / iResolution.y ;
I have been manifesting this video to pop into my life for years now. A short, pragmatic way to use code for creating gorgeous visual content. It’s everything i ever wished for.
Also great job on the video quality, its superb! And no, i did not think it was an ai voice :)
Really nice, I love these types of introduction videos! Will you do a similar one for 3d as well?
Yes I plan to focus mainly on 3d render techniques for my next videos!
I've never wanted for a part 2 so much in my life.
If you ever have the time could you do a deep dive of ShaderED? Especially going from Vertex to Pixel shader, I think that would be go a long way to get more people involved with graphics programming and shaders. I found when learning on my own in a Game Engine It was a challenge to piece together both realms of graphics programming and learning how debug shader render passes.
By far the best shader learning resource I've found. Thanks so much for making this! Please keep making new videos
I wonder what software you use to generate the voiceover, it sounds so natural.
I used a tool named ElevenLabs !
nah the voiceover is so distracting lol
@@codesymphony Troll take
This wrapped my head around so many things I kept seeing while studying shadertoy code. Top tier video!
this is a great starting point for complete beginners, I'll be sharing this! and I like that you still end up with a pretty shader, that's something I struggle with in quick lessons. the ai voiceover is pretty good quality but I'd still recommend getting a decent usb mic (yeti or cheaper is fine, you don't need to go xlr), human voice is more engaging and personal. and the accent might even help
Altho text to voice is advansing a lot, so, for sure that will improve with time
Thanks for the feedback!
I'll probably try to make a video using a better mic and my real voice to test it out.
Unfortunately I will never achieve this level of clarity and comprehension!
this was extremely easy to follow (for context: experienced programmer, shader newbie) and awe inspiring, exciting, beautiful... i can't wait to see more from you
Great video thanks. More of these please! There's not enough shader tutorials on RUclips. Don't worry about using AI for the speech, not everyone has a great presentation voice, as long as it doesn't sound too robotic I think it's fine. What is the name of the AI you're using?
I've been wanting to play with coding for art for some time, just didn't know where to start with the limited time I have free.
This tutorial has that "winamp visuals plugin vibe" which is an aesthetic I actually what I want to play with, and eventually hook up to active datasets and an AI platform with input/output visualisation (think interactive visual exhibitions that react to what the audience are doing/the data tells it to do...).
So, thanks to this very informative and intelligent video! At 17 minutes in I realised that I already have enough basic coding knowledge for a solid (2d) start; which is probably also testament as to how well and far coding visuals has come along.
I hope you find another topic to cover soon, keep up this already high standard!
I didn't realize I'd be learning witchcraft today
This is amazing! I 've been diving more and more into shaders using materials in Unreal. And i was able to reproduce this step by step using your video. It's really beautiful.
Really neat intro to shaders, not a big fan of the AI voice though.
Honestly this one isn’t bad. I didn’t even noticed until I read your comment
You can just decide to not care
@@jaredf6205 Not really, AI grifters are annoying as hell.
@@genericname2284 it’s perhaps not jarring, but it is definitely very noticeable
@@overpope3510 it's text to speech. People have used text to speech since the beginning of RUclips for so many good reasons.
Realizing this is the first tutorial on this channel blew my mind. High production levels and I can't wait for more
What's with the AI voice?
He was trans and experienced dysphoria stop the hate
That's probably the best tutorial I have ever seen. Informative, captivating, short, clear and visually stunning. Bravo !
this is 99% math, 1% programming...
Programming is literally just math g
Not really...@Tadpul
Depends on what your are working on
Hey, just wanted to let you know that I've been working up the motivation to start learning shader programming for well over two years now. Today I finally got off my ass, learned how to use Xcode, followed your example on my laptop, and coded up the same shader art in Metal. I'm so proud of myself and am eagerly awaiting another video. Thanks!
I did learn about shaders during my engineer courses, but it was only a small part of those courses and it focused only about the technical behaviour and not showing any graphical results, seeing this, with a graphical output gives a really good view and makes it crystal clear to learn, thank you !
Now we can make winamp visualizations again.
Great tutorial. Very insightful.
dangi just wanted to conceptually know what a shader is but this video was so well done that I stayed and watched the whole thing and now im messing around in shadertoy. You're a great content maker.
What an absolutely incredible tutorial. I've ALWAYS struggled with learning shaders, having tried on several occasions, and the quality of this tutorial alone puts others to shame. If this is an indication of the level of clear, concise, and effective communication one can expect from this channel, then you've got a new subscriber. Cheers, and thank you so much!
My first experience with shaders was when I tried to implement the Half Lambertian diffuse shading model in Unity (this was 2023, not 2006, by the way) and I found out how fun shaders were. Thanks for making it easier for me and other people to learn more about this technology!
"The Art of Code" is another good channel on the topic. There is plenty to learn so I am just highlighting another source to learn from (in addition, not instead of).
Shaders can do some incredible things, and Shadertoy is so easily accessible, there is no reason not to try these (even if you just tweak other peoples' work).
Thank you very much. I have learned to write a hello world GLSL code. And had a very good result and knowledge.
Your explaination of f(x, y) => f(r, g, b) made so much sense, thanks for that
Great tutorial. I was mind blown at the use of fractals and combining that with well known math functions to produce very interesting results quickly. The palette function also seems incredible useful for creating color compositions to anyone's liking!
Best Inspiring Hello World tutorial!
Explaining in simple steps how to achieve a jaw-dropping beautiful mathematical art and making it seem simple and achievable definitely inspires beginners and motivates them try out more on their own!
Thank you, kishimisu!
This is the first AI generated voice I really appreciated watching a whole YT video. Excellent work explaining shaders.
Likely the single best tutorial I have ever seen, well done and thanks!
you gave me hope for understanding shader and giving me confidence to develop a game, there are lots of shader tutorial out there you demonstated how it can be easily done with visuals to guide us viewers what is currently happening in the graph. You totally nailed this one out, Thank you, Subbed
This video cleared up many doubts I had about how to approach the process of programming shaders.
Excellent tutorial,
Shows an amazing result, explains how to get there from start to finish, and done so in concise fashion.
Perfect.
You are both an excellent teacher and a great artist! Thank you for the tutorial.
This might be the best RUclips video I’ve seen this year.
At first I was like, "this is cool ig", but you left so many useful resources that I decided to up an create my own shader. Well played!
Astounding video with the clearest, most accurate explanation distilled without any waffle! Thank you sir! 👍🏻
This is what ai should be used for, a tool to make communication easier for people who have something to say or teach but maybe not the resources or skills to do it with their own voice. Great video, will be going back to it a lot.
350K views on a shader video! I can't speak for everyone but a promise to watch any shader video you make. Great video!
An exceptional intro to shader programming. It has really clarified my thinking about frag shaders. Please keep up the awesome work!
Just a tip I have noticed when trying to play with the code to understand it, if you subtract from finalColor it is easier to see the geometry created by the for loop and the line "uv = fract(uv * 1.5) - 0.5;" specifically the effect of 1.5 or other values in this line
Also holy f this tutorial is the most immaculate thing Ive ever seen