A-Frame: ограничение количества граней и вершин моделей.

У меня проблемы с производительностью A-Frame, и все, что я пробовал, не помогло. На веб-сайте A-Frame в разделе Рекомендации – Эффективность упоминается следующее:

Ограничьте количество граней и вершин моделей.

Эта модель имеет около 100 000 вершин и 30 000 граней. Как уменьшить количество граней и/или вершин? Требуется, чтобы пользователь мог взаимодействовать с каждым блоком в модели отдельно, например. путем изменения его цвета, прозрачности или положения. Есть ли способ создать сетку или что-то еще и при этом иметь полное взаимодействие с каждым элементом по отдельности?

Кроме того, я понятия не имею, как улучшить производительность. В сцене нет света, текстур, коллизий, рейкастеров и всего прочего тяжелого. Это просто коробки...


performance three.js 3d
person naraesk    schedule 20.03.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Проблема в этой сцене не в количестве вершин или граней (соответственно 100k и 30k вполне нормально), а в размере графа сцены и количестве вызовов отрисовки GPU. Есть 2400 элементов <a-box/>, для каждого требуется отдельный вызов отрисовки, и это слишком много. Количество вызовов отрисовки должно быть как можно меньше, в идеале ‹ 100.

Чтобы все 2400 блоков оставались интерактивными, вам необходимо либо (1) создать пользовательский компонент, который помещает все блоки в один THREE.BufferGeometry и меняет позиции и цвета вершин в пределах geometry.attributes.position и geometry.attributes.color, или (2) использовать такой метод, как создание экземпляров. Оба потребуют некоторого пользовательского JS, а не только HTML-разметки, поскольку они не встроены в A-Frame в качестве компонентов.

person Don McCurdy    schedule 21.03.2018
comment
вторая ссылка указывает на раздел задач three.js, вы имели в виду что-то вроде это? - person Piotr Adam Milewski; 21.03.2018
comment
Спасибо за Ваш ответ. Я не использовал BufferGeometry, потому что документация three.js говорит: подходит для статических объектов, где вам не нужно много манипулировать геометрией после ее создания. что не является моим вариантом использования. Но насколько я понимаю, BufferGeometry просто менее удобен, но имеет те же возможности, что и Geometry, верно? - person naraesk; 21.03.2018
comment
@PiotrAdamMilewski ой, спасибо! Я имел в виду aframe-instanceing, но ваша ссылка тоже актуальна. - person Don McCurdy; 21.03.2018
comment
@naraesk — THREE.Geometry почти устарел, но да, это тоже сработает. BufferGeometry немного менее удобен в работе, но (несмотря на документацию) определенно может использоваться для динамических объектов. Каждый атрибут в вашем BufferGeometry может использовать .dynamic, .updateRange() и .needsUpdate, см. документацию по BufferAttribute. . - person Don McCurdy; 21.03.2018