Simulações físicas em 3d na web com Papervision e Jiglibflash

Os projetos que envolvem o uso de animações 3d na web sempre foram um grande desafio para a maioria dos artistas, pois envolvia o uso de tecnologias especializadas em mostrar apenas vídeos ou vetores 2d. Esse problema era resolvido com o uso de vídeos incorporados em web sites criados em Flash, que acabavam mostrando o 3d, mas por outro lado carregavam significativamente o tamanho dos arquivos usados no web site. Desde que o Flash passou a usar o ActionScript 3, o número de módulos e classes personalizadas cresceu significativamente e possibilitou o surgimento de projetos como o Papervision 3d.

Só o uso do Papervision 3d com o Flash já permite a criação de web sites vetoriais de maneira muito semelhante ao que fazemos em softwares como o Blender 3D e 3ds Max. Ainda é possível adicionar um pouco mais de complexidade ao Flash com classes especializadas em física, como é o caso do JiglibFlash. Para termos uma idéia mais clara do que é possível fazer com a união dessas duas classes, os objetos 3d criados no Papervision podem participar de simulações como Rigid Bodies!

Se você quiser aprender os procedimentos necessários para criar uma animação usando Papervision 3d e JiglibFlash, simulando Rigid Bodies, visite o endereçoi indicado.

aninacao-3d-flash-papervision-jiglibflash

No web site é possível encontrar as instruções para criar uma cena com diversos cubos que sofrem ação da gravidade, como qualquer outra simulação de Rigid Body. Assim que os cubos colidem uns com os outros, as reações baseadas em massa entram em ação criando uma animação totalmente automática. O melhor de tudo é que o processo inteiro está armazenado em um arquivo vetorial bem pequeno.

Esse é um assunto interessante para artistas que gostariam de expandir seus projetos para a internet, pois o processo é muito semelhante a um jogo. É necessário aprender um pouco de programação e se adaptar as nuances do Flash e do próprio Papervision, mas garanto que o resultado dessas animações aplicadas em qualquer portfólio faz o profissional ter portas abertas na maioria das agências envolvidas com web.

Sempre que posso abordo o uso do Papervision 3D nas minhas aulas de desenvolvimento multimídia para web, mas infelizmente a carga horária acaba sendo curta para avançar na criação de aplicativos 3d para web.

Usando SourceBinder para criar 3D interativo para web com Papervision 3D

Os profissionais que trabalham com computação gráfica 3d acabam direcionando a sua atuação profissional para a área publicitária, ou produção de conteúdo visual para cinema e TV. Mas, ainda existe um campo vasto e praticamente inexplorado para artistas 3d que é a internet. A produção de conteúdo 3d para internet ainda está apenas começando e pode apresentar diversas oportunidades em termos de projetos e criação. O Blender 3d até tentou se estabelecer como plataforma de criação 3d para a web com o seu plugin que permitia executar conteúdo 3d, diretamente no navegador. Mas, a aposta na tecnologia acabou levando a NaN a falência, pois ainda era cedo para basear a sua produção nesse tipo de tecnologia. Isso já tem mais de dez anos!

Hoje o cenário em termos tecnológicos e velocidade de banda na internet são completamente diferentes e um dos grandes responsáveis pela disseminação da web 3d é o Flash Player. Já existem diversas bibliotecas de classes e ferramentas que permitem criar conteúdo 3D compatível com o ambiente do Flash Player, que está presente em praticamente todos os computadores com acesso a internet. Um desses módulos mais famosos é o Papervision 3D que é um conjunto de classes personalizadas, capaz de manipular objetos em 3D e até mesmo animar modelos complexos modelados no Blender 3D ou outro software capaz de exportar objetos no formato COLLADA.

Nesse semestre, comecei a ministrar aulas sobre o Papervision para criação de conteúdo 3D para web integrado em aplicativos multimídia. No curso foi possível perceber um dos principais problemas relacionados ao Papervision que é o conhecimento e configuração das classes. Se você quiser fazer um teste com um ambiente de configuração visual do Papervision, recomendo consultar o SourceBinder que trabalha com um sistema de nós para configurar bibliotecas externas para o Flash. O software é capaz de fazer animações e simulações usando diversas bibliotecas para web, inclusive com simulações físicas!

Quer ver um exemplo? O vídeo abaixo mostra o software criando um ambiente 3d que simula o comportamento de Rigid Bodies com a aplicação do Papervision 3D e do JiglibFlash. O resultado é um ambiente interativo que é semelhante a um jogo 3d, mas que pode ser associado a qualquer navegador que suporte o Flash Player.

Physics made with SourceBinder using JiglibFlash and Papervision from Balazs Serenyi on Vimeo.

Quem conhece o funcionamento de um sistema baseado em nós, vai encontrar muita facilidade em usar o SourceBinder. Todo o processo de criação é visual e não requer conhecimentos em programação ou ActionScript para aplicar os comportamentos nos objetos.

No vídeo é possível acompanhar a criação de um pequeno muro formado por vários cubos. Esses cubos recebem propriedades de Rigid Body para reagir com colisões e também com a gravidade. No final do vídeo podemos acompanhar a criação de um objeto de maior massa, que acaba deslocando todos os objetos no cenário.

Para quem ainda está com dúvidas sobre a área de atuação no mercado de computação gráfica 3d, esse é um excelente caminho a seguir.

Adobe Flash Catalyst: Crie interface interativas de arquivos PSD, AI e PNG

Para qualquer artista envolvido com a criação de conteúdos ou apresentações para a internet, um dos maiores desafios é mesclar a sua formação direcionada com as artes visuais e o ambiente técnico e cheio de códigos da web. Sempre que ministro cursos sobre o Flash ou ActionScript percebo isso de maneira bem evidente, pois quando o público do curso é formado por pessoas interessadas na parte visual, o ActionScript fica meio de lado e quando o público é de desenvolvedores, a parte visual dos aplicativos sempre deixa a desejar. A Adobe está tentando minimizar essas diferenças para o lado dos artistas com o lançamento do Adobe Flash Catalyst. Esse é um aplicativo ainda em estágio beta no Adobe Labs que tem como objetivo criar interfaces para internet, sem o uso de nenhum tipo de código.

O processo de criação no Flash Catalyst funciona com base na importação de arquivos produzidos no Photoshop, Illustrator ou Fireworks. Assim que os arquivos são importados é possível converter os mesmos para elementos interativos como botões. O vídeo abaixo mostra uma demonstração do software em ação:

Se você produz material gráfico e gostaria de testar o Catalyst para criar apresentações, o software pode ser copiado de maneira gratuita no web site da Adobe, enquanto ainda estiver em fase beta. O apelo de criar apresentações interativas sem a necessidade de usar uma linha de código é muito interessante para artistas, que não tenham interesse em estudar linguagens de programação. Para promover o uso do software, existe um treinamento gratuito sobre o Adobe Catalyst disponível nesse endereço, ainda que seja básico é uma ótima introdução ao software.

Essa opção não é tecnicamente a melhor escolha, pois softwares que criam esse tipo de comportamento de maneira automática geralmente adicionam muitos blocos de código desnecessários ao aplicativo.

Ainda acredito que a melhor solução, pelo menos para quem precisa apresentar material em 3d é usar engines 3d para o Flash, caso o trabalho seja apresentado na web. Entre as diversas opções de engines 3d a que mais me agrada é o Papervision 3D, que é totalmente gratuito e de pode criar efeitos muito interessantes para apresentar interfaces e modelos 3d direto no navegador. O ponto negativo do Papervision 3D é que você precisa de conhecimentos intermediários em ActionScript para conseguir elaborar alguma interface interativa em 3D.

VizualPV3D: Interface visual para criar Flash 3D com Papervision

Um dos grandes limitadores para a produção de material em 3d para a internet é a falta de uma tecnologia que permita elaborar esse tipo de material. O VRML foi uma opção desde os primórdios da internet, mas nunca deslanchou ou ganhou a simpatia de designers e web desigers. Entre os potenciais candidatos a permitir a criação de conteúdo 3D para internet está a dobradinha entre o Adobe Flash e o Papervision 3D, que é uma Engine 3D que pode ser integrada ao ambiente de desenvolvimento do Flash.

Para quem já conhece o Flash e principalmente o ActionScript 3, os únicos desafios para aprender o Papervision são as classes personalizadas da Engine e a modelagem 3d dos cenários e objetos.

Se você não tem experiência alguma com o Flash ou Papervision, pode fazer uso do recém lançado VizualPV3D, que é nada mais que uma interface gráfica feita no próprio Flash com o Papervision, para permitir que artistas e pessoas sem experiência com programação, possam criar 3D para internet. Não faz a menor idéia do que é isso? Assista ao vídeo abaixo para conhecer o VizualPV3D.

Vizual PV3D from Juxt Interactive on Vimeo.

Agora que você já assistiu ao vídeo, posso explicar que esse aplicativo apresentado no vídeo consegue substituir em muito, a necessidade de trabalhar com o Flash e ActionScript para elaborar 3D para internet. Como é possível perceber pelo vídeo, o software se comporta como se fosse um aplicativo 3d qualquer, mas na verdade ele está sendo executado com o Flash Player 10 standalone, que permite executar arquivos com extensão SWF fora do navegador.

Tudo isso que está sendo configurado usando menus e janelas de opções, precisaria ser configurado usando códigos, classes e outros atributos próprios de uma linguagem de programação. Isso não é muito atrativo para a maioria dos designers, o que faz do VizualPV3D um ótimo aliado para as pessoas interessadas em criar 3D para web sem precisar programar. O software ainda está em versão alpha, mas é muito promissor!

Caso você queira testar o software, basta visitar a página do VizualPV3D e fazer o download do aplicativo. Só lembre que é necessário usar o Flash Player 10 stand alone para abrir o software. Os modelos 3d precisam estar em formato XML para que seja possível abrir arquivos no aplicativo.

Tutorial de modelagem 3d para um coração anatomicamente correto

Nos projetos de modelagem 3d que encontramos com freqüência na internet e em dvds de treinamento, os temas e objetos manipulados nos tutoriais são geralmente tangíveis e podem ser facilmente encontrados no nosso cotidiano, mesmo as naves e material relacionado com ficção científica é fácil de encontrar em filmes e seriados. Mas, quando o assunto é modelagem para a área de saúde, fica mais difícil até mesmo localizar imagens e material de referência com qualidade e que possa passar para um artista 3d a real noção daquela entidade ou órgão.

Como forma de desafio para a representação em 3d, um artista resolveu modelar no Blender 3D um coração humano seguindo recomendações e desenhos esquemáticos que deixam a representação do mesmo bem próxima do real. Essa modelagem e exercício de anatomia teve a preocupação de criar até mesmo as veias e artérias em 3D. O tutorial foi totalmente gravado em vídeo e tem longa duração, no total são dez vídeos no Youtube que organizei na coleção abaixo. Como a maioria dos vídeos bate no limite de tempo do Youtube que são 10:59 minutos, a duração total do tutorial passa de uma hora.

O processo de modelagem é bem semelhante ao que estamos acostumados, com a coleta de material de referencia no inicio de boa parte da modelagem sendo realizada com o uso de subdivisão. O desafio mesmo é seguir a morfologia e detalhamento do coração, o que não é tarefa fácil para quem não tem experiência alguma com anatomia.

Agora, o mais interessante desse conjunto de tutoriais é que o artista usa o mesmo modelo 3d elaborado no Blender 3D, para transformar o material em 3d para a web com o Papervision 3D e o Adobe Flash. Como você deve saber, estou preparando muito material e estudos usando o Papervision 3D e o Blender para publicar e criar material 3d para a internet, que é um dos motivos pelo qual acredito que o Plugin web do Blender não é realmente necessário. Assim como aconteceu com o projeto Apricot que pretendia mostrar o Blender como ferramenta dentro de uma seqüência de trabalho, provendo modelos 3d para jogos, acredito que o mesmo se aplica a web 3D.

Esse tutorial e um exemplo fantástico de como o Blender 3D pode ser usado como plataforma de modelagem para web designers, usando ActionScript para controlar a interação e o Papervisio 3D como engine.

Só há um pequeno detalhe em relação ao tutorial! Segundo o autor, a seqüência completa de vídeos é composta por doze partes, mas até agora apenas dez foram publicadas. Assim que as duas últimas foram publicadas, aviso aqui no blog.