Seb Lee-Delisle

Menu

Real reflections in Papervision3D!

You know I’m a fan of the Papervision BasicView, it’s just such a good entry point into Papervision – so easy to work with, and you can even extend it for your document class.

But how cool would it be if you could have something as simple as a BasicView, but that automatically created a reflection on the ground? Very cool! That’s how!

Which is exactly why I made a ReflectionView. You can pretty much just replace your BasicView with this new class.

At the moment it only works with reflections on an xz plane (ie the floor).

There are only two new things you need to consider :

surfaceHeight
This is the y position of the floor. You need to make sure none of your objects go underneath this or it'll look weird!

setReflectionColor()
This function adjusts the color transform for the reflection by settings mutlipliers and offsets for red, green and blue, just like the colorTransform property of MovieClips.

By default this is set to darken the reflection but you can use it to lighten or even colorise it.

It's very alpha, but very simple and very quick!


You can also add blur to the reflection by adding a filter to the reflection viewport :

viewportReflection.filters = [new BlurFilter(4,4,1)];

And if you want it to actually be transparent (if you're using a floor plane for example) you can also add a ColorMatrixFilter to the viewportReflection filters.

I'm looking at improved effects to this with Andy's help but I thought I'd at least get a basic version out there for you to play with.

Basic cube source code here :

package {
	import flash.events.Event;
 
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.core.effects.view.ReflectionView;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
 
	[SWF (width="640", height="480", backgroundColor="0x000000", frameRate="30")]
 
	public class ReflectionCubeSimple extends ReflectionView
	{
 
		private var cube : Cube;
 
		public function ReflectionCubeSimple()
		{
 
			super(640,480,false, false);
 
			//the height of the reflection plane
			surfaceHeight = -100;
 
			initCube();
 
			camera.z = -400;
 
			addEventListener(Event.ENTER_FRAME, enterFrame);
 
		}
 
 
		public function initCube() : void
		{
 
			// create a materials list for the cube.
			var ml : MaterialsList = new MaterialsList();
			ml.addMaterial(new ColorMaterial(0x880000), "all");
 			ml.addMaterial(new ColorMaterial(0x660000),"right");
			ml.addMaterial(new ColorMaterial(0x440000),"bottom");
  			ml.addMaterial(new ColorMaterial(0xdd0000),"top");
			ml.addMaterial(new ColorMaterial(0xdd0000),"left");
 
			cube = new Cube(ml,100,100,100);
 
			// add the cube to the scene
			scene.addChild(cube);
 
		}
 
		public function enterFrame(e:Event) : void
		{
			// rotate the cube dependent on the mouse position
			cube.yaw((320-mouseX)*0.05);
			cube.y=(120-(mouseY/2));
 
			if(cube.y<0) cube.y = 0;
 
			singleRender();
 
		}
 
	}
}

(Cue about a million CoverFlow type effects... πŸ™‚ )

This entry was posted in Papervision3D. Bookmark the permalink.

103 Responses to Real reflections in Papervision3D!