CODEWITHSUNDEEP
javascriptreactjsperformancethree.js
riccardolardi
riccardolardi

Reputation: 1741

Three.js performance issue

I have this rather simple scene setup using react-three-fiber which is getting my macbook to spin up like crazy and I'm not sure if it's the implementation or if this is supposed to be such resource intensive:

https://codesandbox.io/s/busy-feynman-gub0i?file=/src/Three.js

Any help would be greatly appreciated!

Upvotes: 1

Views: 704

Answers (1)

M -
M -

Reputation: 28482

I'm pretty certain that setting gl.setPixelRatio(window.devicePixelRatio) is what's making your Macbook overheat.

Most Macbooks have retina displays with pixel ratios of 2 but some devices can go up to 4! As an example, let's say you're rendering a viewport of 1024x768:

- Pixel ratio 1: 1024 x 768  = 786,432 pixels
- Pixel ratio 2: 2048 x 1536 = 3,145,728 pixels
- Pixel ratio 3: 3072 x 2304 = 7,077,888 pixels

A ratio of 2 quadruples the number of rendered pixels on each frame, and ratio of 3 renders almost 10x the original number of pixels. This is also a big problem on smartphones; visiting a site with this much battery consumption can drain it in a matter of minutes. I recommend just keeping pixel ratio to the default value of 1.

Sometimes if I need to render a subtle background animation, I like to skip every other frame to render at 30fps instead of 60 to conserve my visitor's battery life:

var skipFrame = false;

animate() {
    if (!skipFrame) {
        renderer.render(scene, camera);
    }

    skipFrame = !skipFrame;
    requestAnimationFrame(animate);
}

Upvotes: 2

Related Questions