Three.js performance issue

Asked
Active3 hr before
Viewed126 times

7 Answers

performanceissue
90%

This is my callback function:,I’m having some performances issues with ThreeJS & ReactJS. I’m having different pages with ThreeJS scenes. I’m using useEffect and on the callback function, I remove the children of the scene.,Notice that if you are not free resources correctly, you will run into a memory leak.

This is my callback function:

    return () => {
       window.removeEventListener("resize", handleResize);
       mount.current.removeChild(renderer.domElement);
       scene.remove(scene.children[0]);
    };
88%

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.,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:,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:

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
load more v
72%

Here are some things you can do to help figure out the problem.,Make the shadow frustum as small as possible.,Make your frustum as small as possible for better performance. It’s fine to use a large frustum in development, but once you are fine-tuning your app for deployment, make your frustum as small as possible to gain a few vital FPS.

    import {
       Color
    } from './vendor/three/build/three.module.js';

    scene.background = new Color('red');
load more v
65%

I have converted some files that were originally in the obj format to json format using the converter available in the folder utils. Now I have included them in a javascript archive (around 35 objects). And the performance is bad.,I'm thinking in ideas to improve the performance. One idea is to use some minify in json files. But it's not working.,Not only download speed. My application is crashing the browser all the time and sometimes the navigation using FirstPersonControl is very slow.

Pretag
 Pretag team - issue, fix, solve, resolve
75%

The following code can be used to render many SVGs into a scene as a single bufferGeometry,Always try to reuse objects such as geometries, materials, textures etc. The following code snippet results in two new geometries and a single textures being added to the renderer. This count would remain the same if further elements were added to the array. If PlaneBufferGeometry was declared in the loop renderer.info.memory.geometries would show a linear growth of O(n) and performance would degrade at the same rate.,If you have any of your own performance optimisations or think these could be improved be sure to drop me a message or leave a comment.

0. FPS Frames rendered in the last second.The higher the number the better.
1. MS Milliseconds needed to render a frame.The lower the number the better.
2. MB MBytes of allocated memory.
load more v
40%

Let's show an example of when this is a good solution for an issue. Let's re-create the WebGL Globe.,The last thing we need to do is call our loader,Then we need some code to draw that data

Pretag
 Pretag team - issue, fix, solve, resolve
22%

The requested URL /show_bug.cgi?id=218949 was not found on this server.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "performance-issue" queries related to "Three.js performance issue"