为什么在另一个渲染器中克隆THREE.js镀金会减慢帧速率？

Question

我有一个gltf场景添加到我的主渲染：

loader.load( 'models/model.gltf', function ( gltf ) {
    ...
    scenes['game'].add( gltf.scene );
}

这工作得很好，而且我可以毫无问题地进行克隆：

loader.load( 'models/model.gltf', function ( gltf ) {
    ...
    scenes['game'].add( gltf.scene );
    var myClone = gltf.scene.clone();
    scenes['game'].add( myClone );
}

但是，当我尝试将克隆添加到第二个渲染器时，事情开始变得棘手起来：

loader.load( 'models/model.gltf', function ( gltf ) {
    ...
    scenes['game'].add( gltf.scene );
    var myClone = gltf.scene.clone();
    scenes['inventory'].add( myClone );
}

当两个镀金场景都在两个渲染器的摄影机视图中时，帧速率会急剧下降。我检查了两个对象，似乎在各个方面都是独一无二的。有人知道这是怎么回事吗？

Answer 1

在性能方面，使用两个渲染器是非常糟糕的做法。它生成两个WebGL上下文，消耗更多的内存，本质上否定了GPU可能想要实现的任何效率。可以有多个场景和多个摄影机，但不要使用多个渲染器。相反，您应该共享一个渲染器，如下所示：

var renderer = new THREE.WebGLRenderer();
var scene1 = new THREE.Scene();
var scene2 = new THREE.Scene();
var cam1 = new THREE.PerspectiveCamera();
var cam2 = new THREE.PerspectiveCamera();

update() {
    renderer.render(scene1, cam1);
    renderer.render(scene2, cam2);
}