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.

Transcript

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
   

   View Slide

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
   

   View Slide

3. Experimentar
   exemplo
   “WebVR”
   Experimentar no computador
   ● Teclas [W, A, S, D] ou setas para
   mover;
   ● Clicar e arrastar rato para olhar.
   3
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. Exemplo 1
   6
   Inclusão das bibliotecas A-Frame que vão interpretar o conteúdo.
   

   View Slide

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.
   

   View Slide

8. Exemplo 1
   8
   cria uma “caixa” -- paralelepípedo. Width, height, e
   depth definem as dimensões (em metros). Position é a
   posição no “mundo” tridimensional.
   

   View Slide

9. Exemplo 1
   9
   Cria automaticamente um “ambiente” com objectos
   espalhados pelo chão.
   

   View Slide

10. Exemplo 1
    10
    define a perspectiva do utilizador.
    coloca um cursor circular no centro do ecrã para dar ao
    utilizador uma forma de apontar.
    

    View Slide

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
    

    View Slide

12. Exemplo 1
    12
    Y
    X
    0
    

    View Slide

13. Exemplo 1
    13
    0.08 (8 cm)
    0.16 (16 cm)
    

    View Slide

14. Exemplo 1
    14
    0.16 (16 cm)
    0.32 (32 cm)
    0.16 (16 cm)
    0.32 (32 cm)
    

    View Slide

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
    

    View Slide

16. Exemplo 1
    16
    Y
    X
    0
    0.12
    0.24
    ?
    

    View Slide

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
    

    View Slide

18. Exemplo 2 - Texturas
    18
    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.
    

    View Slide

19. Desafio
    Texturizar o braço direito.
    No ficheiro exemplo2.html, os
    assets para o braço direito já
    foram carregados.
    19
    

    View Slide

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
    

    View Slide

21. Desafio Animar um braço
    21
    

    View Slide

22. Exemplo 4 - Hierarquia
    22
    As hierarquias de objectos (objectos dentro de objectos)
    permitem-nos controlar facilmente tudo o que está dentro
    da hierarquia.
    

    View Slide

23. Exemplo 4 - Hierarquia
    23
    0.16
    0.32
    0.12/2 = 0.06
    0.32 /2 =
    0.16
    Y
    X
    

    View Slide

24. Exemplo 4 - Hierarquia
    24
    Y
    X
    0.12
    

    View Slide

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!
    

    View Slide

26. Exemplo final - tudo junto
    26
    

    View Slide

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
    

    View Slide

28. Desafio
    Criar novas poses
    Aplicar texturas de outros
    personagens
    Duplicar o boneco
    28
    

    View Slide

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
    

    View Slide