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 comiences.
El 13 de diciembre de 2019, Chrome 79 es el primer navegador que se lanza con WebXR 1.0 habilitado por defecto. Esto significa que finalmente se ha resuelto el primer paso para superar uno de los mayores obstáculos para WebXR: la estabilidad. Anteriormente era muy difícil mantener un proyecto de WebXR / WebVR / WebAR ya que la API del navegador en la que se basaba aún estaba en constante cambio: WebVR 1.0 fue rápidamente reemplazado por WebVR 1.1 que, a pesar de que solo aumentó la versión menor, cambió lo suficiente para romper cualquier aplicación escrita en WebVR 1.0.
Después de WebVR 1.1 siguió una serie de versiones intermedias sin versión de WebXR. Era difícil detectar con qué versión estabas tratando y tenías que lidiar con solicitar tokens de Google Chrome Origin Trials para que tu aplicación funcionara para los usuarios, sin que tuvieran que activar banderas experimentales.
Con WebXR 1.0 en Chrome 79, esta molestia finalmente ha terminado y podemos asumir que nuestras aplicaciones seguirán funcionando incluso en próximas versiones de Chrome. ¡Esto también significa que finalmente puedes comenzar con el proyecto que siempre quisiste hacer! ¿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, es 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, no es compatible de manera predeterminada: necesitas un complemento como De-Panther’s WebXR Exporter.
Esto no es óptimo, pero podrías beneficiarte del soporte nativo futuro de WebXR en Unity 3D, en caso de que lo agreguen. Hasta entonces, sin embargo, tendrías que lidiar con algunos otros problemas con la exportación HTML5: rendimiento, tiempos de carga y sin soporte para GPUs móviles (como las de smartphones u Oculus Quest y otros auriculares autónomos). ¡Te beneficias del ecosistema de activos y complementos de Unity y también puedes publicar tu aplicación como aplicación nativa!
4 - Babylon.js
Con el “Playground”, este framework proporciona una manera rápida de prototipar cualquier aplicación 3D. Ya admiten WebXR y tienen una gran lista de ejemplos para renderizar casi cualquier cosa. Su flexibilidad se puede atribuir a ser una biblioteca de JavaScript. Te permite profundizar a un nivel muy bajo, pero requiere que escribas toda tu aplicación en JavaScript. Está orientado a programadores más experimentados, por lo que te recomendamos elegir este framework si tienes experiencia y/o necesitas personalizar la renderización mucho.
3 - Three.js
Probablemente la biblioteca de renderizado 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 desees. Con un gran poder viene una gran responsabilidad: eres el único responsable de mantener tu aplicación eficiente y funcionando sin problemas incluso en dispositivos de realidad virtual móvil.
¡Three.js ya admite WebXR! Hasta que haya un amplio soporte de AR en WebXR, querrás mirar 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á empezar tu proyecto rápidamente, pero aún necesitarás codificar interacciones en JavaScript más adelante. 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 ninguna 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 viene con soporte para AR y VR. El renderizado gráfico 3D luce impresionante si se configura correctamente. Los tiempos de carga del editor y de los juegos exportados parecen estar bastante bien también.
El editor visual hace que sea muy fácil ensamblar escenas, agregar componentes y desplegar 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, Atom, Vim, Visual Studio Code u otro, podrías tener más dificultades para editar los scripts. Con su API REST, aún podrías hacerlo, sin embargo.
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 muchas componentes existentes que puedes reutilizar.
A-Frame te permite configurar tu escena en HTML, de la 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 de realidad virtual más grandes en el navegador se han desarrollado sobre A-Frame: Barista Express y Moonrider.
Como se ejecuta sobre Three.js, también ya admite WebXR. WebAR se admite nuevamente a través de AR.js. Sin embargo, 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 llegar al límite del alcance que la performance 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, levanta el capó y optimiza directamente sobre Three.js. Si programar no es lo tuyo, tal vez intenta 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 a apariencia).
Wonderland Engine
¿Todavía no has encontrado la herramienta adecuada para el trabajo? Podrías estar interesado en lo que estamos construyendo. Wonderland Engine es una herramienta offline que producirá un archivo de escena binario eficiente que se carga con un tiempo de ejecución 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í.