Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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.

Jorge C. S. Cardoso

July 25, 2019
Tweet

More Decks by Jorge C. S. Cardoso

Other Decks in Education

Transcript

  1. Criação de Ambientes
    de Realidade Virtual
    usando A-Frame - CubeCraft
    Toys
    Jorge C. S. Cardoso | http://jorgecardoso.eu | [email protected]
    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