Writing / series
Three.js at 60 fps
Keeping three.js games smooth on school Chromebooks: first-draw stutter, draw calls and asset size. 3 parts, 2 out so far.
Part 1
Your Shader Stutter Happens at First Draw
8 min read
A three.js hitch the first time an effect appears is usually a WebGL program link. It blocks at the first draw, not at compile, and a warm-up only fixes it if it links the same program variant your frames use.
Part 2
Hundreds of Draw Calls Down to a Handful with BatchedMesh
7 min read
How Typo's Voyage draws every tile and every 3D letter through four three.js BatchedMeshes, poses a whole treadmill on the GPU with one vec4 a frame, and what breaks when you move instances in the vertex shader.
- Part 3 · ships