Топ 5 WebXR Фреймворков - Сравнение
Хотите начать разработку WebXR? Вот сравнение топ 5 фреймворков, чтобы помочь вам начать.
Краткий обзор API
13 декабря 2019 года Chrome 79 стал первым браузером с включенной по умолчанию поддержкой WebXR 1.0. Это означает, что первый шаг к преодолению одной из самых больших преград для WebXR, а именно стабильности, наконец сделан. Ранее было сложно поддерживать проект WebXR / WebVR / WebAR, так как API браузера постоянно изменялось: WebVR 1.0 быстро сменилось на WebVR 1.1, которое, несмотря на небольшое изменение версии, изменилось достаточно, чтобы сломать любое приложение, написанное на WebVR 1.0.
После WebVR 1.1 последовала серия неверсированных промежуточных версий WebXR. Было непросто определить, с какой версией вы имеете дело, и приходилось запрашивать токены Google Chrome Origin Trials, чтобы ваше приложение могло работать у пользователей без включения экспериментальных флагов.
С выходом WebXR 1.0 в Chrome 79 эти проблемы наконец разрешены, и мы можем быть уверены, что наши приложения будут продолжать работать даже в будущих версиях Chrome. Это также означает, что вы наконец можете начать проект, который всегда хотели сделать. Сегодня даже Apple Vision PRO поддерживает WebXR, и это отличный способ создавать кроссплатформенные приложения XR.
Но какой фреймворк вам стоит использовать?
Вот список фреймворков, которые мы считаем подходящими:
Содержание
5 - Unity 3D
Вместе с Unreal Engine, Unity 3D является одной из самых популярных платформ для разработки 3D-приложений, которая поддерживает HTML5 в качестве целевой платформы и, следовательно, теоретически может быть использована для разработки WebXR.
Однако WebXR изначально не поддерживается: вам понадобится плагин, например, De-Panther’s WebXR Exporter.
Это не идеально, но у вас есть возможность переключиться на поддержку WebXR в Unity 3D, если они ее добавят.
До тех пор вам придется иметь дело с некоторыми другими проблемами при экспорте в HTML5: низкая производительность, долгие времена загрузки и плохая поддержка мобильных графических процессоров (как в смартфонах или автономных гарнитурах типа Meta Quest и других).
Тем не менее, вы можете воспользоваться экосистемой ассетов и плагинов Unity, а также выпустить своё приложение как нативное! (Однако в наши дни магазины приложений едва ли обеспечивают видимость, если ваше приложение не попало в короткий список топ-игр, так что это преимущество может быть довольно ограниченным.)
4 - Babylon.js
С помощью “Playground”, данный фреймворк предоставляет быстрый способ прототипирования любого 3D-приложения. Он уже поддерживает WebXR и имеет огромный список примеров для рендеринга практически всего. Его гибкость объясняется тем, что это библиотека на JavaScript. Babylon позволяет вам глубоко погружаться в код, но требует написания всей программы на JavaScript.
Фреймворк рассчитан на более опытных программистов, поэтому мы рекомендуем этот выбор, если у вас есть опыт и/или необходимость в значительной настройке рендеринга.
3 - Three.js
Вероятно, это самая популярная библиотека рендеринга JavaScript с открытым исходным кодом. Снова, полная гибкость доступна на низком уровне, так как вы можете настроить рендеринг для достижения любого желаемого результата. С такой силой приходит и большая ответственность: вы единственно ответственны за то, чтобы ваше приложение оставалось производительным и работало плавно даже на мобильных VR-устройствах.
Three.js уже поддерживает WebXR! Пока в WebXR не будет распространенной поддержки AR, вам стоит обратить внимание на AR.js или mind-ar-js для поддержки WebAR. Оба они интегрируются с Three.js.
Редактор Three.js позволяет легко собирать сцены различного формата файлов. Это позволит вам быстро начать проект, но всё равно потребует программирования взаимодействий на JavaScript в дальнейшем. В редакторе нет концепции проектных файлов, поэтому он действительно полезен только для создания начального кода вашего проекта.
Если у вас нет опыта в программировании, мы рекомендуем обратить внимание на A-Frame. Он построен на базе Three.js и позволяет использовать хороший набор функций гораздо более простым способом.
2 - PlayCanvas
Эта платформа разработки имеет полноценный визуальный редактор и поддерживает AR и VR. Их визуализация 3D-графики выглядит великолепно при правильной настройке. Время загрузки редактора и экспортированных игр также вполне приемлемо.
Визуальный редактор значительно упрощает сборку сцен, добавление компонентов и развертывание проекта. Встроенный редактор кода позволяет писать свои собственные скрипты. Если вы предпочитаете свой редактор кода, например, Atom, Vim или Visual Studio Code, это может немного усложнить процесс, но с их REST API, вы всё же сможете это делать.
1 - A-Frame
Для удобной разработки WebVR и WebAR в последние годы A-Frame стал стандартом. Построенный на базе Three.js, он всегда позволяет углубиться в детали, если вам требуется настройка, при этом предоставляя множество готовых для повторного использования компонентов.
A-Frame позволяет настроить сцену через HTML, что затем преобразуется в иерархию 3D-сцены. Вы можете создавать свои собственные компоненты на JavaScript для модификации поведения и взаимодействий, а “A-Frame Inspector” позволяет легко редактировать вашу сцену и видеть, что генерируется из HTML. Некоторые крупные браузерные VR-игры были разработаны с использованием A-Frame, такие как Barista Express и Moonrider.
Так как он работает поверх Three.js, A-Frame уже поддерживает WebXR. Поддержка WebAR опять же осуществляется через AR.js. A-Frame оставляет оптимизацию ваших ресурсов по времени загрузки на ваше усмотрение. Для простых сценариев A-Frame идеально подходит и позволяет вам достичь значительных результатов.
Для более крупных проектов вы можете достичь пределов производительности A-Frame.
Резюме | TL;DR
Выбор фреймворка будет зависеть от вашего использования. Для простых сцен мы рекомендуем A-Frame. Если нужна более высокая производительность, оптимизируйте прямо на Three.js. Если программирование не для вас, возможно, стоит попробовать PlayCanvas. Он также кажется самым простым способом достижения очень красивой графики (но для VR в Интернете предпочтение лучше отдавать производительности, чем внешнему виду).
Wonderland Engine
Всё ещё не нашли подходящий инструмент? Возможно, вас заинтересует то, что мы разрабатываем.
Мы изучили все существующие фреймворки и создали Wonderland Engine с нуля, чтобы он был лучшим фреймворком и игровым движком для WebXR и избегал всех подводных камней, найденных в других фреймворках. Сегодня крупнейшие приложения WebXR (The Escape Artist, Archery Evolution и другие) используют Wonderland Engine.
Wonderland Engine — это оффлайн-инструмент, который создает эффективный бинарный файл сцены, загружаемый с помощью среды WebAssembly.
Используя производительность нашей оптимизированной визуализации, вы можете реализовать код взаимодействия с помощью нашего JavaScript/TypeScript API. Написано множество готовых компонентов для VR, AR, аудио и многого другого.
Да, мы поддерживаем WebXR, и движок был спроектирован с этой целью с самого начала.
Скачайте Wonderland Engine со страницы Downloads и зарегистрируйте бесплатный аккаунт здесь.