Criação de Ambientes de Realidade Virtual usando A-Frame - Escola Avelar Brotero

Slides for the workshop on creating VR with A-Frame at the Avelar Brotero high school.

1. Criação de Ambientes de Realidade Virtual usando A-Frame - Escola Avelar Brotero Escola Secundária Avelar Brotero 21 Janeiro 2020 Jorge C. S. Cardoso | http://jorgecardoso.eu | jorgecardoso@dei.uc.pt 
2. A-Frame http://aframe.io Usar Google Chrome ou Firefox ou Safari (actualizados) Abrir site Framework para criação de conteúdos de Realidade Virtual para a Web Conteúdos são visualizados através de um browser Conteúdos são criados numa linguagem baseada em HTML 2 http://aframe.io
3. Experimentar exemplo “WebVR” Experimentar no computador • Teclas [W, A, S, D] ou setas para mover; • Clicar e arrastar rato para olhar. 3
4. Experimentar exemplo “360º Image” (1/2) 1. Abrir página https://aframe.io no browser do telemóvel 2. Rodar e carregar no botão de “modo VR” 4 Botão “modo VR” Procurar exemplo “360º Image”
5. Experimentar exemplo “360º Image” (2/2) 3. Colocar o telemóvel nos óculos VR 5
6. Ambiente RV 360º interactivo (1/2) 1. Abrir a página https://aframe-brotero.glitch.me 2. Clicar no botão do canto superior direito 3. Clicar no botão “Remix on Glitch” 6
7. Ambiente RV 360º interactivo (2/2) 4. Ver resultado clicando em “Show -> In a New Window” - Experimentar no PC / Smartphone 5. Editar clicando num ficheiro HTML do lado esquerdo e editando no lado direito 6. (Se quiser pode fazer “Sign in” no botão do canto superior direito, para manter as suas alterações guardadas) 7. Ficheiro README.md contém mais algumas indicações de referência 7
8. Código 8 Inclusão das bibliotecas A-Frame que vão interpretar o conteúdo.
9. Código 9 Conteúdo VR definido com elementos HTML próprios do A-Frame. Conteúdo é composto por uma cena 3D com objectos 3D no interior e uma câmara que define a perspectiva do utilizador.
10. Código 10 <a-sky> é na verdade uma esfera com 5 km de raio. O atributo “src” define a imagem equirectangular (foto 360º) aplicada como textura. Ver pasta “assets” no projecto para outras imagens.
11. Código 11 <a-link> para “navegarmos” entre mundos VR.
12. Código 12 <a-camera> define a perspectiva do utilizador. <a-cursor> coloca um cursor circular no centro do ecrã para dar ao utilizador uma forma de apontar.
13. Eixos 3D • A unidade de distância em A-Frame é o metro • O utilizador tem os pés em (0, 0, 0) • A cabeça está em (0, 1.6, 0) ◦ 1.6 metros é uma altura média • Está a olhar no sentido negativo do eixo Z 13 X Y Z
14. Rotação 3D • Unidade: graus • Para saber o sentido de uma rotação use a regra das mãos ◦ Polegar no sentido positivo do eixo sobre o qual queremos rodar o objecto ◦ Mão fecha no sentido positivo da rotação 14 Rotação em X Rotação em Y Rotação em Z
15. Adicionar uma imagem aos assets 1. Procurar uma foto 360 no Google e descarregar para o PC (se quiser criar uma foto 360 a partir do Google Street View veja o ficheiro README.md no projecto) 2. No projecto, clicar em “Assets” 3. Arrastar a foto do PC para o ecrã Assets 4. Depois do upload, clicar na foto e depois no botão “Copy Url” 5. Voltar a clicar em “index.html” 6. Localizar a primitiva “<a-sky>” 7. Modificar o atributo “src”, colando o Url copiado anteriormente 15
16. Inspector visual do A-Frame Na janela com a visualização da cena pressionar as teclas Control + Alt + i Do lado esquerdo aparece a estrutura de elementos da cena Clicando num elemento vemos do lado direito as suas propriedades Podemos fazer deslocar, rodar e aumentar ou diminuir os objectos (Os valores das propriedades têm de ser copiados de volta para o HTML, caso contrário perdem-se) Para voltar à visualização normal, clicar no botão “Back to Scene" 16
17. Links úteis • Curso sobre A-Frame ◦ https://aframe-uc.glitch.me/index.html • Lista de objectos 3d simples ◦ https://aframe-uc.glitch.me/viewsource/examples/0 1-basics-05-primitives.html 17