WebGL 2: Vertex Array Objects (VAOs)

It seems everyone recommends you use Vertex Array Objects, but few step through all the reasons why. We'll look at what VAOs are, how to use them, the functions they react to and answer some frequently asked questions.

I liked making this video, but I understand if it annoys some people and I apologize to those who I did annoy. The next video won't be like this. I think it just bothers me that most books and tutorials don't really explain VAOs or if they do, they do it at such an advanced stage that most beginners can't benefit from them. That made me a bit spicy, I think.

You can find supplementary materials on this video series' GitHub page:

This series on WebGL 2 was produced for anyone who, like me, had major problems getting a firm understanding of WebGL's intermediate and advanced concepts. Every video is focused on a single concept. If I've done this well, you shouldn't really need to "get up to speed" before watching any of these videos. There are no external libraries. I'm not building up to a custom API or injecting any abstractions. And I don't expect you to have watched from episode #1 to get "how I'm doing things with WebGL."

Complete playlist:

Videos:

I really hope someone out there will find this series helpful.

[andrebergs]

I'm so happy I found your tutorials! Jumping into JavaScript / webGL / Three.js from Unity has been a rough splash. But your videos are very helpful!
I love the lucid explanation and clarity!

[gnorts_mr_alien]

Amazing series and you have a soothing voice & manner of explanation. What a gem.

On another note, I know opengl is old and maybe they had their reasons... but what a shit API.

[roblouie]

These are the best tutorials on webgl2 on the internet. Thank you! I'm currently struggling with dealing with changing data and would love to see a video on it.

For instance, if I changed a vertex position every frame, what do I have to do? Do I have to create a whole new buffer and bind to it to tell webgl something changed? Or can I use my original buffer?

What if I actually change the size of the data. Like I replace my float32 array with a smaller one Then I definitely have to just create a new buffer ya.

What if I only change my indices?

And do VAOs help me with changing things at all? It kind of seems like they don't since they just store where data starts and stops, not what it is? I would love to see just simple examples of how data changes should be dealt with, with vertex or color data, plus indices, plus vaos. Thank you again! I've tried a bunch of other resources for learning and this is by far the best. Everything else I feel like I have to reverse engineer their examples or parse through bad code or both. This is straightforward and well made.

[konstantinbondarenko]

Thank you! You explain everything very well.

[KANJICODER]

This was helpful. I know the bare basics of WebGL and just do enough of the setup code so I can build 2D based renderers with shader code. Still trying to figure out what I did wrong. Infuriating because I am referencing 3 other code bases that I've written that work... And still haven't figured it out.