Я занимаюсь разработкой мобильного веб-приложения для виртуальной реальности на основе Three.js.Для тестирования приложения я использую два устройства:
- Android NEXUS 5 (с Adreno 330), около 8 лет
- Android BQ AQUARIS X (с Adreno 506), около 3 летold
Вот то, что я использую:
GLTF модели Я загружаю все в этом формате, по возможности уничтожая модели.В этом приложении около 8 моделей (несколько животных, несколько зданий, лодка и т. Д.), Довольно низкополигональная, некоторые анимированные.Ничего особенного, я получил 45-55 кадров в секунду, если загружать модели только в пустую сцену с включенным освещением.Аналогичные результаты с включенным StereoEffect (VR).Тени не отбрасываются.
Текстуры Каждая текстура, используемая в моделях GLTF, была предварительно сжата, что улучшило время загрузки.Все изображения изменены до степени двойки.В любом случае, текстура ландшафта довольно большая (300 КБ), а ее нормальная текстура еще больше (700 КБ).Я больше не могу уменьшить его, иначе он потеряет много деталей.
Материалы Я обрабатываю все загруженные материалы и конвертирую их в MeshLambertMaterial (если возможно), а также в MeshPhongMaterial.
Огни Я использую только пару источников света: Ambient и SpotLight, которые используются как солнце.Тени не отбрасываются (не нужны).
Скайбокс Их две: одна для фона (ночное небо) и одна ближе, с прозрачными облаками (автокоррекция).
Lensflare Это довольно дорого, но приложение требует этого.Я установил режим NoBlending на случай, если он будет быстрее.DepthTest имеет значение false, чтобы избежать появления артефактов между облаками.Кроме того, я изменил настройку порядка рендеринга каждой модели, участвующей в сцене, чтобы она не рендерилась до нее.
Частота кадров приемлема как в обычном режиме, так и в режиме VR (со StereoEffect).Но при включении «продвинутых» эффектов, таких как шейдер неба / солнца и шейдер воды, частота кадров уходит в ад.Я использую эти два, взятые из примеров:
https://threejs.org/examples/webgl_shaders_sky.html
https://threejs.org/examples/webgl_shaders_ocean.html
Вот некоторые из тестов, которые я сделал, чтобы улучшить это:
Точность шейдера Я пытался изменить код шейдеров, но я просто не знаю, что я делаю (язык шейдеров - самый сложный, с которым я столкнулся, очевидно, из-за отсутствия математики с моей стороны ...).Я просто добавил «среднюю» точность, чтобы улучшить производительность, но шейдер перестает работать (все черное).В океане шейдеров происходит нечто подобное: свет очень плохо отражает, и есть большая белая область, где должны быть детальные отражения света.Похоже, что оба шейдера работают только с высокой точностью, что делает их действительно плохо работающими на мобильных устройствах.
Соотношение пикселей устройства Мой ноутбук получает 1,25 точек на дюйм, и этого достаточно даже присглаживание отключено.Но мобильные устройства получают 3dpi, что дает изображения хорошего качества, но это очень медленно на устройствах с низким GPU, даже больше, когда вы включаете режим VR и экран делится на две части!Я понимаю, что я могу ограничить до 2 точек на дюйм на мобильных устройствах, что, безусловно, улучшает частоту кадров, но я хотел бы избежать этого, если это возможно, чтобы не потерять какое-либо качество (что более заметно, когда вы смотрите на экран через какую-то пластиковую линзу на VR картоне..).
Сглаживание На ADRENO506 с включенным сглаживанием частота кадров падает до 20 кадров в секунду ... и только до 10 кадров в секунду в режиме VR.Результаты улучшаются при использовании FXAA composer, но не слишком сильно.
WebGLDeferredRenderer Я вижу некоторые улучшения в шейдере океана.Но в небе / солнце шейдера все равно очень медленно.Это действительно стоит здесь?Я думал, что это поможет загрузить шейдеры.
Полноэкранный режим Приложение должно работать в полноэкранном режиме, но я теряю 20fps при его включении.Это нормально?
Больше идей ... Я думаю, что тамЭто нечто большее, что я мог бы попробовать: создать дополнительную сцену, визуализировать небо и океан там, но с более низким разрешением, а затем (каким-то образом ...) интегрировать ее с первой сценой, где отображаются все модели.Я не знаю, сработает ли это, у меня есть серьезные сомнения относительно молнии, выполнения заказов и т. Д. Но идея состоит в том, чтобы обрабатывать сложные детали с более низким качеством, оставляя модели с высоким качеством.
ЛюбыеСовет будет признателен, я открыт для всего на данный момент.