- Abordar en el 3D y el mundo VR a los desarrolladores con herramientas fáciles de usar
- prototipar experiencias VR más rápido
- Preguntar cuántos han probado VR.
- La realidad virtual es una plataforma tecnológica que te transporta a entornos 3D realistas, interactivos e inmersivos
- Es la próxima plataforma, cambiará cómo trabajamos + jugamos + comunicamos digitalmente, la cara de la sociedad
- Respaldado por las corporaciones más grandes del mundo, todo el mundo lo quiere
- Rango de barato a caro, atado y sin ataduras, controlladores, seguimiento
- HTC Vive con Steam ofrece actualmente las experiencias más atractivas, pero nunca se sabe
- Se ven un montón de diferentes dispositivos, sistemas, plataformas compitiendo entre sí ...
- Las tiendas de aplicaciones y las corporaciones controlan la distribución: pueden eliminar o bloquear contenido
- Las descargas / instalaciones son una barrera para el consumo: páginas de pequeñas empresas
- Un ecosistema cerrado: motores patentados, curvas de aprendizaje abruptas, experiencias aisladas, fragmentación
- Queremos que VR tenga éxito, por lo que queremos una plataforma sin estos puntos de fricción. La respuesta es WebVR ...
Una plataforma abierta de realidad virtual con las ventajas de la Web
WebVR es... realidad virtual en el navegador, potenciada por la Internet
Abierta:
- Cualquiera puede publicar
- Cultura de código abierto con estándares abiertos
Conectada:
- Atravesar mundos
Al instante:
- Hacer click en un enlace en Twitter o Weibo, experiencias VR de inmediato
- Sin instalaciones
- Imagina para grandes expriencias: compras y espacios personales
- Ideal para experiencias de mucho tiempo
Transición:
- La web tiene ventajas que la hacen la mejor plataforma para las personas
- Necesitamos actuar para hacerla realidad, no podemos esperar a que la VR se cocine y cristalice
- ¡Involúcrate!
Las API del navegador que habilitan renderizar WebGL a los visores y acceder a los sensores VR
API:
- Una ruta optimizada para el renderizado en los visores
- Acceso a los datos de posición y rotación
Historia:
- Api inicial de WebVR API por Mozilla
- Trabajo del grupo de comunidad de W3C
- Mozilla, Google, Samsung, Microsoft, comunidad actualmente iterando en la versión 1.0 de la API WebVR
No es sólo una especificación, está implementada...
- Firefox + Chrome WebVR 1.0 llegó en los canales de lanzamientos empezando 2017
- Actualmente detrás de Nightly, builds personalizadas
- Utilizar sensores de orientación / movimiento de dispositivos para ser compatible en smartphones
- Con todos los navegadores detrás...
- Espacios virtuales colectivos persistentes compartidos
- Alterna la realidad digital que el mundo puede vivir, trabajar, jugar
- Debe ser descentralizado/abierto/conectado, la web es la mejor plataforma para realizarla completamente
- ¿Por dónde comenzamos?
- three.js abstrae WebGL, 3D, y WebVR. Pero todavía podemos hacerlo más accesible
Es un poco difícil crear experiencias WebVR...
Importar WebVR polyfill
Configurar camera
Configurar luces
Initializar escena
Declarar y pasar al lienzo
Controlar redimesión de ventana
Instalar VREffect
Instanciar renderizado
Crear bucle de renderizado
Precargar recursos
Determinar la capacidad de respuesta
Tratar con metatags y móviles
- Todavía es demasiado difícil crear experiencias de WebVR
- Enorme obstáculo si se hacen pequeños prototipos y experimentos
- Las plantillas necesita actualizarse con las nuevas versiones de WebVR, three.js, y peculiaridades del navegador
- Encapsular todo esto dentro de una sola línea...
Un framework web para construir experiencias de realidad virtual
- Lanzado en Diciembre de 2015
- Por qué:
- Fácil para desarrolladores web crear contenido VR, sin conocimiento en gráficos
- Prototipar y experimentar WebVR y VR UX más rápido
- Vehículo para empezar con el ecosistema WebVR
<html>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
</a-scene>
</html>- Sólo HTML
- Poner una etiqueta script, sin pasos de construcción
- Usando elementos HTML personalizados
- Una línea de HTML
<a-scene>maneja- canvas, cámra, renderizador, luces, controles, render loop, WebVR polyfill, VREffect
- A poner cosas dentro de la escena...
<html>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
<a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box>
<a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder>
<a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere>
<a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</html>- Elementos primitivos de 3D Básico con elementos personalizados
- Legible: HTML es posiblemente el lenguaje más accesible en computación
- Encapsulado: copiar-y-pegar HTML en cualquier lugar y todavía funciona sin estado o variables
- Mira rápidamente un ejemplo en vivo...
por Ada Rose Edwards (@lady_ada_king)
- Una escena hecha por Ada Rose Edwards ejecutándose dentro de mis diapositiva HTML
- Funciona en escritorio, Android, iOS, Samsung Gear VR, Oculus Rift, HTC Vive
- Podría abrir el Inspector de DOM para cambiar los valores en vivo
- Ya que es sólo HTML...
- Basado en HTML, compatible con todas las librerías/frameworks existentes
- Buena razón para tener HTML como capa intermediaria entre WebGL/three.js
- Todas las herramientas fueron pensadas con la noción de HTML
- Bajo el capó, A-Frame es un framework extensible y declarativo para three.js...
- Es un framework de entidad-componente
- Popular en el desarrollo de juegos, usado por Unity
- Todos los objetos en la escena son entidades que vacían objetos inherentemente. Conectar componentes para adjuntar apariencia / comportamiento / funcionalidad
- La web 2D en donde cada elemento estaba fijo
- 3D/VR es diferente, objetos de tipos y complejidades infinitas, se necesita una manera fácil de construir diferentes tipos de objetos
<a-entity>- Empezar con un
<a-entity> - Por si mismo, no tiene apariencia, comportamiento o funcionalidad
- Conectar componentes para agregar apariencia, comportamiento, funcionalidad
<a-entity
geometry="primitive: sphere; radius: 1.5"
material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture">- Sintaxis similar a los estilos CSS
- Nombre de componentes como atributos HTML
- Propiedades de componentes y valores como atributos HTML
<a-entity
geometry="primitive: sphere; radius: 1.5"
material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"><a-entity
geometry="primitive: sphere; radius: 1.5"
material="color: #343434; roughness: 0.4; sphericalEnvMap: #texture"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"
animation="property: rotation; loop: true; to: 0 360 0"
movement-pattern="type: spline; speed: 4"><a-entity
json-model="src: #robot"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"
animation="property: rotation; loop: true; to: 0 360 0"
movement-pattern="type: spline; speed: 4"><a-entity
json-model="src: #robot"
position="-1 2 4" rotation="45 0 90" scale="2 2 2"
animation="property: rotation; loop: true; to: 0 360 0"
movement-pattern="type: attack; target: #player"
explode="on: hit">- Estos son algunos de los componentes que se incluyen con A-Frame
- A-Frame es completamente extensible en su núcleo...
- Comunidad ha llenado el ecosistema con toneladas de componentes
- Los componentes puede hacer lo que quieran, tienen acceso completo a three.js y las Web API
- El ecosistema componente es el elemento vital de A-Frame
- Física, movimiento de salto, sistemas de partículas, visualizaciones de audio, océanos
- Poner estos elementos como etiquetas script y usarlas directamente desde HTML
- Desarrolladores avanzados que potencian a otros desarrolladores
- Trabajando en la recolección de estos componentes...
Una gran colección de componentes de A-Frame.
- Recolectandolos dentro del registro de A-Frame
- Como una tienda de componentes que nos asegura que funcionan bien
- La gente pude navegar y buscar componentes o instalarlos...
Una gran colección de componentes de A-Frame.
La herramienta visual para A-Frame. Sólo <ctrl>+<alt>+i.
@mozillavr
Amnesty International UK
The Washington Post
@kfarr
@datatitian
@mozillavr
@whoyee
@sleighdogs
@jerome_etienne
@webvrstudio
iStaging
@drryanjames
- Proyecto de código abierto e inclusivo
- La mayoría de trabajos están en GitHub
- Comunidad activa en Slack para compartir proyectos, interactuar, reunirse, buscar ayuda
- Proyectos destacados en el repositorio
awesome-aframey en el blog A Week of A-Frame