How can I reduce energy usage?

Questions
1

I have a graph visualization. It mostly works, it does it’s thing: You add vertices and edges, the graph layout adjusts automagically.

But I’ve noticed my approach uses a lot of energy, I cannot run it for long on my laptop, or risk draining the battery.

Is there advice for writing energy efficient threejs code? Gotchas? My idea right now is to add up the motion of vertices every iteration, and cancel the animationframe until a change, if there’s not enough motion detected.

Has anyone else dealt with this?

2

You don’t have to call renderer.render( in your animation loop unless something has changed…

so a common pattern is to have a boolean like:

let needsRender = true;

then in your animate function:

if(needsRender){
renderer.render( …
needsRender = false;
}

then whenever something changes, or the user clicks or whatever.. needsRender = true;

It can be tricky to manage, especially if you have animation.. you might have to use timers and stuff to let animations finish.. but.. yeah.

3 Likes
3

Yeah , it’s called “on Demand rendering”

And like manthrax said keep the animation loop running all the time but only render when that needsRender boolean is true.

and whenever orbitcontrols “change” event fires or gsap/tween’s update happens or your custom mesh/geometry update is done , set this needsRender to true.

1 Like
4

Thank you, manthrax and vis_prime. That’s very helpful!

2 Likes