Large lagging and fps drop with .glb file

Questions
,
1

Hello Experts,
I’ve designed a 3D model by using Blender. When I export the model to the glb format and import to the threejs online editor(three.js editor) mouse movements are very quick. But when I import the model to the my project it’s been so lagging. I think Fps value is very low. I’m using OrbitControls and the render function only works with OrbitControl’s change event. What is the main problem for this lagging issue. When I use this command “renderer.info.render.calls” it returns 631 value.

Here is the simple code that I used;

createRenderer() {
      var _this = this;
      this.renderer = new THREE.WebGLRenderer({
        powerPreference: "high-performance",
        alpha: true,
        antialias: true,
        autoClear: true,
      });
      this.renderer.setSize(window.innerWidth, window.innerHeight);
      this.renderer.setPixelRatio(window.devicePixelRatio);
      this.renderer.gammaFactor = 2.2;
      this.renderer.gammaOutput = true;
      this.renderer.outputEncoding = THREE.sRGBEncoding;
      this.renderer.shadowMap.enabled = true;
      this.renderer.physicallyCorrectLights = true;
      this.container.appendChild(this.renderer.domElement);

      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.addEventListener("change", this.render);
    },
    render() {
      // this.controls.update();
      this.renderer.clear();
      this.renderer.render(this.scene, this.camera);
      alert(this.renderer.info.render.calls);
    },

Here is the 3D model’s image;

issue
issue1440×741 260 KB

Thanks for your help and suggestions.

2

The number of draw calls and the high number of vertices seems to be too complex for your system.

Yes, the editor has no animation loop by default (only when running animations) so a bad framerate is not that noticeable. However, the resulting frame time of nearly 40 ms is too high.

I suggest you optimize your model in Blender by merging geometries (in order to lower the number of draw calls) and simplifying the geometry in general.

These two lines can be removed. They make no sense if you set outputEncoding to THREE.sRGBEncoding.

autoClear is not configuration parameter of WebGLRenderer’s ctor.

The editor does not set this parameter. Remove it and also try it without setting alpha to true.

1 Like
3

Thanks for your help @Mugen87 . Actually my 3dmodel’s object count was around 98000. But by redesigning my 3d model, I was able to reduce the number of objects to around 10 thousand. What should be number of draw call and the vertices count to achieve maximum performance? I’ve many shelves in my model and I can’t merge these shelves. Because I need to click on the shelves individually and I should be able to paint some shelves programatically. I made a single object by always combining most objects except shelves.

Here is my actual model;

Screen Shot 2021-06-20 at 12.22.16
Screen Shot 2021-06-20 at 12.22.161894×1398 697 KB

4

Actually my 3dmodel’s object count was around 98000. But by redesigning my 3d model, I was able to reduce the number of objects to around 10 thousand. What should be number of draw call and the vertices count to achieve maximum performance?

The rule of thumb is usually <100 draw calls, and each Mesh is usually a single draw call, so 10,000 is still too many. A performant application rendering what you show would need to combine the shelves, and then find other ways to support selection and painting on the merged shelves. This is a good example, where all spheres together are drawn by one InstancedMesh, while still supporting selection and painting:

https://threejs.org/examples/?q=instanc#webgl_instancing_raycast

There are some other threads on these forums about converting existing meshes to an InstancedMesh.

2 Likes
5

Thanks for your help @donmccurdy . I’ll try to create dynamically shelves by using THREE.InstancedMesh method. I hope it will be a fluent interface :slight_smile: