Три. js проблема производительности - PullRequest
Новая
       10

Три. js проблема производительности

0 голосов
/ 22 апреля 2020

У меня есть довольно простая настройка сцены с использованием react-three-fiber, которая заставляет мой macbook вращаться как сумасшедший, и я не уверен, является ли это реализацией или это должно быть настолько ресурсоемким:

https://codesandbox.io/s/busy-feynman-gub0i?file= / src / Three. js

Любая помощь будет принята с благодарностью!

1 Ответ

1 голос
/ 22 апреля 2020

Я почти уверен, что установка gl.setPixelRatio(window.devicePixelRatio) вызывает перегрев вашего Macbook.

Большинство Macbooks имеют дисплеи сетчатки с пиксельной крысой ios из 2, но , некоторые устройства могут go до 4 ! Например, предположим, что вы визуализируете область просмотра с разрешением 1024x768: 

- Pixel ratio 1: 1024 x 768  = 786,432 pixels
- Pixel ratio 2: 2048 x 1536 = 3,145,728 pixels
- Pixel ratio 3: 3072 x 2304 = 7,077,888 pixels

. Отношение 2 увеличивает число визуализированных пикселей в каждом кадре в четыре раза, а отношение 3 - почти в 10 раз превышает исходное количество пикселей. , Это также большая проблема на смартфонах; посещение сайта с таким большим расходом батареи может разрядить его за считанные минуты. Я рекомендую просто сохранять соотношение пикселей к значению по умолчанию, равному 1.

Иногда, если мне нужно визуализировать тонкую фоновую анимацию, я предпочитаю пропускать каждый второй кадр для рендеринга со скоростью 30 кадров в секунду вместо 60, чтобы сохранить время автономной работы моего посетителя. : 

var skipFrame = false;

animate() {
    if (!skipFrame) {
        renderer.render(scene, camera);
    }

    skipFrame = !skipFrame;
    requestAnimationFrame(animate);
}
...