Usando o VRML em uma aplicação comercial: IAPEP Virtual

Transcrição

1 Usando o VRML em uma aplicação comercial: IAPEP Virtual Mário Sérgio Coelho Marroquim 1 Graduando do Curso de Sistemas de Informações mariosergio@infoway-pi.com.br Professores Orientadores: Adalton de Sena Almeida, MSc 1 adalton@infoway-pi.com.br Ney Paranaguá de Carvalho, MSc 1 ney@infoway-pi.com.br 1 Centro Federal de Educação Tecnológica do Piauí (CEFET-PI) Abstract. The virtual reality seems distant and confused. However, it is very present in our lives. Films and games are a good example. The use of sounds and images creates interaction and involvement that generates a more advanced and friendly interface for the user. The IAPEP Virtual was developed with the purpose to bring the inherent characteristics to the virtual reality, for Web in a commercial application, the IAPEP ON-LINE. Creating, thus, an interface more elaborated than the currently used ones (in two dimensions) in the Internet. It was used language VRML[1] (Virtual Reality Modeling Language), that it is based on simple objects (cubes, spheres, cylinders...), textures and sounds to represent the real world[2]. In a threedimensional model of the internal area of the IAPEP, the user will have access to the physical installations of the institution and to the services that the IAPEP ON-LINE will offer. The user will pass through in this environment through sliding boards, followed by the virtual guide, named Iolanda. Key-Words : VRML, WEB. Resumo. A realidade virtual parece distante e confusa. Contudo, ela está muito presente em nossas vidas. Filmes e jogos são um bom exemplo. A utilização de sons e imagens cria interação e envolvimento, que geram uma interface mais avançada e amigável para o usuário. O IAPEP Virtual foi desenvolvido com a finalidade de trazer as características inerentes à realidade virtual, para a Web em uma aplicação comercial, o IAPEP ON- LINE. Criando assim, uma interface mais elaborada do que as atualmente usadas (em duas dimensões) na Internet. Foi utilizada a linguagem VRML[1] (Virtual Reality Modeling Language) que se baseia em objetos simples (cubos, esferas, cilindros...), texturas e sons para representar o mundo real[2]. Em um modelo tridimensional da área interna do prédio do IAPEP, o usuário terá acesso às instalações físicas da instituição e aos serviços que o IAPEP ON- LINE oferecerá. O usuário trafegará nesse ambiente através de placas deslizantes, acompanhado pela guia virtual, nomeada aqui de Iolanda. Palavras Chaves: VRML, WEB.

2 1. Introdução O VRML é uma linguagem de modelagem de ambientes tridimensionais para a Web. Trata-se de um formato de arquivo ( *.wrl ou *.wrz ) análogo ao HTML (HiperText Markup Language),para objetos tridimensionais. Usando-se formas pré-definidas e se especificando novas formas a partir dessas, podem-se atribuir cor, forma, luz e outros a um documento VRML. Como foi projetado para a Web, o VRML nasceu independente de sistema operacional bastando o usuário adquirir um plugin VRML (programa necessário para visualização dos ambientes 3D) disponível para a plataforma utilizada. O VRML foi exposto ao mundo, primeiramente, em Mas só em 1997, com sua segunda versão, Moving Worlds VRML 2.0, a linguagem se tornou padrão para interfaces tridimensionais na Web. Desde então vem sendo usada em diversos casos: do auxílio aos profissionais de arquitetura e construção civil à construção de roupas com mini-computadores (Wearable computer), pelo MIT (Massachusetts Institute of Technology). O uso da Realidade Virtual como padrão de interface na Internet não é uma realidade. Embora muitos vejam no futuro da Internet as interfaces tridimensionais, atualmente, o que se tem é uma crescente utilização da Realidade Virtual em diversas áreas de nossas vidas. O VRML ainda não é amplamente usado, pois o poder de processamento dos computadores pessoais ainda, em geral, não é o ideal. Além disso, as conexões com a Internet em banda larga só agora estão começando a ser usadas pela maioria dos usuários da Internet. Este projeto tem como objetivo principal expor a linguagem ao uso como interface alternativa para o IAPEP ON-LINE, uma aplicação comercial completamente voltada para a interface Web. Além da criação do modelo tridimensional da parte interna do prédio do IAPEP, o Instituto de Previdência e Assistência do Estado do Piauí, foram criados menus, em formas de placas deslizantes, para se estabelecer um diálogo com o usuário a fim de se fornecer as opções do sistema. Para exibir as opções dos menus corretamente, foram definidos três grupos de usuários: os segurados, os credenciados do IAPEP (prestadores, hospitais e clínicas, e profissionais, médicos que trabalham junto aos prestadores) e os usuários visitantes, que não têm nenhum vínculo com o IAPEP. Para cada um, o IAPEP Virtual se apresenta de maneira diferente. Entretanto, a opção navegação livre pelo ambiente está disponível para todos os usuários. Outra opção que está disponível para todos é o Tour Pelo IAPEP, onde Iolanda, a guia virtual, irá guiar o usuário pelo cenário virtual do IAPEP, mostrando informações sobre os diversos serviços prestados pelo referido Órgão. As opções dos menus levam à exibição do mesmo conteúdo das páginas do IAPEP ON-LINE, em janelas pop-up. Ou seja, no acesso à determinada funcionalidade através da interface em VRML é exibida a mesma página que aparece quando se acessa a mesma opção pela interface normal, em HTML. Assim, o usuário pode realizar suas operações e voltar ao ambiente tridimensional sem grandes dificuldades, garantindo-se, deste modo, a navegabilidade da solução, de um modo geral. Um detalhe importante: toda essa lógica para exibição do ambiente virtual e dos menus é controlada através de scripts PHP (HiperText Preprocessor) fato que será melhor explicado ao longo do texto.

3 É importante ressaltar que o uso do VRML aqui não é apenas para exibição de objetos tridimensionais, mas também para criação de uma interface completa: a existência de um ambiente, uma guia virtual e menus, com opções que mudam de acordo com o usuário, interagem para criar, envolvimento, além de propor navegabilidade e interação com o sistema que não são possíveis em interfaces comuns (em duas dimensões)[6]. Aí está a grande motivação para o projeto: provar que a Realidade Virtual pode sim sair dos centros de pesquisa e dos livros técnicos para ser usada diariamente em algo importante para todos, como interface para uma aplicação, propondo maneiras de se interagir com o sistema de um modo bem mais envolvente e inédito. O site oficial do projeto é: 2. Material Utilizado Objetivando aprofundar o conhecimento na linguagem e seu uso, foram feitas várias pesquisas incluindo vários assuntos como código JavaScript dentro do VRML, animações (sensores e eventos) e nodos em geral como Text e Billboard. Uma lista completa do material utilizado pode ser encontrada nas referências, no final deste trabalho. A implementação do código em VRML foi realizada usando o editor de texto VRML Pad, da Parallel Graphics [ParallelGraphics, (não foram usadas ferramentas de design tridimensional como AUTOCAD ou StudioMax). A guia virtual, Iolanda, foi desenvolvida com base em um modelo disponibilizado pelo produto Internet Space Builder, também da Parallel Graphics. As fotos, que serviram de texturas no ambiente, foram retiradas com uma câmera digital e editadas no pacote de programas Acdsee Power Pack 5.0 [ACD Systems, 3. Metodologia A criação de um modelo virtual de um ambiente que existe na vida real é complexa. Poderia ser feito um modelo exato e quase idêntico à realidade, mas este seria demasiadamente pesado, por causa da existência de elementos como iluminação, sombras e dezenas de texturas. Um modelo assim só poderia ser visualizado, com velocidade aceitável, em computadores muito potentes e seria lento fazer sua carga pela Internet, mesmo utilizando-se banda larga. O IAPEP Virtual não procura a perfeição em relação ao ambiente real. Assim, em alguns casos ele não se assemelha à realidade, de modo que o seu tempo de carga e processamento torne-se bastante aceitável. O desenvolvimento do projeto virtual foi divido em: definição do ambiente; texturização e ambientação; criação da guia virtual; definição dos menus; definição das rotas do viewpoint (visão do usuário) e da guia virtual; criação das animações. Essas fases serão detalhadas a seguir: Definição do ambiente - foram feitos desenhos do interior do prédio para posterior codificação do ambiente e correto posicionamento de paredes e demais objetos. Vale lembrar que se utilizando objetos simples, como cubos, podem-se

4 representar objetos do mundo real com muito realismo [2]. Paredes, colunas, teto, piso, quadros e outros elementos não passam de simples cubos. Texturização e ambientação o ambiente não seria realístico sem texturas. Cada objeto tridimensional pode possuir uma textura para torná-lo mais real [6], assim, foram utilizadas fotos retiradas do local com uma câmera digital. Observou-se grande dificuldade em obter-se um modelo com as cores reais do ambiente e que tivesse uma semelhança quase fotográfica com a realidade. Para corrigir o problema, as fotos foram retiradas em pontos onde não havia muita iluminação ambiente, sem recurso de flash da máquina. Pequenas alterações, principalmente no grau de saturação, foram feitas para adequar as texturas à realidade. Embora o VRML ofereça suporte, a iluminação foi colocada alterando as texturas e não inserindo código direto no VRML. O motivo é simples: o modelo de iluminação do VRML, além de apresentar falhas, exige um custo computacional muito grande, podendo desta forma comprometer a performance do sistema. Veja ilustração na Figura 1. O VRML, por padrão não produz sombras. As sombras existentes foram feitas manualmente colocando iluminação nas texturas, como supracitado, e também criando cubos pretos, semitransparentes, para dar a impressão de sombra sem se precisar carregar uma outra textura como mostra a Figura 2. Figura 1. Texturas nas paredes criam a ilusão de iluminação

5 Figura 2. Colunas com cubos pretos semitransparentes para dar a impressão de sombra A parte externa do prédio, Figura 3, não foi codificada, pois seria muito custoso. Um nodo Box foi texturizado com a foto do exterior, retirada de dentro do prédio. A uma distância média, o resultado parece bem real. A distância em questão foi mantida através da criação de uma parede transparente localizada na frente das fotos, que impede o usuário de chegar mais perto e perceber as imperfeições. Alguns elementos do ambiente real e algumas texturas foram retirados do modelo virtual devido aos seguintes fatores: muitas texturas utilizam muitos recursos da máquina do usuário, tornando o ambiente pesado e aumentando o tempo de carga do projeto. Figura 3. Representação da parte externa do prédio, através de fotos

6 Criação da guia virtual a guia virtual, como já foi dito, é um modelo tridimensional de uma mulher, encontrado no programa Internet Space Builder, da Parallel Graphics. Assim como a maioria dos objetos complexos no VRML, a Iolanda é um conjunto de polígonos totalizando 1298 faces. São 4928 linhas de código para se definir todos esses polígonos. A Iolanda utiliza pouco mais de 30 kb em 6 arquivos de textura. Apesar do tamanho diminuto de seus arquivos, a guia representa certo problema para o projeto: a lentidão nas animações que a envolvem. O modelo é formado de vários polígonos de arestas definidas com valores extremamente precisos, que geram cargas extras de processamento para redefinir a posição de cada parte de seu corpo ao longo da animação, a cada frame. Veja um exemplo na Figura 4 abaixo: Figura 4. Parte do código da Iolanda referente ao ombro. Podem-se observar valores extremamente precisos e desnecessários O ideal é que todos esses valores sejam reduzidos a pelo menos três ou quatro casas decimais. Uma precisão de e-4 só é necessária quando se está descrevendo um modelo de um átomo, ou algo assim. De modo geral, a guia Iolanda funciona perfeitamente, mas depois de uma limpeza em suas mais de 4

7 mil linhas de código, ela se tornará relevantemente mais rápida, na hora do processamento de suas animações. Definição dos menus os menus são os elementos principais na criação de um diálogo com o usuário. No IAPEP Virtual, os menus são todos apresentados em placas deslizantes, como texturas. Menus diferentes são carregados de acordo com o tipo de usuário e, para manter uma melhor aparência, os menus são apresentados com certa transparência. Veja um exemplo na Figura 5. Figura 5. Apresentação do IAPEP Virtual aos usuários comuns Definição das rotas as rotas são os caminhos em que as animações devem ocorrer dentro do ambiente. No IAPEP Virtual, as animações foram divididas em três grupos: animações da guia virtual Iolanda, do viewpoint (visão do usuário) e dos menus. Na medida em que a guia se movimenta no ambiente, a câmera (com a visão do usuário) segue seus movimentos [3][4], sempre procurando centralizá-la na tela e sempre procurando criar o efeito de que o usuário realmente está sendo guiado. É interessante observar que as rotas, neste projeto, tentam aproveitar ao máximo a área livre do ambiente e não aproximam o usuário de algumas imperfeições do modelo. Criação das animações as animações seguem as rotas predefinidas. Por se desconhecer a capacidade de processamento da máquina de cada usuário, não existem muitas animações no IAPEP Virtual e as que existem são de pouca complexidade. Existem muitas formas de se criar animações no VRML, algumas utilizam JavaScript para controlar a sua lógica. No projeto não se utilizou JavaScript, por representar, em alguns casos, problemas na máquina do usuário. Deste modo, as animações foram feitas baseadas em três elementos do VRML: Touch sensor Sensor de toque (do mouse, por exemplo) agregado a um objeto, ou item de menu [1][2][5];

8 Time Sensor Sensor de tempo que define por quanto tempo uma animação deve ocorrer [1][2][5]; Position Interpolator e Orientation Interpolator interpoladores de posição e de orientação. Para animar um objeto, em VRML, devemos definir posições por onde o objeto deve percorrer. Para completar o caminho entre esses pontos, são usados os interpoladores que geram posições automaticamente entre os pontos definidos [1][2][5]. Routes são formas de relacionar um evento do mouse, que ativa o touch sensor, a um time sensor que se liga ao(s) interpoladores. Estes se relacionam com o(s) objeto(s) que se movimenta(m) de acordo com os valores definidos nos interpoladores [1][2][5]. Trechos do código referente à animação de uma das placas deslizantes: Codificação de um sensor de toque Sensor de tempo denominado Timer2 Interpolador de posição nomeado Interpolador1 Definição de rotas que ligam o sensor de toque ao timer2(linha 1), depois ligam o timer2 ao interpolador de movimento(linha 2) e, finalmente, ligam as posições do interpolador ao objeto (no caso, nomeado apresentacao ) É deste modo que todas as animações do projeto ocorrem. Vale lembrar que muitas animações exigem vários sensores de tempo, interpoladores e rotas, ativados

9 apenas por um sensor de toque que dispara o ciclo de animações, regido pelo tempo de execução de cada uma [3]. 4. O uso do PHP O uso apenas de VRML limita as funcionalidades do projeto, pois a linguagem não possui uma API (Application Program Interface) que forneça armazenamento de dados ou estruturas de decisão, dentre outros elementos presentes em outras linguagens. Assim, resolveu-se utilizar o PHP para realizar estas tarefas. O PHP é uma linguagem de script, portanto, qualquer tipo de script pode estar codificado dentro de um arquivo HTML, com extensão *.php. O Servidor interpreta o todo o arquivo realizando a lógica dentro do script PHP e gerando uma saída em HTML: o cliente só recebe arquivos em formato HTML. Por que então não incluir código PHP dentro de um arquivo VRML? Para tal deve-se ter conhecimento de como funciona o processo de tradução de um arquivo PHP e geração de uma saída em HTML. Veja uma ilustração desse processo abaixo: 6HUYLGRU Arquivo com extensão %URZVHUGRFOLHQWH Arquivo em formato HTML. O browser trata de interpretá-lo. Saída de dados em formato padrão: HTML (o arquivo recebe um cabeçalho, conteúdo MI ME, oculto para identificá-lo, por padrão, como HTML). Logicamente, a mesma estrutura pode ser usada para gerar um arquivo VRML em PHP [8]. Basta mudar o tipo padrão de conteúdo MIME, do arquivo que está sendo interpretado, no servidor. PHP possui funções para isso. Veja a seguir como fica o diagrama: 6HUYLGRU %URZVHUGRFOLHQWH Arquivo VRML com PHP. Extensão PHP. Saída de dados em formato VRML (o arquivo recebe um cabeçalho, conteúdo MI ME, diferente através de funções do PHP). Arquivo em formato VRML. O plugin VRML trata de interpretá-lo.

10 Logo, só precisamos mudar qual o tipo de saída, através da alteração do conteúdo MIME do arquivo que está sendo gerado. Em PHP, o seguinte código deve ser a primeira instrução a estar no arquivo: <?php?> header ("Content-type: model/vrml"); // Altera o conteúdo MIME do arquivo echo "#VRML V2.0 utf8\n"; // Gera o cabeçalho padrão para os arquivos VRML 2.0 A partir daí, qualquer saída será interpretada como instrução de VRML e não mais de HTML. Ou seja, algo como descrito abaixo é totalmente possível: <?php?> header ("Content-type: model/vrml"); echo "#VRML V2.0 utf8 \n"; Shape { <?php?> } $size = 2; geometry Box { echo "size $size $size $size \n"; } Do mesmo modo que podemos usar estruturas de controle e decisão em PHP para manipular a exibição em HTML e tornar as páginas dinâmicas, podemos fazer usando o PHP e VRML. Percebe-se que com esta pequena técnica, poderiam existir inúmeras funcionalidades no projeto. Por enquanto a única funcionalidade utilizada é a da exibição do nome de um usuário logado no sistema (segurados e credenciados serão logados no sistema) na tela de boas vindas, dentro do ambiente tridimensional. Obviamente novas excitantes funcionalidades serão incluídas com o tempo. 5. Estrutura final do IAPEP Virtual Procurou-se adotar uma estrutura de funcionamento que fosse, a qualquer custo, a alternativa mais rápida e simples possível. A seguir, a estrutura de organização final da versão 1.0 do IAPEP Virtual. Cada seta significa um include (no VRML, a estrutura de inclusão de arquivos externos é o Inline [1][2]).

11 Do modo como está atualmente, o Core.wrz, que contém todas as definições do ambiente virtual, só é carregado uma vez. Quando outra opção como navegação livre (Salao_geral_livre.wrz), para o usuário visitante, for acessada, o usuário só vai precisar baixar o arquivo específico, não precisando baixar novamente o Core.wrz, pois este já estará nos Temporary Internet Files do browser do cliente. 6. Conclusão e modificações futuras: Como vimos, o projeto foi desenvolvido sempre com muita preocupação com a navegabilidade e com o tempo de carga e processamento. Afinal de contas, o usuário não quer esperar horas para ver o ambiente virtual e este, quando chegar, deve ser o mais intuitivo possível, além de se apresentar de forma atraente e envolvente. É para criar essa imersão que foram colocadas texturas, sombras, menus e a guia virtual. Outro detalhe para criar envolvimento do usuário com o sistema foi a colocação do nome dele (já que os usuários como segurados e credenciados são logados no sistema, podemos usar informações cadastrais) na tela de saudação do IAPEP Virtual. O paradigma entre o realismo do ambiente em relação ao seu tempo de carga é resolvido inserindo elementos que caracterizem o ambiente real no modelo virtual, não levando em conta alguns elementos que não têm grande importância visual.a utilização de texturas, portanto, deve ser cuidadosamente pensada, pois atua em um importante elemento do projeto, o tempo de carga. A estrutura de arquivos, como mostrado, garante que o usuário não irá precisar ficar baixando as definições do ambiente toda vez que acessar o IAPEP Virtual. Se ele já o acessou pelo menos uma vez, só precisara baixar as definições de menus e animações para o seu tipo de usuário e opção desejada. Observou-se grande melhora no tempo de carga após a primeira visita ao site do projeto. Isso acontece por que as definições do ambiente não são dinâmicas e já são carregadas na primeira visita do usuário. Quanto às modificações futuras no projeto, apresentamos, a seguir, uma lista com algumas das mais importantes, que devem ser implementadas: Implementação de um mapa, para exibir a posição do usuário no ambiente;

12 Substituição dos menus por texto a ser carregado em outro frame, na mesma janela. A exibição de determinado texto seria ativada por um clique em algum objeto, dentro do ambiente. Assim, não se necessitaria carregar os menus, que apresentam um custo computacional razoável, já que são figuras de alta resolução; Controle da exibição do ambiente virtual através de ActiveX. Detalhes como a taxa de atualização da tela, tipo de reinderização, otimização de texturas e de resolução da tela, além da ativação de buffers adicionais para o plugin podem, assim, ser manipulados para melhorar a exibição do ambiente; Substituição da guia virtual por um modelo tridimensional mais realista e com carga de processamento menor; Utilização de uma interface Java (EAI External Authoring Interface) para fazer a interação entre o VRML e qualquer outra rotina que esteja no site [10]. Ex: atualmente uma ação em uma página HTML não produz alterações no ambiente virtual, sem precisar fazer seu reload. Com a utilização da EAI, o ambiente virtual pode responder em tempo real a ações realizadas em outras áreas do site; Utilização de PHP para tornar o conteúdo do IAPEP Virtual mais dinâmico e permitir ao usuário personalizar o ambiente de diversas maneiras. As informações seriam armazenadas em um banco de dados como o MySQL, por exemplo. 7. Referências A seguir, uma lista dos artigos e apostilas utilizados como material de apoio neste projeto: [1] The Virtual Reality Modeling Language node reference, Web3D. Disponível em: [2] SILVEIRA, Fábio Fagundes. Aspectos sobre animações utilizando a linguagem VRML. Bagé, RS. Disponível em: [3] SEIDMAN, Gregory. Cooking With Hotpot: Making Events In VRML Work For You. Disponível em: [4] Viewpoint Adaptation during Navigation based on Stimuli from the Virtual Environment. University of Twente. [5] NETO, Antonio José de Barros. Projeto Animações Volumétricas em VRML. Disponível: [6] JIUNG, Yao. Increasing the Visualization Realism by Frame Synchronization between the VRML browser and the Panoramic Image Viewer. Tamkang University, Taiwan.

13 [7] GEYER, Werner; MAUVE, Martin. Integrating Support for Collaborationunaware VRML Models into Cooperative Applications. University of Mannheim, Germany. [8] GARDET, Vincent. How do I create VRML with PHP? Disponível em: [9] DUARTE, Lucio Mauro; ZANONI, Cícero; SILVA, Daniela Eloy da. VRML 2.0. [10] ROUADY, Bill.&UHDWLQJD-DYD6FULSWLQWHUIDFHIRU WKH&RVPR3OD\HU950/ 3OXJLQ.