Desenvolvendo um Ambiente Virtual em Realidade Aumentada para Web com FLARToolKit

Post on 11-Feb-2016

20 views 0 download

description

Desenvolvendo um Ambiente Virtual em Realidade Aumentada para Web com FLARToolKit. Robson Siscoutto – robson.siscoutto@unoeste.br Faculdade de Informática de Presidente Prudente – FIPP Universidade do Oeste Paulista - UNOESTE Levrangeles da Silva Filho - levrangeles@gmail.com - PowerPoint PPT Presentation

Transcript of 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 – robson.siscoutto@unoeste.brFaculdade de Informática de Presidente Prudente – FIPP

Universidade do Oeste Paulista - UNOESTE

Levrangeles da Silva Filho - levrangeles@gmail.comFaculdade 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

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 de Transformação:••

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

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/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

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

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/

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

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

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

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

76

FLARToolKit Desenvolvendo Prático

Clicar em OK

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

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

77

FLARToolKit Desenvolvendo Prático

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

FLARToolKit Desenvolvendo Prático

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

FLARToolKit Desenvolvendo Prático

• 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

FLARToolKit Desenvolvendo Prático

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

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.

83

FLARToolKit Desenvolvendo Prático

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;

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 ():

FLARToolKit Desenvolvendo Prático

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

FLARToolKit Desenvolvendo Prático

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

FLARToolKit Desenvolvendo Prático

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

FLARToolKit Desenvolvendo Prático

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

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;

FLARToolKit Desenvolvendo Prático

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

FLARToolKit Desenvolvendo Prático

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

97

FLARToolKit Desenvolvendo Prático

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

FLARToolKit Desenvolvendo Prático

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

104

FLARToolKit Novas Funcionalidades

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

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

107

FLARToolKit Novas Funcionalidades

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

FLARToolKit Novas Funcionalidades

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

FLARToolKit Novas Funcionalidades

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

• Acrescentar as Interações

110

FLARToolKit Novas Funcionalidades

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

RIGHT e DOWN

Para o eixo z:CTRL + UP e CTRL

+ DOWN

• Acrescentar as Interações

111

FLARToolKit Novas Funcionalidades

Operação de Escala

teclas NUMPAD_+ e NUMPAD_- aumentando ou diminuindo seu valor

• Acrescentar as Interações

112

FLARToolKit Novas Funcionalidades

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

FLARToolKit Novas Funcionalidades

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í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

Projeto WARGen Web Augmented Reality Generator

Projeto WARGen Web Augmented Reality Generator

Páginal Inicial

Projeto WARGen Web Augmented Reality Generator

Páginal Inicial

Projeto WARGen Web Augmented Reality Generator

Tela para Login no Sistema

Projeto WARGen Web Augmented Reality Generator

Tela para Login no Sistema

Projeto WARGen Web Augmented Reality Generator

Tela para Login no Sistema

Projeto WARGen Web Augmented Reality Generator

Tela Inicial com Usuário Autenticado

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela para Seleção de Arquivo para Envio

Projeto WARGen Web Augmented Reality Generator

Tela para Seleção de Arquivo para Envio

Projeto WARGen Web Augmented Reality Generator

Tela para Seleção de Arquivo para Envio

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos com Modelo Selecionado

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos com Modelo Selecionado

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos com Modelo Selecionado

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos com Modelo Selecionado

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

Tela Modal para Envio de Arquivos

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

Tela com Lista de Arquivos Enviados (Marcadores, Modelos)

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

Projeto WARGen Web Augmented Reality Generator

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

177

Obrigado!