{
  "id": 1338837,
  "title": "Why a static Three.js scene still cooks your phone, and the dirty-flag fix",
  "url": "https://urgent.news/2026/08/16/why-a-static-three-js-scene-still-cooks-your-phone-and-the-dirty-flag",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-16T19:43:30.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/dheerajakula/why-a-static-threejs-scene-still-cooks-your-phone-and-the-dirty-flag-fix-3a6h"
  },
  "original_language": "en",
  "account": "Three.js is a popular library for drawing 3D graphics in web pages. However, when used with small, static games, it can cause the phone to heat up significantly. The author discovered this issue while testing small games like Ludo, tic-tac-toe, carrom, and rock-paper-scissors on an iPhone. Initially, they thought these games were too heavy for the device or that they should switch to Canvas2D, but both assumptions were incorrect.\n\nThe issue lies in the render loop, which continuously redraws the entire scene, even if nothing on the screen changes. This constant repainting consumes a lot of GPU resources, leading to increased heat on the phone. The render loop is responsible for this behavior, not the Three.js library itself.\n\nTo fix this problem, the author suggests implementing a \"dirty flag\" system. This flag is set to true whenever something actually changes on the screen, such as a user making a move in a game. The render loop then only calls the renderer.render() function when the dirty flag is set to true, effectively rendering the scene only when necessary.\n\nBy implementing this dirty flag mechanism, the Ludo board only renders frames when the game state changes, significantly reducing the GPU workload and preventing the phone from heating up. The same technique can be applied to other similar games, drastically improving performance and reducing battery consumption.",
  "summary": "So I have a bunch of small games on my site. Ludo, tic-tac-toe, carrom, rock-paper-scissors. Nothing fancy, the kind of thing you'd think runs on a potato. They're built with Three.js , which is the standard library for drawing 3D graphics in a web page. I was testing them on my iPhone and the phone got genuinely hot. Hot to hold. And here's the part that bugged me: I wasn't even doing anything.…",
  "key_points": [
    "Static Three.js scenes cause phone heating due to continuous repainting in render loop.",
    "Dirty flag system implemented to render scene only when necessary.",
    "Ludo board renders frames only when game state changes, reducing GPU workload."
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}