Dirty‑flag render loop cuts Three.js phone heat

Dheeraj Akula, a software engineer at Nutanix Enterprise AI, noticed that a static Three.js scene kept his phone hot even though nothing changed on screen. The culprit was the default render loop, which calls requestAnimationFrame unconditionally at roughly 60 fps, forcing the GPU to redraw the scene every frame [devto].

Problem

On mobile devices, continuous rendering wastes power and raises temperature. Because the scene never updates, the GPU performs identical work 60 times per second, draining the battery and throttling performance.

Solution

Akula introduced a dirty flag (needsRender). The flag is set to true whenever the scene changes—e.g., when objects move or textures update. The render loop then checks the flag and skips drawing when it is false. This simple change eliminates unnecessary frames. He also capped the device pixel ratio and disabled antialiasing on constrained devices, detecting mobile browsers or WebViews before applying the limits.

Impact

With the dirty‑flag in place, the application rendered only when needed, cutting GPU activity and noticeably lowering phone temperature. The author reports a “significant” reduction in both power draw and heat, making the technique valuable for any Three.js or WebGL project targeting mobile users [devto].

Developers can adopt the same pattern by adding a needsRender boolean, toggling it on scene updates, and optionally adjusting pixel ratio and antialiasing based on device capabilities. The result is a leaner render loop that conserves battery life and improves user comfort.