Three.js：英特尔 Mac 上的巨大 Chrome 性能问题

Question

I have created a three.js based web application for showcasing 3d tiles. You can find the showcase following this link:https://www.karak.at/workbench/dd6228117c6faec166b208710b5a52d5

How it works: an OBJ file is loaded and cloned multiple times using InstancedMesh to create a wall of tiles. Next one point- and one spotlight are added to the scene. The light's positions react on the current mouse position. The scene is rerendered on mousemove.

Rendering works super smooth in all browsers on M1 based Macs and on all browsers excpet Chrome on Intel based Macs. Using Chrome version 98 on an Intel based Macs the computer is under heavy workload, fans go up, framerate drops and in worst case scenarios the app crashes.

Here are my renderer settings:

    this.renderer = new THREE.WebGLRenderer({
        antialias: AA,
        powerPreference: "high-performance",
        depth: true,
        alpha: false,
        stencil: false
    });

Here is a Pen for showcasing the issue in an isolated environment: https://codepen.io/Huangart/pen/VwrVjpj

Is there something wrong on the implementation side of my app? Is this a known issue? Any ideas on how to overcome this Chrome issue?

Answer 1

I was having this same issue on the same hardware.

I think that's related to this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=1245448

Changing the ANGLE graphics backend flag on about:flags to Metal improved the performance a lot on my machine.