Desenvolvendo um Ambiente Virtual em Realidade Aumentada para Web com FLARToolKit

1

Desenvolvendo um Ambiente Virtual em Realidade Aumentada

para Web com FLARToolKit

Robson Siscoutto – [email protected] de Informática de Presidente Prudente – FIPP

Universidade do Oeste Paulista - UNOESTE

Levrangeles da Silva Filho - [email protected] de Ciência e Tecnologia - FATEC

Universidade de Cuiabá (UNIC)

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•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)

ARToolKit

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]

•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

FLARToolKit

6


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









8


Capturar a Imagem da Câmera:•

• A imagem capturada pela

• câmera é obtida

9









10


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


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




Criar o Mapa de Bits da Imagem limiarizada





13


Detectar os Marcadores:••

• Possíveis marcadores são detectados após análise

do mapa de bits criado anteriormente

14









15


Identificar os Marcadores Detectados:••

• O FLARToolKit realiza a identificação dos marcadores detectados

16



• A informação de cada marcador é

armazenada, extraindo 50% da imagem gerada na detecção a partir do centro

17



• A informação de cada marcador é

armazenada, extraindo 50% da imagem gerada na detecção a partir do centro

18


Identificar os Marcadores Detectados:•• A informação de cada

marcador é armazenada, extraindo 50% da imagem gerada na detecção a partir do centro

19


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





21





22





23





24





25





26





27





28





29





30





31





32





33





34





35





36





37





38




gerando um valor de 0 a 1. Quanto mais próximo de 1, maior a confiança na detecção

39





40





41





42





43





44





45




gerando um valor de 0 a 1. Quanto mais próximo de 1, maior a confiança na detecção

46









47


Calcular a Matriz de Transformação:••

48









49


Posicionar e Renderizar os Objetos Virtuais:••

50


51

FLARToolKit Componentes

52


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


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


Bibliotecas e Dependências

• bibliotecas externas para renderização de objetos virtuais 3D:• Away3D;• Papervision3D (nossa escolha)

55


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


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


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


Estrutura de Diretórios• Diretório resources

• Pasta Data• marcadores Fiduciais: o hiro-

marker.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


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


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


Estrutura de Diretórios

• Diretório src - Subpasta examples e org:

62


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


Criação de Marcadores no FLARToolKIT

• Aplicativo chamado MarkerGenerator que está disponível online em Marker Generator Online (http://flash.tarotaro.org/ar/MarkerGeneratorOnline.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

http://flash.tarotaro.org/ar/MarkerGeneratorOnline.swf




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


Arquivos Fundamentais

67

NOME DESCRIÇÃO DOWNLOADFLARToolKit

2.5.4Biblioteca do FLARToolKit

http://www.libspark.org/wiki/saqoosha/FLARToolKit/downloadlist

Flex SDK 4.1

Kit de desenvolvimento para compilação dos aplicativos

http://www.adobe.com/cfusion/entitlement/index.cfm?e=flex4sdk

FlashDevelop 3.3.1

IDE para desenvolvimento

das aplicações

http://www.flashdevelop.org/downloads/releases/FlashDevelop-3.3.1-RTM.exe

Java Runtime 6

Java Virtual Machine necessária para execução do

FlashDevelop

http://www.java.com/pt_BR/download/


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


Instalação dos Arquivos• Instalar o FlashDevelop

• Executar o arquivo FlashDevelop-3.3.1-RTM.exe e clicar em Next;

• Desmarcar a opção Install Flex SDK (será instalada manualmente) e clicar em Next;

69


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


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


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


73

Instalação e Configuração Finalizadas!!!

• Qualquer projeto Action Script 3 criado, aberto ou importado estará pronto para ser compilado

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


• 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

76


Clicar em OK

• Importação das Bibliotecas– deverá ser importado o renderizador, por

exemplo, o Papervision3D, bem como o FLARToolKit e o NyARToolKitAS3;

77


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

• Importação das Bibliotecas– deverá ser importado o renderizador, por

exemplo, o Papervision3D, bem como o FLARToolKit e o NyARToolKitAS3;

78


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

• Importação das Bibliotecas

79


• 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,

• 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


81

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 Palco de exibição principal de conteúdo gráfico

Flash Camera WebcamFlash Bitmap Imagem capturada em mapa de bitsFlash Video 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 FLARBaseNode Container para o modelo 3DFLARToolKit FLARCode Marcador detectadoFLARToolKit FLARTransMatResult Matriz de transformação FLARToolKit FLARSingleMarkerDetector Detector de um único marcadorFLARToolKit FLARParam Parâmetros da câmera

FLARToolkit FLARRgbRaster_BitmapData Rasterizador RGB - utilizado para transformar a imagem rgb para mapa de bits

Papervision3D Viewport3D Container para todo o conteúdo (modelo, marcador, camera3D)

Papervision3D Camera3D Câmera virtualPapervision3D Scene3D Cena virtual

Papervision3D DAE Modelo virtual do tipo COLLADA 1.4.1

Papervision3D LazyRenderEngine Renderizador Papervision3D

• 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


• 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.

83


valores para altura e largura da tela de apresentação e largura do marcadorcriaçã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

• 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;



Câmera:



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.



Marcador:


• 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

Depois de configurados, é adicionado ao stage uma instância de capturaBitmap da classe Bitmap e uma instância de viewport3D da classe Viewport3D

Chama os métodos de configuração da câmera, vídeo, Papervision3D e FLARToolKit

• 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.

• 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.

• 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

• Atividade Prática – Cont:– Método configurarPapervision3D ()


• 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)


• Atividade Prática – Cont:– Método configurarFLARToolKit ()


• 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

Caso Contrário, o tratamento do nível de limiarização é feito e a variável limiarizacao recebe o

novo valor calculado

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)

• 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


• Compilação e Testes do Projeto– Criar a Classe e o Método main()

97


uma instância da classe ProjetoSimplesPàpervision3D é

criada….

O método carregar () é chamado passando os parâmetros de câmera, marcador e modelopara que seja possível visualizar a execução do

projeto, basta apenas adicionar esta instância ao palco de apresentação da aplicação

• Execução do Projeto Criado…

98


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


• 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


• 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


• 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


• Classes e Métodos para Interações

104


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

Adicionar a chamada ao método configurarInteracoes() no método

iniciar() da classe do ProjetoSimplesPapervision3D

Método iniciar() da classe do ProjetoSimplesPapervision3D

• 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


• 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


• Acrescentar as Interações

107


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

• Acrescentar as Interações– método verificarAcoes()

108


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.

• Acrescentar as Interações– Tecla Escape pressionada:

109


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 busca pelo nome “modelo”;

Nome associado ao modelo no Método configurarPapervision3D ()


110


Para os eixos x e y:Teclas UP, LEFT,

RIGHT e DOWN

Para o eixo z:CTRL + UP e CTRL

+ DOWN


111


Operação de Escala

teclas NUMPAD_+ e NUMPAD_- aumentando ou diminuindo seu valor


112


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)

• 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


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


Objetivos EspecíficosDisponibilizar 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



Páginal Inicial


Tela para Login no Sistema


Tela Inicial com Usuário Autenticado


Tela com Lista de Arquivos Enviados (Marcadores, Modelos)


Tela Modal para Envio de Arquivos


Tela para Seleção de Arquivo para Envio


Tela Modal para Envio de Arquivos com Modelo Selecionado


Tela Modal para Envio de Arquivos Após Envio de Arquivo


Tela Modal para Envio de Arquivos


Tela Modal para Envio de Arquivos Após Envio de Arquivo


Tela com Lista de Associações (Marcador - Modelo)


Tela Modal para Associação (Modelo – Marcador)


Tela com Lista de Associações (Marcador - Modelo)


Aplicação em Execução – Permissão de Acesso a Camera


Aplicação em Execução – Objeto Virtual Posicionado na Cena

177

Obrigado!

Desenvolvendo um Ambiente Virtual em Realidade Aumentada para Web com FLARToolKit

Documents

Transcript of Desenvolvendo um Ambiente Virtual em Realidade Aumentada para Web com FLARToolKit