Tutorial Papervision3D (y IV)
::: Fin por ahora de esta serie :::
domingo, 06/06/2010
Archivado en: tutoriales
Como prometí cuando los dinosaurios dominaban la Tierra, acabamos la primera serie de tutoriales de PaperVision3D con esta entrega. Quedaba pendiente ponerle un mapa de sombreado y otro de relieve, que es lo que vamos a hacer a continuación. Cambiamos la imagen de fondo, para variar un poco y también porque no la encuentro.
Bueno, vamos allá.
Estábamos usando Flash Builder 4 como herramienta de desarrollo, y nuestra única clase es TutoPV3D01.
Teníamos linkada a nuestro proyecto como un componente de clases precompiladas (SWC) nuestra librería de PaperVision3D. Como ya se comentó, también podemos linkarlo como un proyecto aparte, entre otras opciones. Lo importante es que el compilador pueda encontrar las librerías de PaperVision3D cuando compilemos nuestra aplicación.
Esta vez no nos vamos a entretener mucho, mostramos el código comentado, y a continuación se explicará con un poco más de detalle:
Observamos que añadimos un evento Event.COMPLETE para cada imagen que se carga.
Cuando se ha cargado la imagen de fondo, simplemente se añade a la escena.
Cuando se ha cargado la imagen que usaremos como material para la esfera, creamos un mapa de relieve (bumpmap), que será de tipo BitmapData. En lugar de otra imagen, usamos un Ruido Perlin para el relieve. Para más información sobre la implementación de Perlin Noise en ActionScript 3, ver la documentación de Adobe.
Creamos el BitmapMaterial a partir de la imagen cargada, y a continuación creamos el sombreado (shader). Un shader básicamente es un algoritmo de sombreado que aplica una serie de propiedades a un material o a un objeto para definir cómo reacciona una superficie ante la luz (difusión, brillo especular, glossiness, transparencia... y un largo etcétera). Usaremos uno de los más comunes, un shader de tipo Phong. Observar que al definir el shader, le pasamos cinco parámetros, que son, por orden:
Y por último, en la función que se ejecutará continuamente mientras se ejecute la película, rotamos la esfera en su ejes X,Y y Z.
Y con esto acabamos esta serie de cuatro tutoriales de iniciación a PaperVision3D. Próximamente, otro tutorial de la misma librería, pero aplicado a un interfaz de usuario, con elementos de navegación, e interactividad con el usuario.
Descargar la clase.
Ver demo.
Bueno, vamos allá.
Estábamos usando Flash Builder 4 como herramienta de desarrollo, y nuestra única clase es TutoPV3D01.
Teníamos linkada a nuestro proyecto como un componente de clases precompiladas (SWC) nuestra librería de PaperVision3D. Como ya se comentó, también podemos linkarlo como un proyecto aparte, entre otras opciones. Lo importante es que el compilador pueda encontrar las librerías de PaperVision3D cuando compilemos nuestra aplicación.
Esta vez no nos vamos a entretener mucho, mostramos el código comentado, y a continuación se explicará con un poco más de detalle:
package {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.shaders.PhongShader;
import org.papervision3d.materials.shaders.ShadedMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
[SWF(width="800", height="600", backgroundColor="#000000")]
public class TutoPV3D01 extends BasicView {
}import flash.display.BitmapData;
import flash.display.Loader;
import flash.events.Event;
import flash.net.URLRequest;
import org.papervision3d.lights.PointLight3D;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.materials.BitmapMaterial;
import org.papervision3d.materials.shaders.PhongShader;
import org.papervision3d.materials.shaders.ShadedMaterial;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
[SWF(width="800", height="600", backgroundColor="#000000")]
public class TutoPV3D01 extends BasicView {
private var esfera:Sphere;
private var luz:PointLight3D;
/* en el constructor establecemos la velocidad de fotogramas por segundo,
y llamamos a la función que inicializa variables */
public function TutoPV3D01 (){
/* inicializamos algunos parámetros y añadimos listeners
que se ejecuten cuando se carguen las dos imágenes que se usan */
private function init():void{
// cuando se cargue la imagen de fondo, la añadimos a la escena
private function loadFondoComplete(e:Event):void{
/*
Cuando se haya cargado la imagen que se usa como material para la esfera,
añadimos ese material, así como un shader y un mapa de relieve
*/
private function loadImgComplete(e:Event):void{
// rotamos la esfera en cada render
override protected function onRenderTick(event:Event=null):void{
}private var luz:PointLight3D;
/* en el constructor establecemos la velocidad de fotogramas por segundo,
y llamamos a la función que inicializa variables */
public function TutoPV3D01 (){
stage.frameRate=42;
init();
startRendering();
}init();
startRendering();
/* inicializamos algunos parámetros y añadimos listeners
que se ejecuten cuando se carguen las dos imágenes que se usan */
private function init():void{
luz=new PointLight3D();
luz.y = 350;
luz.x = 200;
luz.z = -600;
scene.addChild(luz);
var imgLoader:Loader=new Loader();
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImgComplete);
imgLoader.load(new URLRequest("assets/snowwhite.jpg"));
var fondoLoader:Loader=new Loader();
fondoLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadFondoComplete);
fondoLoader.load(new URLRequest("assets/sky.jpg"));
}luz.y = 350;
luz.x = 200;
luz.z = -600;
scene.addChild(luz);
var imgLoader:Loader=new Loader();
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadImgComplete);
imgLoader.load(new URLRequest("assets/snowwhite.jpg"));
var fondoLoader:Loader=new Loader();
fondoLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadFondoComplete);
fondoLoader.load(new URLRequest("assets/sky.jpg"));
// cuando se cargue la imagen de fondo, la añadimos a la escena
private function loadFondoComplete(e:Event):void{
var fondo:Bitmap=e.target.content as Bitmap;
fondo.width=stage.width;
fondo.height=stage.height;
addChildAt(fondo,0);
}fondo.width=stage.width;
fondo.height=stage.height;
addChildAt(fondo,0);
/*
Cuando se haya cargado la imagen que se usa como material para la esfera,
añadimos ese material, así como un shader y un mapa de relieve
*/
private function loadImgComplete(e:Event):void{
var bitmap:Bitmap=e.target.content as Bitmap;
var bumpmap:BitmapData=new BitmapData(bitmap.width,bitmap.height);
bumpmap.perlinNoise(22,15,15,50,false,false,7,true);
var bitmapMat:BitmapMaterial=new BitmapMaterial(bitmap.bitmapData);
var shader:PhongShader=new PhongShader(luz,0xFF0000, 0x666666,0,bumpmap);
var shadeMat:ShadedMaterial=new ShadedMaterial(bitmapMat,shader);
esfera=new Sphere(shadeMat,350,32,24);
scene.addChild(esfera);
}var bumpmap:BitmapData=new BitmapData(bitmap.width,bitmap.height);
bumpmap.perlinNoise(22,15,15,50,false,false,7,true);
var bitmapMat:BitmapMaterial=new BitmapMaterial(bitmap.bitmapData);
var shader:PhongShader=new PhongShader(luz,0xFF0000, 0x666666,0,bumpmap);
var shadeMat:ShadedMaterial=new ShadedMaterial(bitmapMat,shader);
esfera=new Sphere(shadeMat,350,32,24);
scene.addChild(esfera);
// rotamos la esfera en cada render
override protected function onRenderTick(event:Event=null):void{
if(esfera!=null){
esfera.rotationY++;
esfera.rotationX++;
}
super.onRenderTick();
}esfera.rotationY++;
esfera.rotationX++;
}
super.onRenderTick();
Observamos que añadimos un evento Event.COMPLETE para cada imagen que se carga.
Cuando se ha cargado la imagen de fondo, simplemente se añade a la escena.
Cuando se ha cargado la imagen que usaremos como material para la esfera, creamos un mapa de relieve (bumpmap), que será de tipo BitmapData. En lugar de otra imagen, usamos un Ruido Perlin para el relieve. Para más información sobre la implementación de Perlin Noise en ActionScript 3, ver la documentación de Adobe.
Creamos el BitmapMaterial a partir de la imagen cargada, y a continuación creamos el sombreado (shader). Un shader básicamente es un algoritmo de sombreado que aplica una serie de propiedades a un material o a un objeto para definir cómo reacciona una superficie ante la luz (difusión, brillo especular, glossiness, transparencia... y un largo etcétera). Usaremos uno de los más comunes, un shader de tipo Phong. Observar que al definir el shader, le pasamos cinco parámetros, que son, por orden:
- La luz ante la que reaccionará.
- Color de la luz (le ponemos un color rojo).
- Color ambiente (le ponemos un gris para que se perciba el bumpmap, con un ambiente blanco apenas se notaría).
- Nivel especular.
- El mapa de relieve que previamente habíamos creado.
Y por último, en la función que se ejecutará continuamente mientras se ejecute la película, rotamos la esfera en su ejes X,Y y Z.
Y con esto acabamos esta serie de cuatro tutoriales de iniciación a PaperVision3D. Próximamente, otro tutorial de la misma librería, pero aplicado a un interfaz de usuario, con elementos de navegación, e interactividad con el usuario.
Descargar la clase.
Ver demo.
Esi programa de papelvision ademas de parecer una cadena de televison de satelite diabolica que es un programa de programacion para hacer 3d o de que va eso
Es un motor 3D en tiempo real para Flash, que se distribuye como un paquete de librerías en ActionScript.
Esto...muy bonito el lavado de cara de la web y tal, pero sigues olvidandote de lo importante: donde coño esta el porno??? no lo veo por ninguna parte! asi no vamos a ninguna parte eh?? jejeje
Saludos
Porno, lo que se dice porno, igual no, pero algo de erotismo si que habrá que meter, así como quien no quiere la cosa, que si no esto no va a tener éxito en la puta vida, jejeje...
Hombre, quizás si siguieras el comic, podrias meter erotismo por ahi...
http://joseguaje.blogspot.com/
La verdad, que hasta que no "compatibilice" no podré mirar estos tutos, porque no entiendo mucho, o no quiero entender. De momento, estoy dejando de fumar... que algo es algo... y el erotismo, nada, nada, imaginad que todas las tías son feas.
Si no escribes correctamente, los duendes del blog te borrarán el comentario.
Por lo demás, eres libre de expresar la opinión que quieras.