Ois,
me chamo Marina :)

Agenda

• Histórico
• WebVR
• Mozilla
• A-frame
• ECS
• Inspector
• AR.js
• Comunidade
• Fim.

No início...

aka época do NetScape

1994

Proposta de uma linguagem de marcação para realidade virtual na web

VRML

Virtual Reality Markup Language

Porém, a web não estava preparada :(

2014

WebVR

WebVR

Browsers ganham suporte
a dispositivos de ✧VR✧

HTC VIVE,
Oculus Rift,
Samsung Gear VR,
Google Daydream
webvr.rocks

WebVR !== WebGL

sensores de um óculos VR x renderização de gráficos

"The specification is currently under active developement."

"It is not a W3C Standard nor is it on the W3C Standards Track."

Mozilla ❤ WebVR

"Web é a plataforma"

Firefox OS não era uma
plataforma nova, era *a web*

Manifesto Mozilla

"As pessoas precisam ter a capacidade de moldar a Internet e suas experiências com ela."

A-frame

TL;DR

Construir coisas em 3D utilizando HTML

*Mesma proposta do VRML!*

Web 3D > Web 2D

e.g. Street View 3D > Google Maps 2D

Three.js

(ReactVR também é feito com Three.js)

            
<a-scene>
  <a-entity
    text-geometry="value: Olar, Web.br!"
    position="-2.7 1 -4"
    material="color: white"
  ></a-entity>
</a-scene>
            
          

Images 360°!

            
<a-scene>
   <a-assets>
     <img id="pedra-do-bauzinho" crossorigin="anonymous"
     src="images/pedra-do-bauzinho.jpg">
   </a-assets>
   <a-sky src="#pedra-do-bauzinho"></a-sky>
</a-scene>
            
          

Entity Component System (ECS)

"entidade-componente-sistema"

Entity Component System (ECS)

• Composição ao invés de herança
• Cada objeto, uma entidade - que é formada por componentes

Sistema

            
<a-scene></a-scene>
            
          

Sistema

• Escopo global e gerenciamento dos componentes
• aka "func main()" -- ou uma thread

Entidade

            
<a-entity></a-entity>
            
          

Entidade

• Base de todos os objetos
• Uma entidade sem componentes === <div></div>

Componente

            
<a-entity
  geometry="primitive: box"
  material="color: purple"
  position="-1 0.5 -3"
  rotation="0 45 0"
></a-entity>
            
          

Componente

• Atributos das entidades;
• Aparência, comportamento e funcionalidades;

Primitivas

          
<a-box
  color="purple"
  position="-1 0.5 -3"
  rotation="0 45 0"
></a-box>
          
          

Objetos em 3D!

Clara.io é uma ótima
fonte de objetos 3D

          
<a-entity
  obj-model="obj: url(obj/pikachu/pikachu.obj);
               mtl: url(obj/pikachu/pikachu.mtl)"
></a-entity>
          
          

Web inspector

<ctrl> + <alt> + <i>

Realidade Aumentada

AR.js

          
<a-scene embedded arjs>
  <a-entity
    obj-model="obj: url(obj/pokeball/pokeball.obj);
    mtl: url(obj/pokeball/pokeball.mtl)"
    position="0 0.5 0"
    scale="0.02 0.02 0.02"
    rotation="90 180 0"
  ></a-entity>
  <a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
          

Merged a first PR of @aframevr A-painter WebXR mode that works with ARCore & ARKit (Thanks @fernandojsg @TrevorFSmith @blairmacintyre) pic.twitter.com/Jlq4Bv7nuw

— Arturo Paracuellos (@arturitu) October 19, 2017

Comunidade

• Slack
• Blog - mencione @aframevr no Twitter!
• A-frame School
• Github - Aframe
• Documentação
• Github - AR.js

Referências

Obrigada! :D