Why a static Three.js scene still cooks your phone, and the dirty-flag fix
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.…
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.
The 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.
To 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.
By 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.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
