WebGL 2: Variable Gaussian blur (framebuffer object Technique 3)

Learn everything you need to know to implement *variable* gaussian blur in your WebGL applications that's fast enough even for low-spec mobile devices. I've tried to keep this as short as possible, focusing only on the core concepts you'll need, including 2-pass convolution and linear sampling. No live coding this time. But all of the code you need is available here:

Just make an HTML page with a 480x480 canvas and include that JS file. There are no other dependencies.

CHAPTERS:
1. Blur (1:59)
2. Convolution (3:01)
3. Gaussian distribution (4:55)
4. Kernel separability (6:55)
5. Separability + 2-pass rendering (9:25)
6. Linear sampling (11:00)
7. WebGL considerations:
1. Workflow (14:06)
2. UV Stride (14:53)
3. Kernel uniforms (16:49)
4. Edge/corner consideration (18:22)
5. Non-screen-space blurring (18:55)
8. Code
1. Generate 1D Gaussian kernel (19:42)
2. Convert 1D kernel to offsets and scaling factors (20:07)
3. Create data and upload uniform data (20:30)
4. JS unidirectional blur function (21:12)
5. Animation frame code (21:34)
6. Fragment shader code (22:24)

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.

[GaëtanLagier]

I've been waiting for a new video for months. I checked every day to see if there was a new one. Waiting over! 🎉 Thank you to cover these subjects. Best youtube tutorials ! 👏

[Heavypoly]

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

[beepboopimarobot]

This was worth the wait! :)
It's also perfect timing, since I just tried implementing blur functions in GLSL following mentioned naive strategy (sampling for each entry of the kernel). The approach shown here is much more insightful than I anticipated and your careful introduction into Gaussian blur make this a very cool topic to explore GLSL-thinking much more in depth.
Thank you so much for this amazing series and all the effort you put into the presentation of each subject!

[egorbashinsky]

Andrew, so happy to hear of you. Please keep making videos, those are insanely helpfull.

[UliTroyo]

Always a treat to have a new video from you! :)

[raph]

thanks it's exactly what I need !

[raph]

I found a typo in the source code, line 149 : triangleVerexShaderSource the "t" of vertex is missing