WebGL 2: Deferred rendering (framebuffer object technique 1)

Let's go over the basics of deferred rendering (aka deferred lighting, deferred shading or g-buffers) in WebGL 2. This technique is a well-known method for improving render performance whenever you have a LOT of overlapping geometry (overdraw) and your fragment shader contains extremely expensive calculations.

It's also probably one of the best ways to practice working with framebuffer objects with multiple textures. It isn't always the most effective way to solve these types of performance problems, but it is relatively simple to implement, so try it out and profile your code to see if it's worth using.

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.

[therippersantos]

thank you so much Andrew, i love your videos and your way of presenting them, i knew a little about WEBGL but NOW i know a little more thanks to you

[van_valdis]

This is the most comprehensive series there is. It will be my "reference book" for WebGL adventures. Thank you soooo much!

[rinav]

Great series, man! When will you post other techniques though?

[alexeykalenkevich]

Hello, can you share your code shown in that and previous videos? Thanks!