Comparación de los 5 Mejores Frameworks de WebXR
¿Quieres comenzar con el desarrollo de WebXR? Aquí tienes una comparación de los 5 mejores frameworks para que empieces.
Breve Descripción de las APIs
El 13 de diciembre de 2019, Chrome 79 se convirtió en el primer navegador en lanzarse con WebXR 1.0 habilitado por defecto. Esto significa que el primer paso para superar uno de los mayores obstáculos para WebXR finalmente se ha resuelto: la estabilidad. Anteriormente, era muy difícil mantener un proyecto de WebXR / WebVR / WebAR porque la API del navegador en la que se basaba todavía estaba en flujo constante: WebVR 1.0 fue rápidamente reemplazado por WebVR 1.1 que, a pesar de ser solo una actualización menor, cambió lo suficiente como para romper cualquier aplicación escrita en WebVR 1.0.
Después de WebVR 1.1, siguió una serie de versiones intermedias no versionadas de WebXR. Era difícil detectar con qué versión estabas tratando y tenías que lidiar con la solicitud de tokens de Google Chrome Origin Trials para que tu aplicación funcionara para los usuarios, sin que ellos tuvieran que activar banderas experimentales.
Con WebXR 1.0 en Chrome 79, este inconveniente finalmente ha terminado y podemos asumir que nuestras aplicaciones seguirán funcionando incluso en futuras versiones de Chrome. ¡Esto también significa que finalmente puedes comenzar el proyecto que siempre quisiste hacer! Hoy en día, incluso Apple Vision PRO es compatible con WebXR, y es una excelente manera de construir aplicaciones XR multiplataformas.
¿Pero qué framework deberías usar?
Aquí hay una lista de lo que creemos que podría ser adecuado:
Contenidos
5 - Unity 3D
Junto con Unreal Engine, probablemente la plataforma de desarrollo 3D más popular que existe, admite HTML5 como una plataforma objetivo y, por lo tanto, teóricamente se puede utilizar para el desarrollo de WebXR.
Sin embargo, WebXR no es compatible de manera predeterminada: necesitas un plugin como De-Panther’s WebXR Exporter.
Esto no es óptimo, pero podrías cambiar al soporte de WebXR en Unity 3D, en caso de que lo agreguen.
Hasta entonces, tendrías que lidiar con algunos otros problemas con la exportación HTML5: bajo rendimiento, tiempos de carga largos y mal soporte para GPUs móviles (como las de smartphones o auriculares autónomos como Meta Quest).
Sin embargo, te beneficias del ecosistema de assets y plugins de Unity y puedes publicar tu aplicación como una aplicación nativa también. (Hoy en día, las tiendas de aplicaciones apenas brindan visibilidad a menos que estés en la lista breve de los mejores juegos, por lo que esta ventaja tiene una utilidad bastante limitada).
4 - Babylon.js
Con su “Playground”, este framework ofrece una manera rápida de prototipar cualquier aplicación 3D. Ya soporta WebXR y tiene una extensa lista de ejemplos para renderizar casi cualquier cosa. Su flexibilidad se puede atribuir a ser una biblioteca de JavaScript. Babylon te permite profundizar a un nivel muy bajo, pero requiere que escribas toda tu aplicación en JavaScript.
Está dirigido a programadores más experimentados, por lo que recomendamos elegir este framework si tienes experiencia y/o necesitas personalizar mucho el renderizado.
3 - Three.js
Probablemente la biblioteca de renderizado de JavaScript de código abierto más popular que existe. Nuevamente, la flexibilidad total está disponible a un nivel muy bajo, ya que puedes personalizar el renderizado para hacer lo que quieras. Con gran poder viene gran responsabilidad: eres el único responsable de mantener tu aplicación eficiente y funcionar sin problemas incluso en dispositivos VR móviles.
¡Three.js ya soporta WebXR! Hasta que haya un soporte amplio de AR en WebXR, querrás ver AR.js o mind-ar-js para soporte de WebAR. Ambos tienen integraciones con Three.js.
El editor de Three.js te permite ensamblar escenas fácilmente y desde muchos formatos de archivo diferentes. Esto te permitirá comenzar tu proyecto rápidamente, pero aún necesitarás codificar interacciones en JavaScript posteriormente. El editor no tiene un concepto de archivos de proyecto y, por lo tanto, realmente solo es útil para generar el código inicial para tu proyecto.
Si no tienes experiencia en programación, te recomendamos que mires A-Frame en su lugar. Está construido sobre Three.js y te permite aprovechar un buen subconjunto de características de una manera mucho más simple.
2 - PlayCanvas
Esta plataforma de desarrollo viene con un editor visual completo, y ofrece soporte para AR y VR. Su renderizado gráfico 3D se ve increíble si está bien configurado. Los tiempos de carga del editor y de los juegos exportados parecen estar bastante bien también.
El editor visual facilita enormemente el ensamblado de escenas, la adición de componentes y el despliegue de tu proyecto. Además, un editor de código incorporado te permite escribir tus propios scripts personalizados. Si prefieres tu propio editor de código, como Atom, Vim, Visual Studio Code u otro, podría ser más complicado editar los scripts. Sin embargo, con su API REST, aún podrías hacerlo.
1 - A-Frame
Para el desarrollo conveniente de WebVR y WebAR, A-Frame ha sido el camino a seguir en los últimos años. Construido sobre Three.js, siempre puedes ir a un nivel más bajo en caso de que necesites personalización con muchos componentes existentes que puedes reutilizar.
A-Frame te permite configurar tu escena en HTML, del cual genera una jerarquía de escena 3D. Puedes crear componentes personalizados de JavaScript para modificar el comportamiento y las interacciones y el “Inspector de A-Frame” te permite editar fácilmente tu escena y ver lo que se genera desde el HTML. Algunos juegos grandes de VR en el navegador han sido desarrollados sobre A-Frame: Barista Express y Moonrider.
Dado que se ejecuta sobre Three.js, también ya soporta WebXR. WebAR está admitido nuevamente a través de AR.js. A-Frame deja a tu cargo la optimización de tus activos para los tiempos de carga. Para casos de uso simples, A-Frame es perfecto y te llevará bastante lejos.
Para proyectos más grandes, sin embargo, podrías alcanzar el límite del alcance que el rendimiento de A-Frame te impone.
Resumen | TL;DR
La elección del framework dependerá de tu caso de uso. Para escenas simples, recomendamos A-Frame. Si necesitas más rendimiento, abre el capó y optimiza directamente en Three.js. Si programar no es lo tuyo, quizá intentes con PlayCanvas. También parece proporcionar la manera más fácil de lograr gráficos visualmente impresionantes (pero para VR en la web, por favor, prefiere rendimiento sobre apariencia).
Wonderland Engine
¿Todavía no encuentras una buena opción? Podrías estar interesado en lo que estamos construyendo.
Hemos revisado todos los frameworks existentes y construimos Wonderland Engine desde cero para ser el mejor framework web 3D y motor de juegos para WebXR y evitar todos los problemas encontrados en otros frameworks. Hoy, las más grandes aplicaciones de WebXR (The Escape Artist, Archery Evolution, …) están construidas usando Wonderland Engine.
Wonderland Engine es una herramienta offline que producirá un archivo de escena binario eficiente que se carga con un runtime basado en WebAssembly.
Mientras te beneficias del rendimiento de nuestro renderizado optimizado, puedes implementar código de interacción con nuestra API de JavaScript/TypeScript. Muchos componentes reutilizables están escritos para que manejes VR, AR, audio y más.
Y, sí, apoyamos WebXR, el motor fue diseñado para ello desde el principio.
Descarga Wonderland Engine desde la página de Descargas y regístrate aquí.