Básicamente WebVR es un estándar abierto que hace posible experimentar con Realidad Virtual desde el navegador web. para experimentar con web vr necesitas dos cosas: un dispositivo de vr (puede ser un celular con un cardboard, o un dispositivo mas complejo) y un navegador compatible.
¿Que dispositivos pueden ser útiles?
- Google Cardboard
- Un Dispositivo DayDream
- HTC Vive
- Oculus Rift
- Samsung Gear VR
Como muchos de estos dispositivos son algo costosos la forma mas fácil de utilizar web vr es con un google cardboard. Simplemente coloque su teléfono en la caja y ya está listo. También puede utilizar su teléfono con auriculares más avanzados como los mencionados anteriormente (Samsung Gear VR, Google Daydream, entre otros).
En algunos sitios, se puede utilizar la computadora o teléfono sin auriculares. No podrás ver en 3D o interactuar de forma totalmente completa en la mayoría de los mundos VR, pero se puede ver alrededor en 360 grados.
A-Frame
Es un framework web para construir experiencias de realidad virtual (VR). Como creadores de WebVR, el equipo de Mozilla VR desarrolló A-Frame para ser la forma más fácil y poderosa de desarrollar contenido WebVR. Como un proyecto totalmente abierto, A-Frame ha crecido hasta convertirse en una de las comunidades de VR más grandes y acogedoras.
Este framework se basa en HTML, por lo que es sencillo para empezar. Pero A-Frame no es sólo motor de escenas para gráficos 3D o un lenguaje de marcado; El núcleo es un poderoso framework que proporciona una estructura declarativa, extensible basado en three.js.
Iniciar con A-Frame
Para empezar con esto solo se necesita un servidor donde probar tu archivo HTML (puedes probar también el sitio web glitch.com para experimentar con AFrame), luego crear un archivo plano en HTML sin tener que instalar componentes adicionales. como mencioné anteriormente puedes hacer un remix del ejemplo que esta en glitch y empezar a probar el codigo.
con este código por ejemplo puedes crear unas cuantas figuras 3d como un cubo, una esfera, un cilindro, un plano y un cielo con un color determinado en hexadecimal:
<html> <head> <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> </head> <body> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body> </html>
este código genera la siguiente escena:
Funcionalidades de AFrame
- Simplicidad: Basta con colocar una etiqueta <script> y <a-scene>. A-Frame manejará la plantilla en 3D, la configuración VR y los controles predeterminados. No hay nada que instalar, ni hay complicados pasos de compilación.
- HTML declarativo: HTML es fácil de leer, entender y copiar y pegar. A-Frame es accesible a todos: desarrolladores web, entusiastas de VR, artistas, diseñadores, educadores, creadores, niños.
- Es multiplataforma: Construye aplicaciones VR para Vive, Rift, Daydream, GearVR y Cardboard con soporte para todos los controladores respectivos. ¿No tiene auriculares o controladores? ¡No hay problema! A-Frame todavía funciona en los teléfonos estándar y los smartphones.
- Arquitectura Entity-Component: A-Frame es un potente framework de trees.js, que proporciona una estructura declarativa, composible y reutilizable de componentes de entidad. HTML es sólo la punta del iceberg; Los desarrolladores tienen acceso ilimitado a JavaScript, APIs DOM, three.js, WebVR y WebGL.
- Rendimiento: A-Frame está optimizado desde cero para WebVR. Mientras A-Frame utiliza el DOM, sus elementos no tocan el motor de diseño del navegador. Las actualizaciones de objetos en 3D se realizan en memoria con poca sobrecarga bajo una sola llamada requestAnimationFrame
- Visual Inspector: A-Frame proporciona un práctico inspector 3D visual integrado. Abre cualquier escena A-Frame, presiona <ctrl> + <alt> + i, y puedes inspeccionar los elementos dentro de la escena.
Si quieres conocer mas sobre AFrame puedes consultar el sitio web oficial:
y si quieres saber un poco mas sobre los demos que iré desarrollando pueder consultar mi repositorio en github con los ejemplos:
Trackbacks/Pingbacks