Web AR y Web VR

TALLER PRÁCTICO

Imanol Terán Maruri - @itermar

Imanol Terán

Caricatura realizada por @oneeyedman

itermar.io

  • Cursos de diseño web, WordPress, HTML, CSS, productividad, emprendimiento...
  • Descargas de themes, plugins, guías...
  • Todo por 10 €/mes

Con el código ENPRESADIGITALA

1 MES

GRATIS

WEB AR Y WEB VR

  • Introducción
  • Web VR
    • A-FRAME
      • Gafas y navegadores compatibles | Desarrollo de Web VR con A-FRAME | Características del framework | Proyecto VR
  • Buenas prácticas
  • Diseño para VR
  • Web AR
    • AR.JS y WebAR Playground
      • Ejemplos prácticos | Proyecto AR

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

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

HTC VIVE

*Positional tracking

*Positional tracking

OCULUS RIFT

*Positional tracking

*Positional tracking

GOOGLE DAYDREAM

SAMSUNG GEAR VR

WINDOWS MIXED REALITY

*Positional tracking

*Positional tracking

OCULUS GO

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

WEBVR.ROCKS

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>

SISTEMA ENTIDAD-COMPONENTE

SISTEMA ENTIDAD-COMPONENTE

  • La arquitectura ECS (Entity-Component-System) es muy común en el desarrollo de juegos y 3D
  • Se basa en composición, en lugar de herencia
  • Tiene una serie de beneficios para estos desarollos

ECS / BENEFICIOS

  • Mayor flexibilidad al definir objetos mediante composición
  • Diseño limpio y claro
  • Mayor escalabilidad a la hora de construir aplicaciones VR
  • Arquitectura probada para este propósito
  • Se pueden extender funcionalidades fácilmente
    • La comunidad comparte componentes como recursos

ECS / DOCUMENTACIÓN

ECS / CONCEPTOS BÁSICOS

  • La arquitectura ECS se basa en los siguientes aspectos:
    • Entidades
      • Similar a un <div> en web. Son la base de todos los objetos de una escena
    • Componentes
      • Nos permiten proporcionar a las entidades aspecto, comportamiento y/o funcionalidad
    • Sistemas
      • Marcan el propósito general y la gestión de clases de componentes. Son opcionales

ECS / EJEMPLOS

  • Box = Position + Geometry + Material
  • Light Bulb = Position + Light + Geometry + Material + Shadow
  • VR Controller = Position + Rotation + Input + Model + Grab + Gestures
  • Ball = Position + Velocity + Physics + Geometry + Material

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

PRÁCTICA VR

PRÁCTICA VR

Muchas gracias

Imanol Terán Maruri - @itermar

Taller práctico sobre WebVR y WebAR

By Imanol Terán Maruri

Made with Slides.com

Taller práctico sobre WebVR y WebAR

Nuevas realidades en la web

  • 1,938

More from Imanol Terán Maruri