为什么在另一个渲染器中的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);
}