O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Globalcode – Open4education
Realidade Virtual com WebVR
Trilha - Web
Cristiano de Lucca
Software Architect
GDG Organizer
Globalcode – Open4education
Sobre
Sistemas de Informação - UCS
Arquiteto de Software – Bertolini SA
Organizador GDG Serra ...
Globalcode – Open4education
Agenda
Breve Histórico
Panorama
Introdução
Ferramentas
Demo
Globalcode – Open4education
Breve Histórico
WebGL 2.0
https://goo.gl/0FEtKj
Globalcode – Open4education
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 ...
Globalcode – Open4education
VR ou AR?
Globalcode – Open4education
Como funciona?
Globalcode – Open4education
WebVR - Runtime
Oculus VR Apps em JavaScript
Renderizado em WebGL
Detecção de Movimento e Tela...
Globalcode – Open4education
WebVR - Ecosistema
Browsers
Frameworks
Formatos
Ferramentas de Desenvolvimento
Globalcode – Open4education
Browsers
Disponível em Versões de Desenvolvimento
Chormium Experiemental
https://webvr.info/ge...
Globalcode – Open4education
Frameworks
JavaScript
Three.js - http://threejs.org
Babylon.js - www.babylonjs.com
Scene.js – ...
Globalcode – Open4education
Formatos
GLTF – GL Transfer Format
Formato criado especialmente para transferência de
malhas 3...
Globalcode – Open4education
Ferramentas de Criação
Unity3D
Unreal Engine
PlayCanvas
Vizor
Globalcode – Open4education
Ferramentas de Dev.
DevTools
Remote Debbuging
WebVR Emulator
WebGL Inspector
WTF – Web Tracing...
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-debuggin...
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-deb...
Globalcode – Open4education
WebVR e HMD
Inicialização das Aplicações
Consulta o Browser pela Lista de Dispositivos (HMD)
U...
Globalcode – Open4education
WebVR e Cardboard
Mais Simples
Renderiza WebGL em estéreo lado a lado
Sem a necessidade de con...
Globalcode – Open4education
Demo
https://ide.c9.io/delucca/webvrdemo
https://webvrdemo-delucca.c9users.io/demo/index.html
Globalcode – Open4education
Considerações
Quando devo utilizar WebVR ao invés de Nativo
Provavelmente não é para AAA games...
Globalcode – Open4education
Considerações
The less powerful the language, the more you can
do with the data stored in that...
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 um...
Globalcode – Open4education
Obrigado!
Cristiano de Lucca
cristiano@gdgsg.com.br
@CristianoLucca
Próximos SlideShares
Carregando em…5
×

TDC2016POA | Trilha Web - Realidade Virtual com WebVR

160 visualizações

Publicada em

Realidade Virtual com WebVR

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

TDC2016POA | Trilha Web - Realidade Virtual com WebVR

  1. 1. Globalcode – Open4education Realidade Virtual com WebVR Trilha - Web Cristiano de Lucca Software Architect GDG Organizer
  2. 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. 3. Globalcode – Open4education Agenda Breve Histórico Panorama Introdução Ferramentas Demo
  4. 4. Globalcode – Open4education Breve Histórico WebGL 2.0 https://goo.gl/0FEtKj
  5. 5. Globalcode – Open4education
  6. 6. Globalcode – Open4education Oculus Rift - 2012
  7. 7. Globalcode – Open4education Até 2014
  8. 8. Globalcode – Open4education Mercado de HMD
  9. 9. Globalcode – Open4education
  10. 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. 11. Globalcode – Open4education VR ou AR?
  12. 12. Globalcode – Open4education Como funciona?
  13. 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. 14. Globalcode – Open4education WebVR - Ecosistema Browsers Frameworks Formatos Ferramentas de Desenvolvimento
  15. 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. 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. 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. 18. Globalcode – Open4education Ferramentas de Criação Unity3D Unreal Engine PlayCanvas Vizor
  19. 19. Globalcode – Open4education Ferramentas de Dev. DevTools Remote Debbuging WebVR Emulator WebGL Inspector WTF – Web Tracing Framework
  20. 20. Globalcode – Open4education DevTools Ref.: https://developers.google.com/web/tools/chrome-devtools/
  21. 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. 22. Globalcode – Open4education WebVR Emulator Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
  23. 23. Globalcode – Open4education Remote Debugging Demo Ref.: https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
  24. 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. 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. 26. Globalcode – Open4education Demo https://ide.c9.io/delucca/webvrdemo https://webvrdemo-delucca.c9users.io/demo/index.html
  27. 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. 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. 29. Globalcode – Open4education Agradecimento Beenoculus http://www.beenoculus.com.br
  30. 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. 31. Globalcode – Open4education Obrigado! Cristiano de Lucca cristiano@gdgsg.com.br @CristianoLucca

×