tdc2016poa | trilha web - realidade virtual com webvr

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

Upload: tdc-globalcode

Post on 18-Jan-2017

44 views

Category:

Education


1 download

TRANSCRIPT

Page 1: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Realidade Virtual com WebVRTrilha - Web

Cristiano de LuccaSoftware Architect

GDG Organizer

Page 2: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Sobre

Sistemas de Informação - UCSArquiteto de Software – Bertolini SAOrganizador GDG Serra GaúchaEntusiasta de Programação 3DPalestrante FISL, TDC, GDG...

Page 3: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Agenda

Breve HistóricoPanoramaIntroduçãoFerramentasDemo

Page 4: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Breve Histórico

WebGL 2.0

https://goo.gl/0FEtKj

Page 5: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

WebGL

WebGL Everywhere

Page 6: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Oculus Rift - 2012

Page 7: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Até 2014

Page 8: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Mercado de HMD

Page 9: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Page 10: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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:

Page 11: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

VR ou AR?

Page 12: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Como funciona?

Page 13: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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

Page 14: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

WebVR - Ecosistema

BrowsersFrameworksFormatosFerramentas de Desenvolvimento

Page 15: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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

Page 16: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Frameworks

JavaScriptThree.js - http://threejs.orgBabylon.js - www.babylonjs.comScene.js – http://scenejs.org

MarkupA-FrameGlamSceneVR

Page 17: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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

Page 18: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Ferramentas de Criação

Unity3DUnreal EnginePlayCanvasVizor

Page 19: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Ferramentas de Dev.

DevToolsRemote DebbugingWebVR EmulatorWebGL InspectorWTF – Web Tracing Framework

Page 20: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

DevTools

Ref.: https://developers.google.com/web/tools/chrome-devtools/

Page 21: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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

Page 22: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

WebVR Emulator

Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Page 23: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Remote Debugging

Demo

Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Page 24: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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

Page 25: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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

Page 26: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Demo

https://ide.c9.io/delucca/webvrdemohttps://webvrdemo-delucca.c9users.io/demo/index.html

Page 27: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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....

Page 28: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

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

Page 29: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Agradecimento

Beenoculus

http://www.beenoculus.com.br

Page 30: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Conclusão

Considerando o panorama atual de desenvolvimento voltado a VR, a WebVR representa uma alternativa de baixo custo e alto alcance.

Page 31: TDC2016POA | Trilha Web -  Realidade Virtual com WebVR

Globalcode – Open4education

Obrigado!

Cristiano de [email protected]

@CristianoLucca