1. 1

2. 2

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

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

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

6. 6

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

8. 8

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

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

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

12. Valor de uma boa experiência
12

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

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

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

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

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

18. Espera.... Visceral?
18

19. 19

20. Processing
Adobe Flash
Unity
Cinder
openFrameworks
20

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

22. openframeworks.cc
22

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

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

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

26. C++ Portável!!!!
26

27. Página Principal – openframeworks.cc
27

28. Requisitos (deste tutorial)
VC2010E
oF
ofxARToolKitplus
28

29. Visual Studio C++ 2010 Express
29

30. 1
2
30

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

32. • Descompactar
• Entrar na Solução
32

33. • Release e compilar
12
33

34. • Resultado de compilação esperado
34

35. • Funcionamento do exemplo pointPicker
35

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

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

38. ofxARToolKitPlus
• fishkingsin
38

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

40. Estrutura de Arquivos
40

41. Level Easy: Gerador Automático
41

42. Escolhendo expansões
42

43. Estrutura lógica do projeto no
VC2010E
43

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

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

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

47. Compilando
47

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

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

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

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

52. AssimpViewer
52

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

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

55. Resultado
55

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

57. Lets code...
// testApp.h
#pragma once
#include "ofxAssimpModelLoader.h"
#include "ofMain.h"
class testApp : public ofBaseApp{
...
ofxAssimpModelLoader model;
ofEasyCam cam;
}; // testApp.cpp
void testApp::draw(){
ofSetColor(255);
cam.begin();
model.drawFaces();
cam.end();}
57

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

59. Realidade Aumentada
59

60. 60

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

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

63. 63

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

65. Ferramentas de Autoria
basAR FLARAS
65

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

67. ARToolKit
67

68. ARToolKitPlus
68

69. 69

70. 70

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

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

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

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

75. Lets code...
// testApp.cpp
#pragma once
#include "ofMain.h"
#include "ofxOpenCv.h" //Cabeçalho do OpenCV
#include "ofxARToolkitPlus.h" //Cabeçalho do ARToolKitPlus
class testApp : public ofBaseApp{
...
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

76. Configurando – testApp::setup()
//--------------------------------------------------------------
void 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

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

78. Exibindo - testApp::draw() – p1
//--------------------------------------------------------------
void testApp::draw(){
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

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

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

81. Resultado esperado
81

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

83. Só adicionar o Assimp
#pragma once
#include "ofMain.h"
#include "ofxOpenCv.h"
#include "ofxARToolkitPlus.h"
#include "ofxAssimpModelLoader.h"
class testApp : public ofBaseApp{
...
ofxCvGrayscaleImage grayThres;
ofxAssimpModelLoader model;
};
83

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

85. //--------------------------------------------------------------
void testApp::draw(){
// 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

86. 86

87. FINALIZANDO
87

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

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

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

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

92. 92