Chapter

1
Introduo utilizao de openFrameworks para o desenvolvimento de aplicaes de RVA
Christopher Shneider Cerqueira e Claudio Kirner

Abstract Virtual and augmented reality interactive applications development requires tools that easy and accelerates the coding time through the reuse of components. The openFrameworks is an example of tool oriented to reuse. This chapter shows the context of openFramework use and this type of tool-framework, with the exploration of three examples: one basic to explain the structure, one using additional components and the third to develop an augmented reality environment. Resumo Desenvolvimento de aplicaes interativas de realidade virtual e aumentada requer ferramentais que facilitem e acelerem o tempo de codificao atravs do reuso de componentes. O openFrameworks um exemplo deste tipo de ferramental. Neste captulo mostrado o contexto de utilizao e outros exemplos de frameworks, a explorao de trs exemplos: um bsico para explicar a estrutura, um utilizando componentes adicionais e o terceiro desenvolvendo um ambiente de realidade aumentada.

1.1. Introduo
O desenvolvimento de sistemas interativos nem sempre apenas uma atividade de codificao para cientistas da computao ou engenheiros. Artistas, professores, designer e estudantes dos mais variados segmentos podem se interessar em criar interaes que satisfaam as suas necessidades de apresentao ou coleta de dados, focando em aplicaes que possam parecer extremamente high-tech ou utilizar metforas de interao mais parecidas com o ambiente temtico onde ser implantado. Este captulo descreve em breves linhas, um roteiro de desenvolvimento desde a explicao de conceitos bsicos de desenvolvimento interativo e criativo, os cenrios atuais de alguns frameworks e a motivao de reutilizar componentes de cdigo livre. Passa por uma explicao estrutural e dinmica do funcionamento do openFrameworks

(oF), mostrando o que possvel e o papel importante da comunidade de desenvolvimento. O exemplo ilustrado, passo a passo, mostra como gerar um novo exemplo, partindo para a utilizao de alguns componentes interessantes como o ofxAssimp, um wrapper da biblioteca ASSIMP [1] que permite a utilizao de vrios formatos de modelos tridimensionais, o ofxEasyCam, da biblioteca do openFrameworks que permite fcil interao de movimentao de elementos 3D da cena e por fim utilizao do componente ofxARToolKitPlus, um wrapper do ARToolKitPlus [2], para criao de ambientes de realidade aumentada [3], como mostrado na Figura 1.

Figura 1. oF em criao de ambientes de realidade aumentada.

Nota-se que o oF muito mais que este pequeno exemplo, contudo para fins ilustrativos e introdutrios foi escolhido este roteiro. 1.1.2. Conceitos bsicos de desenvolvimento criativo e interativo Desenvolvimento criativo e interativo focado primariamente na interao, criando aplicaes que o usurio realize interaes diretamente de forma mas natural e envolvente. O usurio necessita de uma boa experincia de forma que o valor agregado do seu sistema seja atingido. Atualmente tem-se utilizado a terminologia de Desenvolvedor de Experincia com Usurio, ou UX Developer do Ingls User Experience Developer [4], como a maneira de denominar o profissional, ou equipe, que no desenvolve apenas interfaces com o usurio, mas capaz de determinar experincias de uso, neste so necessrios o conhecimento de frentes multidisciplinares como psicologia, antropologia, sociologia, semitica, epistemologia, historia, etc. [5]. O Desenvolvedor de Experincia colhe o design da meta-mensagem alvo e a recobre pela interface que contm a tecnologia para realizar a interao [6]. Mas o que interao? Qual a sua natureza? Interao pode ser definida como a troca de informao entre dois ou mais atores. Como um desenvolvedor de interao, necessrio entender o que o usurio quer, qual ambiente ele est inserido, quais os fatores culturais para definir como ele vai entrar com dados, e como espera que o sistema responda. Interao no se trata de uma atividade unidirecional com o sistema, trata-se da transformao do sistema num sistema reativo [7] que responde aos estmulos do usurio. Um exemplo de atividade unidirecional a transmisso de televiso, este simplesmente um sinal transmitido se o usurio est ou no escutando, e ocorre no seu prprio tempo. A televiso digital tem inserido controles, que podem

retroceder, adicionar legendas ou informaes. Estes controles introduzem interao a um sistema que era unidirecional, mudando substancialmente a maneira como a experincia de uso ocorre, agora a televiso ocorre no tempo do usurio, centrada nas suas expectativas e necessidades. Interao ocorre atravs das trocas bidirecionais de mensagens entre o sistema e o usurio. Estas podem ser texto, voz, cores, imagens, respostas ou entradas mecnicas. O mais difcil de criar interaes entender como o sistema v as mensagens do usurio e como os usurios veem as mensagens do sistema. Para ilustrar esta dificuldade pense na maneira que duas pessoas conversam; a comunicao entre eles foi calcada em anos de estudo (treinamento), aprendendo a linguagem, formas de interao. Quando um sistema aumenta a complexidade da sua interao mais coisas podem dar errado. Para isso o desenvolvedor deve tentar antecipar as experincias. A interface que cobre as mensagens e uma parte importante em comunicar a interao. A interface o meio entre o usurio e o sistema, este diz o que possvel e o que no possvel, o que eficiente ou no e a emoo da interao. Ter uma interface funcional, expressiva e atrativa importante para tornar a interao agradvel ao usurio. Interaes tem um vocabulrio, assim como a nossa comunicao. O usurio deve entender a ao que realiza e saber que o sistema entende que a ao realizada tem um significado e realizar a atividade esperada. Interaes podem envolver: manipulao fsica, entrada de cdigos, manipulao de mouse, reconhecimento de presena, local ou imagem, interfaces hpticas e de toque, gestos ou reconhecimento de voz. Cada uma destas modalidades de interao tem suas propriedades e caractersticas, que devem ser analisadas. Finalizando, a tarefa ou objetivo facilitar a interao homem-sistema, seja essa para visualizao de dados, organizar-se, criar experincias, permitir colaborao entre usurios, controlar mecanismos e experimentos, criar ambientes ou contar uma narrativa. 1.1.3. Cenrio atual dos frameworks Existem varias formas de desenvolver interao criativamente, neste momento sero revistos alguns ferramentais (frameworks) mais conhecidos como Processing, Flash, Unity, cinder e o openFrameworks. Processing um framework desenvolvido para Java. uma ferramenta opensource e tem um forte apelo educacional. baseada em programao via cdigo e possibilita a utilizao de openGL. possvel conectar bibliotecas Java para complementar as aplicaes e aumentar as possibilidades. Uma das vantagens a fcil exportao de projetos para web. Processing est disponvel em: http://processing.org/ Adobe Flash uma possibilidade bem conhecida para desenvolvimento criativo, baseado em ActionScript. muito utilizado por ter uma estrutura familiar com ferramentas de design como o Photoshop e Illustrator. A IDE de desenvolvimento da Adobe paga, contudo existe a opo do Flash Builder, pois esta grtis para estudantes e professores. Flash completamente exportvel para web, porem isso impacta na performance e no acesso a hardware quando comparado a outras

tecnologias. Flash Buider est disponvel em: http://www.adobe.com/products/flashbuilder-family.html Unity um motor de jogos, grtis para desenvolvimento em Windows e pago para dispositivos mveis, e como motor de jogos permite desenvolvimento com grafo de cena, editor de nveis, etc. A programao pode ser realizada em C#. No opensource, mas deve ser considerado depende do projeto. Unity est disponvel em: http://unity3d.com/ Cinder um ferramental open-source e cross-plataform disponvel para Mac, iOS e Windows. A programao baseada em C++ e possui diversos elementos prontos: como manipulao 3D, udio, vdeo, rede, processamento de imagem, etc. Cinder est disponvel em: http://libcinder.org/features/ openFrameworks um ferramental open-source e cross-plataform disponvel para Mac, Linux, Windows, Android e iOS. A programao baseada em C++ e isso permite uma liberdade, que num ponto dificulta o iniciante, mas em contrapartida possibilita a utilizao da criatividade para qualquer aplicao. Possui uma gama de componentes criados pela comunidade facilitando o reuso alm dos elementos prontos como: manipulao 3D, udio, vdeo, rede, processamento de imagem, etc. openFrameworks est disponvel em: http://www.openframeworks.cc/

1.2. oF openFrameworks
oF uma coleo de cdigos criados para ajudar em uma determina atividade, ou framework. Alguns frameworks so criados para trabalhar com banco de dados, outros para controle de Internet. oF um framework que, em tese, foi criado para artistas e designers trabalharem com design interativo. Contudo, a atividade no simples, pois requer conhecimento em C++, uma linguagem forte e poderosa, porm complexa. Como a base da codificao em C++, este um framework que permite muita flexibilidade e acesso a hardware. oF desenvolvido principalmente por Zach Liberman, Theo Watson, Artuno Castro e Chris OShea e hoje recebe colaboraes da comunidade. oF nasceu do desconforto da falta de comunicao entre diversas bibliotecas em C++, que no falavam a mesma lngua. Deve-se considerar utilizar oF quando: O projeto renderiza muitos grficos 3D, e/ou; Utilizar muita viso computacional, e/ou; Controlar equipamentos, como, por exemplo, o ARDUINO. oF inclui uma srie de bibliotecas, como: OpenGL, GLEW, GLUT, libtess2 e cairo para grficos. rtAudio, PortAudio ou FMOD e Kiss FFT para entrada, sada e anlise de udio. FreeType para fontes. FreeImage para salvar e carregar imagens. Quicktime e videoInput para playback e aquisio de vdeo. Poco, que contm uma variedade de utilidades.

O cdigo foi bem escrito para ser compatvel com vrias arquiteturas e vrios ambientes de desenvolvimento, no momento de escrita deste captulo eram suportados cinco sistemas operacionais (Windows, OSX, Linux, iOS e Android) e quatro IDEs

(XCODE, Code::Blocks, Visual Studio e Android). Deve-se ainda ressaltar que opensource distribudo utilizando a Licena MIT [8]. 1.2.1. Requisitos para desenvolvimento Neste captulo utilizaremos como exemplo o sistema operacional Windows, utilizando a IDE/Compilador do Visual Studio C++ 2010 Express (VC2010E). Assim necessrio fazer o download e instalao do VC2010E, fazer o download do oF correspondente e o add-on do ARToolKitPlus. O oF fornece os tutoriais para cada sistema operacional e ambiente de desenvolvimento na pgina: http://www.openframeworks.cc/download/ Para este exemplo, devem ser realizados o download do oF (verso 0.7.4 no momento de escrita deste captulo) para Visual Studio 2010 (Seta 1 na Figura 2) e da realizao da configurao do ambiente de desenvolvimento com o tutorial (Seta 2 na Figura 2).

Figura 2. Download do openFrameworks.

Caso no queira seguir o tutorial do ambiente de desenvolvimento o link para o VC2010E o seguinte: http://www.microsoft.com/visualstudio/en-us/products/2010editions/visual-cpp-express Tendo o oF e o VC2010E instalados, faa um teste inicial, descompacte a pasta em algo semelhante Figura 3:

Figura 3. Exemplo de caminho para desenvolvimento.

Para testar um exemplo e validar o ambiente de desenvolvimento v pasta de exemplo, pasta de 3D, exemplo pointPickerExample e faa duplo click no arquivo pointPickerExample.sln. Como ilustrado na Figura 4.

Figura 4. Projeto do VC2010E.

Como ilustrao do uso no VC2010E, pode-se gerar o executvel em verso Release ou Debug, selecione a verso Release (Seta 1 na Figura 5) e com o boto direito clique em Solution pointPickerExample no Solution Explorer (Seta 2 na Figura 5) e selecione Build Solution. Este procedimento deve compilar o oF e o exemplo. Gerando o seguinte resultado de compilao como na Figura 6 e o exemplo da execuo na Figura 7. Nota-se que todas as dlls necessrias para so copiadas para a pasta bin.

Figura 5. Procedimento para compilar.

Figura 6. Resultado esperado da compilao.

Figura 7. Exemplo do funcionamento.

1.2.1.1. Componentes da Comunidade Uma das vantagens do oF o fato da comunidade poder desenvolver componentes ou funcionalidades que possam ser inseridas no oF. Estes componentes so chamados de add-ons. A pgina oficial (http://ofxaddons.com/) de contribuies do oF est dividindo os add-ons nos seguintes seguimentos: Animation: animao de elementos simples, como posicionar e movimentar na tela. Bridges: bridges so 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 usurio. Hardware Interface: rotinas de acesso a vrios hardwares.

iOS: rotinas especficas para desenvolvimento e utilizao dos recursos do iOS. Machine Learning: rotinas de inteligncia artificial. Physics: rotinas de processamento de fsica, coliso, etc. Sound: rotinas e wrappers de bibliotecas para tratamento e execuo de udio. Typography: rotinas para manipulao de texto. Utilities: rotinas diversas para manipulao com o computador, sistema operacional e outros recursos. Video/Camera: rotinas e wrappers de bibliotecas para tratamento e execuo de vdeo e dados de cmera (incluindo Kinect e openNI). Web/Networking: rotinas para interconexo de sistemas, HTTP, FTP, JSON, SSL, etc.

Para o exemplo, faa o download do add-on do ofxARToolKitPlus do fishkingsin como indicado na Figura 8, pois o mesmo o mais atualizado (Last updated: 30 January, 2013). Salve numa pasta conhecida. Sugesto: colocar na mesma pasta que o oF.

Figura 8. Link para download do ofxARToolKitPlus.

1.3. Desenvolvendo exemplos

Com os requisitos prontos (oF para Visual Studio, VC2010E e ofxARToolKitPlus) possvel explorar um roteiro para explicar o funcionamento e tentar suavizar a curva de aprendizado. O roteiro ser dividido em trs casos, com incremento de dificuldade: Caso 1: o exemplo vazio para explorar a estrutura de arquivos do oF, a utilizao do gerador automtico e a organizao do cdigo. Caso 2: exemplo com modelos 3D para explorar a utilizao de bibliotecas de modelos 3D e de controle de cmera. Caso 3: exemplo com RA para explorar a utilizao de add-ons adicionais.

1.3.1. Caso1: O exemplo vazio Descompactando o oF, temos uma srie de pastas que contm a estrutura do oF, como visto na Figura 9.

Figura 9. Estrutura das pastas do oF.

De cima para baixo temos os seguintes itens: Pasta addons: contm os add-ons que estendem o oF. Para adicionar um novo add-on basta salva-lo nesta pasta. Geralmente o add-on inicia-se com as letras ofx; Pasta apps: local sugerido para salvar os projetos de desenvolvimento; Pasta examples: contm diversos exemplos (100) dos recursos do oF, separados pelas temticas: 3d, add-ons, communication, events, gl, graphics, math, sound, utils e video; Pasta export: contm as dlls que so exportadas para a pasta de execuo durante a montagem/compilao; Pasta libs: contm as bibliotecas estticas dos componentes que fazem parte do oF. Algumas bibliotecas para serem livre determinam que a aplicao s pode usar a verso da biblioteca dinmica, neste caso apenas os includes (.h) esto nesta pasta; Pasta other: contm um exemplo de cdigo para comunicao com ARDUINO; Pasta projectGenerator: contm o gerador de projeto que facilita a montagem do projeto. Cada distribuio de oF contem um gerador de projeto para a arquitetura/IDE desejada; Pasta script: contm scripts para facilitar o funcionamento, este diferencia para cada distribuio do oF; Arquivos changes.txt e license.md: contm uma listagem das principais alteraes e da licena de uso.

1.3.1.1. O gerador automtico projetos Uma das grandes dificuldades montar o projeto para a IDE e resolver todas as dependncias de add-ons, para resolver este problema o oF disponibiliza um gerador automtico de projetos. Ele se encontra dentro da pasta projectGenerator no caminho do oF. A utilizao da interface bem simples, contendo campos para nomear o projeto, qual o endereo (para o gerador criar o projeto com todos os endereos relativos corretamente), a plataforma do gerador e quais os add-ons, como na Figura 10.

Figura 10. Pagina inicial do projectGenerator.

Clicando em Addons abre-se um novo menu pedindo para selecionar os add-ons desejados. Para este caso deixaremos todos os add-ons sem seleo, como na Figura 11, e retornar para o menu anterior.

Figura 11. Menu para escolher add-ons do projectGenerator.

OBS.: Em alguns casos houve problema de compilar, isso ocorreu devido ao caminho do oF ou do projeto conter espaos e se o oF e o projeto esto em HD separados. Para gerar o projeto, por exemplo, na pasta <of>/apps/myApps/ clique em GENERATE PROJECT. Na pasta gerada, colocada a estrutura para o desenvolvimento utilizando a IDE/SO desejado, no caso VC2010E no Windows. Neste, o projeto o <of>/apps/myApps/caso1/caso1.sln.

1.3.1.2. Estrutura lgica dos arquivos de projeto Abrindo o projeto, no Solution Explorer esto dois projetos, o do caso1 e do openFrameworks. Na maioria dos casos no necessrio modificar o oF, mas se necessrio requerido uma recompilao. Expandindo os diretrios do caso1, na pasta com os fontes (src) existem trs arquivos, que so o bsico do funcionamento do oF: main.cpp, testApp.cpp e o testApp.h, como na Figura 12.

Figura 12. Estrutura do projeto no VC2010E.

O arquivo main.cpp o ponto inicial, contendo o int main(). Neste arquivo no necessrio nenhuma modificao. Porm interessante explicar a funo ofRunApp(). Esta funo responsvel por alocar a classe que contm os mtodos padres para o funcionamento: testApp.h. Esta classe herda da classe virtual ofBaseApp o formato e mtodos virtuais que devem ser implementados para ser compatvel com o esperado pela ofRunApp. A Figura 13 mostra o cdigo do arquivo main.cpp.
#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()); }

Figura 13. Cdigo fonte do main.cpp.

O arquivo de cabealho testApp.h, a implementao concreta da classe virtual ofBaseApp, com as definies concretas dos mtodos, como mostrado na Figura 14.
#pragma once #include "ofMain.h" class testApp : public ofBaseApp{

public: void setup(); void update(); void draw(); void void void void void void void void void }; keyPressed (int key); keyReleased(int key); mouseMoved(int x, int y ); mouseDragged(int x, int y, int button); mousePressed(int x, int y, int button); mouseReleased(int x, int y, int button); windowResized(int w, int h); dragEvent(ofDragInfo dragInfo); gotMessage(ofMessage msg);

Figura 14. testApp.h inicial para o caso1.

Os mtodos so implementado no arquivo fonte testApp.cpp. O gerador automtico cria os mtodos sem contedo, como na Figura 15, adaptada.
#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){ }

Figura 15. testApp.cpp inicial para o caso1.

Os desenvolvedores de openGL esto acostumados com esta diviso de mtodos, que separam em apenas uma funo os procedimentos de controle e desenho da janela e nos outros mtodos so realizadas a gerencia dos dados. O mtodo void testApp::setup() chamado no incio do programa, e nele so colocadas todas as inicializaes do programa, por exemplo, se tem que ler algum arquivo com as definies do programa, se tem que configurar qual o contedo da barra de ttulo ou inicializar variveis. O mtodo void testApp::update() chamado sempre que a aplicao no estiver ocupada resolvendo a exibio. Nesta, por exemplo, so chamadas as

funes de captura e anlise de uma cmera, requisies de status de hardware, atualizao de conexo, etc. O mtodo void testApp::draw() chamado para realizar o desenho da janela, apenas esta funo pode abrir contextos de exibio. Lembrando que assim como o openGL o ponto 0,0 o canto superior esquerdo e o incrementa-se o valor de X no sentido esquerda direita e incrementa-se o valor de Y no sentido superior inferior. O mtodo void keyPressed(int key) e void keyReleased(int key) so relacionados utilizao do teclado como forma de interao, o primeiro chamado quando uma tecla pressionada e o segundo quando todas as teclas (se mais de uma) forem liberadas. Os mtodos tem como parmetro de entrada o cdigo da tecla. O arquivo <of>/libs/openFrameworks/utils/ofConstants.h contm os cdigos das teclas. Os mtodos void mouseMoved(int x, int y ), void mouseDragged(int x, int y, int button), void mousePressed(int x, int y, int button) e void mouseReleased(int x, int y, int button) tratam a utilizao do mouse como forma de interao, o primeiro chamado no caso onde ocorrer um arraste do mouse, no momento que ele liberado, o segundo chamado quando um boto do mouse apertado e o terceiro quando os botes (se mais de um) forem liberados. Os mtodos tem como parmetro de entrada a posio x, y na tela da aplicao e qual o boto apertado. O mtodo void windowResized(int w, int h) chamado quando ocorrer um redimensionamento da tela, este mtodo til para adaptar o contedo da tela para o redimensionamento, por exemplo: ajustando a orientao, posicionamento e exibio de contedo. O mtodo void dragEvent(ofDragInfo dragInfo) chamado quando algo de fora da aplicao arrastado para dentro do contexto. utilizado, por exemplo, quando se deseja arrastar uma figura para a aplicao. O mtodo recebe como parmetro de entrada a nova largura (w - weight) e a nova altura (h height). O mtodo void gotMessage(ofMessage msg) chamado quando uma mensagem de algum bloco da aplicao pede ateno.

Compilando o programa gerado na pasta /bin do projeto o programa caso1.exe com as dlls necessrias para execuo, como mostrado na Figura 16a e o resultado da execuo na Figura 16b.

(a)

(b)

Figura 16. (a) pasta bin com arquivos copiados e gerados; (b) executando o exemplo vazio.

Para fechar o Caso1, modificaremos o programa para exibir uma mensagem que segue o mouse, e quando clicar na tela desenhar um crculo de raio regulvel pelo arrasto do mouse. Criar as variveis na classe testApp.h, como na Figura 17:
... string mensagem; int x_i,y_i; float raio; ...

Figura 17. testApp.h para o caso1 modificado.

Para este teste, basta preencher os mtodos setup para inicializar a mensagem e o raio inicio, preencher o mousePressed para salvar a posio inicial do mouse, e mouseDragged para mudar o raio de acordo com o arraste e finalizar o valor do arraste em mouseReleased. No mtodo draw foi colocado para imprimir um circulo da cor azul, no ponto onde o mouse foi criado com o raio do arraste, e em vermelho a mensagem seguindo os valores do mouse, como na Figura 18.
//-------------------------------------------------------------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); } //-------------------------------------------------------------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); }

Figura 18. testApp.cpp para o caso1 modificado.

1.3.2. Caso2: Adicionando modelos 3D e controle de cmera Este caso trata o uso de um modelo 3D manipulado pelo add-on ofxAssimp e pelo controle de visualizao via a cmera ofEasyCam. Incialmente deve-se gerar o projeto utilizando o projectGenerator, coloca-se o nome caso2 e escolhe o add-on ofxAssimp. Para separar o processo, dividiremos em duas etapas, insero do modelo 3D e depois da manipulao:

1.3.2.1. Inserindo modelos 3D. O oF fornece na distribuio uma add-on para utilizao da biblioteca Assimp. Esta biblioteca foi desenvolvida em C++, sob licena BSD, e possui bindings para outras linguagens, como C# e Python. E a vantagem de utilizao desta lib a possibilidade de carregar vrios formatos de modelos 3D, utilizando-os de maneira semelhante. Alguns exemplos de tipos de modelos possveis so: Collada, Blender, 3DS Max, AutoCad, Ogre, Quakes, Valve, Unreal e DirectX X. O site do Assimp disponibiliza para download um AssimpViewer e este pode ser utilizado para testar se o modelo e o tipo desejado funcionam. Para este exemplo foi utilizado um dos modelos do exemplo da biblioteca Assimp, mas poderia ser realizado o download de um modelo 3D no formato Collada do repositrio 3D do Google (http://sketchup.google.com/3dwarehouse/). O modelo antes de ser utilizado pode ser testado utilizando o aplicativo AssimpViewer, como visto na Figura 19.

Figura 19. Modelo visualizado no assimpViewer.

O projeto do oF j est preparado para procurar os caminhos da biblioteca ofxAssimpModelLoader. O primeiro passo para inserir o modelo 3D no oF no arquivo testApp.h criar uma varivel do tipo afxAssimpModelLoader e o include da biblioteca, como na Figura 20.
#pragma once #include "ofxAssimpModelLoader.h" #include "ofMain.h" class testApp : public ofBaseApp{ // No apagar o que j tinha ofxAssimpModelLoader model; };

Figura 20. testApp do caso2 com a instancia do modelo.

O segundo passo realizar a carga do modelo no mtodo setup() e no mtodo draw() fazer a chamada do modelo, posicionando-o no centro da janela, como visto no cdigo da Figura 21 e o Resultado na Figura 22.
//-------------------------------------------------------------void testApp::setup(){ ofBackground(50, 0);//Configura o fundo // Abre o arquivo if( !model.loadModel("astroBoy_walk.dae", false) ) ofSystemAlertDialog("Erro em carregar arquivo"); // configuraes do openGL glEnable(GL_DEPTH_TEST); glShadeModel(GL_SMOOTH); //some model / light stuff } //-------------------------------------------------------------void testApp::draw(){ ofSetColor(255);// Configura a cor do objeto ofPushMatrix();// Abre o contexto do openGL ofTranslate(ofGetWidth()/2,ofGetHeight()/2+100,0); //model.drawWireframe();// desenha o wireframe model.drawFaces();// desenha as faces //model.drawVertices();// desenha os vrtice ofPopMatrix();// fecha o contexto do openGL }

Figura 21. testApp.cpp com os mtodos setup() e draw() preenchidos.

Figura 22. Resultado do caso2.

1.3.2.2. Manipulando o modelo O oF disponibiliza um componente de manipulao de cmera, chamado ofEasyCam. Este componente um facilitador de visualizao 3D, permitindo orbitar e dar zoom com o arrasto do mouse com o boto esquerdo ou o direito apertado, respectivamente. Para utilizar o ofEasyCam deve-se criar na classe testApp.h um atributo do tipo ofEasycam, e no mtodo draw() abrir e fechar o contexto da EasyCam, como mostrados na Figura 23 e Figura 24.
#pragma once #include "ofxAssimpModelLoader.h" #include "ofMain.h"

class testApp : public ofBaseApp{ ... ofxAssimpModelLoader model; ofEasyCam cam; };

Figura 23. testApp.h do caso2 com EasyCam.

//-------------------------------------------------------------void testApp::draw(){ ofSetColor(255);// Configura a cor do objeto cam.begin();// Abre o contexto da cmera //model.drawWireframe();// desenha o wireframe model.drawFaces();// desenha as faces //model.drawVertices();// desenha os vrtice cam.end();// fecha o contexto da cmera }

Figura 24. testApp.cpp do caso2 com EasyCam no mtodo draw().

1.3.3. Caso3: Juntando dois mundos Para o desenvolvimento de RA possvel criar um rastreador de caracterstica com alguma metodologia, seja ela usando openCV ou algum derivado, para rastreio de caractersticas naturais, ou utilizar o rastreio de marcadores. Est disponvel para o oF um wrapper do ARToolKitPlus, inicialmente desenvolvido pelo grupo da Graz University of Technology [2] como uma alternativa ao ARToolKit desenvolvido pelo HITLab [9]. O ARToolKitPlus, foi feliz em alguns aspectos, dentre eles a velocidade de rastreio, pois ao invs da anlise realizada em todo a rea de cdigo do marcador, validando o seu contedo, apenas algum pontos numa matriz de 6x6 so rastreados para identificar o marcador. Este tipo de marcador tem um cdigo, ou ID, caracterstico e implcito. Este tipo de tcnica chamado de ID-encoded marker detection enquanto o do ARToolKit chamado template marker detection. Para este caso, ser explorado o exemplo dado pelo ofxARToolKitPlus, porm com a criao inicial do projeto e depois com a insero do cdigo, e com a utilizao do modelo 3D adicionado no caso 2 como exemplo de contedo virtual. O procedimento ser dividido em duas partes, desenvolvimento da infraestrutura, relacionamento do real com o virtual atravs do rastreio de marcadores, e depois da insero do modelo 3D. 1.3.3.1. Desenvolvendo infraestrutura O primeiro passo descompactar o ofxARToolKitPlus e salva-lo dentro de <of>/addons. Ele vem com o sufixo master. Este sufixo deve ser apagado, deixando apenas o nome principal. O primeiro passo para o desenvolvimento criar o projeto, atravs do projectGenerator. Para este caso, devem ser marcado os add-ons ofxOpenCv, ofxAssimpModelLoader e o ofxARToolKitPlus. De forma a repetir o procedimento, nomeia-se este projeto como caso3. O projeto vem incompleto, sem as definies de biblioteca esttica do oxARToolKitPlus. Para incluir, deve-se entrar nas propriedades do projeto (caso3), Configuration Properties Linker GeneralAdditional Library Directories e inclua o caminho para a biblioteca, no caso:

..\..\..\addons\ofxARtoolkitPlus\libs\ARToolKitPlus\lib\win32 E em Configuration Properties Linker Input Additional Dependencies incluir a lib: ARToolKitPlus.lib O ARToolKitPlus utiliza o openCV, por isso deve ser adicionado tambm. Como os outros casos, no arquivo testApp.h deve ser adicionado os includes necessrios e as variveis. Neste exemplo, utilizamos o rastreio de cmera do prprio oF, necessrio instanciar a classe do ARToolKitPlus, e as variveis de processamento de imagem do openCV. O cabealho testApp.h est na Figura 25.
#pragma once #include "ofMain.h" #include "ofxOpenCv.h" #include "ofxARToolkitPlus.h" class testApp : public ofBaseApp{ public: void setup(); void update(); void draw(); void void void void void void void void void keyPressed (int key); keyReleased(int key); mouseMoved(int x, int y ); mouseDragged(int x, int y, int button); mousePressed(int x, int y, int button); mouseReleased(int x, int y, int button); windowResized(int w, int h); dragEvent(ofDragInfo dragInfo); gotMessage(ofMessage msg); //Cabealho do OpenCV //Cabealho do ARToolKitPlus

int width, height; ofVideoGrabber vidGrabber; ofxARToolkitPlus artk; int threshold; ofxCvColorImage colorImage; ofxCvGrayscaleImage grayImage; ofxCvGrayscaleImagegrayThres; };

// Tamanho da janela da cmera // Componente do oF que pega a cmera. // Instncia do ARToolKitPlus // Threshold da relao preto/branco //imagem capturada pela cmera //imagem em tons de cinza (mais rpida) //imagem com threshold antes de ir pro artk

Figura 25. testApp.h do caso3 com carregador de vdeo e ARToolKitPlus.

No caso 3 sero necessrios o preenchimento de quatro mtodos do arquivo fonte testApp.h O primeiro mtodo chamado o setup(), sero configurados a janela, o tamanho da imagem, alocado na memria o local para armazenar o buffer de aquisio da cmera, e das etapas de processamento de imagem, inicializado o ARToolKitPlus (neste

caso utilizando calibrao e marcadores padro), o ARToolKitPlus faz o threshold automtico, mas para fins de mostrar o resultado, neste exemplo, ficar manual. O mtodo setup() est ilustrado na Figura 26.
//-------------------------------------------------------------void testApp::setup(){ ofSetWindowShape(1280,480);// Ajusta o tamanho da aplicao width = 640; height = 480;// largura e altura da imagem da cmera vidGrabber.initGrabber(width, height);// reserva espao para o buffer da cmera colorImage.allocate(width, height);// reserva espao para a imagem colorida grayImage.allocate(width, height); // reserva espao para a imagem mono grayThres.allocate(width, height); // reserva espaco para a imagem ajustada artk.setup(width, height); // inicia o ARToolKitPlus com valores padro

threshold = 85; // threshold para a imagem ajustada artk.setThreshold(threshold);// informa ao ARToolKitPlus que o ajuste externo }

Figura 26. Mtodo setup() do testApp.h do caso3.

O mtodo update() realiza as leitura da cmera, o processamento da imagem, e envia a imagem monocromtica para o ARToolKitPlus realizar o rastreio. A Figura 27 contm o cdigo do mtodo update();
//-------------------------------------------------------------void testApp::update(){ vidGrabber.grabFrame();// Pega frame da cmera bool bNewFrame = vidGrabber.isFrameNew();// configura que um frame novo if(bNewFrame) {// se um frame novo /pega os pixels do buffer da cmera 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 monocromtica artk.update(grayImage.getPixels()); } }

Figura 27. Mtodo update() do testApp.h do caso3.

A exibio da camada virtual junto com a real filmada realizada no mtodo draw(). Neste exemplo foi dividida a exibio em duas imagens, a principal com a sobreposio e a imagem adaptada para exemplificar o rastreio. As imagens so exibida pela funo draw() da imagem, antes de cada uma necessrio indicar a cor branca, seno a janela fica de acordo com a ltima cor. A imagem colorida usa a colorImage.draw() e a adaptada grayThres.draw(). Como em RA o contedo virtual sempre sobrescreve o contedo real filmado, inicialmente devem ser exibidas as duas imagens. Para mostrar qual o marcador foi encontrado utilizado a funo draw do ARToolKitPlus. Para detectar os marcadores necessrio aplicar a matriz de projeo da cmera. Para cada marcador encontrado aplicado um modelo 3D, no exemplo um

empilhamento de retngulos ajustados para matriz de perspectiva do marcador da lista de marcadores encontrados. A Figura 28 contm o cdigo do mtodo draw().
//-------------------------------------------------------------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 funo exibe a posio e etiqueta o marcador // ARTK 3D artk.applyProjectionMatrix();// primeiro passo aplicar a matriz de projeo da camera int numDetected = artk.getNumDetectedMarkers(); //detectar os marcadores ofEnableAlphaBlending();//habilitar a transparncia for(int i=0; i<numDetected; i++) { // passar por todos os marcadores encontrados artk.applyModelMatrix(i); //aplicar a matriz de perspectiva do marcador //Local onde colocar o contedo 3D do marcador // neste exemplo uma pilha de retngulos. ofNoFill(); ofEnableSmoothing(); ofSetColor(255, 255, 0, 50); for(int i=0; i<10; i++) { ofRect(-25, -25, 50, 50); ofTranslate(0, 0, i*1); } } }

Figura 28. Mtodo draw() do testApp.h do caso3.

Para o ajuste manual do threshold necessrio tratar a entrada de teclado. Para isso necessrio utilizar o mtodo keyPressed. Nele deve-se filtrar qual a tecla foi apertada e aplicar o resultado desejado. Neste so utilizados a tecla da seta para cima para aumentar o valor do threshold e a respectiva tecla para baixo para diminu-lo. Adicionalmente a tecla s abre o painel de configurao da aquisio da cmera. O mtodo keyPressed est na Figura 29.
//-------------------------------------------------------------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 configurao da cmera } }

Figura 29. Mtodo keyPressed() do testApp.h do caso3.

O resultado da compilao est na Figura 30.

Figura 30. Resultado do reconhecimento do caso3.

1.3.3.2. Adicionando contedo Finalizando a sequencia de passos, criada a infraestrutura necessrio inserir o contedo, para isto ser reutilizado o modelo do caso 2 (encontrado no exemplo do ofxAssimp no oF). Semelhante ao caso 2, deve-se incluir o cabealho do ofxAssimpModelLoader e criar uma varivel do modelo no arquivo testApp.h, como exemplificado no cdigo da Figura 31.
#pragma once #include "ofMain.h" #include "ofxOpenCv.h" #include "ofxARToolkitPlus.h" #include "ofxAssimpModelLoader.h" class testApp : public ofBaseApp{ ... ofxCvGrayscaleImage grayThres; ofxAssimpModelLoader model; };

Figura 31. testApp.h do caso3 com exibio de modelo 3D.

No mtodo setup() necessrio carregar o modelo, e no mtodo draw() aps a aplicao da matriz de perspectiva do marcador desenhar o modelo 3D. Estes passos esto ilustrados na Figura 32, que contm os dois mtodos completos para melhor ilustrar a posio destes elementos adicionais.
//-------------------------------------------------------------void testApp::setup(){ ofSetWindowShape(640,480);// Ajusta o tamanho da aplicao width = 640; height = 480;// largura e altura da imagem da cmera vidGrabber.initGrabber(width, height);// reserva espao para o buffer da cmera colorImage.allocate(width, height);// reserva espao para a imagem colorida grayImage.allocate(width, height);// reserva espao para a imagem mono artk.setup(width, height);// inicia o ARToolKit plus com valores padro

ofBackground(50, 0);//Configura o fundo // Abre o arquivo if( !model.loadModel("astroBoy_walk.dae", false) ) ofSystemAlertDialog("Erro em carregar arquivo"); } //-------------------------------------------------------------void testApp::draw(){ ofSetColor(ofColor::white);// inicia a cor dos objetos como branca colorImage.draw(0, 0);// exibe a imagem capturada colorida ofDrawBitmapString("alive",mouseX,mouseY); artk.draw(0, 0);// Esta funo exibe a posio e etiqueta o marcador // ARTK 3D artk.applyProjectionMatrix();// primeiro passo aplicar a matriz da cmera int numDetected = artk.getNumDetectedMarkers(); //detectar os marcadores for(int i=0; i<numDetected; i++) { // passar por todos os marcadores encontrados artk.applyModelMatrix(i); //aplicar a matriz de perspectiva do marcador //Local onde colocar o contedo 3D do marcador //pilha de retngulos. ofPushMatrix();// Abre o contexto ofEnableAlphaBlending(); ofEnableSmoothing(); ofSetColor(255, 255, 0, 50); for(int i=0; i<10; i++) { ofRect(-25, -25, 50, 50); ofTranslate(0, 0, i*1); } ofDisableSmoothing(); ofDisableAlphaBlending(); ofPopMatrix();// fecha o contexto

// Modelo 3D ofSetColor(255);// Configura a cor do objeto ofPushMatrix();// Abre o contexto glEnable(GL_DEPTH_TEST);// habilita profundiade 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 } }

Figura 32. Mtodos setup() e draw() do testApp.h do caso3 com exibio de modelo 3D.

O resultado da adio de contedo 3D est na Figura 33.

Figura 33. Resultado do caso3 com modelo 3D.

1.4. Concluses
Este captulo visou apresentar um ferramental, de desenvolvimento multi-plataforma baseado em C++, chamado openFrameworks. Sendo o mesmo open-source e livre para desenvolvimento educacional e comercial. Apresentou-se dois casos introdutrios, 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 construo de ambientes de realidade aumentada utilizando uma biblioteca similar ao ARToolKitPlus. Como contribuio, esperamos que este ferramental auxilie no desenvolvimento de aplicaes mais criativas e de desenvolvimento veloz, com: Codificao C++ portvel Facilidade de acesso a hardware Mltiplos componentes prontos disponveis pela comunidade Facilidade de acesso ao disco Facilidade de comunicao Facilidade de uso de udio e vdeo.

Como sugesto de livro e aprofundamento, aconselhamos o livro Programming Interactivity da OReilly e os tutoriais do site do openFrameworks.

Referncias
[1] A. Gessler, T. Schulze, K. Kulling e D. Nadlinger, Assimp, 2013. [Online]. Available: http://assimp.sourceforge.net/. [Acesso em 15 03 2013]. [2] D. Wagner e D. Schmalstieg, ARToolKitPlus for Pose Tracking on Mobile Devices, Proceedings of 12th Computer Vision Winter Workshop (CVWW'07), Fevereiro 2007. [3] C. Kirner, C. S. Cerqueira e T. G. Kirner, Claudio Kirner, Christopher Shneider Cerqueira and Tereza Gonalves Kirner (2012). Using Augmented Reality Cognitive Artifacts in Education and Virtual Rehabilitation, Virtual Reality in Psychological,

Medical and Pedagogical Applications, Dr. Christiane, em Virtual Reality in Psychological, Medical and Pedagogical Applications, InTech, 2012. [4] L. Reichelt, What is a UX Developer and are they really a thing?, 25 01 2012. [Online]. Available: http://www.disambiguity.com/what-is-a-ux-developer/. [Acesso em 15 03 2013]. [5] B. Tognazzini, Tog on interface, Addison-Wesle, 1992. [6] L. A. F. Fernandes, Interface Homem/Mquina, 2011. [Online]. Available: http://www2.ic.uff.br/~laffernandes/teaching/2011.1/tcc-00.184/aula_06.pdf. [Acesso em 15 03 2013]. [7] R. J. Wieringa, Design methods for reactive systems : yourdon, statemate, and the uml, Amsterdam, Netherlands: Morgan Kaufmann, 2003. [8] Open Source Initiative, The MIT License, Open Source Initiative, [Online]. Available: http://opensource.org/licenses/MIT. [Acesso em 15 03 2013]. [9] P. Lamb, ARToolKit, [Online]. http://www.hitl.washington.edu/artoolkit/. [Acesso em 13 03 2013]. Available:

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 aplicaes 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 ps-graduao do INPE desenvolvendo um sistema de simulao de satlites distribudos com visualizao em realidade virtual.

Claudio Kirner graduado em Engenharia Eltrica pela Universidade

de So Paulo (1973), mestre em Engenharia Eletrnica pelo Instituto Tecnolgico de Aeronutica (1978), doutor em Engenharia de Sistemas e Computao pela Universidade Federal do Rio de Janeiro (1986) e Psdoutor pela University of Colorado at Colorado Springs UCCS (19931995). Atualmente Professor Adjunto na Universidade Federal de Itajub (UNIFEI). Tem experincia em Realidade Virtual e Realidade Aumentada, Interao Humano-Computador, Ambientes Colaborativos e educao Distncia. 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 cientficos e 40 livros e captulos.