Почему золотой клон 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);
}