Web AR y Web VR
TALLER PRÁCTICO
Imanol Terán Maruri - @itermar
Imanol Terán
- Diseñador y desarrollador frontend
- Formador en nuevas tecnologías
- Consultor IT
- Fundador widdiapps.com
- Academia de cursos itermar.io
Caricatura realizada por @oneeyedman
- Cursos de diseño web, WordPress, HTML, CSS, productividad, emprendimiento...
- Descargas de themes, plugins, guías...
- Todo por
10 €/mes5€/mes
Con el código #EE26
50%
DESCUENTO
- Podcast sobre tecnología y economía
- Frecuencia semanal
- En colaboración con @Edutheplayer
WEB AR Y WEB VR
-
Introducción
- Realidad Virtual vs Realidad Aumentada
-
Web VR
- A-FRAME
- Web AR
- Diseño para VR
- Buenas prácticas
- Futuro de WebVR
¿QUIÉNES SOMOS?
¿¿DISEÑADORES??
¿¿DESARROLLADORES??
¿¿MARKETING??
¿¿FORMADORES??
¿¿DIRECTIVOS??
¿¿OTROS??
INTRODUCCIÓN
INTRODUCCIÓN
- WebVR está dando sus primeros pasos
- Buen momento para ponerse con ello
- Tecnologías disponibles
- Qué hay detrás
INTRODUCCIÓN
- A-FRAME es un framework para crear experiencias virtuales en un navegador web
- Utilizamos lenguaje de marcado
- Creamos experiencias multiplataforma
- iOS | Android | Desktop | Oculus Rift
INTRODUCCIÓN
-
Requisitos necesarios para utilizar A-FRAME:
- Servidor: local o remoto
- Conocimientos de desarrollo web
- HTML y CSS
INTRODUCCIÓN
- Proyecto creado por Mozilla, actualmente es un proyecto open source independiente
- Tiene una gran comunidad alrededor
INTRODUCCIÓN
INTRODUCCIÓN
- Al estar basado en HTML, hace que sea muy sencillo introducirnos en la creación de contenido VR para web
- Esto no quiere decir que A-FRAME sea un lenguaje de marcado
- Se trata de un framework entidad-componente que proporciona una estructura declarativa, extensible y de composición a three.js
- Libería JavaScript para 3D
¿QUÉ ES LA VR?
La realidad virtual es un entorno de escenas u objetos de apariencia real. La acepción más común refiere a un entorno generado mediante tecnología informática, que crea en el usuario la sensación de estar inmerso en él. Dicho entorno es contemplado por el usuario a través de un dispositivo conocido como gafas o casco de realidad virtual. Este puede ir acompañado de otros dispositivos, como guantes o trajes especiales, que permiten una mayor interacción con el entorno así como la percepción de diferentes estímulos que intensifican la sensación de realidad.
REALIDAD VIRTUAL
- Permite sumergirse en un mundo totalmente artificial, sin contacto con el entorno que te rodea
- Consigue una experiencia de inmersión completa
-
Para "entrar" en este nuevo mundo suele ser necesario utilizar unas gafas especiales
- Preparadas para montar una pantalla justo frente a tus ojos
REALIDAD VIRTUAL
- Hay dos tipos de gafas
- Las que incorporan la pantalla en la misma estructura de las gafas
- Las que necesitan insertar un smartphone en ellas para utilizar su pantalla
¿QUÉ ES LA AR?
La realidad aumentada (RA) es el término que se usa para definir la visión de un entorno físico del mundo real, a través de un dispositivo tecnológico, es decir, los elementos físicos tangibles se combinan con elementos virtuales, logrando de esta manera crear una realidad aumentada en tiempo real. Consiste en un conjunto de dispositivos que añaden información virtual a la información física ya existente, es decir, añadir una parte sintética virtual a la real.
REALIDAD AUMENTADA
- Consiste en agregar a nuestra realidad, elementos virtuales que no existen, para complementarla y mejorarla
- Ves lo que tienes a tu alrededor, pero el ordenador del equipo que llevas frente a los ojos reproduce sobre este entorno objetos, animaciones o datos que realmente no están ahí.
- Tanto en el caso de las gafas como el de los cascos hace falta que haya una CPU que gestione la realidad virtual que se imprime sobre la real
REALIDAD AUMENTADA
-
Las grandes compañías están apostando muy fuerte por ella:
- Tim Cook (Apple) dice que es un gran idea, al nivel de la del smartphone
- Mark Zuckerberg (Facebook) dice que es la próxima gran plataforma
- Satya Nadella (Microsoft) dice que es la computadora perfecta
-
Sundar Pichai (Google) dice ser consciente de la importancia de esta tecnología
- Proyecto "Google Expeditions"
REALIDAD AUMENTADA
- El concepto no es nuevo, en 1960 primeros pasos en esta dirección
- Comenzaron a verse gafas con las que era posible ver información sintética superpuesta sobre el campo de visión real
REALIDAD AUMENTADA
- Las Google Glass fueron la primera aproximación a este concepto
- Nacieron en el año 2012
- Fueron muy populares y no se perdían un evento
- Precio, problemas de distribución y de soporte detrás, hicieron que se pusiera fin al proyecto en 2014
REALIDAD AUMENTADA
- Google vuelve a la carga en 2017 con "Google Glass Enterprise Edition"
-
Concepto similar al anterior, con algunas mejoras técnicas
- Batería, procesador, comunicaciones, seguridad, cámara...
- Esta versión se centra en el mundo empresarial
- Dedicada a usos muy específicos en sectores concretos
REALIDAD AUMENTADA / apps
- Uno de los principales medios de disfrutar de la realidad aumentada son los smartphones.
- Estos utilizan sus cámaras para mostrarte en pantalla los elementos físicos reales que estás viendo, pero también gestionan con sus procesadores elementos digitales que se reproduzcan de manera que parezca que estén interactuando con el entorno real.
- Ejemplo de este tipo de apps es el juego de Pokémon Go, que popularizó hace unos meses la realidad aumentada.
REALIDAD AUMENTADA / apps
- No es tan importante el tener unos auriculares estéreo. Tampoco son estrictamente necesarios los mandos ni métodos de control, aunque esto ya dependerá de cada aplicación y de cómo tengas que utilizarla.
- Apple ha hecho un gran esfuerzo con su framework para desarrolladores ARKit
- A partir de este framework, el App Store se ha llenado de apps para AR
REALIDAD AUMENTADA / apps
-
Hay una serie de categorías que se llevan la mayoría de las aplicaciones de este tipo
- Juegos
- Decoración
- Medición
- Estilismo
- Redes sociales
- Educación
arkit
- Apple lo presentó en la WWDC de 2017, con la intención de facilitar la creación de apps AR a los desarrolladores
- Framework en lenguaje de programación Swift
-
La App Store se ha inundado de este tipo de apps
- La verdad es que muchas son similares
arkit
-
Posibilidades que ofrece para las apps
- Dibujar en el aire
- Medir objetos en tiempo real
- Puertas tridimensionales
- Decorar espacios físicos
ARKIT2
ARCORE
-
Respuesta de Google a ARKit
- Continuación del proyecto Tango
- En realidad, muchas cosas vistas en ARKit ya se habían visto por parte de Google
- La diferencia es que cualquiera con un dispositivo iOS 11 puede acceder a ello y Google no cuenta con esa capacidad
- Hasta entonces, se decantaba por soluciones de Hardware específicas
- Aquí podemos ver ejemplos experimentales
PRINCIPALES USOS
MEDICINA
PRINCIPALES USOS / MEDICINA
- Operaciones de cirugía
- Tratamiento de fobias
- Manejo de dolor mediante técnicas de distracción
- Simuladores para formación
TURISMO
PRINCIPALES USOS / TURISMO
- Simuladores para mostrar destinos turísticos
- Visitas guiadas virtuales
- Forma de incentivar a la gente a viajar, como una "demo"
MUSEOGRAFÍA
PRINCIPALES USOS / MUSEOGRAFÍA
- Sumergir al visitante en el contexto histórico de una obra o exposición en concreto
- Lucha contra el desgaste de objetos con gran valor histórico
- Storytelling para contar la historia de forma que el visitante siga un hilo conductor
- Guía virtual para explicar detalles
- Experiencias inmersivas dentro de cuadros
ENTRENAMIENTO MILITAR
PRINCIPALES USOS / ENTRENAMIENTO MILITAR
- Posibilidad de simular situaciones de batalla
- Entrenar distintas habilidades
- Simulaciones de vuelo
- Todo de forma virtual, sin entrar en un campo de batalla
- Ahorro económico
- Ahorro energético
- Menor nivel de contaminación
- Disminución de posibles accidentes
ENTRETENIMIENTO
PRINCIPALES USOS / ENTRETENIMIENTO
- Uno de los campos en los que más se ha avanzado
-
En gran medida, gracias a los videojuegos
- Samsung Gear VR, Oculus VR, PlayStation VR, HTC Vive
- Se consigue un nivel de inmersión sin comparación a otras tecnologías
- Visualizar contenido de vídeo como si estuviéramos en una sala de cine
- Subir un 8.000m
- Conducir un F1 en un circuito
AIMAR - 13/11/17
FORMACIÓN
PRINCIPALES USOS / FORMACIÓN
-
Infinitas posibilidades en el ámbito educativo
- Explicar conceptos de física
- Astronomía
- Contextos históricos
- Diseñar modelos de arquitectura
- Estudiar funcionamiento de sistemas del cuerpo humano
- Procesos que ocurren en la Naturaleza
- Puede ser una forma de que los alumnos comprendan y procesen mejor los contenidos
PRINCIPALES USOS / FORMACIÓN
- Proyecto Google Expeditions
PRINCIPALES USOS / FORMACIÓN
- Proyecto Body Planet
CASOS DE USO
PROBLEMAS
diferencias
diferencias vr-ar
- Son dos términos que a menudo se confunden y utilizan indistintamente
-
VR
- Crear una realidad alternativa, en la que el usuario se introduce, abstrayéndose de la realidad que le rodea
-
AR
- Consiste en "mejorar" o "ampliar" la realidad que nos rodea, añadiendo nuevo elementos a la misma
diferencias vr-ar
- En realidad, comparten muchas técnicas, herramientas y tecnologías
-
Tienen objetivos bien diferentes
- VR: Crea una nueva realidad que sustituye a la actual, nos traslada a otro mundo
- AR: Crea una nueva capa que superpone sobre nuestra realidad, ampliándola
diferencias vr-ar
- Ambas tecnologías han conseguido niveles de realidad e inmersión muy altas
- Deben seguir evolucionando
- El hecho de que podamos crear experiencias AR y VR en un navegador, con tecnologías web, puede ser el empujón que le faltaba
TERCERA VÍA: REALIDAD MIXTA
- Se "vende" como una mezcla entre la VR y AR
- Microsoft es su principal precursor
- Uno de los mayores problemas para el despegue de la VR son los altos precios de los dispositivos
-
En realidad, la MR se parece mucho a la VR
- Experiencias similares a Oculus y HTC
TERCERA VÍA: REALIDAD MIXTA
- Microsoft promete dispositivos MR a precios competitivos
-
ASUS, Lenovo, HP, Samsung, Acer, Dell
- Cascos que funcionan con ordenadores con Windows 10 con unas especificaciones concretas
TERCERA VÍA: REALIDAD MIXTA
- Mozilla también empieza a hablar de ello
- Propone una experiencia inmersiva para la web
- Para ello, próximamente verá la luz el navegador Firefox Reality
- Funcionará con dispositivos VR y AR
- https://mixedreality.mozilla.org
ejemplos
Hello A-FRAME
CARACTERÍSTICAS
vr para todos los públicos
SÓLO NECESITAS EL TAG <SCRIPT> Y UN <A-SCENE>, A-FRAME SE ENCARGA DEL RESTO. SIN INSTALACIONES NI CONFIGURACIONES
VR MULTIPLATAFORMA
VIVE, RIFT, GEARVR, CARDBOARD...NINGUNO SE LE RESISTE A A-FRAME. SI NO TIENES UNAS GAFAS, NO HAY PROBLEMA: FUNCIONA EN DESKTOP Y EN SMARTPHONE
HTML DECLARATIVO
HTML ES FÁCIL DE ESCRIBIR, DE COMPRENDER Y DE REPLICAR. ESTO HACE QUE A-FRAME, AL BASARSE EN HTML, SEA ACCESIBLE A TODO EL MUNDO: DESARROLLADORES, DISEÑADORES, PROFESORES, ALUMNOS...
ARQUITECTURA ENTIDAD-COMPONENTE
BASADO EN EL FRAMEWORK THREE.JS, PROPORCIONA UNA ESTRUCTURA ENTIDAD-COMPONENTE DECLARATIVA Y REUTILIZABLE. HTML SOLO ES EL PRINCIPIO, LOS DESARROLLADORES PUEDEN ACCEDER A DOM, JAVASCRIPT, THREE.JS, WEBGL, WEBVR...
RENDIMIENTO
TOTALMENTE OPTIMIZADO PARA WEBVR. A-FRAME UTILIZA EL DOM, Y SUS ELEMENTOS NO TIENEN ACCESO AL MOTOR DE LAYOUT DEL NAVEGADOR
INDEPENDIENTE DE LA HERRAMIENTA
AL ESTAR BASADO EN HTML Y TECNOLOGÍAS WEB, A-FRAME ES COMPATIBLE CON LA MAYORÍA DE HERRAMIENTAS Y LIBRERÍAS COMO JQUERY, REACT, VUE.JS, EMBER.JS
INSPECTOR VISUAL
LLEVA INCLUÍDO UN INSPECTOR VISUAL 3D. PARA ACCEDER TIENES QUE PULSAR LA SIGUIENTE SECUENCIA DENTRO DE CUALQUIER ESCENA
<CTRL>+<ALT>+i
COMPONENTES
FIGURAS GEOMÉTRICAS, MATERIALES, LUCES, ANIMACIONES, SOMBRAS, AUDIO, TEXTO Y CONTROLES PARA LAS PLATAFORMAS VR MÁS POPULARES.
ADEMÁS, LA COMUNIDAD TAMBIÉN CREA COMPONENTES COMO: PARTÍCULAS, FÍSICA, OCÉANOS, RECONOCIMIENTO DE VOZ, REALIDAD AUMENTADA
COMPONENTES CREADOS POR LA COMUNIDAD
INSTALACIÓN
INSTALACIÓN
- En realidad no es necesario instalar nada
- Tenemos dos formas principales de empezar a trabajar con A-FRAME
- Editores online
- Editor en local
INSTALACIÓN
- Podemos empezar a trabajar con ello, con unas pocas líneas de HTML
- Es necesario enlazar el framework en el <head> del documento
- Descargando el framework
- Cargándolo OTA (Over The Air)
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
INSTALACIÓN
-
Desarrollo en local
- Montar servidor local
- Descargar boilerplate de Github
-
Incluir la build de JavaScript
- Servirla nosotros mismos
- Cargarla vía CDN
- Instalar por npm
$ npm install aframe
<head>
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
</head>
GAFAS Y NAVEGADORES COMPATIBLES
LA VR ES UNA TECNOLOGÍA QUE, GRACIAS A UNAS GAFAS ESPECIALES NOS PERMITE REPRODUCIR IMÁGENES, SONIDOS Y SENSACIONES QUE INTRODUCEN AL USUARIO EN UN ENTORNO VIRTUAL INMERSIVO
EN DEFINITIVA, LA VR NOS PERMITE SIMULAR "OTROS MUNDOS" A LOS QUE EL USUARIO PUEDE TRASLADARSE E INTERACTUAR
GAFAS VR
GAFAS VR
- Diferentes características:
- Seguimiento de posición (6DoF) o seguimiento de rotación (3DoF)
- Con mandos de control o sin ellos
- Funcionan mediante un ordenador o tablet/smartphone
- También dispositivos independientes
*Positional tracking
*Positional tracking
*Positional tracking
*Positional tracking
*Positional tracking
*Positional tracking
WEBVR
WEBVR / PRIMEROS PASOS
- VRML: "Virtual Reality Markup Language"
- Primer acercamiento de la realidad virtual a la web
- Especificación del Web3D Consortium
- Representar objetos y escenas interactivos en 3D diseñados en exclusiva para la web
- Primera especificación en 1995
NAVEGADORES VR
- Para poder mostrar experiencias VR en la web, los navegadores deben implementar WebVR
- API JavaScript para crear experiencias de realidad virtual inmersivas dentro del navegador
- La especificación la comenzó Mozilla
- No debe confundirse con WebGL
- WebVR: proporciona datos
- WebGL: proporciona gráficos y renderizado
NAVEGADORES VR
- A-FRAME utiliza WebVR para:
- Obtener acceso a los datos de los sensores de las gafas
- Posición y orientación
- Transformar la cámara
- Renderizar contenido directamente en las gafas
- Obtener acceso a los datos de los sensores de las gafas
WEBXR
- Podríamos llamarlo WebVR 2.0
- "WebXR Device API"
- En realidad, el proyecto WebVR 2.0 se ha descontinuado, en favor de WebXR
- Pretende ser el paso definitivo para acercar VR y AR a todo el mundo
WEBXR
- Sigue la filosofía de Responsive design, pero llevándola un paso más allá
- En el propósito de hacer que nuestra web se adapte a las características de los distintos dispositivos desde los que se visita, el siguiente paso es darle una experiencia diferente a quien la vea desde un dispositivo VR/AR
WEBXR
WEBXR
ALCANCE DE A-FRAME
ALCANCE
- A-Frame pretende acercar el desarrollo y consumo de VR a todo el mundo
- Desarrollo sencillo en HTML
- Soporta la mayoría de gafas y controladores del mercado
ALCANCE / PLATAFORMAS SOPORTADAS
- VR / AR en ordenador con gafas
- VR / AR en smartphone con gafas
- Desktop sin gafas (ratón, teclado...)
- Smartphone sin gafas
ALCANCE / GAFAS SOPORTADAS
- HTC Vive with controllers and trackers
- Oculus Rift with Touch controllers
- Google Daydream with controller
- Samsung GearVR with controller
- Google Cardboard
ALCANCE / RECOMENDACIONES DE HARDWARE
- Oculus Rift Hardware Recommendations
- HTC Vive Hardware Recommendations
- Para smartphones, al menos:
- iPhone 6 para iOS
- Galaxy S6 para Android
ALCANCE / NAVEGADORES DESKTOP
- Firefox 55+ para Windows
- Supermedium
- Experimental builds of Chromium
- Chrome para Android (Daydream)
- Oculus Browser (GearVR)
- Samsung Internet (GearVR)
- Microsoft Edge
ALCANCE / NAVEGADORES MÓVILES
- Safari para iOS
- Chrome para Android
- Firefox para iOS
- Samsung Internet
- UC Browser
PRIMITIVAS
PRIMITIVAS
- A-FRAME proporciona elementos HTML fáciles de usar para que sea muy sencillo introducirse en el desarrollo de WebVR
- Podemos hacer modificaciones sencillas mediante atributos de HTML
- Color, tamaño, posición, rotación
<a-scene>
<a-box position="0 0 0" color="lightgreen" rotation="0 45 45"
width="5" height="5"></a-box>
</a-scene>
PRIMITIVAS / atributos html
PRIMITIVAS / atributos html / pOSICIÓN
- POSICIÓN
- Define dónde se encuentra el objeto en un espacio 3D (X, Y , Z) en metros.
- Más información
PRIMITIVAS / atributos html / pOSICIÓN
-
EJERCICIO PRÁCTICO
- Mover el cilindro a la izquierda, con un valor menor del eje X
- Subir la caja, incrementando el valor del eje Y
- Mover la esfera hacia atrás con un valor menor en el eje Z
- Extra: Añade <a-ring> como hijo de <a-sphere> y posiciónalo para ver los posicionamientos relativos
PRIMITIVAS / atributos html / pOSICIÓN
PRIMITIVAS / atributos html / ROTACIÓN
- ROTACIÓN
- Define la orientación de un objeto en un espacio 3D (X, Y , Z) en grados.
- Lo ideal para comprobar rotación es tener algún elemento con el que comparar
- Más información
PRIMITIVAS / atributos html / ROTACIÓN
-
EJERCICIO PRÁCTICO
- Rotar el cilindro sobre el eje X de forma que veas su parte inferior
- Rotar la caja sobre el eje Y de forma que quede recto
- Extra: Envuelve el contenido de la escena en un <a-entity> (como un <div>) y aplícale rotación para ver la rotación relativa
PRIMITIVAS / atributos html / ROTACIÓN
PRIMITIVAS / atributos html / AÑADIR PRIMITIVAS
-
EJERCICIO PRÁCTICO
- Añadir primitivas a la escena añadiendo elementos HTML dentro de <a-scene>
- Añadir <a-torus-knot> en la izquierda
- Añadir <a-dodecahedron> en la derecha
- Añadir <a-text> centrado
- Más información sobre primitivas
- Añadir primitivas a la escena añadiendo elementos HTML dentro de <a-scene>
PRIMITIVAS / atributos html / AÑADIR PRIMITIVAS
TEXTURAS
TEXTURAS
- Podemos asignar texturas como fondo de nuestros objetos, en lugar de colores planos
- Con las gafas apreciamos texturas mejor que en desktop
- A-Frame pone a nuestra disposición un uploader de imágenes
- Tenemos disponibles muchos sitios con recursos que podemos utilizar en nuestros proyectos
* Siempre subir sobre HTTPS
TEXTURAS / RECURSOS
- Varios
- Imágenes
- Imágenes 360º
TEXTURAS / RECURSOS
TEXTURAS / HOW TO
- Podemos aplicar una textura a un objeto mediante el atributo src , igual que con el tag <img> de HTML
- Procurar quitar color si ponemos textura, para que esta no se vea afectada (color por defecto = blanco)
<a-scene>
<a-box src="ruta_de_la_imagen" position="0 2 -5" rotation="0 45 45"
scale="2 2 2"></a-box>
</a-scene>
TEXTURAS / asset management system
- A-FRAME recomienda realizar la gestión de los assets mediante su ASSET MANAGEMENT SYSTEM
- Este método mejora el rendimiento
- Facilita el cacheado de los assets (imágenes, vídeos...) por parte del navegador
- A-FRAME se asegura que todos los assets están descargados antes de renderizar la escena
- Mejor utilizarlo que cargar la imagen inline
TEXTURAS / asset management system
- Add <a-assets> to the scene.
- Creamos una imagen <img> con la textura que queramos
- Le asignamos un id
- Referenciamos el asset con el ID
- Después podemos reutilizarla en todas las partes que queramos
<a-scene>
<a-assets>
<img id="boxTexture" src="ruta_de_la_imagen">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky color="#222"></a-sky>
</a-scene>
TEXTURAS / BACKGROUND IMAGE
- Podemos definir texturas como imágenes de fondo 360º en nuestro elemento <a-sky>
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky src="#skyTexture"></a-sky>
</a-scene>
TEXTURAS / BACKGROUND IMAGE
- Para añadir un suelo a nuestra escena, podemos utilizar el elemento <a-plane>
- Por defecto, <a-plane> se muestra en paralelo al eje XY
- Para hacer que esté paralelo al suelo, hay que orientarlo hacia el eje YZ
- Para hacerlo, lo rotamos -90º en el eje X
<a-plane rotation="-90 0 0"></a-plane>
TEXTURAS / BACKGROUND IMAGE
- Aplicar una textura al suelo
<a-assets>
<!-- ... -->
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
<!-- ... -->
</a-assets>
<!-- ... -->
<a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"></a-plane>
<!-- ... -->
TEXTURAS / BACKGROUND IMAGE
- Podemos repetir la textura, con el atributo repeat
-
Hay que indicar dos valores:
- Número de veces a repetirse en el eje X
- Número de veces a repetirse en el eje Y
<a-plane src="#groundTexture" rotation="-90 0 0" width="30" height="30"
repeat="10 10"></a-plane>
TEXTURAS
TEXTURAS - EJERCICIO PRÁCTICO
TEXTURAS - EJERCICIO PRÁCTICO
LUCES
LUCES
- Podemos cambiar la iluminación de una escena usando <a-light>
- Por defecto, sin no hacemos nada, A-FRAME incluye
- Luz de ambiente
- Luz direccional
- Sino, la escena sería negra
- En cuanto añadimos luces propias, las que están por defecto dejan de aplicarse
LUCES
- La luz de ambiente se aplica a todas las entidades de la escena
- Los puntos de luz son como bombillas.
- Se aplican en puntos concretos y, cómo afectan a las entidades depende de la distancia de éstas con los puntos de luz
LUCES
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
<img id="skyTexture"
src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg">
<img id="groundTexture" src="https://cdn.aframe.io/a-painter/images/floor.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>
<a-sky src="#skyTexture"></a-sky>
<a-light type="ambient" color="#445451"></a-light>
<a-light type="point" intensity="2" position="2 4 4"></a-light>
</a-scene>
ANIMACIONES
ANIMACIONES
- Podemos añadir animaciones a nuestros objetos con el componente <a-animation>
- Una animación modifica el valor de una propiedad en un periodo de tiempo determinado
- Debemos colocar el elemento <a-animation> como hijo de la entidad que queramos animar
ANIMACIONES / ejemplo
<a-scene>
<a-assets>
<img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
</a-assets>
<a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2">
<a-animation attribute="position" to="0 2.2 -5" direction="alternate" dur="2000"
repeat="indefinite"></a-animation>
</a-box>
</a-scene>
ANIMACIONES / ejemplo
- Animamos el atributo position
- Animamos a 0 2.2. -5, que es 20cm más arriba
- Alternamos la dirección de la animación en cada ciclo de repetición de la misma
- Cada ciclo dura 2000 ms
- Repetimos la animación de forma indefinida
ANIMACIONES
- Rota en función de como este definido previamente el atributo rotation
- Mirar y listar distintos valores en documentación
<a-animation attribute=“rotation” repeat=“indefinite” to=“0 360 0”></a-animation>
ANIMACIONES / PROPIEDADES BOOLEANAS
- Muchos componentes tienen propiedades que aceptan un valor booleano
- Por ejemplo, la visibilidad
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
ANIMACIONES / PROPIEDADES NUMÉRICAS
- Propiedades que se determinan mediante valores numéricos
- Por ejemplo, la intensidad de la luz
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
ANIMACIONES / PROPIEDADES DE COLOR
- Podemos animar la propiedad de color de todos aquellos componentes que la tengan
- Por ejemplo, el color de una caja
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
ANIMACIONES / ATRIBUTOS
- begin
- Indica cuando empieza la animación:
- Puede ser un número en milisegundos
- Puede ser el nombre de un evento
- Indica cuando empieza la animación:
ANIMACIONES / ATRIBUTOS
- direction
- Indica la dirección de la animación:
- alternate
- alternate-reverse
- normal
- reverse
- Indica la dirección de la animación:
ANIMACIONES / ATRIBUTOS
- easing
- Indica la forma de suavizar de la animación:
- ease
- linear
- ease-in
- ease-out
- ease-cubic
- ease-elastic
- ...etc
- Indica la forma de suavizar de la animación:
ANIMACIONES / ATRIBUTOS
- fill
- Indica el efecto de la animación mientras está parada:
- backwards
- both
- forwards
- none
- Indica el efecto de la animación mientras está parada:
ANIMACIONES / EJEMPLO
MODELOS 3D
MODELOS 3D
- Podemos añadir a nuestras escenas distintos tipos de modelos 3D
- En función del tipo de extensión del modelo 3D que queramos importar, deberemos utilizar una primitiva diferente
MODELOS 3D / COLLADA MODEL
- Para modelos 3D con extensión .dae
<a-scene>
<a-assets>
<a-asset-item id="tree" src="tree.dae"></a-asset-item>
</a-assets>
<a-collada-model src="#tree"></a-collada-model>
</a-scene>
MODELOS 3D / gltf MODEL
- Para modelos 3D con extensión .gltf
<a-scene>
<a-assets>
<a-asset-item id="tree" src="tree.gltf">
</a-assets>
<a-gltf-model src="#tree"></a-gltf-model>
</a-scene>
MODELOS 3D / obj MODEL
- Para modelos 3D con extensión .obj
- Se divide en dos archivos: modelo y textura, hay que importar los dos --> menos eficiente
<a-scene>
<a-assets>
<a-asset-item id="crate-obj" src="crate.obj"></a-asset-item>
<a-asset-item id="crate-mtl" src="crate.mtl"></a-asset-item>
</a-assets>
<!-- Using the asset management system. -->
<a-obj-model src="#crate-obj" mtl="#crate-mtl"></a-obj-model>
</a-scene>
MODELOS 3D / obj MODEL
- Se recomienda utilizar glTF para los assets en la web
- También podemos utilizar collada
- Hay conversores
TEXTO
TEXTO
- Disponemos del componente <a-text>
- Es la forma más sencilla de introducir un texto
<a-text value="Kaixo, Enpresa Digitala!" color="#BBB"
position="-0.9 0.2 -3" scale="1.5 1.5 1.5"></a-text>
TEXTO
-
Hay otras formas:
- Text Geometry - texto 3D
- HTML Shader - Renderiza HTML como una textura.
- Más pesadas de dibujar y más exigencia de procesamiento
AUDIO
AUDIO
- El uso de audio es determinante a la hora de conseguir una experiencia inmersiva en VR
- Aunque sea utilizar un simple ruido blanco de fondo, ayuda
-
Tenemos dos formas de insertar sonidos:
- <audio>
- <a-sound>
AUDIO / <audio>
- Sirve para reproducir un sonido de fondo:
<a-scene>
<a-assets>
<audio src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay
preload></audio>
</a-assets>
<!-- ... -->
</a-scene>
AUDIO / <a-sound>
- Da una mayor sensación de interactividad
- A medida que nos acercamos, aumenta el volumen
- Si nos alejamos, baja el volumen
- Podemos posicionar el sonido en la escena, con el atributo position
<a-scene>
<!-- ... -->
<a-sound src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav" autoplay="true"
position="-3 1 -4"></a-sound>
<!-- ... -->
</a-scene>
INTERACCIÓN
INTERACCIÓN
- En web tradicional, solo nos preocupamos del ratón y la entrada por teclado
-
En VR, debido al gran número de plataformas y dispositivos diferentes, no hay una manera única de tratar la interacción
- Lanzar, girar, pulsar, apretar...etc
INTERACCIÓN
- Nos centramos en la interacción mediante nuestra mirada
- Se basa en girar nuestra cabeza y mirar fijamente objetos para interactuar con ellos
-
Para poder interactuar con un objeto, hacer clic...etc, necesitamos un cursor
- <a-camera> con <a-cursor> como hijo
- <a-event>
<script src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
INTERACCIÓN
- Podemos manejar eventos con el componente event-set dentro de una entidad, de la siguiente forma:
<a-entity event-set__${id}="_event: ${eventName}; ${someProperty}: ${toValue}">
INTERACCIÓN
- Por ejemplo, si queremos hacer visible una entidad cuando la miramos o pasamos el cursor sobre ella.
- Utilizamos el evento mouseenter del componente cursor
<a-entity event-set__makevisible="_event: mouseenter; visible: true">
INTERACCIÓN
INTERACCIÓN
-
EJERCICIO PRÁCTICO
- Cambiar color de al pasar sobre <a-box>
- Agrander <a-sphere> al pulsar
- Añadir panel con texto al pasar sobre <a-cilinder>
INTERACCIÓN
INTERACCIÓN / JAVASCRIPT
INTERACCIÓN / ARRASTRAR OBJETOS
- Librería externa: Super Hands
INSPECTOR VISUAL
INSPECTOR VISUAL
- A-FRAME lleva incorporado un inspector visual, al igual que muchos navegadores web
- Podemos ver rendimiento y demás datos interesantes
- Para que aparezca, debemos pulsar <ctrl> + <alt>+ i en cualquier escena A-FRAME
INSPECTOR VISUAL
-
Nos permite inspeccionar y retocar escenas
- Arrastrar, rotar o escalar entidades
- Retocar componentes y propiedades de una entidad mediante widgets
- Ver los resultados al momento
PUBLICAR NUESTROS PROYECTOS VR
PUBLICAR NUESTROS PROYECTOS VR
-
Hay varias formas de publicar y compartir nuestros proyectos VR
- Servidor Local
- Servicios externos gratuitos
-
Todos deben cumplir las mismas características:
- SSL / HTTPS
PUBLICAR NUESTROS PROYECTOS VR
- Servicios externos gratuitos
PUBLICAR NUESTROS PROYECTOS VR
- Almacenaje de assets
- Si servimos los assets desde el mismo directorio que el proyecto A-FRAME, no debemos preocuparnos mucho por ellos
- A-FRAME puede usar URLs relativas para referenciar a los assets
- Al estar en el mismo dominio, no hay problema al cargarlos
WEBAR
WEBAR
- AFRAME nos permite trabajar con AR si lo juntamos con la librería AR.js
- AR.js es una herramienta de realidad aumentada eficiente para la web
-
Es un proyecto open source que se ejecuta de forma muy eficiente.
- Hasta 60fps en smartphones con dos años de antigüedad
WEBAR / AR.JS
-
Principales características de AR.js
- Velocidad : corre de forma eficiente en smartphones. 60 fps on my 2 year-old phone!
- Basado en web : 100% web, sin instalaciones. Hecho en JavaScript con three.js + jsartoolkit5
- Open Source : It is completely open source and free of charge!
- Standards : Corre en cualquier smartphone con webgl y webrtc
WEBAR / AR.JS / HOW TO
- Funciona tanto en iOS como en Android
- Cualquier navegador con WebGL y WebRTC (iOS 11 +)
- ¿Quieres probarlo?
- Abre este marcador hiro en tu tablet u ordenador
- Abre esta web app de AR en el navegador de tu dispositivo móvil y apunta al marcador.
WEBAR / AR.JS / HOW TO
<a-scene embedded arjs>
<a-marker-camera preset='hiro'></a-marker-camera>
Para poder trabajar con AR.js, importamos la librería y la aplicamos en nuestra escena
Después, hay que decirle a AFRAME que queremos que AR.js controle la cámara
WEBAR / AR.JS / HOW TO
<!-- A-Frame -->
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<!-- Contenido-->
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<!-- cámara que se mueve en función de la posición del marcador -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
WEBAR / AR.JS / PERSONALIZAR CONTENIDO
- AR.js solo se encarga del control de la cámara
- Por tanto, para cargar contenido personalizado, modelos propios...lo hacemos igual que hemos estado haciendo con AFRAME
- Por ejemplo, podemos cargar un modelo 3D, un texto o una imagen
WEBAR / AR.JS / PERSONALIZAR CONTENIDO
<!-- define your gltf asset -->
<a-assets>
<a-asset-item id="tree" src="/path/to/tree.gltf"></a-asset-item>
</a-assets>
<!-- use your gltf model -->
<a-entity gltf-model="##tree"></a-entity>
<a-text value="Hello, World!"></a-text>
<a-image src="another-image.png"></a-image>
WEBAR / AR.JS / MARKER
Podemos personalizarlo
BUENAS PRÁCTICAS
BUENAS PRÁCTICAS / RENDIMIENTO
- Si el rendimiento siempre es algo importante a tener en cuenta, en VR es crucial
- A-FRAME propone varias medidas que podemos adoptar para ayudar a mejorar este rendimiento
BUENAS PRÁCTICAS / RENDIMIENTO
- Tener en cuenta las recomendaciones sobre características de hardware
- Utilizar el componente stats para ver varias métricas en pantalla
- Nos interesa especialmente tener un valor FPS alto y el resto bajos
- Utilizar el asset management system para optimizar la carga de assets, ya que se descargan antes del renderizado
BUENAS PRÁCTICAS / RENDIMIENTO
- Como norma general, a menor número de entidades y de luces --> Mayor rendimiento
- Limitar el número de caras y de vértices de los modelos
- Utilizar el componente background en lugar de <a-sky> para definir un color sólido como fondo. Así evitamos la creación de geometría innecesaria
- Hay herramientas que nos ayudan a ver de forma clara los recursos que se están enviando a la GPU:
DISEÑO VR
DISEÑO PARA VR
- Diseñar para una experiencia de realidad virtual es muy diferente a hacerlo para un soporte plano en 2D
- Como nuevo medio para el que crear y diseñar contenido, hay que aprender nuevas técnicas, convenciones y formas de trabajar
- El fin es conseguir una muy buena experiencia de usuario, en la que se sienta cómodo y que le resulte lo más real posible
DISEÑO PARA VR
- Disciplina muy nueva, pocos recursos y documentación, no hay normas estrictas que seguir
-
Reglas básicas
- Nunca tomar el control de la cámara sin que el usuario cuente con ello
- Tomar como referencia que la unidad de medida para distancias es el metro
- Tenerlo en cuenta a la hora de obtener la escala deseada y que el diseño sea coherente
DISEÑO PARA VR
- La experiencia en VR es muy diferente a todo lo que hemos probado antes.
- Probar los diseños con usuarios novatos para testar la UX real de los mismos, la percepción varía mucho con la experiencia
- Por esto mismo, ir de menos a más con el nivel de inmersión
EJEMPLO VR
EJEMPLO VR
- Proyectos vistos durante el taller:
futuro webVR
futuro webvr
- Ahora mismo, utilizar AFRAME es la forma más cómoda
- De igual forma que antes utilizábamos frameworks para todo en desarrollo web, las especificaciones cada vez van añadiendo más funcionalidades "de serie"
- Seguramente acabe ocurriendo lo mismo con WebVR
futuro webvr
- Un framework es un conjunto de librerías y componentes que nos facilitan el uso de una determinada tecnología
- Es una abstracción de esa tecnología, a un nivel superior
- Facilitan reutilización de código
- "Simplifican" el proceso de desarrollo aunque también lo "limita"
FRAMEWORKS CSS
FRAMEWORKS JS
FRAMEWORKS PHP
FRAMEWORKS WEBVR
DUDAS / CURIOSIDADES TALLER
- Portfolio WebVR Asier Arranz, hecho con AFRAME
- Detectar colisiones:
- Aplicar movimiento a la cámara
-
https://github.com/donmccurdy/aframe-extras
- https://github.com/donmccurdy/aframe-physics-system
-
https://github.com/donmccurdy/aframe-extras
Muchas gracias
#EE26 - Taller WebVR y WebAR
By Imanol Terán Maruri
#EE26 - Taller WebVR y WebAR
Nuevas realidades en la web
- 2,147