ThreeJS应用程序渲染第一帧时性能问题。

Question

我目前在渲染 ThreeJS 应用程序的第一帧时对其性能产生了很大的影响。这会导致 Edge 和 IE 11 浏览器冻结 5 秒钟，并弹出一个指示“此窗口未响应”的弹出窗口，可能会吓到我的用户。

使用 Chrome 的性能分析器，似乎问题来自于几个 ThreeJS 函数，您可以在下面的截图中清楚地识别。

• WebGLUniforms.upload：425ms（50.7％帧渲染时间）
• WebGLProgram.constructor：327ms（38.9％帧渲染时间）

如何最小化函数调用的持续时间？

我能否在多个帧上创建程序？或上传制服？

我的3D模型中材料的数量会影响这些函数吗？

我试图隐藏场景中的所有模型并逐个显示它们，似乎可以防止冻结，但每个模型需要500毫秒才能显示，这对用户体验来说并不完美。也许这是唯一的出路。

谢谢您的时间。

---

编辑：材料的数量或其性质（WebGLStandardMaterial？）似乎会影响性能。

- Hellium

Answer 1

逐帧向场景中添加一些对象。Three.js会在首次使用WebGL资源时进行初始化，因此如果您的场景中有100个对象，则第一次调用renderer.render时将初始化所有100个对象。

因此，只需将N个对象添加到场景中，调用renderer.render，然后在下一帧再添加N个对象，以此类推，直到所有对象都已添加。

按材质和几何体进行排序可能是最重要的。换句话说，如果您有10种不同的材料和10种不同的几何体，并且要渲染100个不同的模型（一个模型需要一个材质和一个几何体），则您需要确保首先添加的N个模型不使用所有材料和所有模型，因为这些是需要初始化的内容。

后处理通道也需要初始化，因此如果您正在使用其中任何一项，则可以在第一帧中仅对其进行初始化，然后开始添加对象。

- gman

---

感谢您的回答@gman。我已经尝试了您关于逐个添加我的模型并在它们之间调用render的建议。请参见我的问题结尾。我的应用程序中没有任何后处理效果。我将尝试调用renderer.compile以查看效果。 - undefined

试着添加它们，而不是隐藏它们？ - undefined

一次只添加一个模型，每个模型添加后调用renderer.render函数，效果与隐藏所有模型然后逐个显示它们相同。顺便说一下，我还没有能够调用renderer.compile函数，因为ThreeJS找不到顶点着色器，我应该有时间的时候去看一下这个问题。 - undefined

隐藏/添加应该是一样的，我认为，如果它们是场景的一部分但不可见，渲染器将不会设置它们。 - undefined

Answer 2

你可以在前1秒内调用 renderer.render(camera, scene) 来预渲染你的场景。

首先将 auto clear 设置为 false。

renderer.autoClear = false;

你的预渲染完成了第一次绘制。

const preRender = (time = 1000) => {
    return new Promise((resolve) => {
        const startTime = performance.now();

        function checkTime(currentTime) {
            if (currentTime - startTime >= time) {
                // pre render finished
                resolve();
            } else {
                requestAnimationFrame(checkTime);

                // so the first frames occur here!
                renderer.render(scene, camera);
                renderer.clear();
            }
        }

        requestAnimationFrame(checkTime);
    });
};

然后你的指示会是这样的：

preRender().then(() => render());

渲染是你的循环，你在其中正常地渲染你的场景。

const render = () => {
    requestAnimationFrame(render);

    // your custom logic
    renderer.render(scene, camera);
}

在预渲染时，您可以显示一个“加载中”的提示，之后用户体验会非常流畅。

- Dayo