Learning on Web Dev Open is free for all.

Immersive Web > Budgets, accessibility and the black screenWhat a mid-range phone can hold
Phase 07Budgets, accessibility and the black screen368 of 434

What a mid-range phone can hold

Shared memory, tile-based rendering, thermal throttling, and why your scene is fine for ninety seconds and then is not.

Concept14 minAI pair

Mobile GPUs share memory with the system and render in tiles: the screen is divided into small blocks held in fast on-chip memory, and the renderer resolves each tile before moving on. This makes opaque geometry cheap and makes anything that defeats early depth rejection expensive: large transparent surfaces, alpha-tested foliage, discard in a fragment shader. Overdraw that costs you ten per cent on a desktop can cost you half your frame on a phone.

Then there is heat. A phone gives its full clock speed for roughly the first minute of sustained GPU load and then throttles, sometimes to half. A scene benchmarked in the first thirty seconds is benchmarked in conditions no real visitor experiences. Leave the thing running for five minutes and measure at the end.

The practical response is tiering rather than detection. Measure your own frame times for the first few seconds and step down, pixel ratio first, then post effects, then shadow resolution, then geometry detail, until you hold your target. That is honest on hardware that did not exist when you shipped, which a user-agent lookup table is not.

You should now be able to

  • Explain why overdraw is disproportionately expensive on mobile
  • Plan for thermal throttling rather than being surprised by it
  • Choose a quality tier at runtime without a device database
Ask the community

Loading…