Visualizaçãi de Modelos VTK Utilizando WebGL: Um estudo experimental.

  • 813 views
Uploaded on

This study presents an usage of WebGL technology for VTK Polygonal Data visualization over the Web, without need for installing browser plugins. It also shows tools, methods and concepts that, …

This study presents an usage of WebGL technology for VTK Polygonal Data visualization over the Web, without need for installing browser plugins. It also shows tools, methods and concepts that, integrated, provide a way for creating a prototype for visualizing VTK Polygon Data models over the Web. The study was developed based in researches about different technologies involved in the process of creating the prototype that was implemented in this study, since data model definition and utilization of a Web framework, to using the SceneJS framework in the construction of graphical representation. The application of the researched technologies allowed implementing the prototype of VTK Polygonal Data model visualization over the Web.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
813
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
14
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ – UTFPRPROGRAMA DE PÓS-GRADUAÇÃO EM PROJETO E DESENVOLVIMENTO DE SISTEMAS BASEADOS EM OBJETOS PARA AMBIENTE INTERNET JAN PALACH VICENTE CRUZ DA SILVA VISUALIZAÇÃO DE MODELOS VTK UTILIZANDO WEBGL:UM ESTUDO EXPERIMENTAL MONOGRAFIA DE ESPECIALIZAÇÃO MEDIANEIRA 2011
  • 2. 2 JAN PALACH VICENTE CRUZ DA SILVAVISUALIZAÇÃO DE MODELOS VTK UTILIZANDO WEBGL:UM ESTUDO EXPERIMENTAL Trabalho de Conclusão de Curso apresentado à Universidade Tecnológica Federal do Paraná – Câmpus Medianeira, como requisito parcial à obtenção do grau de Especialista em Projeto e Desenvolvimento de Sistemas Baseados em Objetos para Ambiente Internet. Orientador: Prof. M.Sc. Fernando Schütz MEDIANEIRA 2011
  • 3. Ministério da Educação Universidade Tecnológica Federal do Paraná Diretoria de Pesquisa e Pós-Graduação Especialização em Projeto e Desenvolvimento de Sistemas baseados em Objetos para Ambiente Internet TERMO DE APROVAÇÃO Visualização 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 obtenção do título de ESPECIALISTA, no curso deEspecialização em Projeto e Desenvolvimento de Sistemas baseados em Objetospara Ambiente Internet, da Universidade Tecnológica Federal do Paraná, CâmpusMedianeira. O acadêmico foi arguido pela Banca Examinadora composta pelosprofessores abaixo assinados. Após deliberação, a Banca Examinadora considerouo trabalho aprovado. Prof. Me. Fernando Schütz Prof. Me. Pedro Luiz de Paula Filho Orientador Convidado UTFPR – Campus Medianeira UTFPR – Campus Medianeira Prof. Me. Juliano Rodrigo Lamb Prof. Me. Fernando Schütz Convidado Coordenador do Curso de Especialização UTFPR – Campus Medianeira UTFPR – Campus Medianeira A FOLHA DE APROVAÇÃO ASSINADA ENCONTRA-SE NA DIRETORIA DE PÓS-GRADUAÇÃO DA UTFPR CÂMPUS MEDIANEIRA UTFPR – DIRPPG Av. Brasil, 4232 – Pq Independência 85884000 – Medianeira – PR www.utfpr.edu.br/medianeira +55(45) 3240-8074
  • 4. DEDICATÓRIA À 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 educação e cuidados na minha criação. A “turma B”, pelos momentos de risada, e especialmente pelas trocas dedatas dos eventos que ocorriam aos sábados. Ao professor Rodrigo Luis de Souza da Silva, por responder meus e-mails equestionamentos sobre computação gráfica, isso foi fundamental para a conclusãodo estudo. Ao professor Everton que no início da caminhada me brindou com seu pontode vista ímpar, sobre as versões iniciais de código e do texto. Ao professor Fernando Schütz, por orientar este trabalho apontando asdevidas correções. A Blizzard Entertainment por ter criado clássicos como StarCraft e Diablo. A Steve Jobs, por fazer da computação pessoal o que ela é hoje, ereinventar a tablet e o smartphone. A Apple, por fazer computadores fantásticos e um sistema operacional dignode respeito e admiração.
  • 6. 6 RESUMOSILVA, Jan. Visualização de modelos VTK utilizando WebGL: um estudoexperimental. 2011. 67 f. Monografia (Especialização em Desenvolvimento deSistemas Orientados a Objeto) – Programa de Pós-Graduação em Tecnologia,Universidade Tecnológica Federal do Paraná. Medianeira, 2011.Este estudo apresenta o uso da tecnologia WebGL para visualização de modelosVTK Polygonal Data através da Web, sem a necessidade de instalação de plug-insem navegadores. Apresenta também ferramentas, métodos e conceitos queintegrados, fornecem um meio para construção de um protótipo de visualização demodelos VTK Polygonal Data na Web. O estudo foi desenvolvido com base empesquisas sobre as diferentes tecnologias presentes no processo de construção doprotótipo implementado neste estudo, desde a definição do modelo de dados e autilização de um framework Web, até o uso do framework SceneJS na construção darepresentação gráfica. A aplicação das tecnologias pesquisadas, permitiu aimplementação do protótipo de visualização de modelos VTK Polygonal Data atravésda 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 (Especialização em Desenvolvimento de SistemasOrientados a Objeto) – Programa de Pós-Graduação em Tecnologia, UniversidadeTecnológica 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 Computação Gráfica.CAD Computer Aided Designed.CS Cliente/Servidor.CM Camada Modelo.CC Camada Controladora.CA Camada de Apresentação.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 SUMÁRIO1 INTRODUÇÃO ....................................................................................................... 10  1.2.1 Objetivo Geral ................................................................................................... 11  1.2.2 Objetivos Específicos ....................................................................................... 12  1.3 JUSTIFICATIVA................................................................................................... 12  1.4 ESCOPO DO TRABALHO ................................................................................... 13  2 FUNDAMENTAÇÃO TEÓRICA ............................................................................. 15  2.1 COMPUTAÇÃO GRÁFICA .................................................................................. 15  2.2 WEBGL ................................................................................................................ 16  2.3 HTML5 ................................................................................................................. 17  2.4 LINGUAGEM DE PROGRAMAÇÃO JAVASCRIPT ............................................. 17  2.5 FRAMEWORK SCENEJS .................................................................................... 18  2.6 BIBLIOTECA VTK ................................................................................................ 21  2.7 LINGUAGEM DE PROGRAMAÇÃO PYTHON .................................................... 23  2.8 FRAMEWORK FLASK ......................................................................................... 23  2.9 ORM SQLALCHEMY ........................................................................................... 24  3 PROCEDIMENTOS METODOLÓGICOS............................................................... 25  3.1 LEVANTAMENTO E ANÁLISE BIBLIOGRÁFICA ................................................ 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 Apresentação ................................................................................ 31  3.4 ESTRUTURA DO PROTÓTIPO ........................................................................... 33  3.5 DIAGRAMA DE CASOS DE USO ........................................................................ 34  3.6 DESCRIÇÃO 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 Transformações geométricas ......................................................................... 55  3.11.1.1 Rotação ....................................................................................................... 55  3.11.1.2 Translação ................................................................................................... 56  3.11.1.3 Escala .......................................................................................................... 57  4 RESULTADOS E DISCUSSÕES ........................................................................... 59  4.1 LOGIN .................................................................................................................. 59  4.2 REGISTRO NO SISTEMA ................................................................................... 60  4.3 PÁGINA PRINCIPAL............................................................................................ 60  4.4 PÁGINA DE VISUALIZAÇÃO E INTERAÇÃO COM O MODELO ........................ 61  5. CONSIDERAÇÕES FINAIS .................................................................................. 64  REFERÊNCIAS ......................................................................................................... 65  
  • 10. 101 INTRODUÇÃO Segundo a ISO – (International Organization for Standardization), Adefinição de computação gráfica é: “Um conjunto de ferramentas e técnicas paraconverter dados de ou para um dispositivo gráfico através do computador”. (CONCI;AZEVEDO, 2003, p. 03) Foram realizados grandes avanços na área de CG (Computação Gráfica)graças à evolução do hardware nos últimos anos, o que permitiu a evolução deáreas como a realidade aumentada, área que visa melhorar a interação doshumanos com ambientes virtuais. Com o avanço constante da plataforma Web, ossistemas de CG começam uma migração do paradigma desktop no qual estavaminseridos, para o ambiente Internet. As Applets1 possibilitaram alguns dos primeirosexperimentos na visualização de gráficos tridimensionais em navegadores. Houvetambém o surgimento da tecnologia Flash da Adobe, que hoje permite acesso àGPU2, porém para ambos os casos se faz necessária a instalação de plug-ins. Uma solução que vem surgindo e que promete se tornar padrão para o usode CG na Web através de browsers é a WebGL, que consiste de uma bibliotecaJavaScript e de código aberto que permite acesso à GPU e exibe elementos gráficoscomplexos como modelos tridimensionais. A WebGL funciona em conjunto com oelemento Canvas do HTML5 (Hypertext Markup Language 5). O elemento Canvaspermite a criação de um contexto para geração de cenas e criação de objetostridimensionais e bidimensionais. O HTML5 vem sendo implementado por umconsórcio entre empresas como Apple, Microsoft, Google, Adobe, e tem por objetivose tornar o novo padrão para construção de páginas Web.1 Applets são um tipo especial de programas Java, que um navegador com Java habilitado, podebaixar e rodar dentro de uma página 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 necessária ainstalação de plug-ins para visualização de elementos gráficos avançados comofiguras tridimensionais por meio de um navegador através da Web. Foi detectada anecessidade de possibilitar a fácil visualização de modelos bi e tridimensionais pormeio da Internet sem a necessidade de instalação de plug-ins em navegadores ouqualquer tipo de cliente desktop. Na área de visualização científica existem diversos formatos que podem serutilizados na visualização de dados e simulações, dentre eles os modelos VTK. Com base no problema acima, identificou-se o seguinte enunciado: Comopossibilitar a visualização de modelos VTK por meio de navegadores Web sem ainstalação de plug-ins?1.2 OBJETIVOS Este trabalho, que trata sobre novas formas de apresentação de modelostridimensionais na Internet e sobre Computação Gráfica, tem seus objetivosdescritos nas seções que seguem.1.2.1 Objetivo Geral Desenvolver um protótipo de ferramenta Web para visualização de modelosVTK do tipo VTK Polydata, diretamente no navegador sem a necessidade deinstalação de plug-ins.
  • 12. 121.2.2 Objetivos Específicos a) analisar a viabilidade do uso da WebGL por meio do framework SceneJS na visualização de modelos VTK Polydata através da Web; b) criar uma Representação Gráfica (RG), seguindo a estrutura definida pelo framework SceneJS. c) implementar mecanismos para interação do usuário com o modelo utilizado na visualização, fazendo uso do framework SceneJS;1.3 JUSTIFICATIVA O ambiente Web fornece um excelente meio para difusão de conhecimentoe informação. Cada vez mais pode-se ver sistemas de computação migrando doparadigma desktop para Web. A CG já iniciou sua jornada na mudança deparadigma. Nos dias atuais já aparenta ser possível a execução de jogossofisticados que fazem uso de recursos avançados das principais placas de vídeo domercado através de um navegador, ou mesmo visualizar o modelo tridimensionalproveniente de algum estudo médico sem a necessidade de plug-ins. A justificativa deste projeto, é prover um protótipo de visualização demodelos VTK em ambiente Internet utilizando tecnologias suportadas por grandeparte dos navegadores atuais, e sem a necessidade de instalação de plug-ins,resultando em praticidade no uso do sistema e menos problemas relacionados àsegurança de plug-ins de terceiros.
  • 13. 131.4 ESCOPO DO TRABALHO Foram necessárias algumas restrições no desenvolvimento do experimentoproposto por este trabalho. O experimento abordou apenas um tipo de modelo VTK,o VTK Polygonal Data. É possível que um modelo VTK seja composto por diversos tipos deprimitivas gráficas, como por exemplo, triângulos, quadrados, linhas, pontos, primas,etc. O VTK é rico em primitivas gráficas que utilizadas em conjunto podem formarfiguras mais complexas. A WebGL apresenta apenas as primitivas PONTO, LINHA eTRIÂNGULO. Um modelo gráfico na WebGL pode ser composto por apenas um dostipos de primitivas citadas, esta limitação está diretamente ligada a como éconstruída a conectividade dos pontos que formam a geometria dos objetos. O protótipo executa apenas em navegadores com suporte à WebGL, e emalguns casos este suporte deverá ser ativado pelo usuário nas preferências donavegador, como é o caso do navegador Safari 5.1 disponível no Mac OS X Lion. Não foi foco deste trabalho avaliar a performance do experimentocomparando-o com alguma solução já existente no mercado. A viabilidade do experimento está ligada a fatores externos que podem atuarcomo limitadores, como por exemplo a velocidade de conexão utilizada para otráfego de dados, limitações da tecnologia JavaScript no que diz respeito aoprocessamento de grandes quantidades de dados e diferenças na implementaçãodo JavaScript entre navegadores. Esses fatores não 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 implementação do protótiposuportem arquivos legados em formato binário.
  • 14. 141.5 DIVISÃO DO TRABALHO Este trabalho está dividido em 5 capítulos. O capítulo 1 é uma breve introdução sobre o assunto do projeto,apresentando a justificativa e objetivos do projeto. O capítulo 2 contém a fundamentação teórica com informações sobre asferramentas utilizadas neste trabalho. O capítulo 3 apresenta os procedimentos metodológicos, tipo da pesquisarealizada neste trabalho, métodos utilizados, definição da arquitetura do protótipo e aconstrução do mesmo. O capítulo 4 descreve os resultados obtidos no estudo. O capítulo 5 apresenta a conclusão do trabalho e possíveis direções para acontinuidade desse trabalho.
  • 15. 152 FUNDAMENTAÇÃO TEÓRICA Neste capítulo é apresentada a fundamentação teórica que serviu de basepara este trabalho.2.1 COMPUTAÇÃO GRÁFICA Pesquisadores da área concordam que a CG surgiu na década de 50. Deacordo com Machover (1978 p. 38), neste período 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 simulação de vôo. Seu projeto foi iniciado pelo Office NavalResearch em parceria com o Massachusetts Institute of Tecnology Digital ComputerLaboratory. Na década de 60, destaca-se Ivan Sutherland com uma importantepublicação na área da CG (Sketchpad – A Man-Machine Graphical ComunicationSystem), que se tratava de um estudo sobre estruturas de dados paraarmazenamento de informações referentes à elementos gráficos. Em sua obra IvanSutherland também descreve técnicas de interação que utilizavam teclado e canetaótica, para realizar desenhos e interagir por meio de toque. A publicação logodespertou interesse de empresas automobilísticas e aeroespaciais, que utilizariamos conceitos ali descritos no desenvolvimento de seus produtos. Assim o CAD(Computer Aided Design) surgiu. (CONCI; AZEVEDO, 2003) A década de 70 representa o surgimento de empresas interessadas emfornecer dispositivos e sistemas de CG. Durante este período haviam muitasempresas que atuavam no ramo da CG, seja fornecendo o hardware necessário àexecução desses sistemas seja criando novos sistemas gráficos. A tecnologia haviase popularizado. Ainda na década de 70 surgem algoritmos famosos como o z-buffere sombreamento. Neste mesmo período a CG passa a ser reconhecida como área
  • 16. 16especifica da ciência da computação, e surgem congressos específicos como oSIGGRAPH. (MACHOVER, 1978) Na década de 80 ganham destaque as técnicas de processamento deimagens, sendo aplicadas nas áreas de processamento de imagens de satélite e deexplorações interplanetárias. (CONCI; AZEVEDO, 2003) Na década de 90, a CG já consolidada passa a estar presente também noscinemas, sendo que a técnica 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 período é osurgimento da biblioteca OpenGL em 1992 e as primeiras placas gráficas 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 renderização tridimensional derivada daOpenGL ES 2.0 API. A WebGL tem como objetivo fornecer as funcionalidades derenderização presentes na OpenGL ES 2.0, em um contexto HTML. (KHRONOSGROUP, 2011) A WebGL faz uso do elemento Canvas presente no HTML5 pararenderização de objetos. São fornecidas primitivas gráficas pela API, o que facilita odesenvolvimento e a torna mais amigável aos desenvolvedores que já possuemexperiência com a programação OpenGL para desktops. (KHRONOS GROUP,2011) Para renderizar objetos tridimensionais no elemento Canvas, a WebGLgerencia uma viewport3 retangular com origem na posição (0,0) e tamanho e larguravariando de acordo com os atributos largura e altura do elemento Canvas.3 Viewport é a região destinada ao desenho, onde são renderizados os objetos. (OpenGL, A, 2009)
  • 17. 172.3 HTML5 O HTML5 é a próxima geração do HTML, com uma tecnologia que visadisponibilizar novas características necessárias na criação de aplicações Webmodernas, assim como padronizar funcionalidades que já eram utilizadas por anosna plataforma Web, porém não possuíam documentação ou padrões. (W3C, 2011) O surgimento do HTML5 aconteceu em 2007, com a formação do grupo queiria trabalhar na especificação do HTML5. O grupo era composto pela Apple, Mozillae Opera, que permitiram ao W3C publicar a especificação sob os direitos de cópiado W3C. (W3C, 2011) O HTML5 foi projetado para ser independente de plataforma, ou seja, nãoimporta o sistema operacional que é utilizado, sendo que para fazer uso dasaplicações Web baseadas em HTML5 basta utilizar um navegador Web com suportea HTML5. (PILGRIM, 2010) A nova tecnologia adiciona novas características que são interessantes aodesenvolvimento Web e melhoram a experiência e usabilidade das aplicações Web.Uma das novas características apresentadas no HTML5 é o elemento Canvas. Oelemento Canvas possibilita a renderização de gráficos, jogos e imagens em umapágina Web. (PILGRIM, 2010) O HTML5 atualmente é suportado pela maioria dos navegadores modernos,inclusive as últimas versões dos navegadores Apple Safari, Google Chrome, MozillaFirefox e Opera. (PILGRIM, 2010)2.4 LINGUAGEM DE PROGRAMAÇÃO JAVASCRIPT O JavaScript surgiu em 1995, tendo como objetivo fazer validação deformulários do lado cliente. Na época era extremamente caro realizar essasvalidações do lado servidor, pois as velocidades de conexão eram relativamentebaixas. Antes do JavaScript as validações eram feitas no lado servidor da aplicação,sendo assim, se fosse encontrado um erro em algum campo de um formulário, era
  • 18. 18necessário reenviar o mesmo para nova validação. Este processo de reenviopoderia demorar minutos, levando-se em consideração 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 aversão 2 do navegador Netscape. A especificação da linguagem LiveScript foifinalizada pela Netscape juntamente com a Sun Microsystems a tempo dolançamento do Netscape 2, e para aproveitar a atenção 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 lançada com o navegadorNetscape 3. A Microsoft mostrou interesse por adicionar as novas featuresapresentadas pelo JavaScript em um navegador que viria a se chamar InternetExplorer. Após o lançamento do Netscape navigator 3, a Microsoft anunciou achegada do Internet Explorer 3 contendo a sua implementação do JavaScript entãochamada 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 semântica,objetivando tornar o JavaScript multiplataforma. Com a ajuda de programadores devárias companhias, como por exemplo, Netscape, Sun, Microsoft, Borland. O novopadrão permitiu o surgimento de uma nova linguagem chamada ECMAScript.(ZAKAS, 2009)2.5 FRAMEWORK SCENEJS A framework SceneJS foi construída 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 métodos baseados em JSON paracriar, pesquisar, atualizar e remover nós 4 dentro de uma cena. Alguns métodoscomuns, que são utilizados na maioria das cenas são demonstrados na Tabela 1.(SCENEJS, 2011) Tabela 1 – Métodos de cena do SceneJS Método Descrição 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 existência 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, otimização decenas, validações, entre outros. Consiste de uma API de utilitários genéricos. Paracriar um utilitário é necessário seguir algumas convenções, devendo possuir um4 Nós são tipos de classes base para todas os tipos de nós de uma cena. Fornece identificação,conectividade e métodos de acesso, para alteração de propriedades de um nó. (SCENEJS, 2011)
  • 20. 20construtor que aceite um objeto (baseado em objetos JSON) de configuração comoargumento. A definição do método setConfigs usado para reconfigurar o utilitário écomposta por dois outros métodos, o execute e o getResults. O método executeaceita parâmetros por execução e um sinal de call-back assíncrono para indicar se aexecução foi completa. O método getResults fornece os resultados da execução doutilitário. (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 possível criar outros tipos. (SCENEJS, 2011) A Figura 2 ilustra o envio de uma mensagem para três objetos do tipo cenaatualizando seus ângulos, por meio de seus ids5. Figura 2 – Trecho de código que exemplifica o envio de mensagens no SceneJS. O componente Scene Graph Engine é o componente central responsávelpor interfacear as chamadas para as funções da WebGL. Existem funções bem úteiscomo por exemplo, detecção de hardware, gerenciamento de memória suporte àmúltiplas cenas, dentre outros. (SCENEJS, 2011)5 Ids no SceneJS, são utilizados para referenciar nós específicos durante as interações.(SCENEJS,2011)
  • 21. 21 De acordo com SCENEJS, (2011), o componente IoC (Inversion of Control),é responsável por permitir a conexão de ‘objetos de serviço’6. Hoje existem dois deobjetos de serviço implementados, o NodeLoader, que carrega nós em demanda, eo CommandService, já visto anteriormente no componente Message API, que éusado para troca de mensagens entre nós.2.6 BIBLIOTECA VTK O VTK (Visualization Toolkit) consiste de uma biblioteca de código aberto,escrita na linguagem de programação C++, que implementa um sistema decomputação gráfica. O VTK disponibiliza camadas de interface para diferenteslinguagens como TCL/TK, Java e Python. (VTK, 2011)O VTK é rico no que diz respeito à recursos disponíveis para representação dedados, possui uma grande variedade de primitivas gráficas, das mais simples (ponto,linha e triângulos), até as mais complexas, como por exemplo, tetraedros, prismas eoutros. (SCHROEDER, 2002) A arquitetura do VTK é baseada em pipeline. Sua visualização no VTKconsiste em objetos que podem ser conectados de forma que possam gerarvisualização desejada. Dependendo do objeto ou tipo de visualização a serrealizado, a extensão do pipeline VTK pode variar, de acordo com os objetosnecessários para a sua execução. (SCHROEDER, 2002) Um pipeline VTK é composto por três tipos de objetos. As fontes, que sãoresponsáveis por gerar dados e realizam leitura de arquivos e outras fontes, com oobjetivo de gerar pontos a partir de funções implícitas. Os filtros, objetos querecebem uma ou mais informações de entrada e produzem uma ou mais saídas. Eos mapeadores, que são a parte final do pipeline, tendo como objetivo converterdados em primitivas gráficas ou persistir gráficos em arquivos. (SCHROEDER, 2002) A Figura 3 apresenta um exemplo de pipeline para visualização de umaesfera juntamente com um trecho de código fonte correspondente.6 Objetos que fornecem funcionalidades extras na forma de serviço. Úteis para desacoplar o SceneJSdas implementações de tais serviços. (SCENEJS, 2011)
  • 22. 22 Figura 3 – Exemplo de pipeline VTK para visualização 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 criação etransformação 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 informações, topologia e geometria de um objeto.A topologia define informações que não variam de acordo com certastransformações geométricas, como por exemplo, rotação e translação. A geometriaé a instância da topologia, mais precisamente a especificação da posição dos dadosno espaço tridimensional. Como exemplo prático, ao nomear que um polígono é um‘prisma’, especifica-se a topologia. Ao fornecer coordenadas de pontos, definem-seinformações 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 PROGRAMAÇÃO PYTHON “O desenvolvimento da linguagem Python começou em 1989 pelo holandês Guido Van Rossum. O nome da linguagem origina-se do nome da série humorística britânica Monty Python’s Flying Circus, do grupo humorístico britânico Monty Python. Guido queria criar uma linguagem de altíssimo nível, que agregasse características importantes de diversas linguagens de programação. Além disso, queria que essa linguagem de programação 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 padrão, possuindo diversas implementações, sendo a principal delas o CPython, a implementação em linguagem C da especificação 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 princípio da convenção ao invés de configuração,
  • 24. 24significando que muitas coisas já estão pré-configuradas no framework. Comoexemplo, o Flask determina que templates e arquivos estáticos estejamobrigatoriamente em um subdiretório dentro do diretório de fontes Python daaplicação. (FLASK, 2011) O framework Flask é conhecido como “micro-framework“, pelo fato de aequipe de desenvolvimento responsável pelo seu núcleo mantê-lo simples, porémextensível. O núcleo não possui internamente uma camada de abstração de bancode dados ou mesmo validação de formulário, porém existem diversas bibliotecas quepodem ser agregadas ao projeto, o que o torna flexível. (FLASK, 2011)2.9 ORM SQLALCHEMY SQLAlchemy é um ORM7 implementado em linguagem Python, que tem porfinalidade facilitar a persistência 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 acomunicação 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 configuraçãoe implementação do ORM. O SQLAlchemy Core é responsável pela construçãodinâmica dos comandos SQL, bem como pela implementação dos dialetossuportados. O SQLAlchemy Core implementa também os tipos de dados, definiçõesde esquema, conexões, pools, dentre outros. (SQLALCHEMY, 2011)7 ORM – Object Relacional Mapper (SQLALCHEMY, 2011)
  • 25. 253 PROCEDIMENTOS METODOLÓGICOS Neste capítulo são apresentados os tipos de métodos utilizados nodesenvolvimento deste trabalho, bem como o tipo de pesquisa a ser aplicada.3.1 LEVANTAMENTO E ANÁLISE BIBLIOGRÁFICA Foram realizadas pesquisas em artigos, livros e documentos oficiais deorganizações responsáveis por manter as tecnologias utilizadas no presentetrabalho. A pesquisa foi de fundamental importância para consolidar as informaçõessobre o uso da WebGL juntamente com HTML5 e VTK na visualização de modelostridimensionais em livros, artigos e outros.3.2 TIPO DA PESQUISA Foi utilizado o método de pesquisa aplicada pois foi necessário construiruma aplicação para validar o estudo realizado. (GIL, 2009)3.3 ARQUITETURA Por se tratar de um sistema Web onde há um ou mais servidoresrespondendo à requisições 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 informações para computadores clientes por um meio de um
  • 26. 26protocolo que seja suportado no meio de comunicação escolhido. O experimentoalvo deste trabalho propõe um servidor que irá disponibilizar uma interface para queusuários por meio de seus computadores (clientes), façam o envio de arquivos noformato VTK contendo informações 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 renderização8 e interação é feito dolado cliente do sistema, ficando a cargo do lado servidor apenas armazenar asinformações disponibilizadas de acordo com requisições dos clientes. A Figura 5exemplifica a arquitetura cliente/servidor. Figura 5 – Arquitetura Cliente-Servidor. Fonte: KIKUCHI (2011). A nível de software, o padrão adotado para implementação do experimentofoi o modelo em camadas MVC (Model, View, Controller). Esse modelo fornecemuitas vantagens, sendo a principal delas a fácil manutenção, visto que asresponsabilidades estão bem definidas e distribuídas entre as camadas. Ascamadas do modelo MVC e suas respectivas responsabilidades são apresentadasna Figura 6.8 Processo de conversão de geometria, especificação para luzes e uma visão de câmera 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) também conhecida como camada depersistência, tem o papel de gerenciar o domínio da informação, controlando a formacomo são armazenados e acessados os dados. É nessa camada que definimos asentidades que representa as informações do nosso sistema. No experimento foiutilizada a tecnologia ORM (Object Relational Mapping) para implementação dacamada modelo. Na CM, foi usada a técnica de programação ORM com a finalidade demapear as entidades do sistema para classes da programação orientação a objetos(POO). A principal vantagem deste tipo de abordagem está no fato de ter-se adefinição dos dados e operações de acesso independentes do banco de dadosutilizado, desde que sejam tomados os devidos cuidados, como por exemplo, nãofazer uso de instruções SQL (Structured Query Language) nativas. A ferramentaORM escolhida para implementação da CM foi o SQLAlchemy. O SQLAlchemy éuma ferramenta escrita em linguagem Python que implementa a técnica de ORM.Aliado ao SQLAlchemy foi selecionado o banco de dados SQLite, por suasimplicidade e pelo sistema proposto neste trabalho ser de caráter simples também. Os trechos de código exibidos nos quadros 1 e 2 representam as classesUser e VTKModels, respectivamente necessárias para atender à CM doexperimento.
  • 28. 28 Quadro 1 – Classe User. A classe User fornece o campos necessários para autenticação de umusuário no sistema. O atributo __tablename__ define o nome da tabela que é criadaa partir da definição da classe User. As informações a serem persistidas para umusuário são: • id: Identificador inteiro e único para uma entrada na tabela de usuários. Atua como chave primária. • name: Nome do usuário do sistema. • email: Endereço eletrônico do usuário 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. 29usuário pode possuir muitos modelos. A Figura 7 ilustra o Modelo EntidadeRelacionamento entre as tabelas. A tabela vtk_models permite ao usuário submeterarquivos de modelos VTK para armazenamento e posterior visualização. Figura 7 – Classe VTKModels.3.3.2 Camada Controladora A camada controladora (CC) é responsável por mapear e gerenciar o fluxo deações do sistema. A CC está situada entre a CM e a Camada de Apresentação(CA). Basicamente a CC recebe, processa requisições e gera respostas à eventosda CA. O Flask, sendo um “micro” FW implementado em linguagem Python, temcomo principais características possuir um núcleo pequeno e enxuto com algumaspoucas funcionalidades já incluídas. Sua camada controladora é composta pormódulos que por sua vez contém funções que tem a finalidade de responder àestímulos oriundos da CA. Para o experimento foi criado o módulo frontend.py onde estão situadas todasas funções controladoras da aplicação. O Quadro 3 ilustra um exemplo de funçãocontroladora do Flask que gera resposta para uma chamada à URL ‘expose-model’,retornando os dados geométricos do modelo no formato JSON (JavaScript ObjectNotation) utilizando o módulo jsonify do Flask.
  • 30. 30Quadro 3 – Exemplo de função controladora. A função controladora apresentada na Quadro 3 segue alguns padrõesapresentados por todas as funções controladoras Flask. Para que uma função sejaum controlador, se faz necessário o uso de uma anotação específica que define aqual rota a função responde e quais tipos de métodos HTTP (HyperText TransferProtocol) ela está habilitada a processar. A Quadro 4 apresenta a estrutura daanotação responsável por definir funções controladoras no Flask.                        Quadro 4 – Anotação para funções controladoras. Detalhando um pouco mais cada item da anotação observa-se: • Module: Módulo Python onde reside a função anotada. Módulos são arquivos Python com aglomerados de funções; • URL: URL mapeada para a função, o Flask internamente delega todas as requisições da URL para a função controladora mapeada. A sintaxe aceita parâmetros anexados à URL; • [methods]: Lista de métodos HTTP aceitos pela função controladora, como por exemplo, GET, POST.
  • 31. 313.3.3 Camada de Apresentação A camada de apresentação (CA) é responsável pela exibição do conteúdogerado pela camada controladora (CC). A CA de uma aplicação 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 aimplementação 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 herança de templates para reaproveitar código HTML na criação de páginas.O TE utilizado neste trabalho foi o Jinja template engine (JTE), que consiste em umTE escrito em Python. O JTE já vem embutido como módulo padrão para criação detemplates no Flask e permite a geração de conteúdo dinâmico em documentosHTML utilizando sintaxe Python. O Quadro 5 demonstra um exemplo do uso de JTE,onde observa-se a implementação do template ancestral para todas as páginas doexperimento, enquanto que no Quadro 6 nota-se que além do código HTML, existe apresença de comandos delimitados por marcadores especiais que permitemadicionar código Python ao template HTML. Quadro 5 – Template ancestral.
  • 32. 32 Quadro 6 – Instruções Python no JTE. Alguns marcadores tem a simples finalidade de exibir um conteúdo dinâmiconos templates, sem necessidade de utilizar comandos da linguagem Python. Oexemplo ilustrado nos Quadros 7 e 8 nos mostram respectivamente uma funçãocontroladora da CC realizando uma busca por todos os modelos (na CM)pertencentes à um determinado usuário, e enviando a variável models contendo osmodelos retornados para um template da CA destino. Quadro 7 – Função controladora main retorna os modelos para um usuário. 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 dinâmicos passados pela função controladora querenderizou o template.                Quadro 8 – Trecho do template main.html exibindo modelos de um usuário.
  • 33. 333.4 ESTRUTURA DO PROTÓTIPO Para implementação do protótipo, foi utilizado o editor de textoTextWrangler. A estrutura do projeto pode ser vista na Figura 8.                                                                                                                      Figura 8 – Estrutura do protótipo. A pasta src é a pasta onde se localizam os fontes do projeto, dentro delaresidem os seguintes pacotes e módulos: • __init__.py - Módulo Python que define que a posta corrente é um pacote Python. • controllers – Pacote contendo o(s) módulo(s) responsáveis por implementar as funções controladoras (camada controladora) do protótipo. • main.py – Módulo Python que inicia o funcionamento do protótipo. • persistence – Pacote que implementa a camada model do protótipo. Neste pacote residem os módulos Python que definem as classes que mapeiam o modelo relacional para objetos. • settings.py – Módulo Python para configurações globais do projeto, como string de conexão 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 visualização do projeto. • utilities – Módulo Python contendo arquivos com funções de apoio, para leitura de arquivos, validação de tipos de arquivos, etc.3.5 DIAGRAMA DE CASOS DE USO A Figura 9 apresenta o diagrama de casos de uso do protótipo desenvolvidoneste estudo. Para construção do diagrama foi utilizada a ferramenta AstahCommunity. O diagrama apresenta as interações do usuário, que por sua vezrepresenta o ator do protótipo.Figura 9 – Diagrama de casos de uso.
  • 35. 353.6 DESCRIÇÃO DOS CASOS DE USO Cada caso de uso ilustrado na Figura 9, representa uma ação do usuário aointeragir com o protótipo. A Tabela 2 lista os casos de uso existentes no protótipo.Tabela 2 – Casos de uso.Nr. Descrição do Caso de Uso Entrada Caso de Uso Saída01 Usuário realiza login. DadosUsuario EfetuarLogin Msg0102 Usuário efetua cadastro para DadosUsuario EfetuarCadastro Msg02 acesso ao protótipo.03 Usuário cadastra modelo. DadosModelo CadastrarModelo Msg0304 Usuário visualiza modelo. DadosModelo VisualizarModelo Msg0405 Usuário redimensiona modelo. Fator RedimensionarModelo Msg0506 Usuário aplica zoom. Coordenadas AplicarZoom Msg0607 Usuário rotacional modelo. Angulo, eixo RotacionarModelo Msg0708 Usuário aplica translação ao Coordenadas TransladarModelo Msg08 modelo. As mensagens de retorno do protótipo e seus significados: • Msg01: Nome de usuário incorreto! | Senha de usuário incorreta! • Msg02: Erro na realização do cadastro! | Conta de usuário já existente! | Cadastro realizado com sucesso! • Msg03: Modelo com extensão incorreta | Modelo com estrutura incorreta! | Modelo cadastrado com sucesso. • Msg04: Modelo não encontrado! | Seu navegador não suporta WebGL! | Erro no redirecionamento! | Redirecionando para visualização! • Msg05: Modelo dimensionado! • Msg06: Zoom aplicado! • Msg07: Modelo rotacionado! • Msg08: Posição alterada!
  • 36. 36Caso de uso 01:Caso de Uso EfetuarLogin – EL01Atores usuarioFinalidade Efetuar login para acesso ao protótipo.Visão Geral O usuário informa seu login e senha para acesso e o protótipo realiza a validação, permitindo ou não o acesso às outras funcionalidades.Tipo PrimárioPré-Condições O usuário deve estar previamente cadastrado no protótipo.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Usuário informa login e senha. 2 - Protótipo realiza validação dos dados. 3 – Protótipo redireciona usuário para página principal.Exceções2 – Protótipo realiza validação do login e senha. 2.1.1 – Protótipo detecta login não informado. 2.1.2 – Protótipo emite Msg01, indicando dado inválido. 2.2.1 – Protótipo identifica senha incorreta. 2.2.2 – Protótipo emite alerta de senha incorreta para o usuário.Pós-Condições Tela principal de acesso ao protótipo.Caso de uso 02:Caso de Uso EfetuarCadastro – EC01Atores usuarioFinalidade Efetuar cadastro para acesso ao protótipo.Visão Geral O usuário informa seu nome, login e senha para acesso e o protótipo realiza a validação e inserção dos dados para posterior acesso.Tipo PrimárioPré-Condições Acessar área de cadastro do protótipo.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Usuário informa nome de usuário, login e 2 – Protótipo verifica a existência de um usuáriosenha. com mesmo login. 3 – Sistema emite Msg02 de informando que o
  • 37. 37 cadastro foi realizado com sucesso.Exceções2 – Protótipo verifica a existência de um usuário com o mesmo login. 2.1.1 – Caso exista uma conta de usuário já cadastrada. 2.1.2 – Protótipo emite Msg02, indicando cadastro de usuário já existente e encerra caso de uso.Pós-Condições Tela de login do protótipo.Caso de uso 03:Caso de Uso CadastrarModelo – CM01Atores usuarioFinalidade Efetuar cadastro de modelo para visualização no protótipo.Visão Geral O usuário informa o path arquivo de model, o título do modelo e uma descrição para o modelo.Tipo PrimárioPré-Condições Efetuar login no protótipo.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Usuário informa path, título e descrição do 2 – Protótipo realiza validação do modelo.modelo. 3 – Sistema emite Msg03, informando modelo cadastrado com sucesso.Exceções2 – Protótipo realiza validação no modelo. 2.1.1 – Caso o modelo possua a extensão incorreta. 2.1.2 – Protótipo emite Msg03, indicando modelo com extensão incorreta. 2.2.1 – Caso o modelo não tenha a estrutura esperada. 2.2.2 – Protótipo emite Msg03, informando que a estrutura do modelo não está de acordo.Pós-Condições Tela principal do protótipo.Caso de uso 04:Caso de Uso VisualizarModelo – VM01Atores usuarioFinalidade Selecionar modelo para visualização.Visão Geral O usuário seleciona um modelo dentre uma lista pré-cadastrada para visualização.
  • 38. 38Tipo PrimárioPré-Condições 1 – Ter efetuado login no protótipo. 2 – Ter cadastrado modelos no protótipo.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Usuário informa o modelo a ser usado na 2 – Protótipo cria a visualização do modelo.visualização. 3 – Protótipo emite Msg04 de informando o redirecionamento para a página de visualização.Exceções2 – Protótipo cria a visualização do modelo. 2.1.1 – Caso o navegador não suporte WebGL é exibida a Msg04, informando que o navegadornão suporta WebGL.3 – Protótipo redireciona usuário para página de visualização. 3.1 – O protótipo exibe a Msg04, informando erro no redirecionamento.Pós-Condições Tela de visualização do modelo.Caso de uso 05:Caso de Uso RedimensionarModelo – RM01Atores usuarioFinalidade Alterar as dimensões do modelo.Visão Geral O usuário seleciona um modelo e por meio de ações com o mouse/teclado, altera largura, altura e profundidade.Tipo PrimárioPré-Condições Ter criado a visualização.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Usuário interage com o modelo por meio de 2 – Protótipo altera propriedade solicitada deperiférico (mouse/teclado), alterando altura, acordo com a posição do cursor na visualização.largura e profundidade. 3 – Protótipo emite mensagem Msg05 de redimensionamento efetuado.ExceçõesPós-Condições Tela de visualização do modelo.
  • 39. 39Caso de uso 06:Caso de Uso AplicarZoom – AZ01Atores usuarioFinalidade Aplicar zoom na câmera.Visão Geral O usuário por meio de interação utilizando teclado/mouse define as coordenadas correntes para posicionamento da câmera.Tipo PrimárioPré-Condições Ter criado a visualização.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Usuário interage com o modelo por meio de 2 – Protótipo altera posição da câmera.periférico (mouse/teclado), alterando a posição 3 – Protótipo emite mensagem Msg05 de zoomcorrente da câmera. aplicado.ExceçõesPós-Condições Tela de visualização do modelo.Caso de uso 07:Caso de Uso RotacionarModelo – RM01Atores usuarioFinalidade Rotacionar o modelo nos eixos indicados e utilizando um ângulo.Visão Geral Usuário informa os eixos onde será aplicada a rotação e o valor do ângulo para deslocamento do modelo.Tipo PrimárioPré-Condições Ter criado a visualização.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Usuário informa eixo onde rotação será 2 – Protótipo rotaciona o modelo.aplicada e valor do ângulo. 3 – Protótipo emite mensagem Msg07, informando que o modelo foi rotacionado com sucesso.ExceçõesPós-Condições Tela de visualização do modelo.
  • 40. 40Caso de uso 08:Caso de Uso TransladarModelo – TM01Atores usuarioFinalidade Aplicar translação no modelo.Visão Geral Usuário informa coordenadas de destino para alterar a posição do modelo.Tipo PrimárioPré-Condições Ter criado a visualização.Sequência Típica de EventosAção do Ator Resposta do Protótipo1 – Cliente informa as coordenadas nos eixos x, 2 – Protótipo altera a posição do modelo.y e z.ExceçõesPós-Condições Tela de visualização do modelo.3.7 MODELOS VTK O VTK consiste em uma biblioteca escrita em C++, que implementa umsistema de computação gráfica. O VTK oferece diversas ferramentas paraprocessar, renderizar e armazenar modelos do mundo real. A biblioteca nos permitetrabalhar com informações sobre a geometria e propriedades associadas aoselementos que o compõe. Imaginando como modelo o exemplo de uma seção dacarótida humana, identifica-se como propriedades deste modelo a pressãosanguínea para cada ponto da parede da artéria, 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 VTKdispõe de um conjunto de células equivalentes ou compostas por primitivasgeométricas da OpenGL, que nada mais são do que formas geométricas que porsua vez são formadas por pontos e linhas. O VTK permite por meio do usocombinado de células construir modelos mais complexos. No que diz respeito aos tipos de elementos que compõem a geometria dosmodelos, pode-se ter malhas homogêneas e heterogêneas. Malhas homogêneas
  • 41. 41são estruturas compostas em sua totalidade por células de mesmo tipo, como porexemplo, uma malha composta apenas por células do tipo vtk_triangle. Malhasheterogêneas como sugere o nome são estruturas compostas por dois ou mais tiposdiferentes de células, como por exemplo a topografia de uma região, contendovtk_triangles, vtk_tetrahedrons, etc. A Figura 10 exemplifica alguns dos tipos decélulas VTK disponíveis. Apenas o tipo heterogêneo de malha foi considerado nesteestudo. Figura 10 – Diferentes tipos de células VTK Fonte: VTK FORMATS, (2011)3.8 TIPO DE DATASET VTK ABORDADO NO PROJETO Um dataset consiste de objetos que possuem uma estrutura e informaçõesde atributos associados à mesma. A dataset de um modelo por sua vez é compostopor dois tipos de informações, topológicas e geométricas (SCHROEDER , 2002). As informações topológicas de um modelo fornecem o conjunto depropriedades que não variam de acordo com certas transformações geométricas,como por exemplo, rotação e translação. As informações topológicas nos permitemidentificar os tipos de células utilizados na construção do modelo. (SCHROEDER ,2002). As informações geométricas complementam a informação topológicafornecendo dados sobre sua posição no espaço tridimensional. As informações
  • 42. 42referentes à geometria dizem respeito às coordenadas espaciais dos pontos.(SCHROEDER , 2002). Por último as informações de atributos associadas à geometria e/ou topologiapode ser um escalar representando temperatura, elastano, pressão, 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 nãoestruturados, e as células que compõem o dataset podem variar de acordo com adimensão da topologia, isto é, modelos que possuem este tipo de dataset podemconter em sua topologia diversos tipos de elementos geométricos, triângulos, linhase outros.3.9 LEITURA DE MODELOS VTK COM PYVTK Nesta seção é apresentado o módulo escrito em Python, que se destina amanipular arquivos VTK, contendo informações de modelos VTK. Este módulo
  • 43. 43permite a fácil leitura e escrita de dados nos formatos de arquivos suportados peloVTK de forma simples e rápida. O protótipo desenvolvido neste estudo necessita das informações detopologia e geometria do modelo VTK de forma a criar visualização necessária. Apósa submissão dos arquivos VTK pelo usuário do protótipo, o mesmo é armazenadono lado servidor, e quando este processo é finalizado o usuário do protótipo podefazer a visualização do modelo VTK de acordo com as informações contidas noarquivo enviado. No momento em que uma visualização é solicitada, o arquivo relativo aomodelo é aberto pelo módulo PyVTK, e as informações sobre a topologia egeometria dos objetos são lidas e armazenadas em memória para envio ao ladocliente do protótipo para que o SceneJS crie a visualização dos dados. Para entender como a informação é lida do arquivo VTK faz-se necessárioentender como as informações se apresentam no mesmo. Com relatado emparágrafos anteriores, um modelo VTK possui um dataset que agrupa informaçõessobre topologia e geometria de modelos. A divisão de um arquivo VTK é compostapor 5 partes, são elas: - A primeira parte apresenta uma linha representando a versão9 do arquivo e o identificador. A versão corresponde à versão do VTK na qual o arquivo pode ser aberto. - A segunda parte é o cabeçalho do arquivo. O cabeçalho consiste de uma cadeia de caracteres terminados com o caracter ‘n’ e pode conter no máximo 256 caracteres. O cabeçalho 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 binário na linha correspondente a palavra ASCII ou BINARY deve estar presente. - A quarta parte apresenta a estrutura do dataset, que consiste em informações topológicas e geométricas do modelo. As informações tem início em uma linha contendo a palavra-chave DATASET seguida da palavra que descreve o tipo de dataset, como por exemplo, UNSTRUCTURED_GRID.9 A versão neste caso se refere à maxima versao possível do VTK habilitada a processar o arquivo.
  • 44. 44 - A quinta e última parte descreve os atributos do dataset, e esta seção pode conter a palavra-chave POINT_DATA ou CELL_DATA, seguidas de um valor inteiro que descreve o número de pontos ou células. O Quadro 9 apresenta uma visão 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 conteúdo interno de arquivo VTK Fonte: VTK FORMATS (2011) Sabendo-se como um arquivo VTK está estruturado, basta definir quaisinformações precisam ser extraídas do modelo para criar sua representação gráfica.Para o escopo do presente trabalho, foi definido que apenas a geometria seriareconstruída, logo não seriam levadas em consideração informações comoescalares associados ao modelo, como por exemplo, tensores e vetores quepoderiam representar algum tipo de grandeza. Para construir uma representaçãográfica do modelo, as informações necessárias são a geométrica e topológica. Oprimeiro passo é extrair as coordenadas dos pontos no espaço. Os pontos são lidosseguindo a ordem sequencial em que aparecem no arquivo, e a posição dascoordenadas dos pontos é equivalente ao índice usado na seção de conexões. Porexemplo, no Quadro 10, a seção POINTS contém 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 são de fundamental importância para a obtenção dos tipos deprimitivas que precisam ser usadas para construção do modelo e a lista deconexões. Na seção POLYGONS apresentada no Quadro 10, pode-se verificar queo modelo é composto de 6 polígonos e o total de dados a ser lido na seçãocompreende 30 dados numéricos. Cada linha na seção POLYGONS representa oconjunto de pontos que formam os vértices do polígono 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 seção POLYGONS que define as primitivas e suas propriedades,que por sua vez constituem o objeto ilustrado pelo Quadro 10.Tabela 4 – Seção 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 visualização dos dados referentes ao arquivo dedados ilustrado no Quadro 10, feita no software Paraview. Figura 12 – Visualização de modelo VTK no software Paraview. Após realizar a leitura dos dados o módulo PyVTK mantém objetos querefletem as seções descritas anteriormente. Durante a implementação do protótipodeste estudo, foi criado um módulo10 Python chamado vtk_reader.py que utiliza omódulo PyGTK para realizar a leitura dos dados do modelo e disponibilizar para aspróximas camadas do sistema. No módulo vtk_reader.py foi implementada a classeVTKPolyDataReader, classe responsável pela leitura de datasets VTK Polydata apartir de arquivos VTK. O diagrama de classe apresentado na Figura 13, apresentaa classe seus atributos e operações.10 Arquivo Python contendo uma ou mais classes e/ou funções utilitárias.
  • 48. 48 Figura 13 – Diagrama de classe do leitor de modelos VTK Polydata. A utilização da classe é bem simples. Ela foi desenhada de forma a receber ocaminho completo do arquivo, e de posse desta informação realizar a leitura dosdados existentes no arquivo. Após a leitura dos dados a classe disponibiliza 6atributos importantes são eles: - indices: Uma lista contendo as conexões dos pontos que formam as primitivas/células 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 vértice, sendo que os valores não vem do arquivo, são calculados pela classe VTK vtkPolyDataNormals, que retorna uma lista de objetos PolyDataNormals, um para cada vértice. Ao final do processamento a classe filtra os valores das normais e as armazena no atributo normals cuja sequência acompanha a sequência dos vértices obtidos no arquivo.3.10 RENDERIZANDO O MODELO VTK USANDO SCENEJS De posse dos dados do modelo, a próxima etapa a ser executada é arepresentação gráfica (RG) dos dados no lado cliente da aplicação. No protótipodesenvolvido neste trabalho, a responsabilidade por criar a representação gráfica11 São vetores de direção, normalmente usados por sistemas de computação gráfica para controlar ouso de shading em objetos. Podem ser usados também para controlar a orientação e geração dasprimitivas. (SCHROEDER, 2002)
  • 49. 49dos modelos cabe ao framework SceneJS. Para se criar RGs no SceneJS, devem-se criar nós que representam cada recurso presente na RG. Com o SceneJS pode-se criar diversos tipos de nós, 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 “nós filhos”13. O Quadro 11 ilustra a definição da estrutura de um nó do tipo sceneno SceneJS. Quadro 11 – Estrutura de um nó do tipo scene Com exceção do atributo id, todos os outros atributos apresentados noQuadro 11 são obrigatórios na definição de uma cena, e se não informados,recebem valores padrão. 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 nós no contexto da página Web por meio de DOM14(Document Object Model). O atributo canvasId tem como objetivo definir em queelemento Canvas da página Web onde se cria a cena. O atributo loggingElementIddefine o elemento presente na página Web para onde o SceneJS redireciona suas12 Nó raiz de uma representação gráfica, cria um contexto tridimensional dentro do elemento Canvasdo HTML5.13 Nós que residem dentro de outros nós, geralmente agrupados em lista. Nós que possuem nósfilhos, podem realizar operações 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 nós filhos, nocaso de uma cena um nó filho pode ser um nó do tipo câmera, renderer, e outros. O protótipo desenvolvido neste estudo cria uma RG, seguindo a estruturailustrada pela Figura 14, onde são apresentados os nós e seus componentes.                                  Figura 14 – Estruturas de nós típica para criação de uma representação gráfica. O nó de tipo lookAt fornece algumas configurações iniciais para ajuste decâmera. O Quadro 12 apresenta uma configuração básica de um nó do tipo lookAt.                              Quadro 12 – Estrutura de nó do tipo lookAt.
  • 51. 51 No Quadro 12 nota-se a presença de alguns atributos particulares ao nólookAt. O atributo eye que define a posição da câmera no espaço recebe um objetoJSON, contendo as coordenadas nos eixos x, y e z. Caso não sejam informadosvalores, o padrão é 0.0 para todos os eixos. O atributo look determina a direção paraonde a câmera estará observando, assim como no atributo eye recebe um objetocom valores para os 3 eixos, sendo que eixos que são omitidos recebem o valor 0.0por padrão. O atributo up define qual dos eixos x, y ou z serão 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 série de propriedades, tendopor exemplo type, fovy, aspect, near e far. A Tabela 5 descreve a função de cada 15uma dessas propriedades para o tipo de câmera ortogonal, utilizada naimplementação do protótipo.Tabela 5 – Propriedades do tipo camera. Propriedade Função type Tipo de câmera: perspectiva, ortogonal, frustrum. fovy Campo de visão horizontal em graus. aspect Aspect ratio do campo de visão. near Limite de proximidade do plano de corte. far Limite de distanciamento do plano de corte. O Quadro 13 apresenta uma configuração básica 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 nós do tipo light fornecem meios para aplicação de iluminação nosmateriais a serem renderizados. Existem diversos tipos de iluminação, difusa,especular, ambiente. O SceneJS permite a definição de diferentes modos deiluminação, por ponto e iluminação direcionada. No protótipo foi utilizado um nó deiluminação direcionada, com direção 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 iluminação e semiluminação respectivamente.                                        Figura 16 – Esfera com iluminação.                                                                                                                      Figura 17 – Esfera sem iluminação. O Quadro 14 ilustra a definição de um nó do tipo light.
  • 53. 53 Quadro 14 – Estrutura de um nó do tipo light. Nós de tipo material define como a iluminação será refletida pela geometriadefinida dentro do material. A Tabela 6 apresenta algumas propriedades específicasque podem ser configuradas.Tabela 6 – Propriedades de um nó do tipo material. Propriedade Função emit Coeficiente de emissor do material, controla intensidade de emissão de luz. baseColor Configura a cor do material. specularColor Define a cor da iluminação reflexiva a ser aplicada. specular Fator de intensidade da iluminação reflexiva. shine Fator que controla a intensidade de brilho do material. O Quadro 15 exibe um nó do tipo material e suas configurações básicas. Quadro 15 – Estrutura de um nó do tipo material.
  • 54. 54 Os nós do tipo material encapsulam nós do tipo geometry, porém existemsituações onde há necessidade de aplicação de transformações geométricas comopor exemplo, rotação, translação, escala. Existem nós de tipos que refletemoperações geométricas a serem executadas em nós de tipo geometry, podendo-secitar, rotate, translate, scale. Podem existir mais de um nó aninhado de forma acombinar operações geométricas para se chegar ao resultado esperado. O Quadro16 apresenta um conjunto de nós que aplicam rotação, translação e escala. Quadro 16 – Conjunto de nós para operações geométricas. Nós de tipo geometry definem informações geométricas dos objetos a seremapresentados na cena. A Tabela 7 exibe informações dos principais propriedades esua função.Tabela 7 – Propriedades de um nó do tipo geometry. Propriedade Função primitive Tipo de primitiva gráfica 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 protótipo desenvolvido neste estudo permite a interação do usuário com omodelo VTK em cena. As interações só se tornam possíveis graças ao mecanismode listeners do elemento Canvas presente no HTML5. Com o recurso de listeners,pode-se adicionar funções que devem ser executadas caso um certo tipo de eventoocorra, como por exemplo, mousedown, mousemove, etc. O Quadro 17 apresenta aconfiguração de listeners para o Canvas presente no protótipo.Quadro 17 – Configuração de listener.3.11.1 Transformações geométricas Dentre os tipos de interações presentes no protótipo desenvolvido nesteestudo, pode-se citar as transformações geométricas, rotação, translação e escala.3.11.1.1 Rotação A operação de rotação consiste em alterar o ângulo de corrente em um doseixos x, y ou z. No protótipo, foi criada uma função para efetuar rotação nos eixos xe y de acordo com a movimentação do mouse. O Quadro 18 ilustra a implementaçãoda função JavaScript mouseMove que identifica se um evento de arrastar do mouseestá ocorrendo e executa as mudanças necessárias nos nós de rotação, em seguidaatualizando a cena.
  • 56. 56 Quadro 18 – Função mouseMove.Nota-se no Quadro 18 que há o uso da função withNode presente no SceneJS,função esta que permite obter um nó presente na cena, possibilitando a alteração desuas propriedades.3.11.1.2 Translação A translação consiste em mover todos os pontos de um dado objeto noseixos ortogonais especificados dado o valor das distâncias em cada eixo. As Figuras18 e 19 ilustram um objeto nas coordenadas (x: 0.0, y: 0.0, z: 0.0), e o mesmo objetoapós sofrer translação para as coordenadas (x: 3.0, y: 3.0, z: 0.0). O Quadro 19exibe a função javascript que realiza a translação 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 – Função translate, responsável por transladar o modelo.3.11.1.3 Escala A operação de escala afeta o objeto alterando suas dimensões 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 dimensões originais. Figura 21 – Objetos com alterações em sua dimensão. O Quadro 20 mostra a função responsável por calcular a escala do objeto. Quadro 20 – Função scale. As funções Javascript apresentadas até então residem dentro do códigoHTML5 da página onde a representação gráfica do Modelo VTK Polydata é criada.
  • 59. 594 RESULTADOS E DISCUSSÕES Neste capítulo serão apresentados os resultados e funcionalidades dosistema.4.1 LOGIN O login para acesso ao protótipo possibilita a entrada de um usuáriopreviamente cadastrado no mesmo. A Figura 22 ilustra a página de login. Figura 22 – Página de Login. Após informar usuário e senhas válidos o usuário tem acesso ao protótipo esuas funcionalidades, como por exemplo, o envio de arquivos de modelos VTK e suavisualização.
  • 60. 604.2 REGISTRO NO SISTEMA A página de registro ao protótipo é acessada através do link “sign up”presente na tela de login do protótipo. Ao acessar a página de registro, uma tela decadastro de informações é exibida ao usuário do protótipo. A Figura 23 apresenta atela de registro de usuários. Figura 23 – Página de registro de usuários. Após preencher o nome, email e senha o cadastro do usuário é realizado eele está apto a acessar as funcionalidades do protótipo.4.3 PÁGINA PRINCIPAL Ao acessar o protótipo informando usuário e senha corretos na tela de login,o usuário é redirecionado para a página principal do protótipo para então fazer usode suas funcionalidades. Conforme apresentado na Figura 24.
  • 61. 61                  Figura 24 – Página principal do protótipo. Na página principal o usuário possui acesso às seguintes funcionalidades: • Seleção de modelos VTK Polydata previamente cadastrados para visualização e interação no Canvas. • Registro de novos arquivos de modelo, neste caso o usuário deve informar a localização do arquivo, o título do modelo e uma breve descrição do mesmo.4.4 PÁGINA DE VISUALIZAÇÃO E INTERAÇÃO COM O MODELO Ao selecionar o modelo e em seguida clicar no botão “show model”, umapágina contendo a “viewport” e o modelo nela inserido para visualização emanipulação por parte do usuário. Algumas funções são disponibilizadas ao usuáriona página de visualização e interação, como ilustra a Figura 25.
  • 62. 62 Figura 25 - Página principal do protótipo.Na página principal o usuário possui acesso às seguintes funcionalidades: • Seleção de modo de visualização, podendo-se escolher entre o modo superfície e malha de grade ( wireframe ). • Realizar translação do objeto desde que sejam fornecidas as coordenadas nos eixos x, y e z. • Alterar a escala do objeto, bastando para isso fornecer o valor da escala nos eixos x, y e z. • Operações de zoom com o botão scroll do mouse são suportadas. Ao acessar o protótipo informando usuário e senha corretos na tela de login,o usuário é redirecionado para a página principal do protótipo para então fazer usode suas funcionalidades. Nota-se que a protótipo criado neste estudo permite a visualização demodelos VTK do tipo VTKPolydata, preservando suas características geométricas etopológicas. Este trabalho não tinha como objetivo analisar o desempenho davisualização nem mesmo comparar à performance de uma aplicação desktop.Porém a performance do protótipo está ligada diretamente a alguns fatores quepodem influenciar a experiência do usuário, como por exemplo, hardware existenteno lado servidor, largura de banda da rede do usuário, tamanho dos arquivos dedados dos modelos, dentre outros. Futuramente algumas características podem ser adicionadas ao protótipo,como por exemplo, visualização em grade e visualização dos pontos. A adição deinformações relacionadas aos elementos que compõem a malha do objeto, como
  • 63. 63pontos de pressão, pontos de velocidade e qualquer outro escalar associado aoselementos dependendo do domínio de estudo. O aprimoramento da interação do usuário com o modelo se faz necessáriotambém, permitindo não só a leitura como também a edição de propriedades domodelo. A adição de suporte às primitivas existentes no VTK é necessária para queoutros tipos de datasets possam ser visualizados. O trabalho consistiria em portar osalgoritmos de triangulação e geração de conexões existentes na biblioteca VTK.
  • 64. 645. CONSIDERAÇÕES FINAIS As pesquisas realizadas neste trabalho e sua aplicação na construção doprotótipo de visualização de modelos VTK Polydata, comprova que é possívelconstruir softwares para visualização científica de modelos 3D utilizando HTML5 eWebGL em conjunto. A área de visualização científica de modelos tridimensionais utilizandoHTML5 e WebGL, vem se popularizando com a adoção das tecnologias pelosnavegadores mais modernos, o que torna promissor o cenário para este tipo deaplicação. O presente trabalho visou a construção de um protótipo para visualização deum tipo específico de modelo VTK, o Polygonal data. Como sugestão para trabalhosfuturos, indica-se o estudo sobre o suporte a modelos formados por malhasheterogêneas, aquelas compostas por mais de um tipo de polígono. Outrasfuncionalidades a serem consideradas são a adição de mais tipos de interação,suporte a tipos diferentes de modelos 3D e melhorias de performance.
  • 65. 65 REFERÊNCIASCONCI, Aura et al. Computação Gráfica Teoria e Prática. Rio de Janeiro: EditoraCAMPUS, 2003.DOM. W3C Document Object Model. Disponível em: <http://www.w3.org/DOM/#what> . Acesso em: 20 setembro. 2011.FLASK. Flask v0.8-dev documentation. Disponível em:<http://flask.pocoo.org/docs/ > . Acesso em: 17 setembro. 2011.IFRANCA. MVC Para Iniciantes. Disponível em:< http://ifranca.com.br/blog/2010/04/23/mvc-para-iniciantes-–-parte-1/> . Acesso em: 17setembro. 2011.GIL, A. C. Como elaborar projetos de pesquisa. 4.ed. São Paulo: Atlas, 2009.JINJA. JINJA documentation, Disponível em: < http://jinja.pocoo.org/> . Acesso em:27 maio. 2011.KHRONOS GROUP. WebGL especification. Disponível em:<https://www.khronos.org/registry/webgl/specs/1.0/> . Acesso em: 3 de setembro.2011.MACHOVER, Carl. "A Brief, Personal History of Computer Graphics", Computer,vol. 11, no. 11, pp. 38-45, Nov. 1978, doi:10.1109/C-M.1978.217981.ORACLE. LESSON: JAVA APPLETS. Disponível em:<http://download.oracle.com/javase/tutorial/deployment/applet/index.html>, Acessoem 12 de setembro. 2011.
  • 66. 66OpenGL, A. OpenGL Programming Guide. The Official Reference to LearningOpenGL. Versions 3.0 and 3.1. 7th Ed. ISBN: 978-0-321-55262-4, Addison-Wesley,Reading MA, 2009.PARAVIEW. Open Source Cientific Visualization. Disponível em:<http://www.paraview.org/> . Acesso em: 21 setembro. 2011.PILGRIM, Mark. HTML5 Up and Running. United States of America: ISBN 978-0-596-80602-6, O’Reilly Media Inc, 2010.PYTHON ORG. The Python Tutorial. Disponível em:<http://docs.python.org/tutorial/index.html> . Acesso em: 17 setembro. 2011.RONACHER, Armin. Template Design. Disponível em: <http://jinja.pocoo.org/docs/templates/> . Acesso em: 27 maio. 2011.SANTANA, Osvaldo, GALESI, Thiago. Python e Django : Desenvolvimento ágilde aplicações Web. São Paulo: ISBN: 978857522-247-8, Novatec Editora LTDA,2010.SQLALCHEMY. SQLAlchemy 0.7 Documentation. Disponível em:<http://www.sqlalchemy.org/docs/> . Acesso em: 17 de setembro. 2011.SCENEJS, Xeolabs. WebGL Scene Graph Library. Disponível em:<https://github.com/xeolabs/scenejs/wiki> . Acesso em: 13 setembro. 2011.SCHROEDER, Will et al, The Visualization Toolkit, 3rd Ed. ISBN 1-930934-07-6,Kitware, Inc. publishers, 2002.KIKUCHI. Vídeo em redes Par-a-Par. Disponível em:< http://www.gta.ufrj.br/ensino/eel879/trabalhos_vf_2009_2/kikuchi/introducao.html> .Acesso em: 17 de setembro. 2011.
  • 67. 67VTK. Visualization Toolkit. Disponível em: <http://www.vtk.org/ > . Acesso em: 17de setembro. 2011.VTK FORMATS. VTK File Formats. Disponível em:<http://www.vtk.org/VTK/img/file-formats.pdf> . Acesso em: 22 setembro. 2011.VTK RENDERER. vtkRenderer Class Reference. Disponível em:<http://vtk.org/doc/nightly/html/classvtkRenderer.html#details> . Acesso em: 28setembro. 2011.W3C. HTML5 Introduction. Disponível em:<http://www.w3.org/TR/html5/introduction.html#introduction> . Acesso em: 24agosto. 2011.ZAKAS, Nicolas. Professional JavaScript for Web developers. Indianapolis,indiana: ISBN: 978-0-47022780-0, Wiley Publishing, Inc, 2009.