My three.js app does not have much meshes(around 200 in total), and it renders with 50~60 fps. But when I run my app for a few minutes, Safari browser warns that “This webpage is using significant energy […]”
Can someone provide tips for reducing energy consumption?
It’s hard to provide feedback for your question since it would be necessary to make a performance analysis. If you now the bottlenecks of your app, you can start introducing optimizations which will then improve the performance and lower the battery consumption.
Your computer may not be doing much, but by default you’d be telling it to do those things repeatedly… You could run at a lower frame rate by wrapping the requestAnimationFrame() call in a timeout or other kind of delay.
Another thing to consider, most noteably on laptops, is telling the threeJs renderer to use low-power mode.
renderer = new THREE.WebGLRenderer({
powerPreference: 'low-power' /* This can also be 'high-performance' */
});
I hope that helps.