Minicurso:

Realidade Aumentada na Web

I Encontro da Comunidade ParaLivre

perguntas.vuejsnorte.com.br/

www.vuejsnorte.com.br/

Objetivos

Construir dois websites 3D, um de realidade virtual e outro de realidade aumentada, de um jeito simples com formas geométricas e com possibilidade de compartilhamento e visualização em desktops e dispositivos móveis, facilitando uma jornada de aprendizado continuada.

Uso de tecnologia de computador para criar um ambiente simulado. Quando se está em RV, a visão é de uma realidade completamente diferente da que está à sua frente, estando imerso no ambiente digital.

Realidade Virtual

Experiência RV

Experiência 3D

Realidade Aumentada

A Realidade Aumentada é uma versão aprimorada da realidade virtual criada pela adição de informações digitais no plano real.

Baixe agora!

Para desenvolvedores

  • Alto custo para desenvolvimento, construção e lançamento
  • Precisa ter um Macbook para iOS e licenças de desenvolvedor para Android / iOS
  • Fazer novo lançamento a cada correção de bug e atualizações

Para usuários

  • Encontrar um aplicativo nas lojas
  • Instalar um aplicativo
  • Mantê-lo atualizado
  • Lembrar de excluí-lo

O lado sombrio dos aplicativos móveis (AR)

Realidade Aumentada e Virtual na Web

http://webvr.info/

*

Criação e Exibição de animações 3D de computação gráfica no navegador web e Realidade Virtual / Aumentada

Three.js

- Importar WebXR Polyfill
- Configurar Câmera
- Configurar Iluminação
- Inicializar cenário
- Declarar no canvas
- configurar o efeito RV
- configurar o render
- Loop de renderização
- Pré-carregar os assets
- Lidar com metatags
- Dispositivos móveis

https://aframe.io

                O A-Frame é um framework web para construir experiências de realidade virtual (RV). Originalmente da Mozilla, foi desenvolvido para ser uma maneira fácil, mas poderosa, de desenvolver conteúdo de RV.

Ele usa HTML declarativos, o que torna sua utilização super fácil.

Básico de HTML

Linguagem de marcação de hipertexto para desenvolver websites

  • Tags são estruturas de linguagem de marcação contendo instruções, tendo uma marca de início e outra de fim para que o navegador possa renderizar uma página.

 

https://glitch.com/

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Realidade Virtual em 14 linhas

https://aframe.io/docs/1.0.0/introduction/

<html>
  <head>
    <script src="https://aframe.io/releases/1.0.3/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Realidade Virtual em 14 linhas

https://aframe.io/docs/1.0.0/introduction/

Testar compatibilidade RV/RA: https://vrtest.ninja/

Abrir link no navegador do celular

Inspetor Visual

Basta pressionar <ctrl> + <alt> + i

three.js

A-Frame

jsArtoolkit

AR.js

Jerome Etienne

Nicolò Carpignoli

QR-Code X Marcador RA

<!doctype HTML>
<html>
    <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/jeromeetienne/AR.js/2.1.4/aframe/build/aframe-ar.js"></script>
    <body style="margin : 0px; overflow: hidden;">
        <a-scene embedded arjs>
            <a-marker preset="hiro">
                <a-box position="0 0.5 0" material="color: yellow;"></a-box>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

https://github.com/jeromeetienne/AR.js

Baixar a imagem: http://bit.ly/paralivre-hiro

    <a-scene …>
      <a-assets>
        <a-asset-item id="crate-obj" src="crate.obj"></a-asset-item>
        <a-asset-item id="crate-mtl" src="crate.mtl"></a-asset-item>
      </a-assets>
	  …
	  …
      <a-obj-model src="#crate-obj" mtl="#crate-mtl" … ></a-obj-model>
	  …
	  … 
    </a-scene>

https://aframe.io/docs/1.0.0/primitives/a-obj-model.html

    <a-scene …>
      <a-assets>
        <a-asset-item id="tree" src="tree.gltf"></a-asset-item>
      </a-assets>
	  …
	  …
      <a-gltf-model src="#tree" … ></a-gltf-model>
	  …
	  … 
    </a-scene>

https://aframe.io/docs/1.0.0/primitives/a-gltf-model.html

Bibliotecas de Modelos 3D GRATUITOS

Softwares GRATUITOS de Modelagem 3D

Imagens, Texturas e Áudios Gratuitos

Referências

Duvidas?

Made with Slides.com