Топ 5 WebXR Фреймворков - Сравнение
Хотите начать разработку WebXR? Вот сравнение топ 5 фреймворков, чтобы помочь вам начать.
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. Это также означает, что вы наконец-то можете приступить к проекту, который всегда хотели сделать! Но какой фреймворк выбрать?
Вот список фреймворков, которые мы считаем подходящими:
Содержание
5 - Unity 3D
Вместе с Unreal Engine, Unity 3D является одной из самых популярных платформ для разработки 3D-приложений, поддерживающей HTML5 в качестве целевой платформы. Поэтому теоретически она может быть использована для WebXR разработки. Однако, изначально это не поддерживается: вам будет нужен плагин, например, De-Panther’s WebXR Exporter.
Это, конечно, не оптимальный вариант, но вы могли бы получить выгоду от будущей интеграции с WebXR в Unity 3D, если она будет добавлена. Пока этого не произошло, вам придется справляться с некоторыми проблемами экспорта в HTML5: производительностью, временем загрузки и отсутствием поддержки смартфонов и автономных гарнитур, таких как Oculus Quest. Однако вы всё равно можете воспользоваться экосистемой ассетов и плагинов Unity и выпустить своё приложение как нативное!
4 - Babylon.js
С помощью “Playground”, этот фреймворк предоставляет быстрый способ прототипирования любого 3D-приложения. Он уже поддерживает WebXR и имеет обширный список примеров для рендеринга практически всего, что только возможно. Его гибкость объясняется тем, что это библиотека JavaScript. Это позволяет вам глубоко погрузиться в код, но требует написания всей программы на 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, которая затем преобразуется в трехмерную иерархию сцены. Вы можете создавать пользовательские 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 - это офлайн-инструмент, создающий эффективный бинарный файл сцены, загружаемый на основе WebAssembly.
Воспользовавшись преимуществами нашей оптимизированной визуализации, вы можете реализовать код взаимодействия с помощью нашего JavaScript/TypeScript API. Написано множество готовых компонентов для VR, AR, аудио и прочего.
И да, мы поддерживаем WebXR, наш движок изначально проектировался с этой целью.
Скачайте Wonderland Engine со страницы Downloads и зарегистрируйтесь здесь.