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