Realidade Virtual com WebVR

1. Globalcode – Open4education
Realidade Virtual com WebVR
Trilha - Web
Cristiano de Lucca
Software Architect
GDG Organizer

2. Globalcode – Open4education
Sobre
Sistemas de Informação - UCS
Arquiteto de Software – Bertolini SA
Organizador GDG Serra Gaúcha
Entusiasta de Programação 3D
Palestrante FISL, TDC, GDG...

3. Globalcode – Open4education
Agenda
Breve Histórico
Panorama
Introdução
Ferramentas
Demo

4. Globalcode – Open4education
Breve Histórico
WebGL 2.0
https://goo.gl/0FEtKj

5. Globalcode – Open4education

6. Globalcode – Open4education
Oculus Rift - 2012

7. Globalcode – Open4education
Até 2014

8. Globalcode – Open4education
Mercado de HMD

9. Globalcode – Open4education

10. Globalcode – Open4education
WebVR – Def...
WebVR é uma API JavaScript
Experimental para fornecer acesso a
equipamentos de Realidade Virtual
através do Browser.
Brandon Jones (Google)
Vlad Vukicevic (Mozilla)
Thanks To:

11. Globalcode – Open4education
VR ou AR?

12. Globalcode – Open4education
Como funciona?

13. Globalcode – Open4education
WebVR - Runtime
Oculus VR Apps em JavaScript
Renderizado em WebGL
Detecção de Movimento e Tela Cheia
Tudo no Browser
Mobile WebVR: Smartphone
Visão Estereoscópica para Cardboard
Detecção de Movimento via Acelerômetros

14. Globalcode – Open4education
WebVR - Ecosistema
Browsers
Frameworks
Formatos
Ferramentas de Desenvolvimento

15. Globalcode – Open4education
Browsers
Disponível em Versões de Desenvolvimento
Chormium Experiemental
https://webvr.info/get-chrome/
Promessa de liberação na versão 54 (este mês)
Firefox Nightly
https://nightly.mozilla.org/
Instruções: https://goo.gl/eLiiyI
Mobile Browsers (PolyFill)
Implementação em JavaScript da Especificação WebVR.
Permite utilizar WebVR sem a necessidade de browser especial.
Permite inclusive visualizar o mesmo conteúdo sem a
necessidade de um visualizador próprio.
https://github.com/borismus/webvr-polyfill

16. Globalcode – Open4education
Frameworks
JavaScript
Three.js - http://threejs.org
Babylon.js - www.babylonjs.com
Scene.js – http://scenejs.org
Markup
A-Frame
Glam
SceneVR

17. Globalcode – Open4education
Formatos
GLTF – GL Transfer Format
Formato criado especialmente para transferência de
malhas 3D on-line, focado em WebGL e OpenGL
Representação compacta garante eficiência no
download
Carga Rápida em Memória
JSON para estrutura e construtores de auto nível para outros
elementos (hierarquia, cameras, shaders, animação, luzes e
materiais)
Runtime Neutro
Pode ser utilizado em qualquer ferramenta, aplicação ou runtime

18. Globalcode – Open4education
Ferramentas de Criação
Unity3D
Unreal Engine
PlayCanvas
Vizor

19. Globalcode – Open4education
Ferramentas de Dev.
DevTools
Remote Debbuging
WebVR Emulator
WebGL Inspector
WTF – Web Tracing Framework

20. Globalcode – Open4education
DevTools
Ref.: https://developers.google.com/web/tools/chrome-devtools/

21. Globalcode – Open4education
Remote Debugging
Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Conectado e com Drivers
Device – (>=Android 4.0)
Dev. Opt. -> Habilitar Depuração via USB
PC
DevTools -> More Tools -> Inspect Devices
Discover USB Devices
Localizar Pending Authorization
Autorizar no Device
Vai Exibir a Lista de URLs

22. Globalcode – Open4education
WebVR Emulator
Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

23. Globalcode – Open4education
Remote Debugging
Demo
Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

24. Globalcode – Open4education
WebVR e HMD
Inicialização das Aplicações
Consulta o Browser pela Lista de Dispositivos (HMD)
Utilizar Dispositivo VR, se encontrado, em modo tela
cheia – Renderização do Dispositivo
Especialmente Oculus Rift
Ao Executar requestAnimationFrame, consultar
sensores e obter posição e orientação
Three.js oferece suporte (>= r68)
examples/js/effects/VREffect.js

25. Globalcode – Open4education
WebVR e Cardboard
Mais Simples
Renderiza WebGL em estéreo lado a lado
Sem a necessidade de consulta
Utiliza o recurso de tela cheia do próprio browser
Utiliza a API de orientação e posição do browser
Com a utilização de Three.js é ainda mais fácil
examples/js/effects/StereoEffect.js
Examples/js/controls/DeviceOrientationControls.js
Informações
Mobile Chrome http://g.co/chromevr
Desktop Chrome http://vr.chromeexperiments.com

26. Globalcode – Open4education
Demo
https://ide.c9.io/delucca/webvrdemo
https://webvrdemo-delucca.c9users.io/demo/index.html

27. Globalcode – Open4education
Considerações
Quando devo utilizar WebVR ao invés de Nativo
Provavelmente não é para AAA games
Excelente para videos e fotos em 360 graus
Tudo nesse espectro....

28. Globalcode – Open4education
Considerações
The less powerful the language, the more you can
do with the data stored in that language.
Tim Berners-Lee
Any application that can be written in
JavaScript, will eventually be written in JavaScript.
Jeff Atwood

29. Globalcode – Open4education
Agradecimento
Beenoculus
http://www.beenoculus.com.br

30. Globalcode – Open4education
Conclusão
Considerando o panorama atual de
desenvolvimento voltado a VR, a WebVR
representa uma alternativa de baixo custo e alto
alcance.

31. Globalcode – Open4education
Obrigado!
Cristiano de Lucca
cristiano@gdgsg.com.br
@CristianoLucca