Matrix

CalculateMultiply3×3

Wednesday, May 27th, 2009 | examples | Comments

package
{
	import flash.events.Event;
 
	import org.papervision3d.core.math.Matrix3D;
	import org.papervision3d.core.math.Number3D;
	import org.papervision3d.core.proto.LightObject3D;
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.objects.primitives.Arrow;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="900", height="480", backgroundColor="#000000", frameRate="31")]
	public class CalculateMultiply3x3 extends BasicView
	{
		private var arrow1:Arrow;
		private var arrow2:Arrow;
		private var arrow3:Arrow;
 
		public function CalculateMultiply3x3()
		{
			super(900, 480);
			opaqueBackground = 0x000000;
 
			var light:LightObject3D = new PointLight3D();
			var material:MaterialObject3D = new FlatShadeMaterial(light, 0xcc0000, 0x333333, 10);
 
			arrow1 = new Arrow(material);
			arrow1.x = -750;
			scene.addChild(arrow1);
 
			arrow2 = new Arrow(material);
			scene.addChild(arrow2);
 
			arrow3 = new Arrow(material);
			arrow3.x = 750;
			scene.addChild(arrow3);
 
			startRendering();
		}
 
		override protected function onRenderTick(event:Event=null):void
		{
			/* 
			CaculateMultiply3x3 is most often used for advanced rotations where you find the
			axis you want to rotate around at run-time (like a ball rolling in a certain direction).
 
			First, create (or find) a rotation matrix with an axis and a rotation then use 
			calculateMultiply3x3 to add to your object's rotation using your 
			rotation matrix.
 
			It's easiest to think of it in pseudocode as "myObject.rotation += myCustomRotation".
			Another way to think of it: "Rotate this much around this axis
			 */
 
			/* 
			The following commented code is equivalent to arrow.rotationY += 1;
 
			//the axis to rotate around
			var upAxis:Number3D = new Number3D(0, 1, 0);
			//the amount of rotation around that axis
			var rotation:Number = 1 * Number3D.toRADIANS;
 
			var rotationMatrix:Matrix3D = Matrix3D.rotationMatrix(upAxis.x, upAxis.y, upAxis.z, rotation);
			arrow.transform.calculateMultiply3x3(rotationMatrix, arrow.transform);
			 */
 
			//example 1
			var axis1:Number3D = new Number3D(1, 0, 0);
			axis1.normalize();
 
			var rotation1:Number = 3 * Number3D.toRADIANS;
 
			var rotationMatrix1:Matrix3D = Matrix3D.rotationMatrix(axis1.x, axis1.y, axis1.z, rotation1);
			arrow1.transform.calculateMultiply3x3(rotationMatrix1, arrow1.transform);
 
			//example 2
			var axis2:Number3D = new Number3D(viewport.containerSprite.mouseX, viewport.containerSprite.mouseY, 0);
			axis2.normalize();
 
			var rotation2:Number = 3 * Number3D.toRADIANS;
 
			var rotationMatrix2:Matrix3D = Matrix3D.rotationMatrix(axis2.x, axis2.y, axis2.z, rotation2);
			arrow2.transform.calculateMultiply3x3(rotationMatrix2, arrow2.transform);
 
			//example 3			
			var axis3:Number3D = new Number3D(.7, .7, .1);
			axis3.normalize();
 
			var rotation3:Number = viewport.containerSprite.mouseX / 50 * Number3D.toRADIANS;
 
			var rotationMatrix3:Matrix3D = Matrix3D.rotationMatrix(axis3.x, axis3.y, axis3.z, rotation3);
			arrow3.transform.calculateMultiply3x3(rotationMatrix3, arrow3.transform);
 
			super.onRenderTick(event);
		}
	}
}

Tags: matrix

Understanding Papervision3D: Matrix3D

Monday, November 24th, 2008 | how it works | Comments

This post will cover how you use a Matrix3D to scale, pitch, yaw, roll, and translate 3d objects:

Every 3d object within Papervision3D has a Matrix3D that defines its scale, pitch, yaw, roll, x, y, and z (changing x, y, and z is referred to as “translation” because they move a group of points equally). You will find the Matrix3D in the “transform” property of your 3d object.

The default 4 column by 4 row Matrix 3d with no scale, yaw, pitch, roll, or translation is set up as follows:

1, 0, 0, 0
0, 1, 0, 0
0, 0, 1, 0
0, 0, 0, 1

These values are stored in the “transform” property of your 3d object using a “n”, a integer defining the row, and an integer for the column:

n11, n12, n13, n14
n21, n22, n23, n24
n31, n32, n33, n34
n41, n42, n43, n44

For example: cube.transform.n11

Scale, pitch, yaw, and roll are handled in the first 3 columns and rows of the matrix (play with the explorer above to figure out how it works):

1, 0, 0
0, 1, 0
0, 0, 1

x, y, and z are all handled first 3 numbers in the last column:

0
0
0

The last row hangs around to make Matrix multiplication possible. Have fun playing with the explorer to get a hang of how 3d objects are moved around. I hope to cover some of the Matrix3D math functions in the future.

Tags: matrix

Switching parents at runtime

Wednesday, November 19th, 2008 | examples | Comments

This example comes from a conversation I had with Andy. You can actually do a lot of neat tricks by swapping parents, especially when you start rotating the parents.

source

package
{
	import gs.TweenMax;
 
	import org.papervision3d.core.math.Matrix3D;
	import org.papervision3d.events.InteractiveScene3DEvent;
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.view.BasicView;
 
	[SWF(width="640", height="480", backgroundColor="#000000", frameRate="60")]
	public class SwitchingParentsAtRuntime extends BasicView
	{
		private var parent1:Sphere;
		private var parent2:Sphere;
		private var childSphere:Sphere;
 
		private var light:PointLight3D;
 
		public function SwitchingParentsAtRuntime()
		{
			var headerText:headerContainer = new headerContainer();
			headerText.header.text = "Click a red sphere to set as parent";
			addChild(headerText);
 
			viewport.interactive = true;
			light = new PointLight3D();
 
			var parentMaterial:FlatShadeMaterial = new FlatShadeMaterial(light, 0xcc0000);
			parentMaterial.interactive = true;
			var childMaterial:FlatShadeMaterial = new FlatShadeMaterial(light, 0x00cc00);
 
			parent1 = new Sphere(parentMaterial, 300, 10, 10);
			parent1.x = -500;
			parent1.y = 500;
			parent1.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, objectPressHandler);
			parent1.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objectOverHandler);
			parent1.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objectOutHandler);
 
			parent2 = new Sphere(parentMaterial, 300, 10, 10);
			parent2.x = 500;
			parent2.y = -500;
			parent2.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, objectPressHandler);
			parent2.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, objectOverHandler);
			parent2.addEventListener(InteractiveScene3DEvent.OBJECT_OUT, objectOutHandler);
 
			childSphere = new Sphere(childMaterial, 100, 10, 10);
			childSphere.name = "child";
 
			scene.addChild(parent1);
			scene.addChild(parent2);
			parent1.addChild(childSphere);
 
			childSphere.x = 500;
 
			TweenMax.to(parent1, 2, {y:-500, yoyo:true});
			TweenMax.to(parent2, 2, {y:500, yoyo:true});
 
			startRendering();
		}
 
		private function objectPressHandler(event:InteractiveScene3DEvent):void
		{
			var parentSphere:Sphere = Sphere(event.target);
			if(childSphere.parent == parentSphere)
			{
				//do nothing
			}else
			{
				var childSphereWorldMatrix:Matrix3D = childSphere.world;
				var inverse:Matrix3D = new Matrix3D();
				var tempParentMatrix:Matrix3D = new Matrix3D();
 
				inverse.calculateInverse(parentSphere.world);
 
				tempParentMatrix.calculateMultiply(inverse, childSphereWorldMatrix);
 
				childSphere.copyTransform(tempParentMatrix);
				//get the parent of the child to
				//remove the child from the parent :)
				childSphere.parent.removeChild(childSphere);
				parentSphere.addChild(childSphere);
			}
		}
 
		private function objectOverHandler(event:InteractiveScene3DEvent):void
		{
			viewport.buttonMode = true;	
		}
 
		private function objectOutHandler(event:InteractiveScene3DEvent):void
		{
			viewport.buttonMode = false;	
		}
	}
}