WebGL 2: Uniform Buffer Objects

Manage uniforms across multiple WebGL 2 programs using Uniform Buffer Objects. This video will try to explain and simplify this notoriously "advanced" technique.

I've uploaded a sample program to this series' Github repo so you can see exactly how to use UBOs.:

A very concise description of the `std140` ruleset can be found on the O'Reilly site:

I didn't go into it here, but it's possible to add structs to your UBOs as well. However, this can lead to very buggy renders on some hardware. Avoiding these bugs is actually pretty easy. I explained the problem and showed the solution in my video on Arrays and UBOs. You can watch that here:

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.

[jarvispact]

awesome explanation. i wish this video would have existed longer. i spent too much time figuring out on my own with trial and error this weird mat3 alignment. now that i know of std140 my code will become a lot cleaner. thank you for this great content 👍☺️

[henrikhasell]

I have been trying to understand uniform buffer objects for so long, your video made it click for me. Thanks for explaining std140.

[gnorts_mr_alien]

That was an amazing explanation, thank you very much.

[alexandrelipp]

Thank you for this video, I'm glad I found your channel

[jarvispact]

i have a question and i hope you can answer it. Which approach is better in your opinion and why?

First approach:

- create 1 uniform buffer object (ubo) per scene
- update the current game object always with 3 webgl calls:
- bindBufferBase
- bindBuffer
- bufferSubData

Second approach:

- create a ubo for every game obj
- create a dirty flag in js land for each game obj
- if dirty flag is true for current game obj it requires 3 webgl calls
- bindBufferBase
- bindBuffer
- bufferSubData
- if dirty flag is false for current game obj it only requires 1 webgl call
- bindBufferBase

First approach would require a lot less gpu memory with the cost of always making 3 calls to webgl for every game object.

Second approach requires more gpu memory, makes the code more complex but saves me probably 2 webgl calls per game object (if game object does not need an update)

[rizohashimi]

The one thing still confuses me is mat3 has to start at an offset multiple of 48 bytes or is 16 bytes enough, the same for mat4 64 bytes or 16 bytes?
Let's say I have a block of vec4 and mat4, vec4 starts at 0 then should mat4 start at 16, or should I add padding of 48 bytes to make it start at 64 bytes alignment?

[arbitrandomuser]

a small problem i enountered while trying out is the bufferData size must atleast be 16 ( to align to atleast one vec4),
if you its not working, ensure that bufferData is allocated atleast with size 16.

[dominicprior]

Another amazing video! Many thanks! Forgive me for asking, but how did you learn all this stuff?