1. DEMONSTRADOR VIRTUAL DE AMBIENTES
VIA WEB COM RECURSOS DE
REALIDADE AUMENTADA
Leonardo Pereira Santos

2. PENSAMENTO BASE:
“The product is no longer the basis of value.
The experience is.”
Venkat Ramaswamy

3. UM POUCO DE HISTÓRIA...
O homem sempre buscou meios de interação com
pessoas, objetos e ferramentas de trabalho:
• Até a idade média  Métodos artesanais, como a
pintura.
• Após a Revolução industrial Interação com
máquinas, por meio de botões e alavancas.
• A Computação introduziu um modelo abstrato de
interação. Paradigma entre mundo real e o
mundo virtual.

4. INTERATIVIDADE
• O modelo ideal de interatividade é quando o
usuário não mais percebe a presença da
tecnologia, que estará trabalhando a seu favor
de uma forma invisível e por toda a parte.

5. INTERATIVIDADE
• Há sempre a busca por modelos cada vez mais
interativos...

6. REALIDADE VIRTUAL
• “É o uso de alta tecnologia para convencer o
usuário de que ele está em outra realidade,
promovendo completamente o seu
envolvimento.”
• Os primeiros relatos de seu uso datam do
período pós 2ª Guerra Mundial.

7. REALIDADE VIRTUAL

8. AMBIENTE VIRTUAL
• Representar fielmente um espaço físico real,
reproduzindo fielmente as suas medidas de
altura, largura e profundidade.
• Proporciona ao usuário a sensação de
presença.

9. REALIDADE AUMENTADA
• Integração entre o REAL e o VIRTUAL;
• Há várias possibilidades de uso;

10. REALIDADE AUMENTADA:
DEFINIÇÃO
• Realidade Aumentada é um ambiente que
envolve tanto realidade virtual como
elementos do mundo real, criando um
ambiente misto em tempo real.
• Combina elementos reais com o ambiente
virtual;
• Fornece interatividade e processamento em
tempo real;
• É desenvolvida em 3-D.

11. REALIDADE
AUMENTADA X VIRTUAL
• RA implementou um novo conceito: o
ambiente real é aumentado com objetos
virtuais;
• Melhor custo-benefício
• Diferente da RV, não necessita usar
equipamentos caros e complexos;
• Oferece flexibilidade e mobilidade quanto às
plataformas;
• Interface mais intuitiva ao usuário.

12. CÓDIGOS INTERATIVOS
• São considerados os precursores da RA;
• Quando interpretados inserem informações
reais num plano virtual.
• Principais:
 Códigos de Barras
 QR Code

13. CÓDIGOS DE BARRAS
• Conjunto de barras paralelas verticais, capazes
de serem lidas por um meio óptico.
• Armazenam 20 dígitos de informação.

14. QR CODE
• Criado em 1994 pela Denso-Wave.
• QR significa "quick response"(resposta rápida),
nome dado devido à sua capacidade de ser
interpretado rapidamente.

15. QR CODE
Tipo de dados Capacidade de armazenamento
Numérico 7089 caracteres
Alphanumeric 4296 caracteres
Binário – 8 bits 2953 bits
Kanji – Alfabeto japonês 1817 caracteres

16. PROJETO
• Demonstrador virtual de ambientes via web
com recursos de Realidade Aumentada.
• Exibição de ambientes pela web;
• “Visitar” imóveis, projetos arquitetônicos e
lugares à distancia;
• Interação do usuário com o ambiente pelo
marcador.

17. FLARTOOLKIT
• Biblioteca de RA em ActionScript;
• Traduzida do Java por Saquoosha em 2008;
• Executada por qualquer browser com o plugin
do Adobe Flash Player;
• Aplicativos podem ser executados localmente
ou como cliente/servidor;
• Licença gratuita.

18. FLARTOOLKIT
Plataformas
Tecnologias de
Realidade Aumentada Desktop Web Dispositivos Móveis
ARSTudio Sim Não Não
ARTag Sim Não Não
ARToolKit Sim Não Não
ARToolKitPlus Não Não Sim
DART Sim Não Não
FLARTolKit Sim Sim Sim
JARToolKit Sim Não Não

19. FLARTOOLKIT-
FUNCIONAMENTO
• Captura da imagem de câmera:

20. FLARTOOLKIT-
FUNCIONAMENTO
• Criação do mapa de bits da imagem limiarizada
:
Imagem Imagem
Limiarizada Binarizada

21. FLARTOOLKIT-
FUNCIONAMENTO
• Detecção dos quadrados:

22. FLARTOOLKIT-
FUNCIONAMENTO
• Reconhecimento do marcador:

23. FLARTOOLKIT-
FUNCIONAMENTO
• Reconhecimento do marcador:

24. FLARTOOLKIT-
FUNCIONAMENTO
• Cálculo da matriz de transformação:

25. FLARTOOLKIT-
FUNCIONAMENTO
• Renderização dos objetos virtuais:

26. PAPERVISION 3D
• Ferramenta para a renderização dos objetos
3D;
• O FLARToolKit não renderiza os objetos 3D,
apenas calcula a orientação dos marcadores,
definindo a posição dos objetos virtuais e
outras ações como movimentação e escala;
• Biblioteca em ActionScript 3.0;
• Faz uso da API 3D do Flash.

27. PAPERVISION 3D
Classe Descrição
Ase Permite carregar objetos exportados do 3DSMax
Collada Permite carregar cenas Collada
DAE Arquivo convertido para o formato COLLADA 1.4.1
KMZ Modelo para o Google Earth
Max3DS Arquivo 3DS
MD2 Carrega um arquivo do Quake 2 MD2 com animação
Sketchup Modelo do Google Sketchup
Sketchup Collada Modelo do Google Sketchup para Collada

28. MARCADOR
• Projeto utiliza marcadores fiduciais.
• Quadrado de bordas pretas com um padrão
central capaz de torna-lo único e distinguível
de outros marcadores.
• A detecção é feita pela comparação de trechos
da imagem capturada com um banco de
dados de marcadores até que seja encontrado
um que respeite o grau de confiança definido.

29. MARCADOR
Exemplo de
marcadores

30. MARCADOR
• Marcador deve respeitar regras de
reconhecimento:

31. MARCADOR
• É necessário o reconhecimento de apenas
50% da área do marcador.

32. MARCADOR
• Coordenadas:

33. DESENVOLVIMENTO
• Download das ferramentas de desenvolvimento;
• Criação de uma interface de interação;
• Definição do fluxo de funcionamento;
• Definição dos padrões de funcionamento;
• Criação dos marcadores;
• Criação do ambiente 3D;
• Criação do ambiente web;
• Testes.

34. INTERFACE DE INTERAÇÃO

35. INTERFACE DE INTERAÇÃO

36. FLUXO DE FUNCIONAMENTO

37. DESENVOLVIMENTO
Padrões
Vídeo:
• Tamanho: 640 X 480 pixels;
• Frequência: 16 Fps;
Marcadores:
• Reconhecimento: 50%;
• Tamanho: 6 centímetros;
• Resolução: 16 segmentos;

38. DESENVOLVIMENTO
• Marker Generator – Gerador de marcadores
Marcador criado
seguindo os
padrões
preestabelecidos

39. DESENVOLVIMENTO
• Criação do site

40. Testes

41. EXEMPLO PLANETA

42. EXEMPLO ESTÁDIO

43. LINKS ÚTEIS
FLARToolKit FLARToolKit -
Download
Gerador de Site Cláudio
códigos QR Kirner

44. “Nós estamos vivendo na economia da
experiência e o cliente é a estrela do show.
Se eu vou gastar milhares de dólares
em alguma coisa, quero ter a experiência de
isso ser um conto de fadas.”
Milton Pedraza,
The Luxury Institute Illustrative

45. OBRIGADO!!!
Leonardo Pereira Santos