Adventures in the vBuffer
summary
Builds a V-buffer renderer that diffs attribute buffers and files away WebGL boilerplate, then profiles it: initial version with lodash isEqual runs smoothly to ~1,000 objects, slows at ~3,000 and chugs at ~10,000; removing lodash and copying at the reconciliation boundary pushes 3,000+ smooth again. Compares plain JS, immutable-js and ClojureScript variants, finds immutables spur massive GC and drop to ~9–10 fps, while Chrome profiler and Safari’s Riptide concurrent GC reveal deep-equal and allocation hotspots. Practical takeaway: move the copy membrane and use mutable escape hatches where allocation costs matter.
AI-written summary · about
chapters (18)
- 0:00Introduction and background
- 0:55The quest for digital art
- 2:04Adventures in web graphics
- 4:04The limitations of WebGL
- 7:25Understanding the V DOM
- 9:06Data structures for diffing
- 11:01WebGL pipeline secrets
- 12:55Procedural rendering calls
- 16:51Building the V buffer
- 19:03Performance bottlenecks
- 21:46Fixing the renderer
- 23:44Limiting factors and next steps
- 25:37Exploring immutability
- 28:06ClojureScript and memory
- 32:04Garbage collection insights
- 33:42Lessons in performance
- 36:36Artistic failure and conclusion
- 38:54Final thoughts and resources
related talks
28mTurbo charging 2D on the web
26mCreative experiments with WebGL shaders in JavaScript
35mVisualizations using SVG, Canvas, and WebGL in Vue
38mMy journey with WebGL
39mThe Pixel Factory
32mThe browser kicked me out (of the CPU): Making a three.js WebGL mobile game
35mGamedev on React + WebGL
29mJavaScript and Game Development