Топ 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, это самая популярная платформа для разработки 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
Вероятно, самая популярная Open Source JavaScript библиотека для рендеринга. Снова полная гибкость доступна на очень низком уровне, так как вы можете настроить рендеринг для того, чтобы сделать все, что хотите. С великой силой приходит великая ответственность: вы единолично отвечаете за то, чтобы ваше приложение было производительным и работало гладко даже на мобильных VR устройствах.
Three.js уже поддерживает WebXR! Пока не будет широкой поддержки AR в WebXR, вы захотите взглянуть на 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, он также уже поддерживает 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 и зарегистрируйтесь здесь.