WebGL 2 is a substantial update to the WebGL API that requires a deeper understanding of the graphics pipeline than was necessary for WebGL 1. Many of the new features require manually ensuring that handles and memory are correctly laid out so that the pipeline can use them efficiently, but this setup can fail in subtle ways that can be difficult to debug.
PicoGL.js is a small WebGL 2 library with the modest goal of simplifying usage of new features without obscuring the functioning of the GL. The constructs one works with are the constructs of the GL: vertex array objects, vertex buffer objects, programs, transform feedbacks. PicoGL.js simply provides a more convenient API for interacting with those constructs, manages GL state, and also provides workarounds for some known bugs in WebGL 2 implementations.
This tutorial series will provide an introduction to WebGL 2 development though PicoGL.js. Readers are expected to have some familiarity with WebGL 1 or another 3D graphics API. While I will try to fully describe the concepts that will be discussed, this series will be challenging for those with no graphics background. I’d recommend the Udacity Interactive 3D Graphics course or WebGL 2 Fundamentals for total beginners
This page will act as a table of contents that will be updated as the series progresses.
- Part 1: The Triangle
- Part 2: Textures and Framebuffers
- Part 3: Uniform Buffers and Instanced Drawing
- Part 4: Transform Feedback
- Part 5: A Particle System