React-three-fiber: повышаем производительность приложений

[nin-jin]

Так и не понял зачем тут jQuery React.

[halfcupgreentea]

https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance#enable-concurrency

Удобный дешевый шедулинг всего приложения включая и webgl и DOM

[nin-jin]

А вы запускали эту демку? Она дико течёт по памяти и каждые пару секунд зависает на секунду.

[john_samilin]

Это же справедливо для массы статичных объектов. Если у вас, скажем, 150 анимированных моделек, то instancedMesh не поможет

[SimbirSoft_frontend]

Добрый день. Если у объектов одинаковые геометрия и материал, то InstancedMesh позводяет повысить производительность. Тестировали на примере 50000 квадратов. При таком количестве удалось добиться анимации 60 кадров в секунду.

[john_samilin]

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

[SimbirSoft_frontend]

Предложенное решение подходит ко многим ситуациям, но все же не ко всем, поскольку в условиях высокой нагрузки нужно приспосабливаться к особенностям конкретного проекта. В нашем примере в скелетной анимации не было необходимости, это тема для отдельной статьи.

[fimashagal]

Немного непонятно получается. InstancedMesh это класс THREE.js, при чем тут fiber?

[SimbirSoft_frontend]

Добрый день. Рассматривали библиотеку react-three-fiber, так как с ней удобнее работать в том случае, если у нас React приложение.