How to improve FPS in a JavaScript Three.js Simulation

[tahasatan666]

Body

Hi Experts,
I’ve designed a 3D model with Blender program. When I import my model to three js project I’m faced with low fps issue. I’ve checked the object count in scene and triangles. The object count seems to be 324. Why fps drops occur with this results ? The object count is too high or is there another wrong programming issue ? If you can informing me about this situation I would be very appreciated.

Here is my webgl-renderer and orbit controls code blocks;

createRenderer() {
var _this = this;
this.renderer = new THREE.WebGLRenderer({
powerPreference: "high-performance",
alpha: true,
antialias: true
});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
this.renderer.shadowMap.enabled = true;
// this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
this.renderer.physicallyCorrectLights = true;
// this.renderer.setClearColor(0xffffff);
this.container.appendChild(this.renderer.domElement);
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.rotateSpeed = 1.5;
this.controls.panSpeed = 1.5;
this.controls.target.set(0, 0, 0);
this.controls.zoomSpeed = 1.5;
this.controls.minDistance = 0;
this.controls.maxPolarAngle = 0.9 * Math.PI / 2;
oPmremGenerator = new THREE.PMREMGenerator(this.renderer);
oPmremGenerator.compileEquirectangularShader();
this.controls.addEventListener("change", this.renderScene);
this.renderer.dispose();
},

renderScene() {
this.renderer.render(this.scene, this.camera);
// this.camera.updateMatrixWorld();
},

Guidelines

• I have read and understood this category's guidelines before making this post.

[KhamessiTaha]

This usually means your device is hitting limits in the fragment shader. PBR materials (MeshStandardMaterial, MeshPhysicalMaterial), the number of lights in the scene, and shadows all increase the cost of the fragment shader, and zooming in fills the screen with those expensive fragments.

To improve performance in this situation, you can do things like:

(a) reduce the number of lights
(b) bake lights
(c) use cheaper materials like MeshPhongMaterial, MeshLambertMaterial, or MeshBasicMaterial (unlit)

If you’re exporting glTF/GLB from Blender, you could get Standard, Physical, or Basic materials in three.js. To get Phong or Lambert you would have to traverse the objects and replace their materials.