A-Frame + AR.js

 

WebVR + AR

  • ¿Qué es A-Frame?
  • Introducción al Framework
  • Integrando ARjs
  • Generación de markers
  • Creando nuestra escena de realidad aumentada
  • ¿Preguntas?

¿Qué es A-Frame?

  • Creado por el equipo de Mozilla VR
  • En la actualidad es desarrollado por Supermedium/Google
  • Framework Web para VR
  • Soporte para HeadSets 
    • Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go
  • Realidad Aumentada
 
 

Introducción al Framework

¿Cómo puedo usarlo?

<html>
  <head>
    <script src="js"></script>
  </head>
  <body>
    <a-scene>
      ...
    </a-scene>
  </body>
</html>

Primitivas

<a-primitive
    position="x y z"
    scale="x y z"
    rotation="x° y° z°"
    radius="m"
    width="m"
    height="m"
    depth="m"
    color|src
    >
</a-primitive>

Assets

<a-assets>
  <a-asset-item id="" src=""></a-asset-item>
  <img id="" src="">
  <audio id="" src=""></audio>
  <video id="" src=""></video>
</a-assets>

Animaciones y Texto

<a-box
  animation=
    "property: rotation; from; to; loop; dir;"
  >
</a-box>

<a-entity
  position="2 1.5 -2"
  text="width: 3; value: WebVR;"
  >
</a-entity>

Escena y Camara

<a-scene>
  ...canvas, render, render loop
  ...default camera, lights
  ...webvr-polyfill
  ...UI enter VR WebVR API
</a-scene>
<a-scene stats vr-mode-ui>
</a-scene>
<a-entity
  camera="active: true"
  look-controls
  wasd-controls
  position="-2 1.6 2"
  >
</a-entity>

Speech Recognition

<a-box
  position="-1 2 -5"
  rotation="45 45 0"
  width="1"
  height="1"
  depth="1"
  src="#ibgjs"
  speech-command__move="
    command: mover cubo;
    type: attribute; attribute: position; value: -3 5 -2;"
  >
</a-box>

<a-entity
  id="annyang"
  annyang-speech-recognition
  >
</a-entity>

ARjs

<script
  src="./aframe.min.js">
</script>
<script 
  src="./aframe-ar.min.js">
</script>

¿Cómo integrarlo?

<a-scene
  embedded
  arjs="sourceType: webcam"
  >
  <a-marker type="pattern" url="/pattern-atom.patt">
    <a-entity
      gltf-model="/silicon-atom.glb"
      scale="0.25 0.25 0.25"
    ></a-entity>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>
<a-marker preset='hiro'></a-marker>
<a-marker preset='kanji'></a-marker>

Markers

<a-marker type="pattern" url="/pattern-atom.patt">
</a-marker>
<a-marker type="barcode" value="7">
</a-marker>
<a-marker type='pattern' url='http://examples.org/hiro.patt'></a-marker>
<a-marker type='pattern' url='http://examples.org/kanji.patt'></a-marker>
<a-marker preset='hiro'>
  <a-box></a-box>
  <img />
  <a-entity gltf-model></a-entity>
</a-marker>

Generación de Markers

Creando nuestra escena de realidad aumentada

Enlaces

WebVR+AR

By Andrés Santos

WebVR+AR

  • 149