时间戳

首页 > 解决方案 > 为什么另一个渲染器中的 THREE.js gilt 克隆会减慢帧速率？

three.js - 为什么另一个渲染器中的 THREE.js gilt 克隆会减慢帧速率？

问题描述

我在主渲染中添加了一个 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 );
}

当两个镀金场景都在两个渲染器的相机视图内时，帧速率会急剧下降。我检查了这两个对象，并且在各个方面看起来都是独一无二的。有谁知道发生了什么？

标签： three.jscloninggltf

解决方案

从性能角度来看，拥有两个渲染器是非常糟糕的做法。它生成两个 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);
}

推荐阅读