Hello readers, i'm here for a quick tip.

If you are like me and always is looking for ways for improve your productivity, give a look for Papervision3D Previewer. Generally when is working with a 3D guy, developing some project using 3D tools and papervision, sometimes you spend much time, programming flash 3d environments just for test models, generated from 3D guy.

Thinking on this, Mr. Doob released a tool, than give to you a preview of your 3D model, without be necessary, programming a entire Papervision3D environment for that. The tool works basically, loading a selected mesh model, bringing it to inside flash, giving to you a preview his.

Visit the project page and get more info about him, does download of the tool, source files and samples.

You know Guitar Hero right? If you known't, probably you was lost in some island for there. Well, but if you know, prepare yourself to PPV3D Guitar Hero like web site, produced by Muskedunder Interactive to Pepsi SE, the awesome site have a great playability and make usage of the all ppv engine to do this possible, things how mesh control, animated models, at all. Nice work as a great performance, i think than has everything to become a fever, still more with 3 Ipod's as gift.

The first step, is load a animated model into papervision, than is what this post will cover for now.

After built your animated model, load it, into papervision is quite easy, the most hard work, is of the our 3D brothers, but if you don't have 3D habilities( like me) you can download a MD2 Quake model here, to perform the steps to follow.

Open a new as3 flash file in Flash authoring tool and give it Fooze3D name in document class (ignore any error message). For now, Flash no will be more necessary, just to publish your swf, then keep it opened. Before we beginning the codification, we go convert the .pcx files for .jpg files (only if your download your model from Quake 2 models website). Open any .pcx file in your Photoshop and just save it at .jpg format.

Now we can start the play, open your AS3 code editor (mine is Flex 3), and create a new class named Fooze3D.as

Inside this class, put the code below. (Attention to comments)

/**
 *
 * @author Junio Vitorino
 * description: Working with animated models with and texture into papervision 3D
 * date: 01/12/2009 10:29
 *
 */
 
package  {
 
	// Importing Flash Event Class
	import flash.events.Event;
 
	// Importing Papervision Class
	import org.papervision3d.materials.BitmapFileMaterial;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.objects.parsers.MD2;
	import org.papervision3d.view.BasicView;
 
	public class Fooze3D extends BasicView {
 
		public function Fooze3D() {
 
			// Calling super constructor from BasicView and set width, height and scaleToStage parameters
			super(400, 400, true);
 
			initPapervisionEnv();
			builtModel();
		}
 
		// Here we initialize all properties to your papervision environment
		private function initPapervisionEnv():void {
 
			// Add a listener to render the scene using ENTER_FRAME
			addEventListener(Event.ENTER_FRAME, render);
		}
 
		// This method will begin to built your animated model inside papervision environment
		private function builtModel():void {
 
			// This variable load the skin/texture to your model from a external Bitmap
			var foozeSkin:BitmapFileMaterial = new BitmapFileMaterial('fooze/RUNAR.jpg', true);
 
			// Create a new instance of MD2 type. Is with her than you will can manipulate your model in runtime
			var fooze:MD2 = new MD2();
 
			// Setting model name, with this you can use methods as, getChildByName in scene object.
			fooze.name = 'fooze';
 
			/* Here we using load method to set the path to mine MD2 file. The others parameters are, the material to cover the model,
			   the framerate than your model should be run (animation) and the last is the scale of this model (i didn't know why, but the
			   models when loaded are very small) */
			fooze.load('fooze/tris.md2', foozeSkin, 10, 10);
 
			// Setup X an Z rotation, to start in desired position
			fooze.rotationZ = fooze.rotationY = 90;
 
			// Adding the model to the inherited scene variable.
			scene.addChild(fooze);
		}
 
		private function render(event:Event):void {
			/* Inside render method, we calling another inherited variable, called renderer
			 * this variable is a BasicRenderEgine,is who render the objects.
			 * renderScene method require 3 parameters
			 * your scene, your camera, and your viewport.
			 * All these variables, are inherited from BasicView class */
			renderer.renderScene(scene, camera, viewport);
		}
 
	}
 
}

Well, if all is okay, you already can publish your swf and see your animated model performing yours movements inside your flash.
This was a quickly explanation, i always recommend you to give a look in papervision documentation (unofficial), to uncover more about the methods used here.

Download the source files here.

Bom pessoal, como vocês devem ter percebido a série de artigos sobre papervision deu uma paradinha - não por minha vontade é claro, mas por força maior (money) .

Nessas semanas, tive o prazer de participar de dois projetos para duas empresas internacionais. O primeiro foi para uma empresa da Suécia, um projeto de flash com a aplicação de papervision3D. O outro foi para um projeto canadense, mas para uma empresa da Alemanha com muito Flex na veia .

Infelizmente não posso dar mais detalhes sobre os projetos, pois ainda não foram lançados. Só posso dizer que foi um puta aprendizado e acho que todo desenvolvedor, em sua carreira deveria ter a oportunidade de participar de projetos com outros programadores de outros países, pois a cultura dessas pessoas influênciam diretamente na forma em que eles desenvolvem e isso é muito doido.

A boa notícia (eu acho) é que minha participação nos dois projetos já foi concluída e poderei voltar a postar os artigos sobre papervision.

Na proxima semana, novos artigos estarão por ai e conto com a sugestão de todos vocês. Se você deseja ver alguma coisa diferente, posta ai um comentário, deixe sua opinião, sugestão ou crítica, aqui quem manda são vocês.

Abraços e até a proxima.

A primeira do qual ouvi falar para PPV foi a WOW uma biblioteca opensource desenvolvida por Jérôme Birembaut e que foi utilizada no site da Absolute Wold que fez muito barulho a uns meses atrás. Recentemente um desenvolvedor japonês mostrou sua própria biblioteca para simular esses eventos físicos . Seu nome é Masayuki Kido. Masayuki tem trabalhos de peso nas costas, como o explêndido ECODAZOO e o PICTAPS .

Visite a pagina de demos e confiram os experimentos do matuto.

No ultimo post falamos de viewport, scene (cena), camera e render - os 4 items principais que um projeto do papervision deve possuir. Não vou explicar aqui como criar um projeto no FlashDevelop ou no Flex (meu preferido), ou até mesmo como mapear as classes, isso é um procedimento básico e vou focar no framework em sí.

Tanto o FlashDevelop quanto o Flex já fazem os imports necessários o passo que você vai digitando, enquanto o Flex remove as classes que não foram utilizadas a cada atualização do documento, uma mão na roda para não deixar imports desnecessários no seu código. Para vizualização detalhada dessas classes de uma olhada na documentação in progress.

VIEWPORT:

import org.papervision3d.view.Viewport3D;
private var viewport:Viewport3D = new Viewport3D();
addChild(viewport);

SCENE:

import org.papervision3d.scenes.Scene3D;
private var scene:Scene3D = new Scene3D();

CAMERA:

Rescentemente a classe Camera3D passou por uma atualização, cameras que antes eram separadas por classes diferentes, 'FreeCamera3D', 'FrustumCamera3D' e a 'Camera3D', se tornaram uma única classe geral. Se você deseja mudar o tipo de camera, basta setar a propriedade Camera.target, que se for setado como null, representa uma camera livre(Free), se deseja que seja uma camera fixa, passa se no parâmetro target o objeto no qual deseja fixar a camera. Agora existe também o DebugCamera3D, mas esse é um assunto para outro post. Então se você não sabia ou se encontrar algum código que não esta funcionando com a ultima revision do papervision hoje a 653, não se assuste.

import org.papervision3d.cameras.Camera3D;
private var viewport:Camera3D= new Camera3D();

RENDER:

O Render é o responsável por processar tudo de modo a exibir os objetos no ambiente 3D, como esse é um processo continuo, o render vem junto com um listener e o evento ENTER_FRAME de modo que ele sempre esteja atualizando a cena.

import org.papervision3d.render.BasicRenderEngine;
private var renderer:BasicRenderEngine= new BasicRenderEngine();
addEventListener(Event.ENTER_FRAME, suafuncao);
private function suafuncao(e:Event){
       renderer.renderScene(scene, camera, viewport);
}

Aconselho a todos uma visita a documentação que não é oficial, mas que se mostra bem interessante e acho que pode ajudar e muito. Amanhã falaremos dos objetos primitivos e materiais.

Forte abraço galera!!

Bom o papervision assim como uma ferramenta de modelagem/animação 3D precisa de alguns elementos básicos, que fazem com que seja possível o ambiente 3D existir. No papervision não é diferente e para que possamos criar nossso ambiente precisamos de 4 items básicos que são: viewport, cena (scene), câmera e render.

Viewport: O conceito de viewport é muito abstrato na minha opinião. Uma vez li que o viewport pode ser tratado como uma passagem para o mundo real, ai você pensa humm? Mas é isso mesmo, o viewport nada mais é que uma porta que lhe dá a oportunidade de sair e cair no mundo, uma passagem, olhando pelo lado metafórico do assunto. Ele possibilita a manipulação da direção, do tamanho dessa porta ou janela, tudo isso irá compor o ambiente.

Cena (scene): A cena ou scene se caminharmos na mesma linha de raciocino, é tudo que você vê por através da porta ou janela. As aves, o rio, a grama, aquela minazinha que tu ta de olho, e por ai vai heheheh. È tudo que fará parte do seu mundo real.

Câmera: A câmera, eu acho que é bem mais fácil de compreender, pois é aquela que dá visão a cena. Uma câmera no papervision é responsável por exibir os objetos para o espectador.

Render: Para os profissionais de 3D que estão acostumados com suas ferramentas, o render tem um conceito bem definido, no papervision ele tem a mesma função do render de ferramentas como 3Ds Max, Blender ou Maya, que é de reinderizar os objetos de modo que possamos exibir tudo aquilo que modelamos, animamos, etc. O render tem a função mais importante no papervision, sem o render nenhum dos objetos citados anteriormente fará diferença.

Esses 4 objetos são todos essências para a criação de qualquer projeto no papervision. Com o passar dos dias, veremos maneiras de implementar esses objetos e até mesmo como otimizar sua utilização.

Pois bem, agora já sei o que é necessário para criar um projeto no papervision, mas e os  objetos como cria-los? Existe alguma coisa pronta como no Max ou Blender?

A resposta é sim. Assim como as ferramentas 3D tradicionais o papervision tem objetos primitivos pré concebidos, no qual podemos criar um cubo, uma esfera, um cone, um cilindro e um plano. Todos esses objetos são nativos do papervision e podem ser instanciados e criados a qualquer momento.

Além desses objetos, o papervision também oferece a possibilidade de carregar objetos complexos feitos nas ferramentas tradicionais de modelagem 3D. Hoje os formatos suportados são: Ase, Collada (esse é o mais completo, permite o carregamento de uma cena completa), Dae, KMZ, 3Ds e MD2.

Bom por hoje é só, amanha iniciaremos um projeto e faremos a criação de alguns objetos primitivos. Um abraço e até a próxima!

Olá pessoal, hoje vou começar uma série de posts sobre papervision. Para quem não conhece, Papervision é uma engine 3D que tem como linguagem base o actionscript. Muitas pessoas falam que papervision é uma biblioteca 3D para flash, mas eu discordo. O papervision é muito mais do que uma simples biblioteca e muito menos limitada somente ao flash. Papervision é no meu ponto de vista um poderoso framework open source de desenvolvimento 3D, que permite seu uso em adobe flash, adobe flex, adobe air e todas os derivados do flash player que suportem actionscript 2.0 (já não se desenvolve mais para AS2) ou actionscript 3.0

Papervision foi concebido por Carlos Ulloa e hoje conta com inúmeros desenvolvedores que colaboram com o projeto de várias partes do mundo, que contribuem a para o desenvolvimento e o aperfeiçoamento do “framework”. O endereço oficial é o http://www.papervision3d.org, onde ali você já pode vizualizar uma pequena parcela do que se pode construir, além desse endereço existe também o blog official e a lista de discussão e o blog de desenvolvimento.

Essa série de posts não tem a pretensão de ensinar papervision, e sim tem como objetivo abordar o assunto para que seja discutido de forma mais aberta pela comunidade brasileira, abordando os pontos de vista dos brasileiros e as questão no desenvolvimento no Brasil, que são diferentes do desenvolvimento no resto do mundo.

A versão que será utilizada nestes posts é a Great White (2.0) que hoje é tratada como alpha, mas que já está sendo largamente utilizada e que na minha opinião não tem nada de alpha. A versão 2.0 hoje só pode ser obtiva através do SVN do projeto no google code. Se você não sabe como funciona o sistema de subversion, dê uma lida nesse artigo escrito pelo Aldinei Sampaio que explica como usar o client svn Tortoise sob a plataforma Windows ou no blog do Erick Souza nest post, que ensina com baixar o parpervision great white 2.0. Para quem utiliza mac, não tenho um artigo que explica como usar, mas aconselho o uso do Versions.

Bom por hoje é só pessoal, amanhã já começaremos a botar a mão na massa, por entender alguns conceitos que são essenciais para a criação de um ambiente 3D espero que gostem.

Como não poderia faltar, fui eu fazer um exemplo aplicando efeitos aos objetos e saiu isso ai ó.

O código fonte está ai abaixo e os arquivos fontes para download estão aqui.

[sourcecode='java']

/*
Author: Junio Vitorino
Date: 01/06/2008
Description: Sphere Effects
*/

package src.com.vitorino
{
import caurina.transitions.Tweener;

import flash.events.Event;
import flash.filters.BlurFilter;

import org.papervision3d.core.effects.BitmapLayerEffect;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
import org.papervision3d.view.layer.BitmapEffectLayer;

public class Main extends BasicView
{
private const QUANTIDADE:int = 10;

public function Main()
{
super(600, 300);
init()
}

private function init():void
{
var bfx:BitmapEffectLayer = new BitmapEffectLayer(viewport, 600, 300);
bfx.addEffect(new BitmapLayerEffect(new BlurFilter(25, 25, 3)));
bfx.setScroll(15);
viewport.containerSprite.addLayer(bfx);

for(var i:int = 0; i < QUANTIDADE; i++)
{
var bola:Sphere = new Sphere(new ColorMaterial(0xffcc00 * i));
bola.name = "bola" + i;
scene.addChild(bola);
bfx.addDisplayObject3D(bola);
}

addEventListener(Event.ENTER_FRAME, RENDER);

randomPosition();

}

private function RENDER(e:Event):void
{
renderer.renderScene(scene, camera, viewport);
}

private function randomPosition():void
{
var sp:Sphere;
for(var i:int = 0; i < QUANTIDADE; i++)
{
sp = Sphere(scene.getChildByName("bola" + i));
Tweener.addTween(sp,
{
x:Math.random() * 1000 - 400,
y:Math.random() * 1000 - 300,
z:Math.random() * 1000,
time:.5,
transition:"easeoutexpo",
onComplete:randomPosition
});
}
}
}
}

[/sourcecode]

Esses dias estava conversando com um amigo e ele me perguntou se eu poderia ajudá-lo a entender como funciona os eventos de click, mouseOver, mouseOut, etc.. em objetos dentro do papervision3d. Sendo assim, fiz este exemplo básico ai em cima que demonstra como é simples trabalhar com o eventos da classe InteractiveScene3DEvent.

Clique nos objetos para vizualizar as ações.

Os arquivos desse exemplo podem ser baixados aqui.

 
 
/*
Author: Junio Vitorino
Date: 31/05/2008
Description: Interactive Objects
*/
 
package src
{
import caurina.transitions.Tweener;
 
import flash.display.StageScaleMode;
import flash.events.Event;
 
import org.papervision3d.core.math.Number3D;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Cube;
import org.papervision3d.view.BasicView;
 
public class Main extends BasicView
{
private var clicado:Boolean;
private var holdPos:Number3D;
 
public function Main()
{
super(500, 300, true, true);
init();
}
 
private function init():void
{
var cont:DisplayObject3D = new DisplayObject3D();
cont.name = "root";
scene.addChild(cont);
cont.z = -300;
 
stage.scaleMode = StageScaleMode.NO_SCALE;
 
buildPlanes()
listeners()
}
 
private function buildPlanes():void
{
var ml:MaterialsList = new MaterialsList
(
{front: new ColorMaterial(0x84aa21, 1, true),
back:new ColorMaterial(0xd00000, 1, true)
});
 
var excFaces:int = Cube.TOP + Cube.BOTTOM + Cube.LEFT + Cube.RIGHT;
 
var _x:int = 0;
var _y:int = 0;
var _width:Number = 0;
var columns:int = 5;
 
for(var i:int = 0; i < 10; i++)
{
var obj:Cube = new Cube(ml, 200, 0, 300, 3, 3, 3, 0, excFaces);
obj.name = "item" + i;
obj.x = -Math.random() * -5000;
obj.y = Math.random() * 5000;
obj.z = Math.random() * 5000;
obj.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, itemClick);
_x = Math.round(215 * (i % columns));
_y = Math.round(315 * Math.floor(i / columns));
_width += 210;
Tweener.addTween(obj, {x:_x, y:_y, z:0, time:.7, transition:"easeoutexpo"});
scene.getChildByName("root").addChild(obj);
}
 
scene.getChildByName("root").x = -stage.stageWidth * .5 - 150;
scene.getChildByName("root").y -= 100;
stage.addEventListener(Event.RESIZE, rePos);
 
}
 
private function rePos(e:Event):void
{
scene.getChildByName("root").x = -stage.stageWidth * .5 - 150;
scene.getChildByName("root").y -= 100;
}
 
private function listeners():void
{
addEventListener(Event.ENTER_FRAME, RENDER);
}
 
private function RENDER(e:Event):void
{
renderer.renderScene(scene, camera, viewport, true);
}
 
private function itemClick(e:InteractiveScene3DEvent):void
{
if(!clicado)
{
off(e.currentTarget);
holdPos = new Number3D(e.currentTarget.x, e.currentTarget.y, e.currentTarget.z);
Tweener.addTween(e.currentTarget, {z:-610, x:(stage.stageWidth * .5)+150, y:100, time:.4, transition:"easeoutquart"});
clicado = true;
Tweener.addTween(camera, {z:-1050, time:.5, transition:"easeoutexpo"});
}
else
{
Cube(e.currentTarget).removeEventListener(InteractiveScene3DEvent.OBJECT_CLICK, itemClick);
Cube(e.currentTarget).addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, resetItem);
Tweener.addTween(e.currentTarget, {rotationY:180, time:.4, transition:"easeoutquart"});
}
}
 
private function resetItem(e:InteractiveScene3DEvent):void
{
Tweener.addTween(camera, {z:-950, time:.5, transition:"easeoutquart"});
Cube(e.currentTarget).addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, itemClick);
Cube(e.currentTarget).removeEventListener(InteractiveScene3DEvent.OBJECT_CLICK, resetItem);
Tweener.addTween(e.currentTarget, {z:holdPos.z, x:holdPos.x, y:holdPos.y, rotationY:0, time:.4, transition:"easeoutquart"});
clicado = false;
on()
}
 
private function off(_obj:Object):void
{
for(var i:int = 0; i < scene.getChildByName("root").numChildren; i++)
{
scene.getChildByName("root").getChildByName("item"+i).removeEventListener(InteractiveScene3DEvent.OBJECT_CLICK, itemClick);
}
_obj.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, itemClick);
}
 
private function on():void
{
for(var i:int = 0; i < scene.getChildByName("root").numChildren; i++)
{
scene.getChildByName("root").getChildByName("item"+i).addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, itemClick);
}
}
}
}