yes please dont stop making this, ive been trying to learn, and its so hard. Im going to watch this. A big one for me, is knowing how to make 2 shapes without any libraries.
you rock, I often find people who do this assume you know what you're doing, but I really appreciate you taking your time and going into just the right amount of depth
Thank you! I like to assume my audience is smart people who don't know anything about the subject I'm talking about, it's served me well at work and I'm glad to hear it works for these videos.
Starting to learn WebGL with this video, I already tried to learn it before but it was hard to me to understand why do we need to use some functions. Thanks to your explanations, everything looks more clear to me and I'm ready to continue with the next lesson. Thank you ! :)
Its wonderful that you are remaking this tutorial! Sadly i have to follow your old tutorial, since I have to use WebGL within the next couple of months. I hope I am not missing out on major new features! I will follow this new series as soon as I am done with your older one!
Thanks! There's not many new features in WebGL, but the JavaScript from my old tutorials definitely shows its age. I'm glad you liked these updated videos and hope the old ones are still good enough to help you with your use case!
I have no words to thank you RN. I stopped watching the other playlist because it was too old. I really hope you'll go on with this one. Thanks a lot 🙏🙏🙏🙏
Great content! I was looking for a webgl introduction and I found your old videos. To then realize that you came back! The hype couldn't be bigger man! Thanks
I tried webGL and it's pretty hard, (I used your older video's to learn) and I gave up and switch to three.js, however i still enjoy watching these videos and fallowing along, thank you for the content you provide.
Good content, hope it continues to be a long series😢. Please go on making like this one and go deeper in 3D world and fragment & vertex shaders. Your explanation is super informative
I hope you like the next video(s) too! The code, animations, script, and text version of the second tutorial are finished - I'm recording the video and audio for the coding section, which is the fastest part of the production process for these videos.
I agree! It's fantastic, and the developer experience is so much better. I'd love to cover it on the channel at some point. I mess around a lot with C++ games written for the web, and WebGPU is a total game changer there - both major browser WebGPU implementations have standalone libraries, so I can keep one render backend for both native and browser builds - and all the fancy insights from native debugging tools still hold for the web builds, which is amazing.
Thanks! Glad you liked it. I agree, I had a really hard time learning WebGL from existing resources which is why I made these. webglfundamentals.org/ is also fantastic if you're looking for more
WebGPU has been on my radar for well over a year now, the API changed a lot for a while but I'm hoping it's stable enough now. I've got a couple other projects I want to tackle first, but I'd love to cover WebGPU when I can get the time! It's a fantastic API both for browsers and native application developers.
Very informative❤ tutorial it help me a lot to understand the webgl2 bit by bit, can you do on the next video on how to move triangle and also make it move on where I click/touch on?
I'm glad to hear this video is helpful! The next video is mostly finished, and movement is one of the topics I cover. I don't have anything in the video on user input like clicks, but that's a good idea - I'll write about that in the companion document for that video.
Might have been Proggy, but I don't remember unfortunately... My computer super died recently, and I didn't get any of the fonts or editor settings backed up when I set up the new one. I do like whatever font it was though
Yep! That's spot on. In more words: the data itself exists on the GPU - e.g., 24 bytes if you have 3 points with 2 floats each. The GPU/driver doesn't keep typed variables like JavaScript does, all it knows is that there's 24 bytes there - a general chunk of memory like that is called a "buffer" in computer science, generally. The job of an "attribute" is to associate some shader input with both the location of the data and the type. Once they're associated, running a shader will pull its input values from that buffer. The CPU and GPU don't share their memory - you can't have a JavaScript variable that accesses GPU memory, or a GLSL variable that accesses a JavaScript variable either. WebGLBuffer is a CPU-side type that lets us tell the graphics driver (which has access to both CPU and GPU) what to do with the GPU-side data, and it's one of only a couple tools we have as WebGL developers to actually put stuff on the GPU.
> Will you give WebGL 2 a go as well? Yes - this series actually uses WebGL 2. It looks basically the same, because WebGL 2 is a strict superset of WebGL 1, and most of the added features aren't super useful when first getting started. This first video uses updated GLSL syntax, and the rest of the series will take advantage of at least one feature that was added in WebGL 2 (VAOs), but other than that everything I'll be covering works more or less the same in WebGL 1 and 2. > How did you learn WebGL? My first graphics API was DirectX 9, which I "learned" from the rastertek website (no longer online), but it wasn't until I worked on Lucidchart for a summer internship that things really "clicked" for me. Moving between APIs is pretty easy - they all interact with graphics drivers in different ways, but to do (basically) the same things. I've shared a lot of my WebGL demos with friends and colleagues and most people I've talked to directly have struggled with the same concepts I did, and things "clicked" just as well for them as it did for me when I showed them the fundamental ideas and how they fit together. I'm trying my best in this series to put those ideas into the animated theory sections at the beginnings of the videos! A uni course would probably have helped things "click" for me a lot quicker, but once I got the basics down it became pretty easy to pick up new techniques from code samples, blogs, tutorials online, etc.
WebGPU + WASM have a really cool developer story too, since the two major reference implementations for Chromium and Firefox are written in C++ and Rust, respectively. That means you can write your native apps in any WASM-friendly language that supports C bindings (so... all of them). A renderer you write that way gets all the fancy native tools you don't get with WebGL or web-ecosystem builds (RenderDoc, NSight, etc), but you also can be very confident it'll work the same when you port it to browser WASM targets because the browsers link the same library your renderer did.
Hi thank you for this amazing video for WebGL. As a beginner, you are helping me a lot:) I have a quick question. I am following your video and codes, I am stuck at 13:27 now. I cannot see dark background. When I run hello-triangle.js file, I get an error "ReferenceError: document is not defined" Do you know why this happens and why I get no changes?
Hmm... that error would appear if the code is executing in Node instead of the browser, but that's the only thing I can think of. For example, if you're following along in a NextJS app, you'd have to make sure it was running as a client component, same thing for Angular Universal or other SSR frameworks. I'm glad the videos are helpful to you! Let me know if that helps, sorry it took a couple weeks to get back.
Hi there, i did not understand the first seven seconds of the video😢. I got it and I hope you are doing fine. Thanks for the video and can't wait for the third one
Thank you! Yes I'm doing fine, I was ready for it to happen and enjoyed the break. I'm glad you've enjoyed the series! I'm looking forward to finishing it, I've had a few delays (other projects getting in the way) but I'm hoping to get it out soon
I'm working on it! The editing and theory sections take a bit of time, but I am hoping to get these out a few weeks apart from each other. I'm glad you're interested!
This might sound like something nobody normal would want to do, but is it possible to control WebGL/WebGPU with wasm and C? I can't stand working with JS, there's so much that it does that just feels... Bizarre. I just want to write all of my web demos in good old-fashioned C.
as a boring react web developer, i want to learn more about graphics, but I've heard it requires a lot of math. will you cover the math in this tutorial?
Yep! I'm still working on the videos that cover the math, I'll be covering the fundamentals. The current plan is for the 3rd video to cover 3D rendering, lighting models in the 4th, and texturing in the 5th - all of those require a few new math ideas that are generally super useful, so I'll be spending time at the beginning of each episode covering those ideas. There's also several really great linear algebra and basic calculus series on RUclips if you want to get into more depth. Best of luck in your learning journey!
I really like your videos. I'm having a bit of a problem and hope you can help me. I use webGL to draw line graphs. If I use LINE_STRIP it's easy but I don't know how to use TRIANGLES to draw it. I have read some articles that say I can form a trapezoid, but it's actually very difficult for me as a newbie
Glad you like the videos! LINE_STRIP is a perfectly good way to draw lines for line graphs, since the rasterizer takes care of all the nasty parts. You _can_ use triangles, but you have to do two things: 1. Split each segment of line into rectangles (well, yes, trapezoids would be better - let's keep it simple for now) Doing that's not too bad conceptually, but the math can be pretty annoying. Each rectangle has 4 corners - two "above" the line segment, and two "below". You can make a trapezoid instead of a rectangle by also shifting the points to be in between where they should be for a line segment and the line segments before/after the one you're looking at. Start with rectangles though, it's easier to think about. 2. Split each rectangle into two triangles. Much easier, but still a chore - a rectangle can be made with two triangles, say one that covers the upper-left and one that covers the lower-right area of that rectangle. It's definitely a pain, and if you can get away with LINE_STRIP you should continue to use that, but hopefully that explanation makes it a little more clear!
![[02] WebGL Tutorial - Movement and Color](http://i.ytimg.com/vi/lLa6XkVLj0w/mqdefault.jpg)
![[02] WebGL Tutorial - Movement and Color](/img/tr.png)
Welcome back!
Thanks! I'm excited to be back, there's a lot of cool stuff I can't wait to talk about
yes please dont stop making this, ive been trying to learn, and its so hard. Im going to watch this. A big one for me, is knowing how to make 2 shapes without any libraries.
That's a pretty common question I see! So I'm making that the topic of the next video :-) I'm hoping to get it out in the next couple weeks
@@IndigoCode you're amazing thank you
you rock, I often find people who do this assume you know what you're doing, but I really appreciate you taking your time and going into just the right amount of depth
Thank you! I like to assume my audience is smart people who don't know anything about the subject I'm talking about, it's served me well at work and I'm glad to hear it works for these videos.
Starting to learn WebGL with this video, I already tried to learn it before but it was hard to me to understand why do we need to use some functions. Thanks to your explanations, everything looks more clear to me and I'm ready to continue with the next lesson.
Thank you ! :)
DANGG LETS GO! I'VE BEEN WAITING FOR THIS!
Love the enthusiasm :-D I hope you like the series!
love your video
Thanks sir
Eagerly waiting for more videos 🔥
This is really nice
Thank you!
Its wonderful that you are remaking this tutorial! Sadly i have to follow your old tutorial, since I have to use WebGL within the next couple of months. I hope I am not missing out on major new features! I will follow this new series as soon as I am done with your older one!
Thanks! There's not many new features in WebGL, but the JavaScript from my old tutorials definitely shows its age.
I'm glad you liked these updated videos and hope the old ones are still good enough to help you with your use case!
I have no words to thank you RN. I stopped watching the other playlist because it was too old. I really hope you'll go on with this one. Thanks a lot 🙏🙏🙏🙏
Thank you for your work. I eagerly await the continuation of the series.
Great content! I was looking for a webgl introduction and I found your old videos. To then realize that you came back! The hype couldn't be bigger man! Thanks
Please update whole old series you are doing amazing work!! Thanks
Thank you! That's the plan, the third video ran into tons of delays but I'm excited to finish this out
really nice tutorial, looking forward to part 2
Brilliant! Thank you for the update!
Thanks, very useful and easy to understand!
Glad it was helpful!
Thanks for updating your still useful older series. This will be a great resource and refresher
I tried webGL and it's pretty hard, (I used your older video's to learn) and I gave up and switch to three.js, however i still enjoy watching these videos and fallowing along, thank you for the content you provide.
thanks for great explanation. The order is very well match the intuition.
Is it my eyes or am I seeing manim? 😅 Can't wait to see a manim tutorial from you!
Good content, hope it continues to be a long series😢. Please go on making like this one and go deeper in 3D world and fragment & vertex shaders. Your explanation is super informative
Nice
please continue the series , I'm waiting for the next part
I hope you like the next video(s) too!
The code, animations, script, and text version of the second tutorial are finished - I'm recording the video and audio for the coding section, which is the fastest part of the production process for these videos.
amazing video
Thank you!
🎉🎉🎉 thanks your tutorial
Thank you for your work. I like WebGL (but I like WebGPU more 😀).
I agree! It's fantastic, and the developer experience is so much better. I'd love to cover it on the channel at some point.
I mess around a lot with C++ games written for the web, and WebGPU is a total game changer there - both major browser WebGPU implementations have standalone libraries, so I can keep one render backend for both native and browser builds - and all the fancy insights from native debugging tools still hold for the web builds, which is amazing.
good resources for webgl newbies is non existent imo, this video is amazing
Thanks! Glad you liked it. I agree, I had a really hard time learning WebGL from existing resources which is why I made these.
webglfundamentals.org/ is also fantastic if you're looking for more
Thank you! I love your tutorials. Will you cover WebGPU or is it too early yet?
WebGPU has been on my radar for well over a year now, the API changed a lot for a while but I'm hoping it's stable enough now.
I've got a couple other projects I want to tackle first, but I'd love to cover WebGPU when I can get the time! It's a fantastic API both for browsers and native application developers.
Very informative❤ tutorial it help me a lot to understand the webgl2 bit by bit, can you do on the next video on how to move triangle and also make it move on where I click/touch on?
I'm glad to hear this video is helpful!
The next video is mostly finished, and movement is one of the topics I cover.
I don't have anything in the video on user input like clicks, but that's a good idea - I'll write about that in the companion document for that video.
Hey, man! What font are you using? Looks very smooth, not like a default one.
Might have been Proggy, but I don't remember unfortunately...
My computer super died recently, and I didn't get any of the fonts or editor settings backed up when I set up the new one. I do like whatever font it was though
@@IndigoCode Thank you for your reply. Looks like it's not Proggy, but whatever. What does your new setup look like?)
Is a Buffer like a container which stores our data which we can pull out of our attributes for the vertex shader?
Yep! That's spot on.
In more words: the data itself exists on the GPU - e.g., 24 bytes if you have 3 points with 2 floats each. The GPU/driver doesn't keep typed variables like JavaScript does, all it knows is that there's 24 bytes there - a general chunk of memory like that is called a "buffer" in computer science, generally.
The job of an "attribute" is to associate some shader input with both the location of the data and the type. Once they're associated, running a shader will pull its input values from that buffer.
The CPU and GPU don't share their memory - you can't have a JavaScript variable that accesses GPU memory, or a GLSL variable that accesses a JavaScript variable either. WebGLBuffer is a CPU-side type that lets us tell the graphics driver (which has access to both CPU and GPU) what to do with the GPU-side data, and it's one of only a couple tools we have as WebGL developers to actually put stuff on the GPU.
@@IndigoCodethanks, do you provide private tutoring?
Afraid I don't, I barely have enough free time to work on the channel as is
Will you give webgl 2 a go as well? Also, How did you learn WebGL? Did you do a course in UNI or another Online platform?
> Will you give WebGL 2 a go as well?
Yes - this series actually uses WebGL 2. It looks basically the same, because WebGL 2 is a strict superset of WebGL 1, and most of the added features aren't super useful when first getting started. This first video uses updated GLSL syntax, and the rest of the series will take advantage of at least one feature that was added in WebGL 2 (VAOs), but other than that everything I'll be covering works more or less the same in WebGL 1 and 2.
> How did you learn WebGL?
My first graphics API was DirectX 9, which I "learned" from the rastertek website (no longer online), but it wasn't until I worked on Lucidchart for a summer internship that things really "clicked" for me. Moving between APIs is pretty easy - they all interact with graphics drivers in different ways, but to do (basically) the same things.
I've shared a lot of my WebGL demos with friends and colleagues and most people I've talked to directly have struggled with the same concepts I did, and things "clicked" just as well for them as it did for me when I showed them the fundamental ideas and how they fit together. I'm trying my best in this series to put those ideas into the animated theory sections at the beginnings of the videos!
A uni course would probably have helped things "click" for me a lot quicker, but once I got the basics down it became pretty easy to pick up new techniques from code samples, blogs, tutorials online, etc.
hey thank u for tutorial can u include glsl webgl language part in this series of webgl tutorial ?
thanks again !
I'm glad you liked this tutorial! There's a few more "fundamentals" videos I need to finish first, but a GLSL video is a great idea
@@IndigoCode yeah plz i really need exactly about how shadertoy convert to webgl normal programm thanks❤️❤️❤️🙏🙏🙏
Go, WebGPU, WASM & WASI is the future.
WebGPU + WASM have a really cool developer story too, since the two major reference implementations for Chromium and Firefox are written in C++ and Rust, respectively. That means you can write your native apps in any WASM-friendly language that supports C bindings (so... all of them).
A renderer you write that way gets all the fancy native tools you don't get with WebGL or web-ecosystem builds (RenderDoc, NSight, etc), but you also can be very confident it'll work the same when you port it to browser WASM targets because the browsers link the same library your renderer did.
Hi thank you for this amazing video for WebGL. As a beginner, you are helping me a lot:)
I have a quick question. I am following your video and codes, I am stuck at 13:27 now. I cannot see dark background.
When I run hello-triangle.js file, I get an error "ReferenceError: document is not defined"
Do you know why this happens and why I get no changes?
Hmm... that error would appear if the code is executing in Node instead of the browser, but that's the only thing I can think of.
For example, if you're following along in a NextJS app, you'd have to make sure it was running as a client component, same thing for Angular Universal or other SSR frameworks.
I'm glad the videos are helpful to you! Let me know if that helps, sorry it took a couple weeks to get back.
After BrunoSimons threeJS Pack
And after Simon Dev Shader Pack
Now one level deeper,
Indigos WebGL Pack
😄
I love SimonDev, lots of great videos there - I'm happy to be put in the same category 😄
I still love webgl I haven’t switched to webgpu yet
Hi there, i did not understand the first seven seconds of the video😢. I got it and I hope you are doing fine.
Thanks for the video and can't wait for the third one
Thank you! Yes I'm doing fine, I was ready for it to happen and enjoyed the break.
I'm glad you've enjoyed the series! I'm looking forward to finishing it, I've had a few delays (other projects getting in the way) but I'm hoping to get it out soon
Any chance to see part 2 soon ?
I'm working on it! The editing and theory sections take a bit of time, but I am hoping to get these out a few weeks apart from each other.
I'm glad you're interested!
This might sound like something nobody normal would want to do, but is it possible to control WebGL/WebGPU with wasm and C? I can't stand working with JS, there's so much that it does that just feels... Bizarre. I just want to write all of my web demos in good old-fashioned C.
as a boring react web developer, i want to learn more about graphics, but I've heard it requires a lot of math. will you cover the math in this tutorial?
Yep! I'm still working on the videos that cover the math, I'll be covering the fundamentals.
The current plan is for the 3rd video to cover 3D rendering, lighting models in the 4th, and texturing in the 5th - all of those require a few new math ideas that are generally super useful, so I'll be spending time at the beginning of each episode covering those ideas.
There's also several really great linear algebra and basic calculus series on RUclips if you want to get into more depth.
Best of luck in your learning journey!
I really like your videos. I'm having a bit of a problem and hope you can help me. I use webGL to draw line graphs. If I use LINE_STRIP it's easy but I don't know how to use TRIANGLES to draw it. I have read some articles that say I can form a trapezoid, but it's actually very difficult for me as a newbie
Glad you like the videos!
LINE_STRIP is a perfectly good way to draw lines for line graphs, since the rasterizer takes care of all the nasty parts.
You _can_ use triangles, but you have to do two things:
1. Split each segment of line into rectangles (well, yes, trapezoids would be better - let's keep it simple for now)
Doing that's not too bad conceptually, but the math can be pretty annoying. Each rectangle has 4 corners - two "above" the line segment, and two "below". You can make a trapezoid instead of a rectangle by also shifting the points to be in between where they should be for a line segment and the line segments before/after the one you're looking at. Start with rectangles though, it's easier to think about.
2. Split each rectangle into two triangles.
Much easier, but still a chore - a rectangle can be made with two triangles, say one that covers the upper-left and one that covers the lower-right area of that rectangle.
It's definitely a pain, and if you can get away with LINE_STRIP you should continue to use that, but hopefully that explanation makes it a little more clear!
Unfortunately I can not like the video twice
Welcome back!