[01] WebGL Tutorial - Hello, Triangle!

I'm finally getting around to updating my WebGL series! The old series used some fairly outdated JavaScript.
In this video:
* Graphics pipeline basics
* Setting up WebGL for use in the browser
* Rendering the most basic GPU primitive: a triangle
----------------------
Text version of this tutorial: indigocode.dev/tutorials/webg...
Source code on GitHub: github.com/sessamekesh/webgl-...
Live demo: indigocode.dev/tutorials/webg...
Companion page (with mistakes, additional comments, etc): indigocode.dev/tutorials/webg...

[@TerryDavisMedia]

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.

[@IndigoCode]

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

[@TerryDavisMedia]

@@IndigoCode you're amazing thank you

[@anuraghazra4772]

Welcome back!

[@IndigoCode]

Thanks! I'm excited to be back, there's a lot of cool stuff I can't wait to talk about

[@zeekcom12]

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

[@IndigoCode]

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.

[@mediopalodev]

Brilliant! Thank you for the update!

[@blu3_enjoy]

Thanks for updating your still useful older series. This will be a great resource and refresher

[@ameermmohammed265]

Thank you for your work. I eagerly await the continuation of the series.

[@melih2496]

really nice tutorial, looking forward to part 2

[@tomshieff]

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

[@allen3934]

love your video

[@jeffkirchoff14]

Thanks sir Eagerly waiting for more videos 🔥

[@andrewwoan]

DANGG LETS GO! I'VE BEEN WAITING FOR THIS!

[@IndigoCode]

Love the enthusiasm :-D I hope you like the series!

[@ricardosendes776]

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!

[@IndigoCode]

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!

[@tomzidani1935]

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

[@EtoundiOyonoGeorgesLevy]

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

[@RockieYang]

thanks for great explanation. The order is very well match the intuition.

[@aemooooon]

Thanks, very useful and easy to understand!

[@IndigoCode]

Glad it was helpful!

[@nadermahyoub2169]

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

[@paperbirdstudios7571]

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.

[@HuynhLuong227]

🎉🎉🎉 thanks your tutorial

[@calderarox]

This is really nice

[@IndigoCode]

Thank you!

[@piyushtiwari4453]

please continue the series , I'm waiting for the next part

[@IndigoCode]

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.

[@ExCyberino]

Nice

[@TranHung-ec7er]

amazing video

[@IndigoCode]

Thank you!

[@muhammadbilalmalik7292]

Please update whole old series you are doing amazing work!! Thanks

[@IndigoCode]

Thank you! That's the plan, the third video ran into tons of delays but I'm excited to finish this out

[@hansvetter8653]

Go, WebGPU, WASM & WASI is the future.

[@IndigoCode]

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.

[@konstantinbondarenko5235]

Thank you for your work. I like WebGL (but I like WebGPU more 😀).

[@IndigoCode]

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.

[@j-kevinampong1379]

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?

[@IndigoCode]

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.

[@battalll]

good resources for webgl newbies is non existent imo, this video is amazing

[@IndigoCode]

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

[@3ombieautopilot]

Thank you! I love your tutorials. Will you cover WebGPU or is it too early yet?

[@IndigoCode]

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.

[@Skylla54]

After BrunoSimons threeJS Pack And after Simon Dev Shader Pack Now one level deeper, Indigos WebGL Pack 😄

[@IndigoCode]

I love SimonDev, lots of great videos there - I'm happy to be put in the same category 😄

[@eric7758]

I still love webgl I haven’t switched to webgpu yet

[@dohyoungkim2813]

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?

[@IndigoCode]

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.

[@HarpreetSingh-jd3tu]

Is a Buffer like a container which stores our data which we can pull out of our attributes for the vertex shader?

[@IndigoCode]

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.

[@HarpreetSingh-jd3tu]

@@IndigoCodethanks, do you provide private tutoring?

[@IndigoCode]

Afraid I don't, I barely have enough free time to work on the channel as is

[@erfanhoseini5021]

hey thank u for tutorial can u include glsl webgl language part in this series of webgl tutorial ? thanks again !

[@IndigoCode]

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

[@erfanhoseini5021]

@@IndigoCode yeah plz i really need exactly about how shadertoy convert to webgl normal programm thanks❤️❤️❤️🙏🙏🙏

[@EmmanuelNgwandu]

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

[@IndigoCode]

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

[@dharnilm]

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?

[@IndigoCode]

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

[@howuseehim]

Any chance to see part 2 soon ?

[@IndigoCode]

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!

[@bigguy3185]

Hey, man! What font are you using? Looks very smooth, not like a default one.

[@IndigoCode]

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

[@bigguy3185]

​@@IndigoCode Thank you for your reply. Looks like it's not Proggy, but whatever. What does your new setup look like?)

[@anhtuanphan777]

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

[@IndigoCode]

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!

[@WhatDaHeckIsThat]

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.

[@ndanzzid566]

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?

[@IndigoCode]

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 KZbin if you want to get into more depth. Best of luck in your learning journey!

[@howuseehim]

Unfortunately I can not like the video twice

[@davedavedave4]

lmaooo why would you do so much work for a stupid triangle. i seriosly dont get it. id just use unity3d, it has export to web

[@IndigoCode]

If you can, better to use a library (ThreeJS is also good). IMO the big reasons to use WebGL/WebGPU directly are - Educational exercise (fun to learn) - If you're building / maintaining graphics libraries like ThreeJS or Unity / Unreal exports - Writing renderers that don't have a good existing tool I haven't personally played with the Unity export, most of the Unity apps I've seen in the browser are _horribly_ slow but I don't know if that's a Unity problem or just really bad demos.

[@davedavedave4]

@@IndigoCode I was being sarcastic. Love your videos mate! Keep it up

[@IndigoCode]

I appreciate it! No worries, I didn't see your message as mean or anything. It's a suuuuuper common note though, I thought I'd answer earnestly anyways for anyone reading. Cheers :-)

[@zelfroster]

@@IndigoCode So, I am learning WebGL since I find it intriguing and fun. But if possible, I would also like to get a job in this specific domain as well. Do you think it's possible or am I not in the correct direction?

[@IndigoCode]

@zelfroster - For web specifically, I know there's a lot of things that use WebGL in one way or another. I've had several projects over my career that used it, but I've never worked specifically as a "web graphics programmer." I've considered a couple roles that would be web graphics specific, so I know they exist, but I couldn't tell you much more than that. Outside of web, if you're interested in computer graphics in general, there's quite a bit of work in games and entertainment - @Acerola did a fantastic video on that industry recently, kzbin.info/www/bejne/hV6Vp5x4nbGHp6s. Whether in or out of web, my perception is that computer graphics is both hard to learn enough to work in, but there's fewer other graphics programmers that you compete with than in other fields like entry level web development. But again, I work as a frontend programmer with graphics knowledge being an occasionally very useful perk, so I couldn't really say. In any case though, if you find it interesting you should absolutely keep learning! Even if you do decide to pivot into something else in the future, the things you learn in graphics programming make it much easier to learn the hard parts in a few other domains too (audio programming, signal processing, streaming). Best of luck!

[@user-cr9py2zh4r]

Welcome back!