Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys - Universidade de Verão 2019

Slides for the Summer University 2019 - University of Coimbra, about using A-Frame for creating a Web-based VR experience. This year, I'm using Cubecraft images to show how to recreate the 3D Cubecraft figures.

1. Criação de Ambientes de Realidade Virtual usando A-Frame - CubeCraft Toys Jorge C. S. Cardoso | http://jorgecardoso.eu | jorgecardoso@dei.uc.pt Universidade de Verão 2019 25 Julho 2019
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. Ambiente de desenvolvimento (1/2) 1. Abrir a página https://repl.it/@jorgecard oso/aframe-uv2019 2. Clicar no botão “fork” no topo da janela 3. Fazer “refresh” da página 3. Clicar no botão “Open in a new tab” no lado direito da janela 4
5. Ambiente de desenvolvimento (2/2) 4. Seleccionar ficheiros do lado esquerdo 5. Editar no meio 6. Ver o resultado no 2º tab (fazendo refresh) 5
6. Exemplo 1 6 Inclusão das bibliotecas A-Frame que vão interpretar o conteúdo.
7. Exemplo 1 7 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.
8. Exemplo 1 8 <a-box> cria uma “caixa” -- paralelepípedo. Width, height, e depth definem as dimensões (em metros). Position é a posição no “mundo” tridimensional.
9. Exemplo 1 9 Cria automaticamente um “ambiente” com objectos espalhados pelo chão.
10. Exemplo 1 10 <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.
11. 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 11 X Y Z
12. Exemplo 1 12 Y X 0
13. Exemplo 1 13 0.08 (8 cm) 0.16 (16 cm)
14. Exemplo 1 14 0.16 (16 cm) 0.32 (32 cm) 0.16 (16 cm) 0.32 (32 cm)
15. Desafio Criar e posicionar os braços (no ficheiro exemplo1.html). Dimensões da caixa: width="0.12" depth="0.12" height="0.24" 15
16. Exemplo 1 16 Y X 0 0.12 0.24 ?
17. 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 17 Rotação em X Rotação em Y Rotação em Z
18. Exemplo 2 - Texturas 18 <a-assets> definem recursos (imagens) a serem usadas no mundo 3D. Cada imagem tem um identificador único. O atributo “multisrc” permite-nos indicar qual a imagem que vai ser usada para texturizar cada face da caixa. Para identificar as imagens usamos os identificadores que definimos nos assets prefixados por #. As texturas têm de ser dadas nesta ordem de faces: direita, esquerda, topo, baixo, frente, trás.
19. Desafio Texturizar o braço direito. No ficheiro exemplo2.html, os assets para o braço direito já foram carregados. 19
20. Exemplo 3 - Animação 20 O atributo “animation” permite-nos alterar os valores de outras propriedades do objecto ao longo do tempo. É necessário definir: - property: que propriedade queremos modificar - from: qual o valor inicial - to: qual o valor final - dur: qual a duração da animação - dir: se queremos uma animação “trás->frente->trás” - loop: se queremos uma animação infinita
21. Desafio Animar um braço 21
22. Exemplo 4 - Hierarquia 22 As hierarquias de objectos (objectos dentro de objectos) permitem-nos controlar facilmente tudo o que está dentro da hierarquia.
23. Exemplo 4 - Hierarquia 23 0.16 0.32 0.12/2 = 0.06 0.32 /2 = 0.16 Y X
24. Exemplo 4 - Hierarquia 24 Y X 0.12
25. Exemplo final - tudo junto 25 Imagens para todas as partes do corpo. Para mudar de personagem, basta alterar o número da personagem, em todas as linhas. Também podem misturar partes de personagens diferentes!
26. Exemplo final - tudo junto 26
27. Exemplo final - tudo junto 27 O boneco está hierarquizado: boneco1 - representa todo o boneco, para ser fácil reposicioná-lo corpo-superior - representa a parte de cima do corpo (cabeça, ombros, braços e tronco
28. Desafio Criar novas poses Aplicar texturas de outros personagens Duplicar o boneco 28
29. 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 29