TDC2016POA | Trilha Web - Realidade Virtual com WebVR
Transferir como PPTX, PDF1 gostou299 visualizações
O documento apresenta uma introdução à tecnologia WebVR, definindo-a como uma API JavaScript experimental para fornecer acesso a dispositivos de realidade virtual através do navegador. É descrito o histórico, ferramentas, frameworks e demonstrado um exemplo de aplicação WebVR. Conclui-se que a WebVR representa uma alternativa de baixo custo e alto alcance para desenvolvimento de aplicações de realidade virtual.
TDC2016POA | Trilha Web - 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
- 6. Globalcode – Open4education Oculus Rift - 2012
- 7. Globalcode – Open4education Até 2014
- 8. Globalcode – Open4education Mercado de HMD
- 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
- 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
Notas do Editor
- #5: Time é tudo Retro realidade virtual e imersão
- #7: Falta de Padrões Tecnologias Fechadas Hardware Proprietário Preço
- #8: Facebook compra Oculus Rift Mozilla Dev. Suporte a Oculus no Firefox Google Dev. Suporte a Cardboard no Chrome Protótipos apresentados em Evento em SF Inicia-se uma parceria entre as equipes para criar uma API unificada Resultando nas primeiras versões de WebVR WebVR esta na trilha para tornar-se um padrão recomentado pelo W3C
- #9: Falta de Padrões Tecnologias Fechadas Hardware Proprietário Preço
- #10: Grandes Downloads, Instalações via App Stores, Ferramentas Proprietárias, Cultura Fechada, Apenas para Experts! Publicação Instantânea, Acesso Instantâneo, Escolha suas Ferramentas, Cultura da Colaboração, Código Fonte
- #11: O que é... Incorporar Experiências em VR em Páginas Web Capturar Dados de Posicionamento de um Headset Obter Métricas para Renderização Exibir Conteúdo WebGL E o que não é... Metaverse VR Browser Game Engine Imersiva e não imersiva
- #12: O que é... Incorporar Experiências em VR em Páginas Web Capturar Dados de Posicionamento de um Headset Obter Métricas para Renderização Exibir Conteúdo WebGL E o que não é... Metaverse VR Browser Game Engine
- #14: WebVR 1.0 API - Preliminar http://mozvr.githup.io/webvr-spec/ W3C Community Group http://www.w3.org/community/webvr/ Slack https://webvr.slack.com Exemplos https://webvr.info/samples/
- #27: Link demo Cloud 9