![Page 1: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/1.jpg)
RA e Javascriptdeu match?
Trilha Games, Realidade Virtual e Aumentada
![Page 2: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/2.jpg)
SobreRafaelly Gruber Schoeffel
Pesquisa e desenvolvimento
Portinari UI - github.com/portinariui
![Page 3: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/3.jpg)
![Page 4: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/4.jpg)
O que é AR.js?Um framework Javascript que atua como uma porta do ARToolkit, enquanto aproveita outros pacotes como a-frame e three.js.
Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar o desempenho.
![Page 5: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/5.jpg)
Key pointsMuito rápido mesmo em telefones 60 fps
Baseado na Web, three.js + jsartoolkit5
É simples
Open Source
Padrões: WEBGL e WEBRTC
![Page 6: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/6.jpg)
WebRTC e WebGLWebRTC é uma API da W3C para permitir aos navegadores executar aplicações de chamada telefônica, vídeo chat e compartilhamento P2P.
WebGL é uma API em JavaScript, disponível a partir do novo elemento canvas da HTML5, que oferece suporte para renderização de gráficos 2D e gráficos 3D.
![Page 7: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/7.jpg)
Marked basedO AR.js usa o artoolkit e, portanto, é baseado em marcador.
O artoolkit é um software com anos de experiência em realidade aumentada.
![Page 8: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/8.jpg)
Setup do projetoServidor local de desenvolvimento com SSL
- Importar as libs js
- Utilizar as tags no html
- live-server
Realidade aumentada na Web! 🎉
![Page 9: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/9.jpg)
AR com Javascript em 10 linhas de HTML?
![Page 10: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/10.jpg)
Formas<a-box></a-box>
<a-sphere></a-sphere>
<a-cylinder></a-cylinder>
<a-plane></a-plane>
Objetos customizados tipo glTF ou .obj
![Page 11: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/11.jpg)
Utilizando marcadores personalizadosImagem PNG simples e de alto contraste pré-cortada para ser um quadrado com um tamanho de pelo menos 512x512
Converter para um arquivo .patt utilizando o treinador de marcadores
Adicionar com a tag a-marker
![Page 12: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/12.jpg)
Ar.js com localizaçaoUsando os sensores do telefone para orientação/posição, o AR.js mostra na câmera um conteúdo para cada local no local 'físico'
GeoAR.js
Location Based (GPS) Augmented Reality on the Web
![Page 13: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/13.jpg)
AR com Gifs
![Page 14: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/14.jpg)
![Page 15: RA e Javascript Trilha Games, Realidade Virtual e …...2019/10/10 · como a-frame e three.js. Realidade aumentada é exibida diretamente nos navegadores da Web, sem sacrificar](https://reader034.vdocuments.pub/reader034/viewer/2022042400/5f0ef5517e708231d441c78e/html5/thumbnails/15.jpg)
rafaellyg
rafaelly.gruber
rafaellygruber
rafaelly-gruber-schoeffel
Muito obrigada!
medium.com/totvsdevelopers