TDC2016POA | Trilha Web - Realidade Virtual com WebVR

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.

Globalcode – Open4education

Obrigado!

Cristiano de Luccacristiano@gdgsg.com.br

@CristianoLucca