David

A versão completa em PDF, em espanhol, pode ser encontrada aqui.

Abstract

Hoje, existem oportunidades para o desenvolvimento de interfaces gráficas de usuário tridimensionais nos navegadore de Internet, com um alcance capaz de atingir o 99% dos usuarios da rede, sem qualquer instalação adicional, através da máquina virtual Adobe Flash Player, que tem um formato multimédia nativo.

Papervision3D é um motor de renderização 3D em tempo real, feito em ActionScript 3, open source, que tem as características básicas da computação gráfica tridimensional, criando uma ilusão 3D, no motor de renderização 2D que tem o Flash Player.

Você pode desenvolver aplicaçoes 3D utilizando tecnologias 3D totalmente open source, utilizando o Linux como uma plataforma para o Flex SDK, que compila o código ActionScript, utilizando a biblioteca Papervision3D.

Introdução

A experiência de usuário é um fator que ganhou uma grande importância na rede. Existe uma clara tendência de migraçao das aplicações desktop para o browser: processadores de texto, planilhas, software de processamento de fotos, e-mail clientes, e um gran número de aplicaçoes foram criados para correr em browsers. A pergunta é porque não têm aparecido muitas interfaces 3D para certas aplicações complexas ou páginas da web, com um montante mínimo de tempo de carga? A resposta é simples: a falta de uma plataforma de software adequada e obicua ao mesmo tempo, para o desenvolvimento de aplicações 3D online. Este ponto será analisado em profundidade no presente artigo.

Para demostraçoes e interfaces simples, Papervision3D abre um mundo muito descuidado na rede, agora é potencialmente possível criar interfaces 3D impactantes, interativas, com um mínimo tempo de carga. Isto é algo que os desenvolvedores de internet e os clientes desejaban por um longo tempo. Ainda tem grandes limitações, porque a aceleração não é feita por hardware, mas está em desenvolvendo uma nova versão do Papervision3D, baseada na API do Flash Player 10,  com a posibilidade de reutilizar linhas de codigo C e C++ e a execução de PixelBender; e assim se espera o aumento drastico da qualidade dos novos sites 3D en internet. Sobre este caminho, nace uma nova gama de interfaces, y Papervision3D se torna muito importante no desenvolvimento de websites.

O objetivo de este post é mostrar os principais elementos necessários para a renderização em 3D usando as clases de Papervision3D.

Análise das tecnologias existentes para o desenvolvimento de interfaces 3D em browsers

Quando todas as tecnologias e recursos para o desenvolvimento de interfaces tridimensionais e de fácil acesso para os usuarios y developers (Software Development Kit, motor de renderização 3D em tempo real através da Internet, utilizaçao do GPU pelo motor de renderizado, tecnologia de alta ubicuidade e Internet de alta velocidade) tenhan se establecido fortemente, será iminente uma mudança no modo de navegacão por internet.

Engenheiros de software de muitas organizações e comunidades de desenvolvimento open source estão trabalhando hoje para tornar possível a prestação de 3D em tempo-real em navegadores web. É possível demonstrar que o ambiente de desenvolvimento baseado na máquina virtual Adobe Flash Player é actualmente a principal infra-estrutura para implementação de interfaces 3D nos browsers.

As vantagens do Flash em relação a outras alternativas:

Neste análise apenas simplesmente evidencio aspectos técnicos y a ubicuidade, que vão excluindo alternativas para o desenvolvimento 3D para browsers, com relação à plataforma Flash. (Parte de esta analise foi extraido de um post de Tinic Uro).

HTML vs Flash para 3D

HTML é um formato de documento, o Flash tem como nucleo um formato multimédia. Portanto, ao contrário do HTML, que tem exactamente 1 frame, conteúdo Flash pode ter um número infinito de frames ao longo do tempo. HTML é estático, Flash é dinâmico. HTML não é Drag and Drop, o Flash sim.

AJAX vs Flash para 3D

Na maioria dos casos, AJAX é promovido para o desenvolvimento de RIA, os exemplos incluem: o Gmail, Google Maps, entre outros. Google é um grande precursor de AJAX, Mais uma prova de que o AJAX está atingindo seus limites, é que o Google Earth não pôde ser levado ao browser com AJAX, acho que este e um argumento suficiente que demonstrara que o desenvolvimento do software 3D vai além do que AJAX pode proporcionar.

SVG vs Flash para 3D

Flash e SVG foram concebidos inicialmente para gráficos bidimensionais, mas o Core Team do Papervision3D tem desafiado o rendimento do Flash Player e transformou-o em um motor de renderização em 3D. Isso também poderia ser possível com o SVG, mas os tags aplicados a nada mais que um frame de conteúdo real (não em sites de demostraçao) são demasiados. A produtividade é muito baixa. No Internet Explorer, você deve instalar um plug-in para visualização (a maioria dos computadores que tenham instalado o Internet Explorer não tem actualmente este plugin).

Java Virtual Machine para 3D vs Flash

Máquina Virtual Java tem várias versões, incompatíveis. Flash não tem qualquer incompatibilidade entre lançamentos.

Silverlight vs Flash para 3D

Silverlight tem mais potencia que o Flash para o desenvolvimento de ambientes tridimensionais, porque tem acesso ao DirectX, mas ainda tem uma baixa taxa de penetração. Você precisa baixar um plugin para utilizá-lo. Flash Player está presente em 98% dos navegadores.

Shockwave vs Flash para 3D

Shockwave é um plugin para navegadores que se especializa na criação de conteúdos 3D em tempo real. Tecnicamente é a melhor escolha para o desenvolvimento em 3D, mas tem uma baixa taxa de penetração em relaçao ao Flash Player (50%).

Unity3D vs Flash para 3D

Unity3D também é um plugin para navegadores que se especializa na criação de conteúdos 3D em tempo real. Tecnicamente é a melhor escolha para o desenvolvimento em 3D, mas também tem uma taxa de penetração muito baixa (1%).

Portanto, o Adobe Flash Player pode ser realmente a melhor opção para criar interfaces tridimensionais em navegadores web. O ponto mais importante para o bom posicionamento do Flash Player nesta análise é o seu alto grado de ubicuidad na internet. Isto tem realmente importante. O exemplo mais claro é Second Life, um mundo virtual que não tenha sido tão bem sucedido como esperado, e grande parte desse fracasso se deve ao download do software (21.2MB), paso que voce deve realizar obligatoriamente pra aceder a este mundo virtual. Baixar um plugin para exibir uma página web é normalmente uma grande limitaçao pra que um site alcançe grande popularidade,os internautas em geral que não pretenden instalar novos plugins. Flash plug-in é a mais difundida no mundo inteiro.

O Flash Player não é Open Source, isto é bom ou ruim?

É bom. Flash não é nem será open source. Isto é devido à má experiência que tivemos com o Sun Java Virtual Machine. O fato é que o código seja aberto incentiva a que possan surgir versões alternativas, e provavelmente incompatíveis um com o outro, e assim, vai se perder uma grande virtude do Flash Player, que é escrever um único código para diferentes browsers e em diferentes plataformas sem se preocupar pelas incompatibilidades. Java falhou neste aspecto. (y JavaFx náo tem ovicuidade y tampouco e totalmente open source atualmente).

O Flash Player é projetado e otimizado para renderização 2D. Não é em 3D.

Este é um ponto crítico, o grande probleme pelo cual o Flash Player não é tecnicamente a melhor opção. O número de frames por segundo prestados 3D conteúdo é muitas vezes baixa, em casos reais. A comunidade de desenvolvedores do Flash Player está a desenvolvendo vários projectos, a fim de fazer possivel a renderizaçao 3D no Flash Player, existem projetos privados y open source, algum deles são:

Alternativa3D

Away 3D

Five3D

ND3D

Papervision3D

Sandy3D

Wire Engine 3D

Para este artigo, eu decidi falar sobre Papervision3D, o motor de renderização 3D em tempo real mais popular entre os de acima.

Conceitos básicos de desenho em 3D com Papervision3D

Em termos de visualizaçoes no ordenador, mais específicamente em 3D, a renderização é um cálculo complexo desenvolvido por um computador para gerar uma imagem 2D de uma cena 3D.
A técnica mais utilizada hoje para a produção de gráficos 3D em tempo real é a Rasterização. A Rasterização é basicamente um processo de transformação de dados vetoriais (dados) são convertidos em um conjunto de pixels (imagens). Papervision3D utiliza esta técnica, porque é a mais rápida.
Em poucas palabras, o motor de renderização Papervision3D usa uma lógica suficiente para produzir uma ilusão 3D em 2D. Esta lógica está baseada basicamente em:

Projeção (project)

A projecção ortogonal é feito através de transformações matemáticas. Esta técnica não é totalmente satisfatória, por isso, de facto, é utilizado a projeção em perspectiva. Em Papervision3D uma matriz 4×4 (Matrix3D) representa a translaçao, rotação e escala para todos os eixos. Existem também outras três para representar cenas 3D: A matriz global, a matriz de câmeras, e a matriz de transformação de objetos.
Mais explicitamente, cada vértice 3D que exista em cada objeto 3D pode ser transformado por essas matrizes para terminar a visualizaçao 2D no Flash Player.

Geometria

Basicamente, cada ponto do espaço está localizado sob a forma de vertices de dados (Vertex3D). O conjunto de três vértices podem formar uma face (Triangle3D). Arrays de vertices e faces são armazenados em instâncias de GeometryObject3D. Cada classe DisplayObject3D contém informações objeto (localização, tratamento, orientação, eixos, etc) e uma referência para a instância de GeometryObject3D. Os dados de DisplayObject3D são utilizados pelo motor de renderização BasicRenderEngine y os materiais e objetos que são utilizados para desenhar o objeto dentro de um objeto Viewport3D.

Mapeamento de Texturas

É o proceso mais utilizado, e consome a maior cantidade de ciclos do CPU. O mapeamento UV é usado neste processo.

O mapeamento de um triângulo, no caso mais básico, segue este proceso:

Se cria um array de vértices, cada posiçao do array armazena uma instância de Vertex3D que vai ser a coordenar x, y, z dos véctices do triângulo. Neste exemplo, vamos chamá-los v0, v1 e v2 aos vértices do triângulo.

Uma face (rostro) é composto por três vértices (v0, v1, v2). Se cria uma instância do Triangle3D, onde são introduzidos como parâmetros para o material a ser mapeado, vértices e coordenadas UV para cada vértice. A matriz de 3 vértices introduzidos na instância do Triangle3D deve ter a mesma localização que a seqüência que o array das 3 coordenadas UV. As coordenadas UV de cada ponto corresponde as coordenadas do versor bidimensional da projecção do ponto sobre o objeto Viewport3D. A seqüência pode ser escolhida arbitrariamente, mas deve ser lembrado que a orientação da face é regida pela regra da mão direita.

v0 = new Vertex3D (x0, y0, z0); vertices.push (v0);

v1 = new Vertex3D (x0, y0, z0); vertices.push (v1);

v2 = new Vertex3D (x0, y0, z0); vertices.push (v2);

faces.push (new Triangle3D (triangleMesh, [v0, v1, v2], material [UV0, UV1, UV2)].

Este processo produz os mesmos resultados que as seguintes sequências : [v0, v1, v2], ou [V1, V2, v0] e [v2, v0, v1]

Pra mapear a outra face do triângulo o mapeado sera feito na seqüência: [v0, v2, v1], ou [v1, v0, v2] ou tambem [v2, v1, v0]

O array de “vértices” e o array de “faces” são armazenadas em uma instância do GeometryObject3D.

Os objetos geométricos complexos são criados a partir da combinação de triângulos, que e a entidade geométrica básica no processo de renderização. Aqui estão alguns exemplos de construção de um triângulo, e de TriangleMesh3D mais complexos.

Materiais

Os materiais são uma coleção de propriedades que determinam como será renderizada uma superificie 3D. Poderiamos chamar os vértices de esqueletos, e os materiais seriam a pele do esqueleto. Os diferentes tipos de materiais heredam a classe MaterialObject3D, isto implica que podemos encontrar as seguintes propriedades de cada material:

name(string): nome do material

interactive (Boolean): permite a atribuição de ouvintes, por exemplo, eventos de click.

oneSide ou doubleSided (Boolean): Indica se o mapeamento do material sera feito em um ou ambos lados, repectivamente.

smooth(Booleano): Aplica um algoritmo para suavisaçao do material.

Os tipos básicos de materiais são:

WireframeMaterial

Como foi mencionado acima, um objeto 3D é composto por vários triângulos. Os lados de cada triângulo do objeto, são exibidos com WireframeMaterial.

ColorMaterial

Os materiais de uma cor projectam um cor solido sobre objetos em 3D.

BitmapMaterial e BitmapFileMaterial

É possível utilizar uma imagem jpg, gif ou png, ou qualquer objeto sobre bitmapData

BitmapColorMaterial

E parecido a ColorMaterial, a diferença é que você pode acessar os pixels do material.

VideoStreamMaterial

Você pode fazer streaming de vídeo 3D e objetos materiais.

Iluminação e sombras

A simulação da luz é um dos procesos mais complicados na Rasterização 3D porque consume uma grande quantidade de ciclos CPU. Portanto, a iluminação é muito básica no Papervision3D. Você pode criar somente uma luz, a partir da classe PointLight3D. As luces podem afetar os seguintes materiais: CellMaterial, EnvMapMaterial, FlatShadeMaterial, GouraundMaterial e PhongMaterial.

A sintaxe utilizada é:

PointLight3D

luz = new PointLight3D (true);

luz.x = 50;

luz.y = 50;

luz.z = -600;

scene.addChild (leve)

CellMaterial

var cellMaterial: CellMaterial = new CellMaterial (luz, 0×111111, 0xFFFFFF, 5);

var plane: Plane = new Plane (cellMaterial, 400400,10,10)

scene.addChild (do3d)

EnvMapMaterial

var material: EnvMapMaterial = new EnvMapMaterial (luz, bitmapData, bitmapData, 0×555555);

var plane: Plane = new Plane (material, 500,500);

scene.addChild (avião);

FlatShadeMaterial

var flatShadedMaterial: FlatShadeMaterial = new FlatShadeMaterial (luz, 0×0000FF, 0×00ff00);

var plane: Plane = new Plane (flatShadedMaterial, 400400, 10/10);

scene.addChild (avião);

GouraundMaterial

var gouraundMaterial: GouraudMaterial = new GouraudMaterial (luz, 0×0000FF, 0×00ff00);

var plane: Plane = new Plane (gouraundMaterial, 400400,10,10);

scene.addChild (avião);

PhongMaterial

var phongMaterial: MaterialObject3D = new PhongMaterial (luz, 0×0000FF, 0×00ff00, 1);

avião: Plane = new Plane (phongMaterial, 400400,10,10);

scene.addChild (avião)

Uma síntese de materiais podem ser encontrado no blog Mad Vértices:

Collada

Em Papervision3D e possivel importar objectos tridimensionais de qualquer software de modelagem em 3D que suporta exportação para COLLADA. COLLADA é um formato XML para o estabelecimento de uma partilha de ficheiros de aplicações 3D interativas.

Câmeras

Em Papervision3D existem quatro tipos de câmaras: free, target, debug, spring.
A câmara tem três propriedades específicas que podem ser manipulados: zoom, foco e FOV

Criando o projeto em ActionScript 3 utilizando Papervision3D

O Flex 3 SDK é multi-plataforma, e estes exemplos foram compilados utilizando o modo consola de Linux. Existe um grande potencial de desenvolvimento para compilar RIAs desta forma porque estão incluidas as bibliotecas de Flex. Estas podem ser convenientemente utilizadas, combinando com a interface tridimensional que pode ser criado com Papervision3D. Isto abre a possibilidade para a construção de interfaces inovadoras.

A versão do Papervision3D mais utilizada é Papervision3D 2.0 Great White, que se encontra actualmente em fase beta. Tem diversas características novas em relação às versões anteriores, incluindo a aplicação de iluminação. Também e mais otimizado.

Papervision3D + Tweener + Flex SDK + Linux: Uma solução Open Source

Carlos Ulloa liverou o Papervision3D pra a comunidade a finais de 2006 e tem sido um grande progresso desde então. Para a transiçao dos valores de propriedades numéricas são utilizadas as classes Tweener de Zeh Fernando (br).

Conclusão

Usando todas as novas funcionalidades da API do Flash Player 10, sera possibel obter mais capacidade de renderização 3D em tempo real y a posibilidade de aproveitar linhas de código escritas em C++ a traves de Alchemy. Isto irá otimizar o desempenho do Papervision3D, de facto, outros motores de renderização em 3D já estão implementando parcialmente a nova API do Flash Player 10, isso irá melhorando dramaticamente a experiência dos usuarios da Internet.