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:
https://github.com/scriptfoundry/WebGL2-Videos-Materials
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:
https://www.youtube.com/playlist?list=PLPbmjY2NVO_X1U1JzLxLDdRn4NmtxyQQo
Videos:
1. Creating WebGL Programs (https://youtu.be/-T6EbWCq99c)
2. Quickie: Precision (https://youtu.be/lWLqi3DzaCk)
3. Uniforms (Part 1) (https://youtu.be/hUxw5Ni0l78)
4. Attributes Part 1: Basics (https://youtu.be/C6BztStktJY)
5. Attributes Part 2: Beyond Basics (https://youtu.be/e5qwESME00E)
6. Attributes Part 3: Element Arrays (https://youtu.be/IsyHfmq18ec)
7. Objects, Targets & Binding (https://youtu.be/sWBt5WrQTfE)
8. Textures Part 1: Basics (https://youtu.be/0nZn5YPNf5k)
9. Textures Part 2: Mipmaps (https://youtu.be/ocGDNM0AL3c)
10. Textures Part 3: Texture Atlases (https://youtu.be/R2Y6vb3z_Hw)
11. Textures Part 4: Texture Arrays (https://youtu.be/FCkMPkgWClo)
12. Vertex Array Objects (https://youtu.be/w3im_9qbM18)
13. Instanced Drawing (https://youtu.be/Ude1zZbf20s)
14. Matrix Attributes (https://youtu.be/8XOctnNrJn4)
15. Transparency (https://youtu.be/B2z0FhUk8gc)
16. Camera Part 1 (https://youtu.be/s6xGZy2FIMo)
17. Camera Part 2: Clipping & Z-fighting (https://youtu.be/cWl4M0vsiSA)
18. Lighting Part 1: Directional diffuse lighting (https://youtu.be/EcLagI5JWHs)
19. Lighting Part 2: Point lights & Spotlights (https://youtu.be/7VN4QqOtvt0)
20. Binary model files (https://youtu.be/xhoILgKOOwk)
21. Uniform Buffer Objects (Uniforms Part 2) (https://youtu.be/JPvbRko9lBg)
22. Arrays Part 1: Uniforms (https://youtu.be/KSbY518HNWQ)
23. Arrays Part 2: UBOs and Hardware Bugs (https://youtu.be/54rMDUOg12s)
24. Transform Feedback (https://youtu.be/ro4bDXcISms)
25. Framebuffer Objects Part 1: The Basics (https://youtu.be/m0RsLImjtgM)
26. Framebuffer Objects Part 2: The Gnarly Details (https://youtu.be/HpUW7Z2Y42g)
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.