WebGL 2: Instanced Drawing

Simplify your WebGL applications and your data requirements just by using the draw functions `drawArraysInstanced()` and `drawElementsInstanced()`. This video will show you almost everything you need to know and introduce you to one technique for swapping textures for an entire object with a single number in your instance buffer data.

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

More photo credits below.

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.

[zaronof]

I've been watching your videos repeatedly these days, and the tutorials you've created have been incredibly beneficial to me. I love these videos! Thank you very much❤

[rms_]

That's a one good teacher, it's rare to find someone doing raw webgl, most tutorials out there are stuffed behind old deprecated wrapper libraries +1

[ccjx_space]

Thank you so much! There is not much information on this topic

[darkblizzard]

An excellent high quality, easy to follow, easy to understand Tutorial. Thank you very much.

[dominicprior]

Wow, such a good video! Many thanks! I feel inspired to try instances now... (I was putting it off before)

[Danielbailey]

How do I use this method to make rectangles instead of triangles? I added another triangle to the model but it just skips it.

[pickle]

thanks for the tutorial :) in the 12:25 you set the model matrix as attribute instead of a uniform is this ok?

[swozzares]

So does this mean that if I have a vertex buffer containing data for two different models, then I would have to call drawArraysInstanced twice? Put another way, is there a way to make one draw call for multiple models that are all instanced?

[roblouie]

I want to use this for a particle system, but I'm struggling to understand how I only active particles. Like if my particle engine supports up to 500 particles, that doesn't mean there will be 500 particles on screen all the time.

Do I have to like add and remove items from the array constantly? Or how do I start more or less things with this approach