Desenvolvendo um Ambiente
Virtual em Realidade Aumentada
para Web com FLARToolKit
Robson Siscoutto – [email protected]
Faculdade de Informática de Presidente Prudente – FIPP
Universidade do Oeste Paulista - UNOESTE
Levrangeles da Silva Filho - [email protected]
Faculdade de Ciência e Tecnologia - FATEC
Universidade de Cuiabá (UNIC)
1
Objetivo do Minicurso
Apresentar o processo de desenvolvimento de
aplicações de Realidade Aumentada na Web com
FLARToolKit:
•
•
•
•
•
Introdução
Componentes básicos
Processo de instalação e configuração da ferramenta
Desenvolvimento de um projeto básico
Inserção de Novas Potencialidades:
• Comportamentos, interações, eventos internos e
externos, scripts, dentre outros.
• Principais passos para a inserção de interações
básicas
2
Introdução
ARToolKit
• Biblioteca popular que contribuiu
para Realidade Aumentada (RA)
• Funcionamento:
• Rastreamento óptico, uma
técnica de visão computacional
• Identificar e estimar em tempo
real a posição e a orientação
de um marcador fiducial em
relação ao dispositivo de
captura de vídeo (Webcam,
Baixo Custo do Hardware)
3
Introdução
Objetivos
Correlação entre os dados
estimados do marcador real
e a sua imagem
Possibilitar o posicionamento
de objetos virtuais
alinhados à imagem do
marcador [Kato, 2000]
4
Introdução
ARToolKit
• Biblioteca de programação multiplataforma
• Desenvolvimento de aplicações em
ambientes Desktop
• Não permite desenvolvimento de
aplicações de RA na Web
Solução para Web
• Biblioteca FLARToolKit
5
FLARToolKit
Introdução
• Biblioteca desenvolvida na linguagem
ActionScript [Adobe 2010]
FLARToolKit
• Executada nas maiorias dos browsers
Web com suporte a tecnologia
Adobe Flash Player
• Conjunto de Tecnologias Diferentes
• linguagem de programação
• ambientes para desenvolvimento
• bibliotecas externas e hardware
6
FLARToolKit
Introdução
Seis
Passos Fundamentais
do
Funcionamento de uma Aplicação
com o FLARToolKit
Capturar a Imagem da Câmera
Criar o Mapa de Bits da Imagem Limiarizada
Detectar os Marcadores
Identificar os Marcadores Detectados
Calcular a Matriz de Transformação (encontra posição e orientação dos Marcadores)
Posicionar e Renderizar os Objetos Virtuais
7
FLARToolKit
Introdução
Seis
Passos Fundamentais
do
Funcionamento de uma Aplicação
com o FLARToolKit
Capturar a Imagem da Câmera
Criar o Mapa de Bits da Imagem Limiarizada
Detectar os Marcadores
Identificar os Marcadores Detectados
Calcular a Matriz de Transformação (encontra posição e orientação dos Marcadores)
Posicionar e Renderizar os Objetos Virtuais
8
FLARToolKit
Introdução
Capturar a Imagem da Câmera:
•
•
•
A imagem capturada pela
câmera é obtida
9
FLARToolKit
Introdução
Seis
Passos Fundamentais
do
Funcionamento de uma Aplicação
com o FLARToolKit
Capturar a Imagem da Câmera
Criar o Mapa de Bits da Imagem Limiarizada
Detectar os Marcadores
Identificar os Marcadores Detectados
Calcular a Matriz de Transformação (encontra posição e orientação dos Marcadores)
Posicionar e Renderizar os Objetos Virtuais
10
FLARToolKit
Introdução
Criar
o mapa de bits da
imagem limiarizada:
•
•
•
•
•
A imagem capturada sofre
um efeito de limiarização,
possibilitando a criação de
um mapa de bits para
detecção dos marcadores
11
FLARToolKit
Introdução
Criar
o mapa de bits da
imagem limiarizada:
•
•
•
•
•
A imagem capturada sofre
um efeito de limiarização,
possibilitando a criação de
um mapa de bits para
detecção dos marcadores
12
FLARToolKit
Introdução
Seis
Passos Fundamentais
do
Funcionamento de uma Aplicação
com o FLARToolKit
Capturar a Imagem da Câmera
Criar o Mapa de Bits da Imagem limiarizada
Detectar os Marcadores
Identificar os Marcadores Detectados
Calcular a Matriz de Transformação (encontra posição e orientação dos Marcadores)
Posicionar e Renderizar os Objetos Virtuais
13
FLARToolKit
Introdução
Detectar os Marcadores:
•
•
•
Possíveis marcadores são
detectados após análise
do mapa de bits criado
anteriormente
14
FLARToolKit
Introdução
Seis
Passos Fundamentais
do
Funcionamento de uma Aplicação
com o FLARToolKit
Capturar a Imagem da Câmera
Criar o Mapa de Bits da Imagem Limiarizada
Detectar os Marcadores
Identificar os Marcadores Detectados
Calcular a Matriz de Transformação (encontra posição e orientação dos Marcadores)
Posicionar e Renderizar os Objetos Virtuais
15
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
•
O FLARToolKit realiza a
identificação dos marcadores
detectados
16
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
•
A informação de cada
marcador é
armazenada, extraindo 50%
da imagem gerada na
detecção a partir do centro
17
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
•
A informação de cada
marcador é
armazenada, extraindo 50%
da imagem gerada na
detecção a partir do centro
18
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
A informação de cada
marcador é
armazenada, extraindo 50%
da imagem gerada na
detecção a partir do centro
19
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
20
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
21
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
22
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
23
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
24
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
25
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
26
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
27
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
28
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
29
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
30
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
31
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
32
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
33
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
34
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
35
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
36
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
37
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
38
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a confiança na
detecção
39
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
40
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
41
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
42
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
43
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
44
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a cofiança na
detecção
45
FLARToolKit
Introdução
Identificar
os
Marcadores
Detectados:
•
•
Para cada marcador
registrado, a cada rotação
de 90º (graus), é realizada
uma comparação com os
marcadores
detectados,
gerando um valor de 0 a 1.
Quanto mais próximo de 1,
maior a confiança na
detecção
46
FLARToolKit
Introdução
Seis
Passos Fundamentais
do
Funcionamento de uma Aplicação
com o FLARToolKit
Capturar a Imagem da Câmera
Criar o Mapa de Bits da Imagem Limiarizada
Detectar os Marcadores
Identificar os Marcadores Detectados
Calcular a Matriz de Transformação (encontra posição e orientação dos Marcadores)
Posicionar e Renderizar os Objetos Virtuais
47
FLARToolKit
Introdução
Calcular
a
Matriz
Transformação:
•
de
•
48
FLARToolKit
Introdução
Seis
Passos Fundamentais
do
Funcionamento de uma Aplicação
com o FLARToolKit
Capturar a Imagem da Câmera
Criar o Mapa de Bits da Imagem Limiarizada
Detectar os Marcadores
Identificar os Marcadores Detectados
Calcular a Matriz de Transformação (encontra posição e orientação dos Marcadores)
Posicionar e Renderizar os Objetos Virtuais
49
FLARToolKit
Introdução
Posicionar e Renderizar os
Objetos Virtuais:
•
•
50
FLARToolKit
Introdução
51
FLARToolKit
Componentes
52
FLARToolKit
Componentes
Linguagem de Programação
• ActionScript 3 da Adobe, mas tem toda
sua estrutura traduzida do
NyARToolKit que é escrita em Java;
• ActionScript é a linguagem de
programação para os ambientes de
execução Adobe Flash Player e Adobe
AIR que roda sobre uma máquina
virtual denominada ActionScript Virtual
Machine (AVM).
53
FLARToolKit
Componentes
Ambiente de
Desenvolvimento – IDE
• IDE para o desenvolvimento de
aplicações é de livre escolha;
• MAS, sua estrutura deve ser voltada
para o desenvolvimento de
aplicações Flash;
• Exemplos:
• Flash Develop (nossa escolha);
• Flex Builder.
54
FLARToolKit
Componentes
Bibliotecas e Dependências
• bibliotecas externas para renderização
de objetos virtuais 3D:
• Away3D;
• Papervision3D (nossa escolha)
55
FLARToolKit
Componentes
Estrutura de Diretórios
• Estrutura de Diretórios da
versão 2.5.4 do FLARToolKit,
após descompactação:
• .settings
• libs
• resources
• src
56
FLARToolKit
Componentes
Estrutura de Diretórios
Diretório .settings
• Contêm as configurações para
o projeto na IDE Flex Builder.
• O Flash Develop tem a
capacidade de importar este
tipo de projeto.
57
FLARToolKit
Componentes
Estrutura de Diretórios
• Diretório libs
• Bibliotecas Externas importadas no
FLARToolKit;
• NyARToolKitAS3: versão em código
ActionScript 3 da biblioteca NyARToolKit
[ARToolworks 2010] em Java, contendo a
base do FLARToolKit;
• Tres Engines 3D para renderização dos
objetos virtuais 3D:
• Away3D [Away3D 2010];
• Away3D Lite [Away3DLite 2010];
• Papervision3D (nossa escolha);
58
FLARToolKit
Componentes
Estrutura de Diretórios
• Diretório resources
• Pasta Data
• marcadores Fiduciais: o hiromarker.pdf e o flarlogo.pdf e seu
respectivos arquivos .pat (registro)
• parâmetros da câmera:
camera_para.dat e o
câmera_para_16x9.dat (widescreen)
59
FLARToolKit
Componentes
Estrutura de Diretórios
• Diretório resources
• Pasta model:
• é um repositório para os arquivos dos
modelos tridimensionais
• Disponível um modelo de um objeto
tridimensional do planeta terra, sendo
um arquivo no formato .dae com suas
texturas (arquivo no formato Collada) e
outro arquivo earth.blend do Blender.
60
FLARToolKit
Componentes
Estrutura de Diretórios
• Diretório src
• códigos-fonte do FLARToolKit;
• Subpasta examples:
• Contendo classes com vários
exemplos de aplicações possíveis
com o FLARToolKit.
• Subpasta org:
• Código-fonte do FLARToolKit
contendo as classes
implementadas.
61
FLARToolKit
Componentes
Estrutura de Diretórios
• Diretório src - Subpasta examples e
org:
62
FLARToolKit
Componentes
Estrutura de Diretórios
• Raiz do Diretório do
FLARToolKit:
• Possui dois arquivos de
configuração para o projeto no
FlexBuilder
• .actionScriptProperties
• .project
• Facilitar a visualização e
• compilação do projeto
• FLARToolKit
63
FLARToolKit
Componentes
Criação de Marcadores no
FLARToolKIT
• Aplicativo chamado MarkerGenerator que
está disponível online em Marker Generator
Online
(http://flash.tarotaro.org/ar/MarkerGeneratorO
nline.swf)
• Detecção do marcador através de uma
câmera e permite salvar em disco o arquivo
referente ao marcador detectado;
• borda vermelha é gerada ao redor,
indicando que o marcador foi detectado,
permitindo ao usuário salvar as
•configurações em disco clicando no botão
Save Pattern.
64
FLARToolKit
Componentes
Criação de Marcadores no
FLARToolKIT
• O marcador da esquerda é perfeito,
enquanto o da direita poderia trazer
problemas devido ao seu formato
simétrico durante a rotação
65
FLARToolKit
Instalação e Configuração
66
FLARToolKit
Instalação e Configuração
Arquivos Fundamentais
NOME
FLARToolKit
2.5.4
DESCRIÇÃO
DOWNLOAD
Biblioteca do
http://www.libspark.org/wiki/saqoosha/FLART
FLARToolKit
oolKit/downloadlist
Kit de
desenvolvimento
http://www.adobe.com/cfusion/entitlement/ind
Flex SDK 4.1
para compilação
ex.cfm?e=flex4sdk
dos aplicativos
IDE para
FlashDevelop
http://www.flashdevelop.org/downloads/releas
desenvolvimento
3.3.1
es/FlashDevelop-3.3.1-RTM.exe
das aplicações
Java Virtual
Machine necessária
Java Runtime 6
http://www.java.com/pt_BR/download/
para execução do
FlashDevelop
67
FLARToolKit
Instalação e Configuração
Instalação dos Arquivos
• Extraír para um diretório de
preferência os arquivos FLARToolKit
2.5.4 e o Flex SDK 4.1.
• Instalar Java Runtime 6;
68
FLARToolKit
Instalação e Configuração
Instalação dos Arquivos
• Instalar o FlashDevelop
• Executar o arquivo FlashDevelop3.3.1-RTM.exe e clicar em Next;
• Desmarcar a opção Install Flex SDK
(será instalada manualmente) e clicar
em Next;
69
FLARToolKit
Instalação e Configuração
Instalação dos Arquivos
• Instalar o FlashDevelop (cont)
• Escolher o local onde será instalado e
clicar em Install;
• obs: aqui foi instalado no mesmo
diretório do FLARToolKit e o Flex
SDK;
70
FLARToolKit
Instalação e Configuração
Configuração da IDE
• Informar ao FlashDevelop o local do
Flex SDK para compilação dos
projetos:
• Abrir o menu Tools > Program
Settings ou apertar a tecla F10
71
FLARToolKit
Instalação e Configuração
Configuração da IDE
• Selecionar AS3Context nos plugins
e encontre a opção Flex SDK
Location no grupo Language:
Informar caminho do Flex SDK
Extraído
72
FLARToolKit
Instalação e Configuração
Instalação e Configuração
Finalizadas!!!
• Qualquer projeto Action Script 3
criado, aberto ou importado estará
pronto para ser compilado
73
FLARToolKit
Desenvolvendo Prático
74
FLARToolKit
Desenvolvendo Prático
• Criação e Configuração do Projeto:
– criar um novo projeto em qualquer diretório
• abrir o menu Project > New Project…
75
FLARToolKit
Desenvolvendo Prático
• Criação e Configuração do Projeto:
– Na seção Installed Templates, selecionar a opção AS3
Project, dar um nome ao projeto no campo de texto
Name e informar o local onde o projeto será
armazenado em Location. Se o local informado não
existir, marcar a opção Create directory for project
para criar o diretório
Clicar em OK
76
FLARToolKit
Desenvolvendo Prático
• Importação das Bibliotecas
– deverá ser importado o renderizador, por
exemplo, o Papervision3D, bem como o
FLARToolKit e o NyARToolKitAS3;
Criar um diretório para cada biblioteca na
pasta lib do projeto
Copiar o diretório src do FLARToolKit
obtido para o diretório do FLARToolKit do
projeto
77
FLARToolKit
Desenvolvendo Prático
• Importação das Bibliotecas
– deverá ser importado o renderizador, por
exemplo, o Papervision3D, bem como o
FLARToolKit e o NyARToolKitAS3;
O FLARToolKit traz consigo em seu
diretório libs o NyARToolKit e o
Papervision3D.
Para importar ambos para o projeto, basta
copiar seus respectivos src do
FLARToolKit em cada lugar
correspondente no projeto
78
FLARToolKit
Desenvolvendo Prático
• Importação das Bibliotecas
• Editar o classpath do projeto:
• informar ao FlashDevelop quais
bibliotecas importadas devem ser
utilizadas durante a compilação.
• Acessar o menu Project > Properties
da barra de menu;
• Selecionar a aba Classpaths;
• Selecionar a opção Add
Classpath;
• Informar, para cada biblioteca a
ser referenciada, o diretório src,
79
FLARToolKit
Desenvolvendo Prático
• Criação e Definição de uma Classe e seus
Atributos Fundamentais
– Existem algumas classes que são base para
realização de uma aplicação, algumas são
específicas da linguagem de programação,
outras do FLARToolKit ou do Papervision3D.
Cada uma destas classes será representada por
atributos do projeto.
80
PACOTE
CLASSE
DESCRIÇÃO
Flash
URLLoader
Carrega dados binários ou texto através de
uma URL informada. Utilizado para carregar
os parâmetros da câmera e marcador em uma
aplicação de RA
Flash
Stage
Flash
Flash
Flash
Camera
Bitmap
Video
Palco de exibição principal de conteúdo
gráfico
Webcam
Imagem capturada em mapa de bits
Video para exibição do conteúdo
Flash
Sprite
Nó para exibição de gráficos/conteúdo 3D
FLARToolKit
FLARRasterThresholdAnalyzer_SlidePTile
Analisa o nível de limiarização da imagem
FLARToolKit
FLARToolKit
FLARToolKit
FLARToolKit
FLARToolKit
FLARBaseNode
FLARCode
FLARTransMatResult
FLARSingleMarkerDetector
FLARParam
Container para o modelo 3D
Marcador detectado
Matriz de transformação
Detector de um único marcador
Parâmetros da câmera
FLARToolkit
FLARRgbRaster_BitmapData
Rasterizador RGB - utilizado para transformar
a imagem rgb para mapa de bits
Papervision3D
Viewport3D
Papervision3D
Papervision3D
Camera3D
Scene3D
Container para todo o conteúdo (modelo,
marcador, camera3D)
Câmera virtual
Cena virtual
Papervision3D
DAE
81
Modelo virtual do tipo COLLADA 1.4.1
Papervision3D
LazyRenderEngine
Renderizador Papervision3D
FLARToolKit
Desenvolvendo Prático
• Atividade Prática:
– Criar classe de nome ProjetoSimplesPapervision3D.
• Esta classe, do mesmo nome do projeto, será nada mais
que um Sprite para conteúdo/visualização de cenas 3D.
– Implementar nesta Classe:
• carregamento dos parâmetros de câmera e do marcador;
• configuração da câmera, vídeo e alguns componentes para
execução;
• tratamento da detecção do marcador
• Tratamento de falhas ou sucesso deste procedimento.
82
FLARToolKit
Desenvolvendo Prático
• Atividade Prática - Cont:
– Criar os seguintes métodos na classe
ProjetoSimplesPapervision3D:
• método carregar é responsável por iniciar a aplicação. Este recebe
três parâmetros: o primeiro é o arquivo referente aos parâmetros da
câmera, o segundo referente ao arquivo do marcador escolhido e o
terceiro ao arquivo para o modelo virtual tridimensional.
valores para altura e largura da tela de
apresentação e largura do marcador
criação da instância de um objeto do
tipo URLLoader responsável por
carregar os arquivos informados para
câmera, marcador e modelo
carregarParametrosCamera é chamado
83
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar os Métodos Responsáveis pelos Parâmetros da
Câmera:
• carregarParametrosCamera ()
– carregador de URL é informado para carregar os dados
binários do arquivo da câmera;
– um evento é adicionado pra chamar o método
onParametrosCameraCarregados quando for finalizado;
• onParametrosCameraCarregados ()
– Uma instância de FLARParam é criada e o método
loadARParam atribui os valores obtidos do arquivo da
câmera.
– O método changeScreenSize informa à instância sobre o
tamanho da tela apresentada ao usuário
– o método carregarMarcador é chamado;
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar os Métodos Responsáveis pelos Parâmetros da
Câmera:
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar os Métodos Responsáveis pelos Parâmetros da
Marcador:
• Método carregarMarcador ()
– funciona da mesma forma que carregarParametrosCamera;
– A única diferença é que o formato de dados informado para o
carregador de URL é do tipo texto e o método a ser chamado
após o carregamento do marcador é onMarcadorCarregado.
• Método onMarcadorCarregado ()
– uma instância de FLARCode é criada pra representar o
marcador recebendo como parâmetros a quantidade de divisões
em largura e altura para reconhecimento do símbolo interno do
marcador.
– O método loadARPatt atribui os dados obtidos do arquivo do
marcador para seus atributos.
– o método iniciar é chamado.
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar os Métodos Responsáveis pelos Parâmetros da
Marcador:
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
• Criar o Método Iniciar ():
Evento é adicionado na aplicação com o
objetivo chamar o método
onFrameCapturado para cada frame
apresentado na aplicação
Chama os métodos de configuração da
câmera, vídeo, Papervision3D e
FLARToolKit
Depois de configurados, é adicionado ao
stage uma instância de capturaBitmap da
classe Bitmap e uma instância de
viewport3D da classe Viewport3D
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar Método configurarWebcam ()
Método configurarWebcam():
• Tenta reconhecer a câmera - método
estático getCamera da classe Camera.
• Se a câmera foi detectada, esta é
configurada recebendo alguns parâmetros
no método setMode (largura e altura da
tela e frames/seg serão executados por
segundo.
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar Método configurarVideo ()
Método configurarVideo()
• Uma nova instância de Video é criada a
partir da largura e altura da tela.
• A instância camera é passada para vídeo,
via o método attachCamera, visando
mostrar as imagens da câmera na tela.
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar Método configurarPapervision3D ()
servir como base de apresentação do modelo virtual em cena
representa a cena virtual do ambiente
parâmetros da câmera
informações sobre altura e largura
Renderizador recebe os parâmetros criados
Carregar e setar o Modelo
Virtual na cena
Nome que identifica o modelo para futuro
acesso aos atributos do objeto DAE
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Método configurarPapervision3D ()
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar método configurarFLARToolKit ()
• Realizar a configuração dos componentes relacionados com o
FLARTollKit no aplicativo;
• É instanciado o analisador de limiarização para tratamento do
nível de limiarização do ambiente
(FLARRasterThresholdAnalyzer_SlidePTile);
• Instância para capturaBitmap das imagens da câmera, com
algumas configurações específicas, como largura e altura;
• são instanciados os objetos para detecção de um único marcador
(FLARSingleMarkerDetector), um rasterizador de imagens RGB
(FLARRgbRaster_BitmapData) e a matriz de transformação
(FLARTransMatResult)
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Método configurarFLARToolKit ()
FLARToolKit
Desenvolvendo Prático
• Atividade Prática – Cont:
– Criar método onFrameCapturado ():
• tratar o que será feito com cada frame processado na aplicação;
imagem capturada pela câmera é
apresentada na tela do usuário
Tratará de informar à aplicação
se o marcador foi detectado ou
não.
Se Positivo: a matriz de
transformação é calculada e
passada para a base do modelo
virtual (get e setTransformMatrix)
Caso Contrário, o tratamento do
nível de limiarização é feito e a
variável limiarizacao recebe o
novo valor calculado
FLARToolKit
Desenvolvendo Prático
• Compilação e Testes do Projeto
– A compilação do projeto gera um arquivo
swf no diretório bin. Este swf pode ser
executado em qualquer Flash Player
disponível;
– É preciso que o projeto tenha uma classe
que possua um método main()….
96
FLARToolKit
Desenvolvendo Prático
• Compilação e Testes do Projeto
– Criar a Classe e o Método main()
uma instância da classe
ProjetoSimplesPàpervision3D é
criada….
O método carregar () é chamado
passando os parâmetros de
câmera, marcador e modelo
para que seja possível visualizar a execução do
projeto, basta apenas adicionar esta instância
97
ao palco de apresentação da aplicação
FLARToolKit
Desenvolvendo Prático
• Execução do Projeto Criado…
98
FLARToolKit
Novas Funcionalidades
99
FLARToolKit
Novas Funcionalidades
• Classes e Métodos para Interações
– Para se criar interações no ambiente
virtual do FLARToolKit é necessário a
criação de uma classe proprietária
que extenda a classe Sprite
responsável pela exibição de gráficos
ou modelos 3D utilizados na cena;
– Exemplo: classe de interação
InteracaoSimplesPaperVision3D
100
FLARToolKit
Novas Funcionalidades
• Classes e Métodos para Interações
– A partir deste ponto, criar um método
de nome iniciar() (p.ex.)
• recebe como parâmetro o
FLARBaseNode que é um container para
o modelo 3D e o Stage de exibição
principal de conteúdo gráfico;
• Adicionar ao Stage um evento que será
disparado toda vez que uma ação for
gerada por um dispositivo, como p.ex. o
teclado;
101
FLARToolKit
Novas Funcionalidades
• Classes e Métodos para Interações
– Ao ser gerado o evento este deverá
estar associado a um método que irá
tratar o evento.
102
FLARToolKit
Novas Funcionalidades
• Classes e Métodos para Interações
– Alterar o método iniciar() da classe
do ProjetoSimplesPapervision3D
• Acrescentar o método
configurarInteracoes():
– Criar a instância da classe de interação
– chamada ao método iniciar() visando passar
como parâmetro para a classe de interação a
baseModelo e o stage;
103
FLARToolKit
Novas Funcionalidades
• Classes e Métodos para Interações
Método iniciar() da classe do
ProjetoSimplesPapervision3D
Adicionar a chamada ao método
configurarInteracoes() no método
iniciar() da classe do
ProjetoSimplesPapervision3D
Criar a instância da classe de
interação
chamada ao método iniciar()
visando passar como parâmetro
para a classe de interação a
104
baseModelo e o stage
FLARToolKit
Novas Funcionalidades
• Acrescentar as Interações:
– processo de implementação de interações
diretas com a cena via algum evento gerado
por um dispositivo, como teclado, mouse ou
luvas de dados, esta seção irá apresentar
como criar interações básicas do tipo
translação, rotação e escala dos objetos
virtuais para os eixos x, y e z;
– a classe KeyboardEvent será utilizada
durante a captura destes comandos e no
auxílio do reconhecimento sobre o que foi
digitado
105
FLARToolKit
Novas Funcionalidades
• Acrescentar as Interações
– criar uma classe básica que estende a
classe sprite (responsável por permitir a
visualização de conteúdo 3D), como por
exemplo, a classe
InteracaoSimplesPapervision3D
106
FLARToolKit
Novas Funcionalidades
• Acrescentar as Interações
Receber os parâmetros referentes
ao nó base do modelo virtual
e o stage, utilizado pela aplicação
Eventos de teclado são
capturados a cada tecla
pressionada pelo usuário e o
método verificarAcoes é chamado
107
FLARToolKit
Novas Funcionalidades
• Acrescentar as Interações
– método verificarAcoes()
Analisar cada tecla acionada pelo usuário…
Tecla ressionada: Escape, Left, Up, Rigth, Down, Numpad_Add (+),
Numpad_Subtract (-), Insert, Delete, Home, End, Page_Up ou
Page_Down.
108
FLARToolKit
Novas Funcionalidades
Nome associado ao modelo no
Método configurarPapervision3D ()
• Acrescentar as Interações
– Tecla Escape pressionada:
Os atributos do objeto virtual
serão reiniciados com os
valores originais recebidos no
início da aplicação
Pela instância de baseModelo e usando o
método getChildByName é possível ter
acesso ao modelo virtual e aos eixos x, y e z
bem como escala e rotações – Faz uma
109
busca pelo nome “modelo”;
FLARToolKit
Novas Funcionalidades
• Acrescentar as Interações
Para os eixos x e y:
Teclas UP, LEFT, RIGHT e
DOWN
Para o eixo z:
CTRL + UP e CTRL +
DOWN
110
FLARToolKit
Novas Funcionalidades
• Acrescentar as Interações
Operação de Escala
teclas NUMPAD_+ e NUMPAD_aumentando ou diminuindo seu
valor
111
FLARToolKit
Novas Funcionalidades
• Acrescentar as Interações
Interações de Rotação nos
eixos x, y e z
teclas HOME e END (rotação
no eixo X),
PAGE_DOWN e DELETE
(rotação no eixo Z),
PAGE_UP e INSERT (rotação
no eixo Y)
112
FLARToolKit
Novas Funcionalidades
• A classe de interações está
concluída.
• Para testar seu funcionamento, basta
compilar e abrir, no browser, o
arquivo swf gerado no diretório bin.
Depois coloque o marcador definido
no projeto na frente da câmera.
113
Projeto WARGen
Web Augmented Reality Generator
WARGEN
• Gerador de Aplicações em Realidade Aumentada
para Web
114
Projeto WARGen
Web Augmented Reality Generator
Objetivos Gerais
Disponibilizar um Gerador de
Aplicativos em Realidade
Aumentada na Web
Fornecer uma interface
amigável e intuitiva para o
usuário
115
Projeto WARGen
Web Augmented Reality Generator
Objetivos Específicos
Disponibilizar login e senha para os usuários
Possibilitar envio de arquivos (modelos, marcadores)
Possibilitar download dos arquivos enviados
Possibilitar associação modelo/marcador
Possibilitar associação de interações
Possibilitar visualização de associações
116
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Projeto WARGen
Web Augmented Reality Generator
Obrigado!
177