Three.js: занимает слишком много времени для рендеринга первого кадра

Question

Я использую Three.js (с WegGL) для рендеринга чередующихся сцен множества плиток изображения (несколько тысяч), анимируемых в пространстве.Анимации обрабатываются Tween.js.Я использую Chrome для тестирования.

Чтобы оптимизировать загрузку изображений, я предварительно загружаю все изображения текстуры перед отображением первой сцены.Все текстуры затем сохраняются в памяти как THREE.Texture.Теперь, когда я готовлю сцену к показу, я делаю что-то вроде этого:

let tile = null, tweens = [], cameraZ = 1000;
for (let y =  0; y < rows; y++){
    for (let x =  0; x < columns; x++){
        tile = await this.createTile(x, y, [textureSize]);
        tile.position.x = x * this.tileWidth - this.picWidth / 2;
        tile.position.y = -y * this.tileHeight + this.picHeight / 2;
        tile.position.z = cameraZ * 1.1;

        tweens.push(new TWEEN.Tween(tile.position)
            .to({z: 0}, 4000)
            .delay(200 + x * 120 + Math.random() * 1000)
            .easing(TWEEN.Easing.Cubic.InOut));
        this.scene.add(tile);
    }
}
tweens.map(t => t.start());

Подготовка к сцене также включает в себя камеру и точечный источник света, и для ее завершения требуется около 400 мс.

Затем я визуализирую сцену так:

function render(){
    requestAnimationFrame(render);
    TWEEN.update();
    renderer.render(this.scene, this.camera);
}
render();

Все отображается правильно, при измерении некоторых длительностей обработки, я вижу, что первый вызов рендеринга занимает около 1400Миз!Другие вызовы занимают от 70 до 100 мс.

Моя конечная цель - создать несколько таких сцен, играть одну за другой без зависаний.Учитывая, что все необходимые ресурсы уже загружены, в чем может быть проблема и как я могу это оптимизировать?

Спасибо

Answer 1

Во время первого кадра рендеринга все ваши ресурсы и шейдеры компилируются и загружаются в графический процессор.Если вы хотите избежать этого, вам придется сделать некоторые трюки за кулисами ... например, принудительно визуализировать каждый объект один раз после загрузки, возможно, добавив его в одну сцену и вызвав для него renderer.render.В зависимости от того, что является узким местом (компиляция шейдеров или загрузка ресурсов), это может или не может помочь ... но обходной путь делает какой-то предварительный рендеринг для принудительной загрузки на карту по одной, а не все сразу.

Кроме того, как отмечал предыдущий комментатор, в цикле рендеринга выше есть опечатка.

это должен быть requestAnimationFrame (render);