WebGL 2: Framebuffer Objects (The Basics)

Learn the basics of framebuffer objects in WebGL 2. This episode forms the foundation for the next few videos and will prepare you for the problems and their solutions in writing WebGL applications that rely on framebuffer objects and post processing.

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.

[nchupa]

Definitely worth the wait! After your last video I kept learning about framebuffers and spent many hours just learning the basics that this video teaches in 20 minutes. I hope you can find the motivation to continue, but just know that even if you don't continue: you already created the best webgl series out there, hands down (and there is a lot of great content out there too). Oh and your last Framebuffer video wasn't so bad, it helped me start to wrap my head around how more complex rendering setups like deferred lighting, shadows, etc. work

[egorbashinsky]

Omg omg! Andrew, so good to have you back! Hope you doing ok, the webgl series is the best that can be found. If possible, please keep it up! Best wishes !

[roblouie]

I'm so happy to see a new video! Your videos have helped me a ton. These let me learn the foundations of WebGL. I then used those to make a game engine for JS13k, and got 6th place last year and 5th place this year. So just wanted to say thank you for helping me learn the building blocks needed to make really cool stuff!

[evandropoa]

Thanks. Good to see you back, and as always a great video.

[syn]

Fantastic Video. I appreciate the amount of work you put into these very much. Thank you!

[tapiomakinen]

Thanks. It was worth waiting for. Now I am holding my breath until part 2.

[crassoza]

happy to see you back, your tutorials aro so clear and easy to understand. thanks for your great work.

[manofacertainrage]

Your timing is amazing! I had two videos left in your series when I went to bed last night and I watched those this morning and then #25 showed up. This is an amazing series - thank you very much!

[habibosaye]

Welcome back! Your WebGL playlist saved me from frustration. 😅

[Heavypoly]

Worth it!! Thank you, these are the best webgl videos on youtube.

[Desopolis]

Welcome back!
I know the views aren't super high or exciting but these videos are so helpful to understanding what's going on and the insides of larger more complex systems

[RomanSteiner_xD]

Very very useful videos. Thanks :)

Would you consider adding a video to the series that talks about multisample render buffers? After 3 days of blood and tears I've got my thing working (a "glow" post-effect), but I'm very unsure about if I'm doing it the right way. My pain points are more or less all related to how to handle multiple color attachments. Like, I now have several "renderbuffers" (one for each attachment: 2 color, 1 depth), 2 framebuffers (one for the multisampled buffers, one for the "output" buffer that blits into the downsampled render textures, then the textures themselves, etc). Like: what should be attached to which framebuffer, when and why?
Also I think a mention about how to use `readBuffer` together with `drawBuffers` to select which attachment to blit would save someones sanity; or that you actually have to blit every attachment separately... This gets mentioned almost nowhere: even MDN doesn't mention that readBuffer has an effect on blitFramebuffer.

[netkob]

Thanks for your great work. Could you give the right order to watch your vidéos, in ordre to learn from simplest concepts to more advanced ? Cheers

[imaginingPhysics]

How do I blend the frames with each other to create a trail/fade effect? Clearcolor with alpha does not seem to work.

[evangeloskolimitras]

Why don't y create a series on web gpu dude? you have a nice way of explainig gpu related stuff.