google-chrome - Three.js:英特尔 Mac 上的巨大 Chrome 性能问题

Question

我创建了一个基于 three.js 的 web 应用程序来展示 3d tiles。您可以通过此链接找到展示柜:https://www.karak.at/workbench/dd6228117c6faec166b208710b5a52d5

工作原理:使用 InstancedMesh 多次加载和克隆 OBJ 文件以创建一堵瓷砖墙。接下来将一个点和一个聚光灯添加到场景中。灯光的位置对当前鼠标位置作出 react 。场景在 mousemove 上重新渲染。

在基于 M1 的 Mac 上的所有浏览器和基于 Intel 的 Mac 上除 Chrome 之外的所有浏览器中，渲染都非常流畅。在基于 Intel 的 Mac 上使用 Chrome 98 版时，计算机工作负载过重、风扇升高、帧率下降，在最坏的情况下，应用程序会崩溃。

这是我的渲染器设置:

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

这是一个用于在隔离环境中展示问题的 Pen:https://codepen.io/Huangart/pen/VwrVjpj

我的应用程序的实现方面是否有问题？这是一个已知的问题？关于如何解决这个 Chrome 问题的任何想法？

Answer 1

我在同一硬件上遇到了同样的问题。

我认为这与这个错误有关:https://bugs.chromium.org/p/chromium/issues/detail?id=1245448

将 about:flags 上的 ANGLE 图形后端标志更改为 Metal 大大提高了我机器上的性能。