Variable Gaussian blur: WebGL 2 Framebuffer Object Techniques

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:

https://github.com/scriptfoundry/WebG...

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:
https://github.com/scriptfoundry/WebG...

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:
   • WebGL 2.0  

Videos:
1. Creating WebGL Programs (   • WebGL 2: Programs (Hello World)  )
2. Quickie: Precision (   • WebGL 2 Quickie: Precision  )
3. Uniforms (Part 1) (   • WebGL 2: Uniforms (Part 1)  )
4. Attributes Part 1: Basics (   • WebGL 2: Attributes (Part 1)  )
5. Attributes Part 2: Beyond Basics (   • WebGL 2: Attributes (Part 2)  )
6. Attributes Part 3: Element Arrays (   • WebGL 2: Element Arrays & drawElements()  )
7. Objects, Targets & Binding (   • WebGL 2: Objects, Targets & Binding  )
8. Textures Part 1: Basics (   • WebGL 2: Textures (Part 1)  )
9. Textures Part 2: Mipmaps (   • WebGL 2: Mipmaps (Textures Part 2)  )
10. Textures Part 3: Texture Atlases (   • WebGL 2: Vertex Array Objects (VAOs)  )
11. Textures Part 4: Texture Arrays (   • WebGL 2: Texture Arrays (Textures Par...  )
12. Vertex Array Objects (   • WebGL 2: Texture Atlases or Sprite Sh...  )
13. Instanced Drawing (   • WebGL 2: Instanced Drawing  )
14. Matrix Attributes (   • WebGL 2: Matrix Attributes  )
15. Transparency (   • WegGL 2: Transparency & Depth  )
16. Camera Part 1 (   • WebGL 2: Cameras & Perspective (Part 1)  )
17. Camera Part 2: Clipping & Z-fighting (   • WebGL 2: Visualizing Projection (Came...  )
18. Lighting Part 1: Directional diffuse lighting (   • WebGL 2: Directional diffuse lighting  )
19. Lighting Part 2: Point lights & Spotlights (   • WebGL 2: Point lights & Spotlights  )
20. Binary model files (   • WebGL 2: Creating binary model files  )
21. Uniform Buffer Objects (Uniforms Part 2) (   • WebGL 2: Uniform Buffer Objects  )
22. Arrays Part 1: Uniforms (   • WebGL 2: Arrays & Uniforms  )
23. Arrays Part 2: UBOs and Hardware Bugs (   • WebGL 2: Hardware Bugs, UBOs & Arrays  )
24. Transform Feedback (   • WebGL 2: Transform Feedback (for Part...  )
25. Framebuffer Objects Part 1: The Basics (   • WebGL 2: Framebuffer Objects (The Bas...  )
26. Framebuffer Objects Part 2: The Gnarly Details (   • WebGL 2: Framebuffer Objects (The gna...  )
27. Framebuffer Objects Example 1: Deferred Rendering (   • WebGL 2: Deferred rendering (framebuf...  )
28. Framebuffer Objects Example 2: Object Picking (   • WebGL 2: Object Picking (framebuffer ...  )
29. Framebuffer Objects Example 3: Gaussian Blur (   • Variable Gaussian blur: WebGL 2 Frame...  )


About my setup: Please don't get distracted by any of it. I'm writing to TypeScript files, but you'll probably just use JavaScript files. I'm using VSCode with the GLSL Lint extension, but you should use whatever you are most comfortable using. I'm using Parcel.js for hot-reloading and ts transpilation, but you can use whatever system you like (even if that's just writing to a file on your desktop and hitting Ctrl+R.) Please please please: If you spend more than a minute setting your environment up, that's a minute wasted that you could be learning WebGL.

I really hope someone out there will find this series helpful.