Turbo charging 2D on the web
summary
Compares HTML/CSS, Canvas and WebGL with concrete benchmarks: CSS handles around 17–18k DOM objects at ~40fps, Canvas holds a few thousand up to 7–8k at 60fps, and raw WebGL hits 100,000 sprites at ~36fps after more setup. Shows GPU techniques: vertex/fragment shaders, normal maps and GPU fluid sims, and recommends using engines like PixiJS to avoid boilerplate. Highlights upcoming tooling: WebGPU and WebAssembly to move heavy compute off the CPU.
AI-written summary · about
chapters (13)
- 0:00Intro
- 1:05Rendering with HTML/CSS
- 2:21Rendering 2D with Canvas
- 3:26Rendering 2D with WebGL
- 7:02Rendering 2D HTML
- 8:25Rendering in 2D Canvas
- 11:32Rendering in WebGL
- 13:12Playing with Fragment shaders
- 15:09Messing with vertex shaders
- 16:24Stealing from 3D
- 18:04Write data to textures
- 19:442D WebGL Rendering engines
- 21:34Future of rendering using the web
related talks
34mNext-Generation 3D Graphics on the Web
38mWebGPU: Next-generation 3D Graphics on the Web
26mBuilding a 2D Game from Scratch with WebGPU
22mWebGL For More Than Graphics: Is It Possible?
39mLife of a pixel: A visual explanation of rendering performance
23mOptimizing HTML5 Games: 10 Years of Learnings
37mMoving Web applications into Virtual Reality
42mRendering performance from the ground up