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 €/mes  5€/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

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

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
  • 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

PRINCIPALES USOS / FORMACIÓN

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

TERCERA VÍA: REALIDAD MIXTA

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

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

 

 

 

  • 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

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

ALCANCE / NAVEGADORES DESKTOP

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

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

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

  • EJERCICIO PRÁCTICO
    • Añadir una textura para el suelo, <a-plane>
    • Añadir textura a varias <a-box>
    • Añadir textura a un <a-sphere>
    • Añadir textura a un <a-cone>
    • Add una textura al fondo, <a-sky> (imágenes 360°)

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

ANIMACIONES / ATRIBUTOS

  • direction
    • Indica la dirección de la animación:
      • alternate
      • alternate-reverse
      • normal
      • reverse

ANIMACIONES / ATRIBUTOS

  • easing
    • Indica la forma de suavizar de la animación:
      • ease
      • linear
      • ease-in
      • ease-out
      • ease-cubic
      • ease-elastic
      • ...etc

ANIMACIONES / ATRIBUTOS

  • fill
    • Indica el efecto de la animación mientras está parada:
      • backwards
      • both
      • forwards
      • none

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

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:
  • 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

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

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

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

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

Muchas gracias

#EE26 - Taller WebVR y WebAR

By Imanol Terán Maruri

#EE26 - Taller WebVR y WebAR

Nuevas realidades en la web

  • 164
Loading comments...

More from Imanol Terán Maruri