A era da tecnologia 3D começou pra valer: Televisores 3D como o recém lançamento da Samsung série C 7000 e mais 3D players como o BD-C 6900 já estão no mercado e muito em breve dentro de nossas casas.

Muito pouco tempo depois de as televisões e monitores de LCD e agora LED ficarem um pouco mais populares, chega uma nova tecnologia. Na realidade a tecnologia 3D não é tão nova assim, pois há muitos anos já é utilizada em salas de cinema, etc. No entanto somente agora esta tecnologia está sendo popularizada pelos grandes fabricantes como Sony e Samsung. Estes dias fiquei me perguntando por que tecnologias que poderiam ser lançadas daqui a alguns anos estão sendo adiantadas e lançadas agora. Uma explicação um pouco mais clara que veio a minha cabeça foi que, em virtude da crise financeira que assolou vários países como, por exemplo, o Japão grandes empresas passaram por dificuldades econômicas. E por causa disto, estas empresas do oriente como a Sony estão lançando novos produtos para recuperar o seu mercado. Se caso eu estiver errado favor me corrigir nos comentários = ).

Todo mundo está falando da TV 3D e da experiência que todos os telespectadores terão a chance participar. Indo mais adiante atualmente já existe algumas marcas desse tipo de televisão no mercado e um dos modelos foi lançado recentemente pela Samsung. O lançamento da TV 3D pela Samsung é uma belíssima tela de 46 polegadas modelo C 7000 e mais um player Blu-ray 3D BD-C 6900. E claro além destes aparelhos não se pode esquecer os óculos especiais, pois sem ele a tecnologia 3D (atual) não funciona.

Lembrando que não é qualquer tipo de óculos 3D como aqueles do cinema. Os óculos 3D para televisores 3D como o da Samsung são óculos caros feitos de cristal líquido e alimentados por uma bateria de lítio.

Com esta tecnologia muito nova alguns problemas foram relatados por quem teve a chance de assistir um filme em Blue-ray 3D. Apesar de algumas pessoas falarem que amaram esta nova experiência alguns reclamaram falando que os olhos começaram lacrimejar, que as imagens piscavam muito, alguns reportaram que viram um tipo de flash nos olhos e bordas duplas.

Bom a verdade é que com relação às bordas duplas em alguns casos não tem como negar. E muitas vezes o nível de brilho das imagens pode diminuir também. Apesar destes detalhes as imagens em 3D realmente são impressionantes ainda mais se estivermos assistindo em uma sala escura, o que garante muito mais brilho. Os efeitos em 3D realmente são notáveis apesar de atualmente serem fracos. Este modelo de TV 3D da Samsung pode converter imagens em 2D para 3D porém o resultado não é muito bom pois parece mais como imagens com 2 lados do que imagens realmente em 3D.

Já o novo Samsung player Blu-ray 3D modelo BD-C 6900 fora o design muito bonito e moderno é um super aparelho capaz de renderizar o material em 3D com total qualidade e velocidade, sendo desta forma um excelente investimento para o futuro.

No primeiro post relacionado ao Papervision 3D expliquei como configurar esta excelente ferramenta para o Flash. Agora começarei a colocar exemplos práticos de como utilizar animações em 3D no Flash. Só para dar uma idéia geral o ActionScript faço no Flash Builder 4 em virtude do maior suporte, documentação etc, assim compilo o SWF no Flash CS4. Fico alternando entre um programa e outro, mas vale a pena. Para quem tiver o Flash CS5 fica mais fácil, pois o Flash Builder 4 permite compilar dentro dele.  Outra vantagem legal é que o Flash Builder é construído no Eclipse assim  se você tiver esta IDE instalada só precisa instalar um módulo da adobe. Por exemplo eu já tenho o Zend Studio 7 aqui, assim não precisei  colocar mais uma IDE do Eclipse só instalei o módulo do Flash Builder no Zend e pronto! Veja abaixo o resultado:

Nestes primeiros artigos estou explicando com maiores detalhes todo o processo para pessoas iniciantes assim como eu.  Com isso teremos um material mais completo que abrange do básico ao avançado. Estou gostando muito de aprender mais sobre 3D, realmente é um mundo de possibilidades. Bom vamos ao que interessa…

Preparando o Ambiente

Antes de ir ao código propriamente dito, vou explicar rapidamente como preparar todo o ambiente para desenvolver de maneira mais produtiva. Assim nos próximos códigos manterei mais o foco na programação e quem tiver interesse na preparação do ambiente é só ler este post.

A primeira coisa a se fazer é criar um diretório específico para o novo projeto. Depois disso vamos no Flash Builder, File -> New -> ActionScript Project para criar um novo projeto, fornecemos o nome do projeto que neste caso é “cubo” e em folder apontamos para o diretório que criamos. Confira a imagem abaixo de como ficou:

Assim depois disso podemos clicar em “finish” direto, a próxima etapa para o nosso caso não é necessária. Com isso já temos quase tudo pronto pra colocar as mãos na massa. Depois do projeto criado temos que importar o Papervision 3D para o nosso projeto assim poderemos tirar a vantagem do code complete, documentação, etc. Para importar é muito tranquilo também, tudo o que precisamos fazer é clicar com o botão direito do mouse no diretório src abaixo de “cubo” que está no Package Explorer do Flash Builder, e depois no menu que surge clicar em Import -> File System  na tela que surge apontamos para o src do Papervision selecionamos os dois principais diretórios “org” e “nochump” e depois “next” ou “finish” para concluir. Com isso todo o papervision é importado para dentro de nosso projeto.

Poderiamos também apontar no Path do Flash Builder o caminho do Papervision que funcionaria. Eu prefiro importar tudo, pois muitas fazes mudamos as classes do Papervision pra dar uma otimizada ou pra deixar de acordo com certa necessidade de algum projeto, assim desta forma o conjunto de classes original do Papervision não são afetadas. Agora o nosso projeto dentro do Flash Builder ficou filé (como certas pessoas dizem).  Só falta ajeitar umas coisinhas no Flash CS4 e pronto. Abaixo uma imagem de como ficou a estrutura de nosso projeto:

Agora vamos abrir o Flash CS4 clicar em File -> New e depois em “Flash File (ActionScript 3.0). Feito isso vamos salvar tudo no diretório “src” do nosso projeto cubo para o arquivo FLA dei o nome de “cubo” também. Atenção para evitar alguns problemas nos paths do projeto, salve o FLA neste diretório “src” para evitar estress  depois. Até aqui nada de supresa só vamos fazer um negócio pois a nossa classe do ActionScript está fora do Flash assim precisamos informar para ele o local desta classe. Para isso vá em File -> Publish Settings -> Flash -> Settings  e na telinha que abre colocamos o nome da classe que o Flash Builder criou “cubo” sem o “.as”, depois é só clicar no botãozinho com um “v” em verde pra ele verifiar a existência deste arquivo e por último “ok”, “ok” e mais um CTRL + S pra salvar . Verifique como ficou na imagem abaixo:

Pela lógica correta teriamos que informar para o Flash buscar o Papervision dentro de nosso projeto. Mas como já tinhamos configurado tudo antes no post anterior e como não será alterado nada no Papervision, podemos pular esta etapa. Com isso o nosso playground está pronto para começar a brincadeira!

Criando um Cubo em 3D

Como primeiro projeto vamos criar um cubo em 3D com uma cor meia em degradê para facilitar o aprendizado, e futuramente poderá ser incrementado. O código segue comentado assim não há muito o que falar só confira o resultado:

Confira o código do arquivo cubo.as

package
{
 import flash.events.Event;
 import flash.display.BitmapData;

 //-- carregando as classes do papervision
 import org.papervision3d.materials.BitmapMaterial;
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.objects.primitives.Cube;
 import org.papervision3d.materials.utils.MaterialsList;

 //-- BasicView é uma classe muito interessante, pois provê
 //-- o necessário para nosso projeto em 3D para funcionar
 //-- entre outras coisas fornece viewport, scene, camera, e
 //-- renderer. Como todo projeto do Papervision precisa disso
 //-- já esta ai na mão para usar e com isso não precisamos
 //-- invocar um monte de coisas. Abra esta classe e confira
 //-- o que ela já carrega dentro dela.
 import org.papervision3d.view.BasicView;

 public class cubo extends BasicView
 {

 //-- declarando algumas variáveis
 protected var cubo3D            : Cube;
 protected var cuboBitmapData    : BitmapData;
 protected var cuboMaterial         : BitmapMaterial;
 protected var cuboMaterialList    : MaterialsList;

 //-- para facilitar mais estamos fazendo tudo diretamente no
 //-- construtor da classe.
 public function cubo()
 {
 //-- Criando um novo bitmap para usarmos como textura de nosso
 //-- cubo.
 cuboBitmapData = new BitmapData(256,128,false,0);

 //-- colorindo nossa textura com o perlineNoise
 cuboBitmapData.perlinNoise(256,127,8,1234,true,true,7,true);

 //-- criando um material (pano, casca tenho que ver como é
 //-- em portugues isto =) ) para o nosso cubo.
 cuboMaterial = new BitmapMaterial(cuboBitmapData,false);

 //-- O cubo tem uma diferença de outros objetos primitivos
 //-- para colocar uma cor nele você tem utilizar um materialslist
 //-- um tipo de array onde você define cada face do cubo back, top, etc
 //-- ou "all" para todas as faces, que é o nosso caso.
 cuboMaterialList = new MaterialsList( {all:cuboMaterial} );

 //-- Criando o cubo com a cor em degradê como primeiro
 //-- parâmetro, largura, profundidade e altura de 350
 cubo3D = new Cube(cuboMaterialList,350,350,350);

 //-- Adicionando o cubo3D a cena que já foi instanciado
 //-- pela super classe BasicView
 scene.addChild(cubo3D);

 //-- Invocando a função nativa startRendering para rendereizar
 //-- cada frame.
 startRendering();
 }

 //-- este método é um event listener invocado quando o startRendering()
 //-- é executado.
 override protected function onRenderTick(event:Event=null):void
 {
 //-- O método yaw roda um objeto em torno de seu próprio eixo vertical.
 cubo3D.yaw(1);

 // chama o metodo super.onRenderTick, que renderiza a cena
 super.onRenderTick(event);

 }
 }
}

Bom este é nosso primeiro exemplo, maiores dúvidas deixe seu comentário neste post.