Introdução à utilização de openFrameworks para o desenvolvimento de aplicações de RVA

3
Introdução à utilização
de openFrameworks
para
o desenvolvimento de
aplicações de RVA
Claudio Kirner1 and Christopher S. Cerqueira12
1Federal University of Itajubá – Universidade Federal de Itajubá (UNIFEI)
2National Institute for Space Research – Instituto Nacional de Pesquisas Espaciais (INPE)
1ckirner@gmail.com ,2christophercerqueira@gmail.com
1http://realidadevirtual.com.br/, 2http://cscerqueira.com.br
openFrameworks

Autores:
Christopher Shneider Cerqueira – é graduado na Universidade Federal de Itajubá e
pesquisador da área de realidade virtual e aumentada desde 2009, atuando no
desenvolvimento de aplicações baseadas em ARToolKit, para o desenvolvimento de
ferramentas de autoria de realidade aumentada com cross-reality. É um dos
desenvolvedores da ferramenta de autoria comportamental basAR. Atualmente é aluno
de pós-graduação do INPE desenvolvendo um sistema de simulação de satélites
distribuídos com visualização em realidade virtual.
Claudio Kirner – é graduado em Engenharia Elétrica pela Universidade de São Paulo
(1973), mestre em Engenharia Eletrônica pelo Instituto Tecnológico de Aeronáutica (1978),
doutor em Engenharia de Sistemas e Computação pela Universidade Federal do Rio de
Janeiro (1986) e Pós-doutor pela University of Colorado at Colorado Springs – UCCS (1993-
1995). Atualmente é Professor Adjunto na Universidade Federal de Itajubá (UNIFEI). Tem
experiência em Realidade Virtual e Realidade Aumentada, Interação Humano-Computador,
Ambientes Colaborativos e educação à Distância. Coordenou o I Workshop de Realidade
Virtual, em 1997, e o I Workshop de Realidade Aumentada, em 2004, e outros
subsequentes. Orientou 30 alunos de mestrado e 8 de doutorado; coordenou Projetos
CNPq, FAPESP, RHAE e FAPEMIG; publicou cerca de 270 artigos científicos e 40 livros e
capítulos.
Dúvidas: christophercerqueira@gmail.com 4

http://imasters.com.br/artigo/9817/software/analise-do-teste-de-software-parte-02/
5

http://lang-index.sourceforge.net/
7

Overview
• Atividades de 4h
• Você vai aprender
– Conceitos básicos de design.
– openFrameworks básico.
• Estrutura de arquivos.
• Compilar exemplos.
• Como criar um projeto básico e modificá-lo.
• Utilizar complemento de biblioteca de modelos.
• Utilizar complemento de biblioteca de RA.
9

INTRODUÇÃO
Experiência, interação, desenvolvimento criativo
10

“The product is no longer the
basis of value. The experience
is.”
Venkat Ramaswamy
The Future of Competition
11

Valor de uma boa experiência
12

IHC – Interação Homem-Computador
• Estudo da interação entre pessoas e computadores.
• Onde são formadas as experiências.
13

Mas quem desenvolve experiência?
• UX Developer – User Experience
– A pessoa que caminha entra o design e a
tecnologia.
http://blog.alexandremagno.net/2013/02/o-que-seria-um-ux-developer/
14

Interação
15
Texto, som,
cores, visual,
mecânico ou
fisico.
Interface
Mensagens
Usuário Sistema

Exemplo:
• Usabilidade:
1. Facilidade de
aprendizado
2. Eficiência
3. Facilidade de
memorização
4. Erros
5. Satisfação subjetiva
16
Meta-
Mensagens
Usuário Sistema

3 níveis
Lógico: Resolvem, solucionam,
facilitam.
Emocional: Satisfazem
necessidades e desejos
afetivos.
Visceral: resolvem questões
fundamentais, sem
consciência.
Impulso.
17

Processing
Adobe Flash
Unity
Cinder
openFrameworks
20

OPENFRAMEWOKS
O que é. Requisitos. Onde encontrar. Expansões. Exemplos.
21

oF
• Criado para artistas e designers
• Desenvolvido por: Zach Liberman, Theo
Watson, Artuno Castro e Chris O’Shea
• Proposta: Arrumar a falta de comunicação
entre diversas bibliotecas em C++, e permitir
portabilidade.
• Escrita em C++
• Licença: MIT (educacional e venda)
23

utilizar oF quando:
• O projeto renderiza muitos gráficos 3D, e/ou;
• Utilizar muita visão computacional, e/ou;
• Controlar equipamentos, como, por exemplo,
o ARDUINO.
24

Libs no pacote padrão
• OpenGL, GLEW, GLUT, libtess2 e cairo para
gráficos.
• rtAudio, PortAudio ou FMOD e Kiss FFT para
entrada, saída e análise de áudio.
• FreeType para fontes.
• FreeImage para salvar e carregar imagens.
• Quicktime e videoInput para playback e aquisição
de vídeo.
• Poco, que contém uma variedade de utilidades.
25

Página Principal – openframeworks.cc
27

Requisitos (deste tutorial)
VC2010E
oF
ofxARToolKitplus
28

Visual Studio C++ 2010 Express
29

Procedimento de teste
1. Descompacte a pasta do oF
2. Entre na pasta exemplos
3. Escolha algum (dos 100)
4. Entre na solução (.sln)  Abrir no VC2010E
5. Escolha Release e depois Build
31

• Descompactar
• Entrar na Solução
32

• Resultado de compilação esperado
34

• Funcionamento do exemplo pointPicker
35

Componentes da Comunidade
• http://ofxaddons.com/
36

Expansões
• Animation: animação de elementos simples.
• Bridges: bridges são formas de adicionar elementos de outros frameworks,
adaptando a interface de dados para o oF.
• Computer Vision: rotinas de rastreio, usando openCV e Kinect.
• Graphics: rotinas para renderizar elementos na tela.
• GUI: componentes para criar interfaces com usuário.
• Hardware Interface: rotinas de acesso a vários hardwares.
• iOS: rotinas específicas para desenvolvimento e utilização dos recursos do iOS.
• Machine Learning: rotinas de inteligência artificial.
• Physics: rotinas de processamento de física, colisão, etc.
• Sound: rotinas e wrappers de bibliotecas para tratamento e execução de áudio.
• Typography: rotinas para manipulação de texto.
• Utilities: rotinas diversas para manipulação com o computador, sistema
operacional e outros recursos.
• Video/Camera: rotinas e wrappers de bibliotecas para tratamento e execução de
vídeo e dados de câmera (incluindo Kinect e openNI).
• Web/Networking: rotinas para interconexão de sistemas, HTTP, FTP, JSON, SSL, etc. 37

ofxARToolKitPlus
• fishkingsin
38

CASO 1: O EXEMPLO VAZIO!
o exemplo vazio para explorar a estrutura de arquivos do oF, a utilização
do gerador automático e a organização do código.
39

Level Easy: Gerador Automático
41

Estrutura lógica do projeto no
VC2010E
43

main.cpp ... Onde tudo começa
#include "ofMain.h"
#include "testApp.h"
#include "ofAppGlutWindow.h"
//========================================================================
int main( ){
ofAppGlutWindow window;
ofSetupOpenGL(&window, 1024,768, OF_WINDOW);// <--- setup the GL context
// this kicks off the running of my app
// can be OF_WINDOW or OF_FULLSCREEN
// pass in width and height too:
ofRunApp( new testApp());
}
44

testApp.h ... OO classe principal
#pragma once
#include "ofMain.h"
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
void keyPressed (int key);
void keyReleased(int key);
void mouseMoved(int x, int y );
void mouseDragged(int x, int y, int button);
void mousePressed(int x, int y, int button);
void mouseReleased(int x, int y, int button);
void windowResized(int w, int h);
void dragEvent(ofDragInfo dragInfo);
void gotMessage(ofMessage msg);
};
45

testApp.cpp ... Métodos.
#include "testApp.h"
void testApp::setup(){ }
void testApp::update(){ }
void testApp::draw(){ }
void testApp::keyPressed(int key){ }
void testApp::keyReleased(int key){ }
void testApp::mouseMoved(int x, int y ){ }
void testApp::mouseDragged(int x, int y, int button){ }
void testApp::mousePressed(int x, int y, int button){ }
void testApp::mouseReleased(int x, int y, int button){ }
void testApp::windowResized(int w, int h){ }
void testApp::gotMessage(ofMessage msg){ }
void testApp::dragEvent(ofDragInfo dragInfo){ }
46

Modificando o básico
// testApp.cpp
void testApp::setup(){
mensagem = "Hello SVR2013!!!";
raio = 0;
}
void testApp::draw(){
ofSetColor(ofColor::blue);
ofCircle(x_i,y_i,raio);
ofSetColor(ofColor::red);
ofDrawBitmapString(mensagem,mouseX,mouseY);
}
// testApp.cpp
void testApp::mouseDragged(int x, int y, int
button){
raio = ofDist(x_i,y_i,x,y);
}
void testApp::mousePressed(int x, int y, int
button){
x_i = x;
y_i = y;
}
void testApp::mouseReleased(int x, int y, int
button){
raio = ofDist(x_i,y_i,x,y);
}
// testApp.h
...
string mensagem;
int x_i,y_i;
float raio;
...
48

CASO 2: MODELOS, CÂMERA E
AÇÃO!
exemplo com modelos 3D para explorar a utilização de bibliotecas de
modelos 3D e de controle de câmera.
49

• Gerar o projeto no Gerador Automático,
colocando o add-on ofxAssimp.
– Inserindo modelos
– Manipulação de câmera
50

Inserindo Modelos
• biblioteca Assimp
• Open Asset Import Library
– C++, sob licença BSD (C# e Python)
– Carrega vários formatos: Collada, Blender, 3DS
Max, AutoCad, Ogre, Quakes, Valve, Unreal e
DirectX X
– No site do Assimp, tem um viewer que facilita
descobrir se vai funcionar o modelo na biblioteca:
AssimpViewer
51

Lets code ... No testApp.h
// testApp.h
#pragma once
#include "ofxAssimpModelLoader.h"
#include "ofMain.h"
// Não apagar o que já tinha
ofxAssimpModelLoader model;
};
// testApp.cpp
ofBackground(50, 0);
if( !model.loadModel("astroBoy_walk.dae", false) )
ofSystemAlertDialog("Erro no arquivo");
glEnable(GL_DEPTH_TEST);
glShadeModel(GL_SMOOTH);
}
ofSetColor(255);
ofPushMatrix();
ofTranslate(ofGetWidth()/2,
ofGetHeight()/2+100,0);
model.drawFaces();
ofPopMatrix();
}
53

Copiar o modelo
• Copiar o modelo:
– astroBoy_walk.dae
– boy_10.tga (textura)
• do exemplo
<of>examplesaddonsassimpExamplebindata
54

Manipulando o modelo - ofEasyCam
• Componente de manipulação de câmera.
56

Lets code...
// testApp.h
#pragma once
#include "ofMain.h"
...
ofEasyCam cam;
}; // testApp.cpp
ofSetColor(255);
cam.begin();
model.drawFaces();
cam.end();}
57

CASO 3: AUMENTANDO A
REALIDADE!
exemplo com RA para explorar a utilização de add-ons adicionais.
58

Definição atual
Uma definição mais atualizada é: realidade
aumentada é uma interfacebaseada na
sobreposição de informações virtuais geradas por
computador (envolvendo imagens estáticas e
dinâmicas, sons espaciais e sensações hápticas)
com o ambiente físico do usuário, percebida
através de dispositivos tecnológicos e usando as
interações naturais do usuário, no mundo físico.
(KIRNER 2011)
61

Informação virtual
Interação Natural
dispositivos tecnológicos
62

Frameworks
Marcador
• ARToolKit (C) – 90´s
• NYARToolKit (Java, C#, C++,
Android)
• AndAR (Android)
• FLARToolKit (AS3)
Sem marcador
• OpenCV - Multiplataforma
• PTAMM (C++)
64

Ferramentas de Autoria
basAR FLARAS
65

Marcadores
ARToolKit
• HITLab
• Compara templates.
• Template marker detection
• Mais lento
• Inviável em SW embarcado.
ARToolKitPlus
• Graz University of
Technology
• Compara códigos
• ID-Encoded marker
detection
• Mais rápido
• Bom para SW embarcado.
66

Voltando ao mundo real
• openFrameworks + ARToolKitPlus.
• Add-on ofxARToolKitPlus.
• Descompactá-lo e salvar dentro de
<of>/addons
• Renomear, retirando o sufixo -master
71

• Utilizar o gerador automático e gerar com os
seguintes add-nos:
• ofxARToolKitPlus
• ofxOpenCv (necessário para o
ofxARToolKitPlus)
• ofxAssimpModelLoader
72

Ajustando o projeto - caminhos
1. Configuration Properties  Linker
GeneralAdditional Library Directories e
inclua o caminho para a biblioteca, no caso:
......addonsofxARtoolkitPluslibsARToolKit
Pluslibwin32
73

Ajustando o projeto - lib
1. Configuration Properties  Linker Input 
Additional Dependencies incluir a lib:
ARToolKitPlus.lib
74

Lets code...
// testApp.cpp
#pragma once
#include "ofMain.h"
#include "ofxOpenCv.h" //Cabeçalho do OpenCV
#include "ofxARToolkitPlus.h" //Cabeçalho do ARToolKitPlus
...
int width, height; // Tamanho da janela da câmera
ofVideoGrabber vidGrabber; // Componente do oF que pega a câmera.
ofxARToolkitPlus artk; // Instância do ARToolKitPlus
int threshold; // Threshold da relação preto/branco
ofxCvColorImage colorImage; //imagem capturada pela câmera
ofxCvGrayscaleImage grayImage; //imagem em tons de cinza (mais rápida)
ofxCvGrayscaleImage grayThres;//imagem com threshold antes de ir pro artk
};
75

Configurando – testApp::setup()
//--------------------------------------------------------------
ofSetWindowShape(1280,480); // Ajusta o tamanho da aplicação
width = 640; height = 480; // largura e altura da imagem da câmera
vidGrabber.initGrabber(width, height); // reserva buffer da câmera
colorImage.allocate(width, height); // reserva imagem colorida
grayImage.allocate(width, height); // reserva imagem mono
grayThres.allocate(width, height); // reserva imagem ajustada
artk.setup(width, height); // inicia o ARToolKitPlus
threshold = 85; // threshold para a imagem ajustada
artk.setThreshold(threshold); // informa ao ARToolKitPlus que o ajuste
é externo
}
76

Rastreio - testApp::update()
//--------------------------------------------------------------
void testApp::update(){
vidGrabber.grabFrame();
// Pega frame da câmera
bool bNewFrame = vidGrabber.isFrameNew();// é um frame novo
if(bNewFrame) { // se um frame novo
/pega os pixels do buffer da câmera e armazena
colorImage.setFromPixels(vidGrabber.getPixels(), width, height);
grayImage = colorImage; //converte a imagem para mono
//Como queremos testar o threshold temos que gerar essa imagem
grayThres = grayImage;
grayThres.threshold(threshold);
//Passa para o ARToolKitPlus a imagem monocromática
artk.update(grayImage.getPixels());
}
} 77

Exibindo - testApp::draw() – p1
//--------------------------------------------------------------
ofSetColor(ofColor::white); // inicia a cor dos objetos como branca
colorImage.draw(0, 0); // exibe a imagem capturada colorida
grayThres.draw(640, 0); // exibe a imagem adaptada
artk.draw(640, 0); // Esta função exibe a posição e etiqueta o
marcador
// ARTK 3D
artk.applyProjectionMatrix(); // primeiro passo é aplicar a matriz de
projeção da camera
int numDetected = artk.getNumDetectedMarkers(); //detectar os marcadores
ofEnableAlphaBlending();
//habilitar a transparência
78

Exibindo - testApp::draw() – p2
for(int i=0; i<numDetected; i++) { // marcadores encontrados
artk.applyModelMatrix(i); //matriz de perspectiva do marcador
//Local onde colocar o conteúdo 3D do marcador
// neste exemplo é uma pilha de retângulos.
ofNoFill();
ofEnableSmoothing();
ofSetColor(255, 255, 0, 50);
for(int i=0; i<10; i++) {
ofRect(-25, -25, 50, 50);
ofTranslate(0, 0, i*1);
}
}
}
79

Alterando o threshold -
testApp::keyPressed(int key)
//--------------------------------------------------------------
void testApp::keyPressed(int key){
if(key == OF_KEY_UP) {
artk.setThreshold(++threshold); // aumenta o valor do threshold
} else if(key == OF_KEY_DOWN) {
artk.setThreshold(--threshold); // diminui o valor do threshold
} else if(key == 's') {
vidGrabber.videoSettings(); // chama a configuração da câmera
}
}
80

Adicionando conteúdo
• Adicionar o modelo via
ofxAssimpModelLoader
• Reutilizar o modelo do exemplo anterior.
82

Só adicionar o Assimp
#pragma once
#include "ofMain.h"
#include "ofxOpenCv.h"
#include "ofxARToolkitPlus.h"
...
ofxCvGrayscaleImage grayThres;
};
83

Setup e Draw...
• //--------------------------------------------------------------
• void testApp::setup(){
• ...
• if( !model.loadModel("astroBoy_walk.dae", false) ) // Abre o arquivo
• ofSystemAlertDialog("Erro em carregar arquivo");
• }
84

//--------------------------------------------------------------
// ARTK 3D
...
for(int i=0; i<numDetected; i++) { // marcadores encontrados
...
//Local onde colocar o conteúdo 3D do marcador
//pilha de retângulos.
// Modelo 3D
ofSetColor(255); // Configura a cor do objeto
ofPushMatrix(); // Abre o contexto
glEnable(GL_DEPTH_TEST); // habilita profundidade
ofScale(0.1,0.1,0.1); // ajusta escala
ofRotateX(-90); // rotaciona 90 graus
model.drawFaces(); / desenha as faces
glDisable(GL_DEPTH_TEST); // desabilita profundidade
ofPopMatrix(); // fecha o contexto
}
}
85

• Apresentar um ferramental, de desenvolvimento
multi-plataforma baseado em C++, chamado
openFrameworks.
• Apresentou-se dois casos introdutórios, para
explicar o framework e sua estrutura e o uso de
elementos adicionais, no caso o uso da biblioteca
Assimp, chamados add-on, finalizando com um
exemplo de construção de ambientes de
realidade aumentada utilizando uma biblioteca
similar ao ARToolKitPlus.
88

• Como contribuição, esperamos que este
ferramental auxilie no desenvolvimento de
aplicações mais criativas e de desenvolvimento
veloz, com:
– Codificação C++ portável
– Facilidade de acesso a hardware
– Múltiplos componentes prontos disponíveis pela
comunidade
– Facilidade de acesso ao disco
– Facilidade de comunicação
– Facilidade de uso de áudio e vídeo.
89

• Como sugestão de livro e aprofundamento,
aconselhamos o livro Programming
Interactivity da O´Reilly e os tutoriais do site
do openFrameworks.
90

91
Introdução à utilização de
openFrameworks para
o desenvolvimento de aplicações
de RVA
Claudio Kirner1 and Christopher S. Cerqueira12
1Federal University of Itajubá – Universidade Federal de Itajubá (UNIFEI)
2National Institute for Space Research – Instituto Nacional de Pesquisas Espaciais (INPE)
1ckirner@gmail.com ,2christophercerqueira@gmail.com
1http://realidadevirtual.com.br/, 2http://cscerqueira.com.br
Dúvidas: christophercerqueira@gmail.com

Introdução à utilização de openFrameworks para o desenvolvimento de aplicações de RVA

Mais conteúdo relacionado

Semelhante a Introdução à utilização de openFrameworks para o desenvolvimento de aplicações de RVA (20)

Mais de Christopher Cerqueira (20)

Introdução à utilização de openFrameworks para o desenvolvimento de aplicações de RVA