La Camara en VR

la zona de confort

¿y que pasa con las medidas?

medida de la vista 

Importante

hacia el frente es Z y va disminuyendo 

• positions (x, y, z) en metros
• rotations (x, y, z) en grados
• scales (x, y, z) de 0 a 1

Primitivas 3D

Importante

¿de que esta compuesto un objeto en 3D?

¿Que es un vertice?

collada

blender

glTF

obj

.dae, contiene la información del material en el mismo archivo

.obj / .mtl, dos archivos, es muy pesado, muy usado en unity, formato por defecto. el .doc de 3D

.blend, archivos exportados desde blender.

formato preferido para web. contiene un archivo .bin que debe estar en la misma ruta

otros

json loader, three loader, etc

ecosistema glTF

Estructura de un glTF

Materiales / texturas

Principales Propiedades

• opacity (de 0 a 1)
• transparent (true / false)
• color (hex / color name)
• metalness (refleja la luz como un metal)
• wireframe (muestra los vertices del mesh)
• src o textura (textura)

Un Material esta compuesto de:

• shader 
• albedo
• textura

Luces y sombras

ambient

directional

point

spot

hemisphere

Luz ambiente requerida para dar color a los objetos

similar a la de ambiente pero con dos colores top/bottom

es omnidireccional y afecta a los objetos dependiendo de la distancia y material

no es omnidireccional y afecta a los objetos dependiendo de la distancia y material // la batiseñal

como una linterna

Principales Propiedades

• Si no se agrega una luz, a-frame crea dos luces, una de ambiente y una direccional 
• Note that lights are computationally expensive we should limit number of lights in a scene.
• habilitar sombras requiere deshabilitar las luces por defecto
• preferible usar un bake (¿que es un bake?)

Animaciones

Propiedades animables

• Vectores (x y z)
• enteros
• colores (hex, colorname)
• boleanos (true / false)
• propiedades en componentes (rotation.x)

Propiedades de la animación

• begin (milis to wait)
• direction (from-to , to-from)
• ease (función ease)
• repeat (# de veces)
• loop (¿?)

Tener en cuenta

• si se quiere animar varias propiedades se deben crear entidades hijo con cada una de las animaciones
• si no gusta las animaciones a-frame se puede usar greensock
• también se puede usar https://github.com/ngokevin/kframe/tree/master/components/animation/ 

Fisica y cuerpos

dynamic-body

A freely-moving object. Dynamic bodies have mass, collide with other objects, bounce or slow during collisions, and fall if gravity is enabled.

objetos afectados por la gravedad y por otros objetos

static-body

A fixed-position or animated object. Other objects may collide with static bodies, but static bodies themselves are unaffected by gravity and collisions.

paredes, pisos, puertas.

Interpupillary distance (IPD)

is the distance between the center of the pupils of the two eyes. IPD is critical for the design of binocular viewing systems, where both eye pupils need to be positioned within the exit pupils of the viewing system.

Entity System

Components of A-Frame’s entity-component framework are JavaScript modules that can be mixed, matched, and composed onto entities to build appearance, behavior, and functionality. We can register component in JavaScript and use it declaratively from the DOM. Components are configurable, reusable, and shareable. Most code in an A-Frame application should live within components.

html syntax

• Box = Position + Geometry + Material
• Light Bulb = Position + Light + Geometry + Material + Shadow
• Sign = Position + Geometry + Material + Text
• VR Controller = Position + Rotation + Input + Model + Grab + Gestures
• Ball = Position + Velocity + Physics + Geometry + Material
• Player = Position + Camera + Input + Avatar + Identity

Writing Components

<script>
  AFRAME.registerComponent('bar', {
    // ...
  });
</script>

component life cycle

<script>
    // Registering component
    AFRAME.registerComponent('component-name', {
      schema: {},
      init: function () {},
      update: function () {},
      tick: function () {},
      remove: function () {},
      pause: function () {},
      play: function () {}
    });
</script>

schema

<script>
    // Registering component
    AFRAME.registerComponent('bar', {
      schema: {
        color: {default: '#FFF'}
      },
      init: {
        console.log(this.data.color);
      }
    }
</script>

<a-scene>
  <a-entity bar="color: red;"></a-entity>
</a-scene>

debug and hack

• threejs-inspector: https://chrome.google.com/webstore/detail/threejs-inspector/dnhjfclbfhcbcdfpjaeacomhbdfjbebi?hl=en
• components property.

Updates and more

• nueva micro version de a-frame: https://github.com/aframevr/aframe/blob/master/CHANGELOG.md
• http://keithclark.co.uk/articles/css-vr/

oportunidades de proyecto

• Guia 360 por prodigious / para nuevos empleados y para visitantes
• prodigious VR bazar (mini juegos e interacciones)
• cuenta una historia (storytelling + vr)

oportunidades de crecimiento

• Haciendo QA en VR
• UI / UX good practices
• 1 Cupo para el nano degree de udacity (1200 USD)