Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Realidade Virtual com Tecnologias Web
Ähnlich wie Realidade Virtual com Tecnologias Web (20)
Realidade Virtual com Tecnologias Web
- 1. Realidade Virtual com Tecnologias Web Thayana Corrêa Mamoré
- 2. Bacharel em Engenharia da Computação Estácio Belém - IESAM • Open Source • Moodle • Immersive Web Technologies Comunidade Vue.js Norte https://vuejs-norte.github.io
- 3. Realidade Virtual Ambiente completamente digital Experiência sintética totalmente fechada, sem noção do mundo real Uso de tecnologia de computador para criar um ambiente simulado, então quando você está em RV, você está vendo uma realidade completamente diferente da que está à sua frente, estando imerso no ambiente digital.
- 4. Realidade Virtual na WEB https://webvr.info/
- 5. WebVR • 3D imersivo e RV • Web Browsers • Equipamentos RV • Polyfill * API JavaScript Headsets
- 6. WebGL • Canvas HTML5 • Renderiza gráficos 2D e 3D interativos • Sem plugins! API JavaScript https://get.webgl.org
- 7. Three.js Criação e Exibição de animações 3D de computação gráfica no navegador web Biblioteca & API JavaScript https://threejs.org/
- 11. - Importar WebVR Polyfill - Configurar Câmera - Configurar Iluminação - Inicializar cenário - Declarar no canvas - Instalar o efeito RV - Instanciar o render - Loop de renderização - Pré-carregar os assets - Lidar com metatags - Dispositivos móveis
- 12. Existe uma forma menos complexa? 4/26/2019
- 14. A-Frame ❖ Framework de Three.js ➢ Conceito de ECS (Entity–component–system) para DOM (Document Object Model) ➢ Exposta declarativamente tags próprias dentro do HTML ❖ Desenvolvida em 2015 pela equipe da Mozilla XR ❖ Hoje, ela é mantida por desenvolvedores da Google e Supermedium.
- 15. 26/04/2019
- 16. Realidade Virtual em 10 Linhas <html> <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script> <a-scene> <a-box color="#4CC3D9" position="-1 0.5 -3" rotation="0 45 0"></a-box> <a-cylinder color="#FFC65D" position="1 0.75 -3" radius="0.5" height="1.5"></a-cylinder> <a-sphere color="#EF2D5E" position="0 1.25 -5" radius="1.25"></a-sphere> <a-plane color="#7BC8A4" position="0 0 -4" rotation="-90 0 0" width="4" height="4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </html>
- 19. Basta pressionar <ctrl> + <alt> + i Inspetor Visual
- 20. <a-scene> <!-- Asset management system. --> <a-assets> <a-asset-item id="horse-obj" src="horse.obj"></a-asset-item> <a-asset-item id="horse-obj" src="horse.mtl"></a-asset-item> <audio id="neigh" src="neigh.mp3"></audio> <img id="advertisement" src="ad.png"></img> <video id="kentucky-derby" src="derby.mp4"></video> </a-assets> <!-- Scene. --> <a-plane src="#advertisement"></a-plane> <a-plane src="#kentucky-derby"></a-plane> <a-sound src="#neigh"></a-sound> <a-entity obj-model="obj: #horse-obj; mtl: #horse-mtl"></a-entity> </a-scene> Sistema de Gerenciamento de Assets
- 23. Softwares de Modelagem 3D GRATUITOS • Blender • Tinkercad • MagicaVoxel
- 24. Onde conseguir conteúdos prontos e gratuitos?
- 25. • Sketchfab • Poly • Kenney • Quaternius • Archive3D • TurboSquid • Clara Bibliotecas de Modelos 3D GRATUITOS • Free3D • CadNav • Sketchup’s 3D Warehouse • NASA 3D Models • Sweet Home 3D • 3DEXPORT
- 26. • Textures.com • Texturify.com • Freepik.com • Freesound.com Imagens, Texturas e Áudios Gratuitos
- 27. Exemplificando