1. UNIVERSIDADE TECNOLGICA FEDERAL DO PARAN UTFPRPROGRAMA DE
PS-GRADUAO EM PROJETO E DESENVOLVIMENTO DE SISTEMAS BASEADOS EM
OBJETOS PARA AMBIENTE INTERNET JAN PALACH VICENTE CRUZ DA SILVA
VISUALIZAO DE MODELOS VTK UTILIZANDO WEBGL:UM ESTUDO EXPERIMENTAL
MONOGRAFIA DE ESPECIALIZAO MEDIANEIRA 2011
2. 2 JAN PALACH VICENTE CRUZ DA SILVAVISUALIZAO DE MODELOS VTK
UTILIZANDO WEBGL:UM ESTUDO EXPERIMENTAL Trabalho de Concluso de
Curso apresentado Universidade Tecnolgica Federal do Paran Cmpus
Medianeira, como requisito parcial obteno do grau de Especialista
em Projeto e Desenvolvimento de Sistemas Baseados em Objetos para
Ambiente Internet. Orientador: Prof. M.Sc. Fernando Schtz
MEDIANEIRA 2011
3. Ministrio da Educao Universidade Tecnolgica Federal do Paran
Diretoria de Pesquisa e Ps-Graduao Especializao em Projeto e
Desenvolvimento de Sistemas baseados em Objetos para Ambiente
Internet TERMO DE APROVAO Visualizao de Modelos VTK utilizando
WebGL: Um estudo experimental Por Jan Palach Vicente Cruz da Silva
Esta monografia foi apresentada s 19:00h do dia 10 de outubro de
2011como requisito parcial para a obteno do ttulo de ESPECIALISTA,
no curso deEspecializao em Projeto e Desenvolvimento de Sistemas
baseados em Objetospara Ambiente Internet, da Universidade
Tecnolgica Federal do Paran, CmpusMedianeira. O acadmico foi
arguido pela Banca Examinadora composta pelosprofessores abaixo
assinados. Aps deliberao, a Banca Examinadora considerouo trabalho
aprovado. Prof. Me. Fernando Schtz Prof. Me. Pedro Luiz de Paula
Filho Orientador Convidado UTFPR Campus Medianeira UTFPR Campus
Medianeira Prof. Me. Juliano Rodrigo Lamb Prof. Me. Fernando Schtz
Convidado Coordenador do Curso de Especializao UTFPR Campus
Medianeira UTFPR Campus Medianeira A FOLHA DE APROVAO ASSINADA
ENCONTRA-SE NA DIRETORIA DE PS-GRADUAO DA UTFPR CMPUS MEDIANEIRA
UTFPR DIRPPG Av. Brasil, 4232 Pq Independncia 85884000 Medianeira
PR www.utfpr.edu.br/medianeira +55(45) 3240-8074
4. DEDICATRIA minha esposa Anicieli.
5. 5 AGRADECIMENTOS Em especial minha esposa Anicieli que me d
apoio e me ajuda aenfrentar os desafios da vida. Aos meus pais pela
educao e cuidados na minha criao. A turma B, pelos momentos de
risada, e especialmente pelas trocas dedatas dos eventos que
ocorriam aos sbados. Ao professor Rodrigo Luis de Souza da Silva,
por responder meus e-mails equestionamentos sobre computao grfica,
isso foi fundamental para a conclusodo estudo. Ao professor Everton
que no incio da caminhada me brindou com seu pontode vista mpar,
sobre as verses iniciais de cdigo e do texto. Ao professor Fernando
Schtz, por orientar este trabalho apontando asdevidas correes. A
Blizzard Entertainment por ter criado clssicos como StarCraft e
Diablo. A Steve Jobs, por fazer da computao pessoal o que ela hoje,
ereinventar a tablet e o smartphone. A Apple, por fazer
computadores fantsticos e um sistema operacional dignode respeito e
admirao.
6. 6 RESUMOSILVA, Jan. Visualizao de modelos VTK utilizando
WebGL: um estudoexperimental. 2011. 67 f. Monografia (Especializao
em Desenvolvimento deSistemas Orientados a Objeto) Programa de
Ps-Graduao em Tecnologia,Universidade Tecnolgica Federal do Paran.
Medianeira, 2011.Este estudo apresenta o uso da tecnologia WebGL
para visualizao de modelosVTK Polygonal Data atravs da Web, sem a
necessidade de instalao de plug-insem navegadores. Apresenta tambm
ferramentas, mtodos e conceitos queintegrados, fornecem um meio
para construo de um prottipo de visualizao demodelos VTK Polygonal
Data na Web. O estudo foi desenvolvido com base empesquisas sobre
as diferentes tecnologias presentes no processo de construo
doprottipo implementado neste estudo, desde a definio do modelo de
dados e autilizao de um framework Web, at o uso do framework
SceneJS na construo darepresentao grfica. A aplicao das tecnologias
pesquisadas, permitiu aimplementao do prottipo de visualizao de
modelos VTK Polygonal Data atravsda Web.Palavras-chave: Plug-ins.
SceneJS. HTML5. Datasets. Python.
7. 7 ABSTRACTSILVA, Jan. Visualization of the VTK models using
WebGL: an experimental study.2011. 67 f. Monografia (Especializao
em Desenvolvimento de SistemasOrientados a Objeto) Programa de
Ps-Graduao em Tecnologia, UniversidadeTecnolgica Federal do Paran.
Medianeira, 2011.This study presents an usage of WebGL technology
for VTK Polygonal Datavisualization over the Web, without need for
installing browser plugins. It also showstools, methods and
concepts that, integrated, provide a way for creating a
prototypefor visualizing VTK Polygon Data models over the Web. The
study was developedbased in researches about different technologies
involved in the process of creatingthe prototype that was
implemented in this study, since data model definition
andutilization of a Web framework, to using the SceneJS framework
in the constructionof graphical representation. The application of
the researched technologies allowedimplementing the prototype of
VTK Polygonal Data model visualization over the Web.Keywords:
Plug-ins. SceneJS. HTML5. Datasets. Python.
8. 8 LISTA DE ABREVIATURAS E SIGLASAPI Application Programming
Interface.CG Computao Grfica.CAD Computer Aided Designed.CS
Cliente/Servidor.CM Camada Modelo.CC Camada Controladora.CA Camada
de Apresentao.CSV Comma Separated Values.FW Framework.GPU Graphic
Processing Unit.HeMoLab Hemodynamics Modelling Laboratory.HTML5
Hypertext Markup Language 5.HTTP Hypertext Transfer Protocol.HTML
Hypertext Markup Language.ISO International Organization for
Standardization.JSON JavaScript Object Notation.JTE Jinja Template
Engine.MVC Model View Controller.MER Modelo Entidade
Relacionamento.OpenGL Open Graphic Library.SQL Structured Query
Language.TE Template Engine.URL Uniform Resource Locator.W3C World
Wide Web Consortium.WebGL Web Graphic Library.XML Extensible Markup
Language.
9. 9 SUMRIO1 INTRODUO
.......................................................................................................
10 1.2.1 Objetivo Geral
...................................................................................................
11 1.2.2 Objetivos Especficos
.......................................................................................
12 1.3
JUSTIFICATIVA...................................................................................................
12 1.4 ESCOPO DO TRABALHO
...................................................................................
13 2 FUNDAMENTAO TERICA
.............................................................................
15 2.1 COMPUTAO GRFICA
..................................................................................
15 2.2 WEBGL
................................................................................................................
16 2.3 HTML5
.................................................................................................................
17 2.4 LINGUAGEM DE PROGRAMAO JAVASCRIPT
............................................. 17 2.5 FRAMEWORK
SCENEJS
....................................................................................
18 2.6 BIBLIOTECA VTK
................................................................................................
21 2.7 LINGUAGEM DE PROGRAMAO PYTHON
.................................................... 23 2.8
FRAMEWORK FLASK
.........................................................................................
23 2.9 ORM SQLALCHEMY
...........................................................................................
24 3 PROCEDIMENTOS
METODOLGICOS...............................................................
25 3.1 LEVANTAMENTO E ANLISE BIBLIOGRFICA
................................................ 25 3.2 TIPO DA
PESQUISA............................................................................................
25 3.3 ARQUITETURA
...................................................................................................
25 3.3.1 Camada Modelo
...............................................................................................
27 3.3.2 Camada Controladora
......................................................................................
29 3.3.3 Camada de Apresentao
................................................................................
31 3.4 ESTRUTURA DO PROTTIPO
...........................................................................
33 3.5 DIAGRAMA DE CASOS DE USO
........................................................................
34 3.6 DESCRIO DOS CASOS DE USO
...................................................................
35 3.7 MODELOS VTK
...................................................................................................
40 3.8 TIPO DE DATASET VTK ABORDADO NO PROJETO
........................................ 41 3.9 LEITURA DE MODELOS
VTK COM
PYVTK........................................................ 42
3.10 RENDERIZANDO O MODELO VTK USANDO SCENEJS
................................. 48 3.11 INTERAGINDO COM O MODELO
.....................................................................
55 3.11.1 Transformaes geomtricas
.........................................................................
55 3.11.1.1 Rotao
.......................................................................................................
55 3.11.1.2 Translao
...................................................................................................
56 3.11.1.3 Escala
..........................................................................................................
57 4 RESULTADOS E DISCUSSES
...........................................................................
59 4.1 LOGIN
..................................................................................................................
59 4.2 REGISTRO NO SISTEMA
...................................................................................
60 4.3 PGINA
PRINCIPAL............................................................................................
60 4.4 PGINA DE VISUALIZAO E INTERAO COM O MODELO
........................ 61 5. CONSIDERAES FINAIS
..................................................................................
64 REFERNCIAS
.........................................................................................................
65
10. 101 INTRODUO Segundo a ISO (International Organization for
Standardization), Adefinio de computao grfica : Um conjunto de
ferramentas e tcnicas paraconverter dados de ou para um dispositivo
grfico atravs do computador. (CONCI;AZEVEDO, 2003, p. 03) Foram
realizados grandes avanos na rea de CG (Computao Grfica)graas
evoluo do hardware nos ltimos anos, o que permitiu a evoluo dereas
como a realidade aumentada, rea que visa melhorar a interao
doshumanos com ambientes virtuais. Com o avano constante da
plataforma Web, ossistemas de CG comeam uma migrao do paradigma
desktop no qual estavaminseridos, para o ambiente Internet. As
Applets1 possibilitaram alguns dos primeirosexperimentos na
visualizao de grficos tridimensionais em navegadores. Houvetambm o
surgimento da tecnologia Flash da Adobe, que hoje permite acesso
GPU2, porm para ambos os casos se faz necessria a instalao de
plug-ins. Uma soluo que vem surgindo e que promete se tornar padro
para o usode CG na Web atravs de browsers a WebGL, que consiste de
uma bibliotecaJavaScript e de cdigo aberto que permite acesso GPU e
exibe elementos grficoscomplexos como modelos tridimensionais. A
WebGL funciona em conjunto com oelemento Canvas do HTML5 (Hypertext
Markup Language 5). O elemento Canvaspermite a criao de um contexto
para gerao de cenas e criao de objetostridimensionais e
bidimensionais. O HTML5 vem sendo implementado por umconsrcio entre
empresas como Apple, Microsoft, Google, Adobe, e tem por objetivose
tornar o novo padro para construo de pginas Web.1 Applets so um
tipo especial de programas Java, que um navegador com Java
habilitado, podebaixar e rodar dentro de uma pgina web. (ORACLE,
2011)2 Abreviatura para Graphics Processing Unit. (OpenGL, A,
2009)
11. 111.1 PROBLEMA DA PESQUISA Antes do surgimento da
tecnologia WebGL e HTML5, era necessria ainstalao de plug-ins para
visualizao de elementos grficos avanados comofiguras
tridimensionais por meio de um navegador atravs da Web. Foi
detectada anecessidade de possibilitar a fcil visualizao de modelos
bi e tridimensionais pormeio da Internet sem a necessidade de
instalao de plug-ins em navegadores ouqualquer tipo de cliente
desktop. Na rea de visualizao cientfica existem diversos formatos
que podem serutilizados na visualizao de dados e simulaes, dentre
eles os modelos VTK. Com base no problema acima, identificou-se o
seguinte enunciado: Comopossibilitar a visualizao de modelos VTK
por meio de navegadores Web sem ainstalao de plug-ins?1.2 OBJETIVOS
Este trabalho, que trata sobre novas formas de apresentao de
modelostridimensionais na Internet e sobre Computao Grfica, tem
seus objetivosdescritos nas sees que seguem.1.2.1 Objetivo Geral
Desenvolver um prottipo de ferramenta Web para visualizao de
modelosVTK do tipo VTK Polydata, diretamente no navegador sem a
necessidade deinstalao de plug-ins.
12. 121.2.2 Objetivos Especficos a) analisar a viabilidade do
uso da WebGL por meio do framework SceneJS na visualizao de modelos
VTK Polydata atravs da Web; b) criar uma Representao Grfica (RG),
seguindo a estrutura definida pelo framework SceneJS. c)
implementar mecanismos para interao do usurio com o modelo
utilizado na visualizao, fazendo uso do framework SceneJS;1.3
JUSTIFICATIVA O ambiente Web fornece um excelente meio para difuso
de conhecimentoe informao. Cada vez mais pode-se ver sistemas de
computao migrando doparadigma desktop para Web. A CG j iniciou sua
jornada na mudana deparadigma. Nos dias atuais j aparenta ser
possvel a execuo de jogossofisticados que fazem uso de recursos
avanados das principais placas de vdeo domercado atravs de um
navegador, ou mesmo visualizar o modelo tridimensionalproveniente
de algum estudo mdico sem a necessidade de plug-ins. A
justificativa deste projeto, prover um prottipo de visualizao
demodelos VTK em ambiente Internet utilizando tecnologias
suportadas por grandeparte dos navegadores atuais, e sem a
necessidade de instalao de plug-ins,resultando em praticidade no
uso do sistema e menos problemas relacionados segurana de plug-ins
de terceiros.
13. 131.4 ESCOPO DO TRABALHO Foram necessrias algumas restries
no desenvolvimento do experimentoproposto por este trabalho. O
experimento abordou apenas um tipo de modelo VTK,o VTK Polygonal
Data. possvel que um modelo VTK seja composto por diversos tipos
deprimitivas grficas, como por exemplo, tringulos, quadrados,
linhas, pontos, primas,etc. O VTK rico em primitivas grficas que
utilizadas em conjunto podem formarfiguras mais complexas. A WebGL
apresenta apenas as primitivas PONTO, LINHA eTRINGULO. Um modelo
grfico na WebGL pode ser composto por apenas um dostipos de
primitivas citadas, esta limitao est diretamente ligada a como
construda a conectividade dos pontos que formam a geometria dos
objetos. O prottipo executa apenas em navegadores com suporte
WebGL, e emalguns casos este suporte dever ser ativado pelo usurio
nas preferncias donavegador, como o caso do navegador Safari 5.1
disponvel no Mac OS X Lion. No foi foco deste trabalho avaliar a
performance do experimentocomparando-o com alguma soluo j existente
no mercado. A viabilidade do experimento est ligada a fatores
externos que podem atuarcomo limitadores, como por exemplo a
velocidade de conexo utilizada para otrfego de dados, limitaes da
tecnologia JavaScript no que diz respeito aoprocessamento de
grandes quantidades de dados e diferenas na implementaodo
JavaScript entre navegadores. Esses fatores no comprometem o
estudo, maspodem restringir por exemplo o tamanho do arquivo de
modelo VTK a ser utilizado. Apenas arquivos legados do VTK foram
analisados e apenas no formatoASCII, muito embora as ferramentas
utilizadas na implementao do prottiposuportem arquivos legados em
formato binrio.
14. 141.5 DIVISO DO TRABALHO Este trabalho est dividido em 5
captulos. O captulo 1 uma breve introduo sobre o assunto do
projeto,apresentando a justificativa e objetivos do projeto. O
captulo 2 contm a fundamentao terica com informaes sobre
asferramentas utilizadas neste trabalho. O captulo 3 apresenta os
procedimentos metodolgicos, tipo da pesquisarealizada neste
trabalho, mtodos utilizados, definio da arquitetura do prottipo e
aconstruo do mesmo. O captulo 4 descreve os resultados obtidos no
estudo. O captulo 5 apresenta a concluso do trabalho e possveis
direes para acontinuidade desse trabalho.
15. 152 FUNDAMENTAO TERICA Neste captulo apresentada a
fundamentao terica que serviu de basepara este trabalho.2.1
COMPUTAO GRFICA Pesquisadores da rea concordam que a CG surgiu na
dcada de 50. Deacordo com Machover (1978 p. 38), neste perodo houve
o surgimento das primeiraspesquisas relacionadas CG e j haviam
projetos de sistemas de CG sendodesenvolvidos como por exemplo o
Whirlwind, que estava em desenvolvimento peloMassachusetts
Institute of Tecnology. O Whirlwind tinha como objetivo
principalatuar no treinamento e simulao de vo. Seu projeto foi
iniciado pelo Office NavalResearch em parceria com o Massachusetts
Institute of Tecnology Digital ComputerLaboratory. Na dcada de 60,
destaca-se Ivan Sutherland com uma importantepublicao na rea da CG
(Sketchpad A Man-Machine Graphical ComunicationSystem), que se
tratava de um estudo sobre estruturas de dados paraarmazenamento de
informaes referentes elementos grficos. Em sua obra IvanSutherland
tambm descreve tcnicas de interao que utilizavam teclado e
canetatica, para realizar desenhos e interagir por meio de toque. A
publicao logodespertou interesse de empresas automobilsticas e
aeroespaciais, que utilizariamos conceitos ali descritos no
desenvolvimento de seus produtos. Assim o CAD(Computer Aided
Design) surgiu. (CONCI; AZEVEDO, 2003) A dcada de 70 representa o
surgimento de empresas interessadas emfornecer dispositivos e
sistemas de CG. Durante este perodo haviam muitasempresas que
atuavam no ramo da CG, seja fornecendo o hardware necessrio execuo
desses sistemas seja criando novos sistemas grficos. A tecnologia
haviase popularizado. Ainda na dcada de 70 surgem algoritmos
famosos como o z-buffere sombreamento. Neste mesmo perodo a CG
passa a ser reconhecida como rea
16. 16especifica da cincia da computao, e surgem congressos
especficos como oSIGGRAPH. (MACHOVER, 1978) Na dcada de 80 ganham
destaque as tcnicas de processamento deimagens, sendo aplicadas nas
reas de processamento de imagens de satlite e deexploraes
interplanetrias. (CONCI; AZEVEDO, 2003) Na dcada de 90, a CG j
consolidada passa a estar presente tambm noscinemas, sendo que a
tcnica de fotorrealismo fortemente empregada em filmescomo Jurassic
Park, de 1993, e outras obras como Toy Story, o primeiro
longa-metragem totalmente tridimensional, e Terminator 2. Mas o que
marca o perodo osurgimento da biblioteca OpenGL em 1992 e as
primeiras placas grficas fabricadaspela Nvidia em 1999. (CONCI;
AZEVEDO, 2003) A partir do ano 2000, ganha destaque a modelagem de
personagenstridimensionais, novamente nas telas de cinemas com
filmes como Matrix Reloaded,Final Fantasy, Shrek. (CONCI; AZEVEDO,
2003)2.2 WEBGL A WebGL consiste de uma API para renderizao
tridimensional derivada daOpenGL ES 2.0 API. A WebGL tem como
objetivo fornecer as funcionalidades derenderizao presentes na
OpenGL ES 2.0, em um contexto HTML. (KHRONOSGROUP, 2011) A WebGL
faz uso do elemento Canvas presente no HTML5 pararenderizao de
objetos. So fornecidas primitivas grficas pela API, o que facilita
odesenvolvimento e a torna mais amigvel aos desenvolvedores que j
possuemexperincia com a programao OpenGL para desktops. (KHRONOS
GROUP,2011) Para renderizar objetos tridimensionais no elemento
Canvas, a WebGLgerencia uma viewport3 retangular com origem na
posio (0,0) e tamanho e larguravariando de acordo com os atributos
largura e altura do elemento Canvas.3 Viewport a regio destinada ao
desenho, onde so renderizados os objetos. (OpenGL, A, 2009)
17. 172.3 HTML5 O HTML5 a prxima gerao do HTML, com uma
tecnologia que visadisponibilizar novas caractersticas necessrias
na criao de aplicaes Webmodernas, assim como padronizar
funcionalidades que j eram utilizadas por anosna plataforma Web,
porm no possuam documentao ou padres. (W3C, 2011) O surgimento do
HTML5 aconteceu em 2007, com a formao do grupo queiria trabalhar na
especificao do HTML5. O grupo era composto pela Apple, Mozillae
Opera, que permitiram ao W3C publicar a especificao sob os direitos
de cpiado W3C. (W3C, 2011) O HTML5 foi projetado para ser
independente de plataforma, ou seja, noimporta o sistema
operacional que utilizado, sendo que para fazer uso dasaplicaes Web
baseadas em HTML5 basta utilizar um navegador Web com suportea
HTML5. (PILGRIM, 2010) A nova tecnologia adiciona novas
caractersticas que so interessantes aodesenvolvimento Web e
melhoram a experincia e usabilidade das aplicaes Web.Uma das novas
caractersticas apresentadas no HTML5 o elemento Canvas. Oelemento
Canvas possibilita a renderizao de grficos, jogos e imagens em
umapgina Web. (PILGRIM, 2010) O HTML5 atualmente suportado pela
maioria dos navegadores modernos,inclusive as ltimas verses dos
navegadores Apple Safari, Google Chrome, MozillaFirefox e Opera.
(PILGRIM, 2010)2.4 LINGUAGEM DE PROGRAMAO JAVASCRIPT O JavaScript
surgiu em 1995, tendo como objetivo fazer validao deformulrios do
lado cliente. Na poca era extremamente caro realizar essasvalidaes
do lado servidor, pois as velocidades de conexo eram
relativamentebaixas. Antes do JavaScript as validaes eram feitas no
lado servidor da aplicao,sendo assim, se fosse encontrado um erro
em algum campo de um formulrio, era
18. 18necessrio reenviar o mesmo para nova validao. Este
processo de reenviopoderia demorar minutos, levando-se em
considerao as velocidades de 28.8kbpsda poca. (ZAKAS, 2009) Brendan
Eich, que trabalhou para Netscape, iniciou o desenvolvimento deuma
linguagem script a qual deu o nome de LiveScript, que foi
desenvolvida para averso 2 do navegador Netscape. A especificao da
linguagem LiveScript foifinalizada pela Netscape juntamente com a
Sun Microsystems a tempo dolanamento do Netscape 2, e para
aproveitar a ateno que o Java estava atraindona mesma poca o nome
da linguagem foi alterado para JavaScript. (ZAKAS, 2009) Com o
sucesso da linguagem, a Nestcape deu continuidade aodesenvolvimento
da linguagem JavaScript, que viria a ser lanada com o
navegadorNetscape 3. A Microsoft mostrou interesse por adicionar as
novas featuresapresentadas pelo JavaScript em um navegador que
viria a se chamar InternetExplorer. Aps o lanamento do Netscape
navigator 3, a Microsoft anunciou achegada do Internet Explorer 3
contendo a sua implementao do JavaScript entochamada de JScript,
nomeada assim com a finalidade de se evitar disputas judiciaiscom a
Netscape. (ZAKAS, 2009) Em 1997, foi submetido ao European Computer
Manufacturers Association(ECMA) com uma proposta a fim de se
padronizar a sintaxe e semntica,objetivando tornar o JavaScript
multiplataforma. Com a ajuda de programadores devrias companhias,
como por exemplo, Netscape, Sun, Microsoft, Borland. O novopadro
permitiu o surgimento de uma nova linguagem chamada
ECMAScript.(ZAKAS, 2009)2.5 FRAMEWORK SCENEJS A framework SceneJS
foi construda sob a WebGL e possui uma APIbaseada na tecnologia
JSON (JavaScript Object Notation), tendo como objetivodefinir e
manipular cenas tridimensionais no WebGL. A arquitetura da engine
tem 6componentes demonstrados pela Figura 1. (SCENEJS, 2011)
19. 19 Figura 1 Arquitetura do Framework SceneJS Fonte: SCENEJS
(2011)O Componente JSON SceneGraph API fornece mtodos baseados em
JSON paracriar, pesquisar, atualizar e remover ns 4 dentro de uma
cena. Alguns mtodoscomuns, que so utilizados na maioria das cenas
so demonstrados na Tabela 1.(SCENEJS, 2011) Tabela 1 Mtodos de cena
do SceneJS Mtodo Descrio SceneJS.createNode Cria um n a partir de
um objeto JSON. SceneJS.withNode Retorna um selector com o qual
pode-se interagir para modificar um n existente. SceneJS.nodeExists
Verifica a existncia de um n. SceneJS.bind Adiciona um listener
para tratar eventos na cena. SceneJS.createNodeType Permite definir
um novo n em uma cena existente. O elemento Utilities API utilizado
para pesquisas complexas, otimizao decenas, validaes, entre outros.
Consiste de uma API de utilitrios genricos. Paracriar um utilitrio
necessrio seguir algumas convenes, devendo possuir um4 Ns so tipos
de classes base para todas os tipos de ns de uma cena. Fornece
identificao,conectividade e mtodos de acesso, para alterao de
propriedades de um n. (SCENEJS, 2011)
20. 20construtor que aceite um objeto (baseado em objetos JSON)
de configurao comoargumento. A definio do mtodo setConfigs usado
para reconfigurar o utilitrio composta por dois outros mtodos, o
execute e o getResults. O mtodo executeaceita parmetros por execuo
e um sinal de call-back assncrono para indicar se aexecuo foi
completa. O mtodo getResults fornece os resultados da execuo
doutilitrio. (SCENEJS, 2011) O componente Message API fornece meios
para troca de mensagens entreobjetos JSON no componente JSON
SceneGraph API. O sistema de mensagens baseado em comandos. O
SceneJS disponibiliza dois tipos de comandos: create eupdate, sendo
possvel criar outros tipos. (SCENEJS, 2011) A Figura 2 ilustra o
envio de uma mensagem para trs objetos do tipo cenaatualizando seus
ngulos, por meio de seus ids5. Figura 2 Trecho de cdigo que
exemplifica o envio de mensagens no SceneJS. O componente Scene
Graph Engine o componente central responsvelpor interfacear as
chamadas para as funes da WebGL. Existem funes bem teiscomo por
exemplo, deteco de hardware, gerenciamento de memria suporte
mltiplas cenas, dentre outros. (SCENEJS, 2011)5 Ids no SceneJS, so
utilizados para referenciar ns especficos durante as
interaes.(SCENEJS,2011)
21. 21 De acordo com SCENEJS, (2011), o componente IoC
(Inversion of Control), responsvel por permitir a conexo de objetos
de servio6. Hoje existem dois deobjetos de servio implementados, o
NodeLoader, que carrega ns em demanda, eo CommandService, j visto
anteriormente no componente Message API, que usado para troca de
mensagens entre ns.2.6 BIBLIOTECA VTK O VTK (Visualization Toolkit)
consiste de uma biblioteca de cdigo aberto,escrita na linguagem de
programao C++, que implementa um sistema decomputao grfica. O VTK
disponibiliza camadas de interface para diferenteslinguagens como
TCL/TK, Java e Python. (VTK, 2011)O VTK rico no que diz respeito
recursos disponveis para representao dedados, possui uma grande
variedade de primitivas grficas, das mais simples (ponto,linha e
tringulos), at as mais complexas, como por exemplo, tetraedros,
prismas eoutros. (SCHROEDER, 2002) A arquitetura do VTK baseada em
pipeline. Sua visualizao no VTKconsiste em objetos que podem ser
conectados de forma que possam gerarvisualizao desejada. Dependendo
do objeto ou tipo de visualizao a serrealizado, a extenso do
pipeline VTK pode variar, de acordo com os objetosnecessrios para a
sua execuo. (SCHROEDER, 2002) Um pipeline VTK composto por trs
tipos de objetos. As fontes, que soresponsveis por gerar dados e
realizam leitura de arquivos e outras fontes, com oobjetivo de
gerar pontos a partir de funes implcitas. Os filtros, objetos
querecebem uma ou mais informaes de entrada e produzem uma ou mais
sadas. Eos mapeadores, que so a parte final do pipeline, tendo como
objetivo converterdados em primitivas grficas ou persistir grficos
em arquivos. (SCHROEDER, 2002) A Figura 3 apresenta um exemplo de
pipeline para visualizao de umaesfera juntamente com um trecho de
cdigo fonte correspondente.6 Objetos que fornecem funcionalidades
extras na forma de servio. teis para desacoplar o SceneJSdas
implementaes de tais servios. (SCENEJS, 2011)
22. 22 Figura 3 Exemplo de pipeline VTK para visualizao de uma
esfera Fonte: SCHROEDER (2002, p. 119). O VTK implementa dois tipos
de objetos: o tipo Data Objects que consiste deobjetos que
implementam os diferentes tipos de dados como grids, vetores,
dentreoutros e o tipo Process Objects, que representa as etapas de
criao etransformao de dados. (SCHROEDER, 2002) O Data Objects que
possui uma estrutura organizada e associadas a atributosdefine o
que se conhece como datasets, ilustrados na Figura 4. Um dataset
consistede uma estrutura dividida em duas informaes, topologia e
geometria de um objeto.A topologia define informaes que no variam
de acordo com certastransformaes geomtricas, como por exemplo,
rotao e translao. A geometria a instncia da topologia, mais
precisamente a especificao da posio dos dadosno espao
tridimensional. Como exemplo prtico, ao nomear que um polgono
umprisma, especifica-se a topologia. Ao fornecer coordenadas de
pontos, definem-seinformaes relacionadas geometria dos dados.
(SCHROEDER, 2002)
23. 23 Figura 4 Exemplos de datasets existentes no VTK Fonte:
SCHROEDER (2002, p. 139).2.7 LINGUAGEM DE PROGRAMAO PYTHON O
desenvolvimento da linguagem Python comeou em 1989 pelo holands
Guido Van Rossum. O nome da linguagem origina-se do nome da srie
humorstica britnica Monty Pythons Flying Circus, do grupo
humorstico britnico Monty Python. Guido queria criar uma linguagem
de altssimo nvel, que agregasse caractersticas importantes de
diversas linguagens de programao. Alm disso, queria que essa
linguagem de programao mantivesse uma sintaxe simples e clara.
(SANTANA; GALESI, 2010, p.17) Python uma linguagem multi-paradigma,
ou seja, uma linguagemorientada a objetos, procedural e funcional.
A linguagem possui hoje uma extensabiblioteca padro, possuindo
diversas implementaes, sendo a principal delas o CPython, a
implementao em linguagem C da especificao do Python. (PYTHONORG,
2011)2.8 FRAMEWORK FLASK O Framework Flask um framework para
desenvolvimento Web escrito emPython, baseado no modelo em camadas
MVC (Model-View-Controller). Oframework baseado no princpio da
conveno ao invs de configurao,
24. 24significando que muitas coisas j esto pr-configuradas no
framework. Comoexemplo, o Flask determina que templates e arquivos
estticos estejamobrigatoriamente em um subdiretrio dentro do
diretrio de fontes Python daaplicao. (FLASK, 2011) O framework
Flask conhecido como micro-framework, pelo fato de aequipe de
desenvolvimento responsvel pelo seu ncleo mant-lo simples,
pormextensvel. O ncleo no possui internamente uma camada de abstrao
de bancode dados ou mesmo validao de formulrio, porm existem
diversas bibliotecas quepodem ser agregadas ao projeto, o que o
torna flexvel. (FLASK, 2011)2.9 ORM SQLALCHEMY SQLAlchemy um ORM7
implementado em linguagem Python, que tem porfinalidade facilitar a
persistncia de objetos Python, fazendo o mapeamento dosobjetos para
tabelas de dados do modelo relacional. (SQLALCHEMY, 2011) O
SQLAlchemy implementa diversos tipos de dialetos, que permitem
acomunicao com uma grande variedade de banco de dados, dentre eles:
Drizzle,Firebird, Informix, MaxDB, Microsoft Access, Microsoft SQL
Server, MySQL, Oracle,PostgreSQL, SQLite, Sybase. (SQLALCHEMY,
2011) O arquitetura do SQLAlchemy est divida em duas partes
principais:SQLAlchemy ORM e SQLAlchemy Core. O SQLAlchemy ORM trata
da configuraoe implementao do ORM. O SQLAlchemy Core responsvel
pela construodinmica dos comandos SQL, bem como pela implementao
dos dialetossuportados. O SQLAlchemy Core implementa tambm os tipos
de dados, definiesde esquema, conexes, pools, dentre outros.
(SQLALCHEMY, 2011)7 ORM Object Relacional Mapper (SQLALCHEMY,
2011)
25. 253 PROCEDIMENTOS METODOLGICOS Neste captulo so
apresentados os tipos de mtodos utilizados nodesenvolvimento deste
trabalho, bem como o tipo de pesquisa a ser aplicada.3.1
LEVANTAMENTO E ANLISE BIBLIOGRFICA Foram realizadas pesquisas em
artigos, livros e documentos oficiais deorganizaes responsveis por
manter as tecnologias utilizadas no presentetrabalho. A pesquisa
foi de fundamental importncia para consolidar as informaessobre o
uso da WebGL juntamente com HTML5 e VTK na visualizao de
modelostridimensionais em livros, artigos e outros.3.2 TIPO DA
PESQUISA Foi utilizado o mtodo de pesquisa aplicada pois foi
necessrio construiruma aplicao para validar o estudo realizado.
(GIL, 2009)3.3 ARQUITETURA Por se tratar de um sistema Web onde h
um ou mais servidoresrespondendo requisies de clientes por meio da
Internet, no que diz respeito infraestrutura o experimento faz uso
da arquitetura cliente-servidor (CS). Aarquitetura CS permite que
tenhamos uma ou mais entidades (servidor),disponibilizando
informaes para computadores clientes por um meio de um
26. 26protocolo que seja suportado no meio de comunicao
escolhido. O experimentoalvo deste trabalho prope um servidor que
ir disponibilizar uma interface para queusurios por meio de seus
computadores (clientes), faam o envio de arquivos noformato VTK
contendo informaes da geometria de seus modelos de forma a
podervisualiz-los posteriormente. A parte cliente por sua vez faz
uso de um navegador Web que tenha suporteao HTML5. Todo o
processamento que trata de renderizao8 e interao feito dolado
cliente do sistema, ficando a cargo do lado servidor apenas
armazenar asinformaes disponibilizadas de acordo com requisies dos
clientes. A Figura 5exemplifica a arquitetura cliente/servidor.
Figura 5 Arquitetura Cliente-Servidor. Fonte: KIKUCHI (2011). A
nvel de software, o padro adotado para implementao do
experimentofoi o modelo em camadas MVC (Model, View, Controller).
Esse modelo fornecemuitas vantagens, sendo a principal delas a fcil
manuteno, visto que asresponsabilidades esto bem definidas e
distribudas entre as camadas. Ascamadas do modelo MVC e suas
respectivas responsabilidades so apresentadasna Figura 6.8 Processo
de converso de geometria, especificao para luzes e uma viso de
cmera em imagem.(VTK RENDERER, 2011)
27. 27 Figura 6 Modelo MVC (Model-View-Controller) Fonte:
IFRANCA (2011).3.3.1 Camada Modelo No MVC, a camada modelo (CM)
tambm conhecida como camada depersistncia, tem o papel de gerenciar
o domnio da informao, controlando a formacomo so armazenados e
acessados os dados. nessa camada que definimos asentidades que
representa as informaes do nosso sistema. No experimento
foiutilizada a tecnologia ORM (Object Relational Mapping) para
implementao dacamada modelo. Na CM, foi usada a tcnica de programao
ORM com a finalidade demapear as entidades do sistema para classes
da programao orientao a objetos(POO). A principal vantagem deste
tipo de abordagem est no fato de ter-se adefinio dos dados e
operaes de acesso independentes do banco de dadosutilizado, desde
que sejam tomados os devidos cuidados, como por exemplo, nofazer
uso de instrues SQL (Structured Query Language) nativas. A
ferramentaORM escolhida para implementao da CM foi o SQLAlchemy. O
SQLAlchemy uma ferramenta escrita em linguagem Python que
implementa a tcnica de ORM.Aliado ao SQLAlchemy foi selecionado o
banco de dados SQLite, por suasimplicidade e pelo sistema proposto
neste trabalho ser de carter simples tambm. Os trechos de cdigo
exibidos nos quadros 1 e 2 representam as classesUser e VTKModels,
respectivamente necessrias para atender CM doexperimento.
28. 28 Quadro 1 Classe User. A classe User fornece o campos
necessrios para autenticao de umusurio no sistema. O atributo
__tablename__ define o nome da tabela que criadaa partir da definio
da classe User. As informaes a serem persistidas para umusurio so:
id: Identificador inteiro e nico para uma entrada na tabela de
usurios. Atua como chave primria. name: Nome do usurio do sistema.
email: Endereo eletrnico do usurio para contato. password: Senha de
acesso ao sistema. Quadro 2 Classe VTKModels. A classe VTKModels
que mapeia a tabela vtk_models no banco de dadosest relacionada com
cardinalidade 1 para muitos com a tabela users, logo, um
29. 29usurio pode possuir muitos modelos. A Figura 7 ilustra o
Modelo EntidadeRelacionamento entre as tabelas. A tabela vtk_models
permite ao usurio submeterarquivos de modelos VTK para
armazenamento e posterior visualizao. Figura 7 Classe
VTKModels.3.3.2 Camada Controladora A camada controladora (CC)
responsvel por mapear e gerenciar o fluxo deaes do sistema. A CC
est situada entre a CM e a Camada de Apresentao(CA). Basicamente a
CC recebe, processa requisies e gera respostas eventosda CA. O
Flask, sendo um micro FW implementado em linguagem Python, temcomo
principais caractersticas possuir um ncleo pequeno e enxuto com
algumaspoucas funcionalidades j includas. Sua camada controladora
composta pormdulos que por sua vez contm funes que tem a finalidade
de responder estmulos oriundos da CA. Para o experimento foi criado
o mdulo frontend.py onde esto situadas todasas funes controladoras
da aplicao. O Quadro 3 ilustra um exemplo de funocontroladora do
Flask que gera resposta para uma chamada URL
expose-model,retornando os dados geomtricos do modelo no formato
JSON (JavaScript ObjectNotation) utilizando o mdulo jsonify do
Flask.
30. 30Quadro 3 Exemplo de funo controladora. A funo
controladora apresentada na Quadro 3 segue alguns
padresapresentados por todas as funes controladoras Flask. Para que
uma funo sejaum controlador, se faz necessrio o uso de uma anotao
especfica que define aqual rota a funo responde e quais tipos de
mtodos HTTP (HyperText TransferProtocol) ela est habilitada a
processar. A Quadro 4 apresenta a estrutura daanotao responsvel por
definir funes controladoras no Flask. Quadro 4 Anotao para funes
controladoras. Detalhando um pouco mais cada item da anotao
observa-se: Module: Mdulo Python onde reside a funo anotada. Mdulos
so arquivos Python com aglomerados de funes; URL: URL mapeada para
a funo, o Flask internamente delega todas as requisies da URL para
a funo controladora mapeada. A sintaxe aceita parmetros anexados
URL; [methods]: Lista de mtodos HTTP aceitos pela funo
controladora, como por exemplo, GET, POST.
31. 313.3.3 Camada de Apresentao A camada de apresentao (CA)
responsvel pela exibio do contedogerado pela camada controladora
(CC). A CA de uma aplicao Web geralmente implementada utilizando
tecnologias suportadas pelo navegador do cliente, comopor exemplo,
JavaScript, HTML, CSS (Cascade Style Sheet), dentre outras.
Oprojeto resultante deste estudo utilizou a tecnologia Template
Engine (TE) para aimplementao da CA. De acordo com Ronacher (2011),
TE simplesmente um arquivo texto quepode gerar qualquer outro
formato baseado em texto, como por exemplo, HTML,XML (Extensible
Markup Language), CSV (Comma Separated Values), LaTeX,dentre
outros. O uso de TE incorporou algumas vantagens ao projeto, como
por exemplo, ouso de herana de templates para reaproveitar cdigo
HTML na criao de pginas.O TE utilizado neste trabalho foi o Jinja
template engine (JTE), que consiste em umTE escrito em Python. O
JTE j vem embutido como mdulo padro para criao detemplates no Flask
e permite a gerao de contedo dinmico em documentosHTML utilizando
sintaxe Python. O Quadro 5 demonstra um exemplo do uso de JTE,onde
observa-se a implementao do template ancestral para todas as pginas
doexperimento, enquanto que no Quadro 6 nota-se que alm do cdigo
HTML, existe apresena de comandos delimitados por marcadores
especiais que permitemadicionar cdigo Python ao template HTML.
Quadro 5 Template ancestral.
32. 32 Quadro 6 Instrues Python no JTE. Alguns marcadores tem a
simples finalidade de exibir um contedo dinmiconos templates, sem
necessidade de utilizar comandos da linguagem Python. Oexemplo
ilustrado nos Quadros 7 e 8 nos mostram respectivamente uma
funocontroladora da CC realizando uma busca por todos os modelos
(na CM)pertencentes um determinado usurio, e enviando a varivel
models contendo osmodelos retornados para um template da CA
destino. Quadro 7 Funo controladora main retorna os modelos para um
usurio. No Quadro 8, observa-se um trecho do template main.html que
possui umcomponente select. Cada componente option do select, tem
suas propriedadespopuladas com valores dinmicos passados pela funo
controladora querenderizou o template. Quadro 8 Trecho do template
main.html exibindo modelos de um usurio.
33. 333.4 ESTRUTURA DO PROTTIPO Para implementao do prottipo,
foi utilizado o editor de textoTextWrangler. A estrutura do projeto
pode ser vista na Figura 8. Figura 8 Estrutura do prottipo. A pasta
src a pasta onde se localizam os fontes do projeto, dentro
delaresidem os seguintes pacotes e mdulos: __init__.py - Mdulo
Python que define que a posta corrente um pacote Python.
controllers Pacote contendo o(s) mdulo(s) responsveis por
implementar as funes controladoras (camada controladora) do
prottipo. main.py Mdulo Python que inicia o funcionamento do
prottipo. persistence Pacote que implementa a camada model do
prottipo. Neste pacote residem os mdulos Python que definem as
classes que mapeiam o modelo relacional para objetos. settings.py
Mdulo Python para configuraes globais do projeto, como string de
conexo com o banco de dados por exemplo. static Pasta contendo
imagens, arquivos de estilo CSS e arquivos Javascript utilizados
pelo projeto.
34. 34 templates Pasta contendo arquivos HTML utilizados na
camada de visualizao do projeto. utilities Mdulo Python contendo
arquivos com funes de apoio, para leitura de arquivos, validao de
tipos de arquivos, etc.3.5 DIAGRAMA DE CASOS DE USO A Figura 9
apresenta o diagrama de casos de uso do prottipo desenvolvidoneste
estudo. Para construo do diagrama foi utilizada a ferramenta
AstahCommunity. O diagrama apresenta as interaes do usurio, que por
sua vezrepresenta o ator do prottipo.Figura 9 Diagrama de casos de
uso.
35. 353.6 DESCRIO DOS CASOS DE USO Cada caso de uso ilustrado
na Figura 9, representa uma ao do usurio aointeragir com o
prottipo. A Tabela 2 lista os casos de uso existentes no
prottipo.Tabela 2 Casos de uso.Nr. Descrio do Caso de Uso Entrada
Caso de Uso Sada01 Usurio realiza login. DadosUsuario EfetuarLogin
Msg0102 Usurio efetua cadastro para DadosUsuario EfetuarCadastro
Msg02 acesso ao prottipo.03 Usurio cadastra modelo. DadosModelo
CadastrarModelo Msg0304 Usurio visualiza modelo. DadosModelo
VisualizarModelo Msg0405 Usurio redimensiona modelo. Fator
RedimensionarModelo Msg0506 Usurio aplica zoom. Coordenadas
AplicarZoom Msg0607 Usurio rotacional modelo. Angulo, eixo
RotacionarModelo Msg0708 Usurio aplica translao ao Coordenadas
TransladarModelo Msg08 modelo. As mensagens de retorno do prottipo
e seus significados: Msg01: Nome de usurio incorreto! | Senha de
usurio incorreta! Msg02: Erro na realizao do cadastro! | Conta de
usurio j existente! | Cadastro realizado com sucesso! Msg03: Modelo
com extenso incorreta | Modelo com estrutura incorreta! | Modelo
cadastrado com sucesso. Msg04: Modelo no encontrado! | Seu
navegador no suporta WebGL! | Erro no redirecionamento! |
Redirecionando para visualizao! Msg05: Modelo dimensionado! Msg06:
Zoom aplicado! Msg07: Modelo rotacionado! Msg08: Posio
alterada!
36. 36Caso de uso 01:Caso de Uso EfetuarLogin EL01Atores
usuarioFinalidade Efetuar login para acesso ao prottipo.Viso Geral
O usurio informa seu login e senha para acesso e o prottipo realiza
a validao, permitindo ou no o acesso s outras funcionalidades.Tipo
PrimrioPr-Condies O usurio deve estar previamente cadastrado no
prottipo.Sequncia Tpica de EventosAo do Ator Resposta do Prottipo1
Usurio informa login e senha. 2 - Prottipo realiza validao dos
dados. 3 Prottipo redireciona usurio para pgina principal.Excees2
Prottipo realiza validao do login e senha. 2.1.1 Prottipo detecta
login no informado. 2.1.2 Prottipo emite Msg01, indicando dado
invlido. 2.2.1 Prottipo identifica senha incorreta. 2.2.2 Prottipo
emite alerta de senha incorreta para o usurio.Ps-Condies Tela
principal de acesso ao prottipo.Caso de uso 02:Caso de Uso
EfetuarCadastro EC01Atores usuarioFinalidade Efetuar cadastro para
acesso ao prottipo.Viso Geral O usurio informa seu nome, login e
senha para acesso e o prottipo realiza a validao e insero dos dados
para posterior acesso.Tipo PrimrioPr-Condies Acessar rea de
cadastro do prottipo.Sequncia Tpica de EventosAo do Ator Resposta
do Prottipo1 Usurio informa nome de usurio, login e 2 Prottipo
verifica a existncia de um usuriosenha. com mesmo login. 3 Sistema
emite Msg02 de informando que o
37. 37 cadastro foi realizado com sucesso.Excees2 Prottipo
verifica a existncia de um usurio com o mesmo login. 2.1.1 Caso
exista uma conta de usurio j cadastrada. 2.1.2 Prottipo emite
Msg02, indicando cadastro de usurio j existente e encerra caso de
uso.Ps-Condies Tela de login do prottipo.Caso de uso 03:Caso de Uso
CadastrarModelo CM01Atores usuarioFinalidade Efetuar cadastro de
modelo para visualizao no prottipo.Viso Geral O usurio informa o
path arquivo de model, o ttulo do modelo e uma descrio para o
modelo.Tipo PrimrioPr-Condies Efetuar login no prottipo.Sequncia
Tpica de EventosAo do Ator Resposta do Prottipo1 Usurio informa
path, ttulo e descrio do 2 Prottipo realiza validao do
modelo.modelo. 3 Sistema emite Msg03, informando modelo cadastrado
com sucesso.Excees2 Prottipo realiza validao no modelo. 2.1.1 Caso
o modelo possua a extenso incorreta. 2.1.2 Prottipo emite Msg03,
indicando modelo com extenso incorreta. 2.2.1 Caso o modelo no
tenha a estrutura esperada. 2.2.2 Prottipo emite Msg03, informando
que a estrutura do modelo no est de acordo.Ps-Condies Tela
principal do prottipo.Caso de uso 04:Caso de Uso VisualizarModelo
VM01Atores usuarioFinalidade Selecionar modelo para visualizao.Viso
Geral O usurio seleciona um modelo dentre uma lista pr-cadastrada
para visualizao.
38. 38Tipo PrimrioPr-Condies 1 Ter efetuado login no prottipo.
2 Ter cadastrado modelos no prottipo.Sequncia Tpica de EventosAo do
Ator Resposta do Prottipo1 Usurio informa o modelo a ser usado na 2
Prottipo cria a visualizao do modelo.visualizao. 3 Prottipo emite
Msg04 de informando o redirecionamento para a pgina de
visualizao.Excees2 Prottipo cria a visualizao do modelo. 2.1.1 Caso
o navegador no suporte WebGL exibida a Msg04, informando que o
navegadorno suporta WebGL.3 Prottipo redireciona usurio para pgina
de visualizao. 3.1 O prottipo exibe a Msg04, informando erro no
redirecionamento.Ps-Condies Tela de visualizao do modelo.Caso de
uso 05:Caso de Uso RedimensionarModelo RM01Atores usuarioFinalidade
Alterar as dimenses do modelo.Viso Geral O usurio seleciona um
modelo e por meio de aes com o mouse/teclado, altera largura,
altura e profundidade.Tipo PrimrioPr-Condies Ter criado a
visualizao.Sequncia Tpica de EventosAo do Ator Resposta do
Prottipo1 Usurio interage com o modelo por meio de 2 Prottipo
altera propriedade solicitada deperifrico (mouse/teclado),
alterando altura, acordo com a posio do cursor na
visualizao.largura e profundidade. 3 Prottipo emite mensagem Msg05
de redimensionamento efetuado.ExceesPs-Condies Tela de visualizao
do modelo.
39. 39Caso de uso 06:Caso de Uso AplicarZoom AZ01Atores
usuarioFinalidade Aplicar zoom na cmera.Viso Geral O usurio por
meio de interao utilizando teclado/mouse define as coordenadas
correntes para posicionamento da cmera.Tipo PrimrioPr-Condies Ter
criado a visualizao.Sequncia Tpica de EventosAo do Ator Resposta do
Prottipo1 Usurio interage com o modelo por meio de 2 Prottipo
altera posio da cmera.perifrico (mouse/teclado), alterando a posio
3 Prottipo emite mensagem Msg05 de zoomcorrente da cmera.
aplicado.ExceesPs-Condies Tela de visualizao do modelo.Caso de uso
07:Caso de Uso RotacionarModelo RM01Atores usuarioFinalidade
Rotacionar o modelo nos eixos indicados e utilizando um ngulo.Viso
Geral Usurio informa os eixos onde ser aplicada a rotao e o valor
do ngulo para deslocamento do modelo.Tipo PrimrioPr-Condies Ter
criado a visualizao.Sequncia Tpica de EventosAo do Ator Resposta do
Prottipo1 Usurio informa eixo onde rotao ser 2 Prottipo rotaciona o
modelo.aplicada e valor do ngulo. 3 Prottipo emite mensagem Msg07,
informando que o modelo foi rotacionado com
sucesso.ExceesPs-Condies Tela de visualizao do modelo.
40. 40Caso de uso 08:Caso de Uso TransladarModelo TM01Atores
usuarioFinalidade Aplicar translao no modelo.Viso Geral Usurio
informa coordenadas de destino para alterar a posio do modelo.Tipo
PrimrioPr-Condies Ter criado a visualizao.Sequncia Tpica de
EventosAo do Ator Resposta do Prottipo1 Cliente informa as
coordenadas nos eixos x, 2 Prottipo altera a posio do modelo.y e
z.ExceesPs-Condies Tela de visualizao do modelo.3.7 MODELOS VTK O
VTK consiste em uma biblioteca escrita em C++, que implementa
umsistema de computao grfica. O VTK oferece diversas ferramentas
paraprocessar, renderizar e armazenar modelos do mundo real. A
biblioteca nos permitetrabalhar com informaes sobre a geometria e
propriedades associadas aoselementos que o compe. Imaginando como
modelo o exemplo de uma seo dacartida humana, identifica-se como
propriedades deste modelo a pressosangunea para cada ponto da
parede da artria, o coeficiente de elastano daparede arterial,
dentre outras. Como j descrito anteriormente, um modelo VTK
composto pela geometriado objeto e por suas propriedades, caso
existam. Para construir objetos o VTKdispe de um conjunto de clulas
equivalentes ou compostas por primitivasgeomtricas da OpenGL, que
nada mais so do que formas geomtricas que porsua vez so formadas
por pontos e linhas. O VTK permite por meio do usocombinado de
clulas construir modelos mais complexos. No que diz respeito aos
tipos de elementos que compem a geometria dosmodelos, pode-se ter
malhas homogneas e heterogneas. Malhas homogneas
41. 41so estruturas compostas em sua totalidade por clulas de
mesmo tipo, como porexemplo, uma malha composta apenas por clulas
do tipo vtk_triangle. Malhasheterogneas como sugere o nome so
estruturas compostas por dois ou mais tiposdiferentes de clulas,
como por exemplo a topografia de uma regio, contendovtk_triangles,
vtk_tetrahedrons, etc. A Figura 10 exemplifica alguns dos tipos
declulas VTK disponveis. Apenas o tipo heterogneo de malha foi
considerado nesteestudo. Figura 10 Diferentes tipos de clulas VTK
Fonte: VTK FORMATS, (2011)3.8 TIPO DE DATASET VTK ABORDADO NO
PROJETO Um dataset consiste de objetos que possuem uma estrutura e
informaesde atributos associados mesma. A dataset de um modelo por
sua vez compostopor dois tipos de informaes, topolgicas e
geomtricas (SCHROEDER , 2002). As informaes topolgicas de um modelo
fornecem o conjunto depropriedades que no variam de acordo com
certas transformaes geomtricas,como por exemplo, rotao e translao.
As informaes topolgicas nos permitemidentificar os tipos de clulas
utilizados na construo do modelo. (SCHROEDER ,2002). As informaes
geomtricas complementam a informao topolgicafornecendo dados sobre
sua posio no espao tridimensional. As informaes
42. 42referentes geometria dizem respeito s coordenadas
espaciais dos pontos.(SCHROEDER , 2002). Por ltimo as informaes de
atributos associadas geometria e/ou topologiapode ser um escalar
representando temperatura, elastano, presso, etc. O tipo de dataset
abordado neste estudo foi o VTK Polygonal data, sendoeste tipo
selecionado por ser o mais comumente utilizado no VTK para
representarobjetos tridimensionais. A Figura 11 ilustra o dataset
utilizado neste trabalho o VTKPolydata . Figura 11 Exemplos de
estruturas VTK Polydata De acordo com (SCHOREDER, 2002), VTK
Polygonal Data um datasetque compreende vertices, polyvertices,
lines, polylines, polygons e triangle strips. OVTK Polygonal Data
um dataset que possui geometria e topologia noestruturados, e as
clulas que compem o dataset podem variar de acordo com adimenso da
topologia, isto , modelos que possuem este tipo de dataset
podemconter em sua topologia diversos tipos de elementos
geomtricos, tringulos, linhase outros.3.9 LEITURA DE MODELOS VTK
COM PYVTK Nesta seo apresentado o mdulo escrito em Python, que se
destina amanipular arquivos VTK, contendo informaes de modelos VTK.
Este mdulo
43. 43permite a fcil leitura e escrita de dados nos formatos de
arquivos suportados peloVTK de forma simples e rpida. O prottipo
desenvolvido neste estudo necessita das informaes detopologia e
geometria do modelo VTK de forma a criar visualizao necessria. Apsa
submisso dos arquivos VTK pelo usurio do prottipo, o mesmo
armazenadono lado servidor, e quando este processo finalizado o
usurio do prottipo podefazer a visualizao do modelo VTK de acordo
com as informaes contidas noarquivo enviado. No momento em que uma
visualizao solicitada, o arquivo relativo aomodelo aberto pelo
mdulo PyVTK, e as informaes sobre a topologia egeometria dos
objetos so lidas e armazenadas em memria para envio ao ladocliente
do prottipo para que o SceneJS crie a visualizao dos dados. Para
entender como a informao lida do arquivo VTK faz-se
necessrioentender como as informaes se apresentam no mesmo. Com
relatado empargrafos anteriores, um modelo VTK possui um dataset
que agrupa informaessobre topologia e geometria de modelos. A
diviso de um arquivo VTK compostapor 5 partes, so elas: - A
primeira parte apresenta uma linha representando a verso9 do
arquivo e o identificador. A verso corresponde verso do VTK na qual
o arquivo pode ser aberto. - A segunda parte o cabealho do arquivo.
O cabealho consiste de uma cadeia de caracteres terminados com o
caracter n e pode conter no mximo 256 caracteres. O cabealho
geralmente usado para se descrever o modelo. - A terceira parte
consiste no formato do arquivo. O formato informa se o arquivo est
em formato ASCII ou binrio na linha correspondente a palavra ASCII
ou BINARY deve estar presente. - A quarta parte apresenta a
estrutura do dataset, que consiste em informaes topolgicas e
geomtricas do modelo. As informaes tem incio em uma linha contendo
a palavra-chave DATASET seguida da palavra que descreve o tipo de
dataset, como por exemplo, UNSTRUCTURED_GRID.9 A verso neste caso
se refere maxima versao possvel do VTK habilitada a processar o
arquivo.
44. 44 - A quinta e ltima parte descreve os atributos do
dataset, e esta seo pode conter a palavra-chave POINT_DATA ou
CELL_DATA, seguidas de um valor inteiro que descreve o nmero de
pontos ou clulas. O Quadro 9 apresenta uma viso geral da estrutura
de um arquivo VTKlegado em formato ASCII.Quadro 9 Estrutura de
arquivo VTKFonte: VTK FORMATS (2011). O Quadro 10 ilustra um trecho
de arquivo VTK no formato utilizado ASCII.
45. 45 Quadro 10 Exemplo de contedo interno de arquivo VTK
Fonte: VTK FORMATS (2011) Sabendo-se como um arquivo VTK est
estruturado, basta definir quaisinformaes precisam ser extradas do
modelo para criar sua representao grfica.Para o escopo do presente
trabalho, foi definido que apenas a geometria seriareconstruda,
logo no seriam levadas em considerao informaes comoescalares
associados ao modelo, como por exemplo, tensores e vetores
quepoderiam representar algum tipo de grandeza. Para construir uma
representaogrfica do modelo, as informaes necessrias so a geomtrica
e topolgica. Oprimeiro passo extrair as coordenadas dos pontos no
espao. Os pontos so lidosseguindo a ordem sequencial em que
aparecem no arquivo, e a posio dascoordenadas dos pontos
equivalente ao ndice usado na seo de conexes. Porexemplo, no Quadro
10, a seo POINTS contm 8 pontos, cada ponto formadopelas suas
coordenadas tridimensionais nos eixos x, y e z, o conjunto de 8
pontosgera um conjunto de ndices que vai de 0 a 7. A Tabela 3 exibe
os pontos e seusrespectivos ndices.
46. 46Tabela 3 Pontos e ndices da geometria de um modelo VTK.
ndice do ponto Coordenada X Coordenada Y Coordenada Z 0 0.0 0.0 0.0
1 1.0 0.0 0.0 2 1.0 1.0 0.0 3 0.0 1.0 0.0 4 0.0 0.0 1.0 5 1.0 0.0
1.0 6 1.0 1.0 1.0 7 0.0 1.0 1.0 Os ndices so de fundamental
importncia para a obteno dos tipos deprimitivas que precisam ser
usadas para construo do modelo e a lista deconexes. Na seo POLYGONS
apresentada no Quadro 10, pode-se verificar queo modelo composto de
6 polgonos e o total de dados a ser lido na seocompreende 30 dados
numricos. Cada linha na seo POLYGONS representa oconjunto de pontos
que formam os vrtices do polgono precedidos pela quantidadede
pontos que a primitiva usada possui. No caso do arquivo
exemplificado peloQuadro 10, constata-se que o modelo composto em
sua totalidade por apenas umtipo de primitiva, e esta primitiva
possui 4 lados. A Tabela 4 permite interpretar deforma resumida a
seo POLYGONS que define as primitivas e suas propriedades,que por
sua vez constituem o objeto ilustrado pelo Quadro 10.Tabela 4 Seo
POLYGONS do arquivo VTK.ndice do ponto ndice 0 ndice 1 ndice 2
ndice 3 4 0 1 2 3 4 4 5 6 7 4 0 1 5 4 4 2 3 7 6 4 0 4 7 3 4 1 2 6
5
47. 47 A Figura 12 apresenta a visualizao dos dados referentes
ao arquivo dedados ilustrado no Quadro 10, feita no software
Paraview. Figura 12 Visualizao de modelo VTK no software Paraview.
Aps realizar a leitura dos dados o mdulo PyVTK mantm objetos
querefletem as sees descritas anteriormente. Durante a implementao
do prottipodeste estudo, foi criado um mdulo10 Python chamado
vtk_reader.py que utiliza omdulo PyGTK para realizar a leitura dos
dados do modelo e disponibilizar para asprximas camadas do sistema.
No mdulo vtk_reader.py foi implementada a classeVTKPolyDataReader,
classe responsvel pela leitura de datasets VTK Polydata apartir de
arquivos VTK. O diagrama de classe apresentado na Figura 13,
apresentaa classe seus atributos e operaes.10 Arquivo Python
contendo uma ou mais classes e/ou funes utilitrias.
48. 48 Figura 13 Diagrama de classe do leitor de modelos VTK
Polydata. A utilizao da classe bem simples. Ela foi desenhada de
forma a receber ocaminho completo do arquivo, e de posse desta
informao realizar a leitura dosdados existentes no arquivo. Aps a
leitura dos dados a classe disponibiliza 6atributos importantes so
eles: - indices: Uma lista contendo as conexes dos pontos que
formam as primitivas/clulas na ordem em que aparecem no arquivo. -
vertices: Uma lista de todas as coordenadas encontradas no arquivo
na ordem em que aparecem no mesmo. - normals11: Lista contendo os
valores das normais para cada vrtice, sendo que os valores no vem
do arquivo, so calculados pela classe VTK vtkPolyDataNormals, que
retorna uma lista de objetos PolyDataNormals, um para cada vrtice.
Ao final do processamento a classe filtra os valores das normais e
as armazena no atributo normals cuja sequncia acompanha a sequncia
dos vrtices obtidos no arquivo.3.10 RENDERIZANDO O MODELO VTK
USANDO SCENEJS De posse dos dados do modelo, a prxima etapa a ser
executada arepresentao grfica (RG) dos dados no lado cliente da
aplicao. No prottipodesenvolvido neste trabalho, a responsabilidade
por criar a representao grfica11 So vetores de direo, normalmente
usados por sistemas de computao grfica para controlar ouso de
shading em objetos. Podem ser usados tambm para controlar a
orientao e gerao dasprimitivas. (SCHROEDER, 2002)
49. 49dos modelos cabe ao framework SceneJS. Para se criar RGs
no SceneJS, devem-se criar ns que representam cada recurso presente
na RG. Com o SceneJS pode-se criar diversos tipos de ns, como por
exemplo, um n do tipo scene12. A estruturade um n no SceneJS
consiste de atributos (que variam de acordo com o tipo de n)e ns
filhos13. O Quadro 11 ilustra a definio da estrutura de um n do
tipo sceneno SceneJS. Quadro 11 Estrutura de um n do tipo scene Com
exceo do atributo id, todos os outros atributos apresentados
noQuadro 11 so obrigatrios na definio de uma cena, e se no
informados,recebem valores padro. O atributo type tem como valor
uma cadeia de caracteresque define o tipo de n que est sendo
criado. Id um atributo identificador, utilizadopara se obter e
interagir com ns no contexto da pgina Web por meio de
DOM14(Document Object Model). O atributo canvasId tem como objetivo
definir em queelemento Canvas da pgina Web onde se cria a cena. O
atributo loggingElementIddefine o elemento presente na pgina Web
para onde o SceneJS redireciona suas12 N raiz de uma representao
grfica, cria um contexto tridimensional dentro do elemento Canvasdo
HTML5.13 Ns que residem dentro de outros ns, geralmente agrupados
em lista. Ns que possuem nsfilhos, podem realizar operaes nos
mesmos e alterar seus atributos.14 Interface independente de
linguagem e plataforma que possibilita o acesso a estrutura
dedocumentos. (DOM, 2011)
50. 50mensagens de log. Por fim, o atributo nodes que agrupa
uma lista de ns filhos, nocaso de uma cena um n filho pode ser um n
do tipo cmera, renderer, e outros. O prottipo desenvolvido neste
estudo cria uma RG, seguindo a estruturailustrada pela Figura 14,
onde so apresentados os ns e seus componentes. Figura 14 Estruturas
de ns tpica para criao de uma representao grfica. O n de tipo
lookAt fornece algumas configuraes iniciais para ajuste decmera. O
Quadro 12 apresenta uma configurao bsica de um n do tipo lookAt.
Quadro 12 Estrutura de n do tipo lookAt.
51. 51 No Quadro 12 nota-se a presena de alguns atributos
particulares ao nlookAt. O atributo eye que define a posio da cmera
no espao recebe um objetoJSON, contendo as coordenadas nos eixos x,
y e z. Caso no sejam informadosvalores, o padro 0.0 para todos os
eixos. O atributo look determina a direo paraonde a cmera estar
observando, assim como no atributo eye recebe um objetocom valores
para os 3 eixos, sendo que eixos que so omitidos recebem o valor
0.0por padro. O atributo up define qual dos eixos x, y ou z sero
apresentados navertical. No caso do exemplo ilustrado no Quadro 12,
o eixo y foi selecionado. O tipo de n camera possui por sua vez
atributos particulares. O atributooptics, que consiste de um objeto
JSON contendo uma srie de propriedades, tendopor exemplo type,
fovy, aspect, near e far. A Tabela 5 descreve a funo de cada 15uma
dessas propriedades para o tipo de cmera ortogonal, utilizada
naimplementao do prottipo.Tabela 5 Propriedades do tipo camera.
Propriedade Funo type Tipo de cmera: perspectiva, ortogonal,
frustrum. fovy Campo de viso horizontal em graus. aspect Aspect
ratio do campo de viso. near Limite de proximidade do plano de
corte. far Limite de distanciamento do plano de corte. O Quadro 13
apresenta uma configurao bsica de um n do tipo camera. Figura 13
Estrutura de um n do tipo camera.15 As propriedades variam de
acordo com o tipo de camera adotado.
52. 52 Os ns do tipo light fornecem meios para aplicao de
iluminao nosmateriais a serem renderizados. Existem diversos tipos
de iluminao, difusa,especular, ambiente. O SceneJS permite a
definio de diferentes modos deiluminao, por ponto e iluminao
direcionada. No prottipo foi utilizado um n deiluminao direcionada,
com direo definida a partir da coordenada espacial x, y e z(0.0,
-1.0, 0.0). As Figuras 16 e 17 apresentam uma esfera com iluminao e
semiluminao respectivamente. Figura 16 Esfera com iluminao. Figura
17 Esfera sem iluminao. O Quadro 14 ilustra a definio de um n do
tipo light.
53. 53 Quadro 14 Estrutura de um n do tipo light. Ns de tipo
material define como a iluminao ser refletida pela
geometriadefinida dentro do material. A Tabela 6 apresenta algumas
propriedades especficasque podem ser configuradas.Tabela 6
Propriedades de um n do tipo material. Propriedade Funo emit
Coeficiente de emissor do material, controla intensidade de emisso
de luz. baseColor Configura a cor do material. specularColor Define
a cor da iluminao reflexiva a ser aplicada. specular Fator de
intensidade da iluminao reflexiva. shine Fator que controla a
intensidade de brilho do material. O Quadro 15 exibe um n do tipo
material e suas configuraes bsicas. Quadro 15 Estrutura de um n do
tipo material.
54. 54 Os ns do tipo material encapsulam ns do tipo geometry,
porm existemsituaes onde h necessidade de aplicao de transformaes
geomtricas comopor exemplo, rotao, translao, escala. Existem ns de
tipos que refletemoperaes geomtricas a serem executadas em ns de
tipo geometry, podendo-secitar, rotate, translate, scale. Podem
existir mais de um n aninhado de forma acombinar operaes geomtricas
para se chegar ao resultado esperado. O Quadro16 apresenta um
conjunto de ns que aplicam rotao, translao e escala. Quadro 16
Conjunto de ns para operaes geomtricas. Ns de tipo geometry definem
informaes geomtricas dos objetos a seremapresentados na cena. A
Tabela 7 exibe informaes dos principais propriedades esua
funo.Tabela 7 Propriedades de um n do tipo geometry. Propriedade
Funo primitive Tipo de primitiva grfica adotada no objeto.
positions Coordenadas x, y, z de cada ponto que forma o objeto.
normals As normais pertencentes ao objeto. ndices Conectividade dos
pontos que formam os objetos.
55. 553.11 INTERAGINDO COM O MODELO O prottipo desenvolvido
neste estudo permite a interao do usurio com omodelo VTK em cena.
As interaes s se tornam possveis graas ao mecanismode listeners do
elemento Canvas presente no HTML5. Com o recurso de
listeners,pode-se adicionar funes que devem ser executadas caso um
certo tipo de eventoocorra, como por exemplo, mousedown, mousemove,
etc. O Quadro 17 apresenta aconfigurao de listeners para o Canvas
presente no prottipo.Quadro 17 Configurao de listener.3.11.1
Transformaes geomtricas Dentre os tipos de interaes presentes no
prottipo desenvolvido nesteestudo, pode-se citar as transformaes
geomtricas, rotao, translao e escala.3.11.1.1 Rotao A operao de
rotao consiste em alterar o ngulo de corrente em um doseixos x, y
ou z. No prottipo, foi criada uma funo para efetuar rotao nos eixos
xe y de acordo com a movimentao do mouse. O Quadro 18 ilustra a
implementaoda funo JavaScript mouseMove que identifica se um evento
de arrastar do mouseest ocorrendo e executa as mudanas necessrias
nos ns de rotao, em seguidaatualizando a cena.
56. 56 Quadro 18 Funo mouseMove.Nota-se no Quadro 18 que h o
uso da funo withNode presente no SceneJS,funo esta que permite
obter um n presente na cena, possibilitando a alterao desuas
propriedades.3.11.1.2 Translao A translao consiste em mover todos
os pontos de um dado objeto noseixos ortogonais especificados dado
o valor das distncias em cada eixo. As Figuras18 e 19 ilustram um
objeto nas coordenadas (x: 0.0, y: 0.0, z: 0.0), e o mesmo
objetoaps sofrer translao para as coordenadas (x: 3.0, y: 3.0, z:
0.0). O Quadro 19exibe a funo javascript que realiza a translao do
modelo. Figura 18 Objeto nas coordenadas (0.0, 0.0, 0.0).
57. 57 Figura 19 Objeto nas coordenadas (3.0, 3.0, 0.0). Quadro
19 Funo translate, responsvel por transladar o modelo.3.11.1.3
Escala A operao de escala afeta o objeto alterando suas dimenses
nos eixosespecificados. As Figuras 20 e 21 apresentam
respectivamente um objeto em seutamanho original e o mesmo objeto
com sua altura alterada.
58. 58 Figura 20 Objeto e suas dimenses originais. Figura 21
Objetos com alteraes em sua dimenso. O Quadro 20 mostra a funo
responsvel por calcular a escala do objeto. Quadro 20 Funo scale.
As funes Javascript apresentadas at ento residem dentro do
cdigoHTML5 da pgina onde a representao grfica do Modelo VTK
Polydata criada.
59. 594 RESULTADOS E DISCUSSES Neste captulo sero apresentados
os resultados e funcionalidades dosistema.4.1 LOGIN O login para
acesso ao prottipo possibilita a entrada de um usuriopreviamente
cadastrado no mesmo. A Figura 22 ilustra a pgina de login. Figura
22 Pgina de Login. Aps informar usurio e senhas vlidos o usurio tem
acesso ao prottipo esuas funcionalidades, como por exemplo, o envio
de arquivos de modelos VTK e suavisualizao.
60. 604.2 REGISTRO NO SISTEMA A pgina de registro ao prottipo
acessada atravs do link sign uppresente na tela de login do
prottipo. Ao acessar a pgina de registro, uma tela decadastro de
informaes exibida ao usurio do prottipo. A Figura 23 apresenta
atela de registro de usurios. Figura 23 Pgina de registro de
usurios. Aps preencher o nome, email e senha o cadastro do usurio
realizado eele est apto a acessar as funcionalidades do
prottipo.4.3 PGINA PRINCIPAL Ao acessar o prottipo informando
usurio e senha corretos na tela de login,o usurio redirecionado
para a pgina principal do prottipo para ento fazer usode suas
funcionalidades. Conforme apresentado na Figura 24.
61. 61 Figura 24 Pgina principal do prottipo. Na pgina
principal o usurio possui acesso s seguintes funcionalid