tdc2016poa | trilha web - realidade virtual com webvr
TRANSCRIPT
Globalcode – Open4education
Realidade Virtual com WebVRTrilha - Web
Cristiano de LuccaSoftware Architect
GDG Organizer
Globalcode – Open4education
Sobre
Sistemas de Informação - UCSArquiteto de Software – Bertolini SAOrganizador GDG Serra GaúchaEntusiasta de Programação 3DPalestrante FISL, TDC, GDG...
Globalcode – Open4education
Agenda
Breve HistóricoPanoramaIntroduçãoFerramentasDemo
Globalcode – Open4education
Breve Histórico
WebGL 2.0
https://goo.gl/0FEtKj
Globalcode – Open4education
WebGL
WebGL Everywhere
Globalcode – Open4education
Oculus Rift - 2012
Globalcode – Open4education
Até 2014
Globalcode – Open4education
Mercado de HMD
Globalcode – Open4education
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:
Globalcode – Open4education
VR ou AR?
Globalcode – Open4education
Como funciona?
Globalcode – Open4education
WebVR - Runtime
Oculus VR Apps em JavaScriptRenderizado em WebGLDetecção de Movimento e Tela CheiaTudo no Browser
Mobile WebVR: SmartphoneVisão Estereoscópica para CardboardDetecção de Movimento via Acelerômetros
Globalcode – Open4education
WebVR - Ecosistema
BrowsersFrameworksFormatosFerramentas de Desenvolvimento
Globalcode – Open4education
Browsers
Disponível em Versões de DesenvolvimentoChormium Experiemental
https://webvr.info/get-chrome/Promessa de liberação na versão 54 (este mês)
Firefox Nightlyhttps://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
Globalcode – Open4education
Frameworks
JavaScriptThree.js - http://threejs.orgBabylon.js - www.babylonjs.comScene.js – http://scenejs.org
MarkupA-FrameGlamSceneVR
Globalcode – Open4education
Formatos
GLTF – GL Transfer FormatFormato criado especialmente para transferência de malhas 3D on-line, focado em WebGL e OpenGLRepresentação compacta garante eficiência no downloadCarga 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 NeutroPode ser utilizado em qualquer ferramenta, aplicação ou runtime
Globalcode – Open4education
Ferramentas de Criação
Unity3DUnreal EnginePlayCanvasVizor
Globalcode – Open4education
Ferramentas de Dev.
DevToolsRemote DebbugingWebVR EmulatorWebGL InspectorWTF – Web Tracing Framework
Globalcode – Open4education
DevTools
Ref.: https://developers.google.com/web/tools/chrome-devtools/
Globalcode – Open4education
Remote Debugging
Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Conectado e com DriversDevice – (>=Android 4.0)
Dev. Opt. -> Habilitar Depuração via USB PC
DevTools -> More Tools -> Inspect DevicesDiscover USB DevicesLocalizar Pending Authorization
Autorizar no Device
Vai Exibir a Lista de URLs
Globalcode – Open4education
WebVR Emulator
Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Globalcode – Open4education
Remote Debugging
Demo
Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
Globalcode – Open4education
WebVR e HMD
Inicialização das AplicaçõesConsulta 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çãoThree.js oferece suporte (>= r68)
examples/js/effects/VREffect.js
Globalcode – Open4education
WebVR e Cardboard
Mais SimplesRenderiza WebGL em estéreo lado a lado
Sem a necessidade de consulta
Utiliza o recurso de tela cheia do próprio browserUtiliza a API de orientação e posição do browserCom a utilização de Three.js é ainda mais fácil
examples/js/effects/StereoEffect.jsExamples/js/controls/DeviceOrientationControls.js
InformaçõesMobile Chrome http://g.co/chromevrDesktop Chrome http://vr.chromeexperiments.com
Globalcode – Open4education
Demo
https://ide.c9.io/delucca/webvrdemohttps://webvrdemo-delucca.c9users.io/demo/index.html
Globalcode – Open4education
Considerações
Quando devo utilizar WebVR ao invés de NativoProvavelmente não é para AAA gamesExcelente para videos e fotos em 360 grausTudo nesse espectro....
Globalcode – Open4education
Considerações
The less powerful the language, the more you can do with the data stored in that language.
Tim Berners-LeeAny application that can be written in JavaScript, will eventually be written in JavaScript.
Jeff Atwood
Globalcode – Open4education
Agradecimento
Beenoculus
http://www.beenoculus.com.br
Globalcode – Open4education
Conclusão
Considerando o panorama atual de desenvolvimento voltado a VR, a WebVR representa uma alternativa de baixo custo e alto alcance.