Category — 3D

This piece found its way to me through Twitter, and it’s simple awesome! The piece is called “No Keyframes”, and was created by AixSponza. The software used was Cinema4D R11.5 and MoGraph 2 but apparently there is more infomation on the piece coming soon.

Just click on the picture to view the piece.

If you have been following me on Twitter, then you may have noticed that I have been getting into Augmented Reality. This is the coolest thing I have seen in a long time! Now if you don’t know what this is, then it is a means of mapping 3D objects to a marker in the real world through a web cam.

Here is a simple guide to getting setup using the Augmented Reality in Flash. This includes downloading the library’s and then getting a simple demo up and running.

The name of the library used for Augmented Reality in Flash is called FLARToolkit which is developed by Saqoosha. It is a port of the ARToolkit which is written in C. You can download it from here through SVN. If you haven’t got a SVN client setup then I highly recommend SmartSVN which is a free client and I must thank Richard Leggett for recommending this to me!

Now once you have got the code, add it to your global Actionscript folder, then print out this marker and run the example. You can either compile the source in the ‘src’ folder or just run the SWF in the ‘bin-debug’ folder. Hopefully this gives you a idea of what AR/FLARToolkit is all about.

If you can run the example yourself, here is a video of it in action.

FLARToolkit / Augmented Reality Basic Demo. from Harry Northover on Vimeo.

I have also written a base class for a FLARToolkit application. It is designed so that all you have to do is override the function ‘add3d()‘ to add your 3D objects to ‘FLAR_Container” object, and then override another function, ‘addAnimation_3d()‘ to add the animation. My description here is very brief so read the readme file in the package. You can download the class here. If you want to see how much code this can reduce then here is an example class using the base class:

package
{
	import com.harrynorthover.ar.flar.base.FLARSingleMBase;
 
	import flash.filters.BlurFilter;
 
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
 
	[SWF(width="640", height="480", frameRate="30", backgroundColor="#FFFFFF")]
 
	public class Demo_BaseClass_Test extends FLARSingleMBase
	{
		private var cube:Cube;
 
		public function Demo_BaseClass_Test()
		{
			/*This is the function 'Init' you need to call to setup the FLARToolkit scene.
			     WIDTH, HEIGHT, FRAMERATE*/
			Init(640,   480,    30);
		}
 
		/*
		...
		This function is the one you need to override
		to add things to your 3D scene.
		*/
 
		override protected function add3D():void
		{
			// Add you 3D stuff here. The more the better :-)
			var pl:PointLight3D = new PointLight3D();
			pl.z = -1000;
			pl.y = 1000;
			pl.x = 1000;
			pl.flipped = true;	
 
			//var blurFilter:BlurFilter = new BlurFilter(24, 12, 1);
			var matList:MaterialsList = new MaterialsList();
			var fsm:FlatShadeMaterial = new FlatShadeMaterial(pl);
 
			matList.addMaterial(fsm, "all");
 
  			cube = new Cube(matList, 60, 60, 60, 5, 5, 5);
  			//cube.useOwnContainer = true;
  			//cube.filters = [blurFilter];
 
  			// FLAR_Container is the FLARBaseNode that you
  			// add your 3D objects to.
	        FLAR_Container.addChild(cube);
		}
 
		/*
		...
		This is the function to which you override to add
		your 3D animation.
		*/
 
		override protected function addAnimation_3d():void
		{
			//Add you animation here.
			cube.yaw(10);
		}
	}
}

See? Lots of code that has been got rid of!

Other demos I have been working on are here:

FLAR + Lines3D:

FLARToolkit and Lines3D / Augmented Reality from Harry Northover on Vimeo.

Incorporating AS3DMod:

FLAR + As3DMod from Harry Northover on Vimeo.

So there you go, my first few demos. Yes, I know, they are not very special but now I’m working on getting mutliple markers working and just more advanced demos in general. If you are looking for more advice on how to get set up with FLAR go over to this blog here. This has everything you need to get going. Also, check out squidder.com for some cool demos.

Happy ARing!

This video was made by Tim Smit, who is a dutch student. For the video above, he did most of the work by himself. This mean filming the footage in his local village, adding in the special effects using After Effects and 3Ds Max and all with a budget of $150! The video is a test movie of his film ‘What’s In The Box’ and the official site can be found here.

I’ve heard that several Hollywood studios have been in contact with him and some are even discussing making his movie!

You have proabably noticed that i havent blogged myself for quite a while. The main reason for this is that I have been picking up Cinema4D and After Effects Cs4. I am finally starting to get the hang of the these pieces of software and its brilliant! This post is mainly to show you some of the work I have done in C4D. I have done 2 different wallpapers.

Desire / Cinema 4D + Photoshop CS4

Passion / Cinema 4D + Photoshop CS4

For After Effects I have been creating little scenes with things like moving water which arent really worth posting here, but here is a screenshot of one of them.

3D Ocean / After Effects.

So there you go, some of the stuff I have been doing to help me learn these tools. I feel that now my art work has really stepped up a pace now, and hopefully you will agree too :D

Harry.

Here’s the first little tech demo of ’09 and I think it is a pretty cool one. The first difference is that it is made with Papervision3D instead of my usual engine choice of Away3D. It also uses a relativly new library, AS3DMod, and works with the 4 most popular engines.  Now this library is a modifier library which can do some really cool stuff, so go on over and check it out.

Now for the demo. It creates a standard plane, then applys a noise and perlin modifier to it. The last thing is to apply a FlatShadeMaterial to the plane and just animate these properties in the enter frame function.

You can download it here. To view the demo, click on the picture.

Harry.

During my time studying 3D I have come accross some rather uguly and complicated terms and have struggled to get my head around them. Now I hopefully have I thought I would start a little jargon buster for all the terms and phrase I come along. So here it is for now:

Vector – This is an object that properties consist of a direction, length, sense that is aligned with the direction. To understand sense, take the example of a water pipe. The pipe is going along in one direction but the water (or sense) could be going a completely different way. http://en.wikipedia.org/wiki/Image:Vector_by_Zureks.svg

Vector Space – This is a collection of objects that may be scaled and added. The objects are called vectors.

Vector3D – This is the same as a vector, but enables the property of depth to the object. Now, when you are handling an object of type Vector3D, you can change its:

1.       X axis

2.       Y axis

3.       Z axis

Whereas before, Z axis was not present in Vector.

Convex Hull – This is a set of points in a real vector space.

Convex Set – This is an object where every X and Y position can be joined up by a line without that line leaving the area of the object.

A good example of a Convex Set is a cube.

Tuple – This is a sequence, also known as an ordered list, of values. Names of different capacity tuples:

Coordinate Vector – In linear algebra, a coordinate vector is the representation of a vector through the form of an ordered list of numbers.

Linear Algebra – This is the branch of mathematics concerned with the study of vectors, vector spaces (also called linear spaces), linear maps (also called linear transformations), and systems of linear equations.  

Vertex – This refers to a special kind of point. There are many types but here are some related to Mathematics:

Angle:

The vertex of an angle is where to rays begin or meet, or where two line segments join or meet, where two lines cross.

Polytope:

A vertex is a corner point of a polygon, polyhedron or other higher dimensional polytope, formed by the intersection of edges, faces, facets.

Plane tiling:

A vertex of a plane tiling or tessellation is a point where three or more tiles meet.

Matrix – When referred to within Flash, it represents how to map points from one coordinate space to another. Flash 8 and CS3 standard Matrix included changing X and Y, rotation, scaling, and skewing.

http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00002389.html

Matrix3D – This is the same as a matrix but with the z axis added.

Complex Number – This is where real numbers are added/subtracted (etc…) but with an imaginary number (i), whose square root equals -1, is added onto one or many of them.

Quaternion – Quaternion is an extension of a complex number. Instead of just one complex number (i), you have three complex numbers – i, j, and k. http://www.gamedev.net/reference/articles/article1095.asp

Frustum – This is the part of a solid between two parallel planes cutting the solid.

In my effort to cut down the amount of code I write when using Away3D, I created this. It is a base class for projects using Away3D. What this does is create a series of protected functions that you can override and add in what you need, while the base class created the viewport, scene and everything else! This minimizes the amount of code you write in the actual project to a minimal amount!

Here is an example:

package {
	import away3d.primitives.Sphere;
	import com.harrynorthover.base.AwayBase;
 
	public class BaseClass extends AwayBase {
		public var sphere:Sphere = new Sphere( { radius:100 } );
 
		public function BaseClass() {
			// Init(camZoom, viewX, viewY);
			Init(12, 0, 0);
		}
 
		override protected function Init3D():void {
			sphere.x = 0;
			sphere.y = 0;
			view.scene.addChild(sphere);
		}
	}
}

See how much is has been reduced by? No faffing around with View3D and addChild(view) etc.

You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/Away3dBase.zip

Hope it helps!
Harry.

This is my best demo yet, and it is crucial to my new site. This demo is using the sky box features in Away3D. For those of you that don’t know what a sky box is, it is a collection of images (usually 6, but in this case 5, I didn’t have a bottom one), that are displayed on the inside of a cube, and then the camera is inside the cube looking out at these images. This gives the impression of a sky, and ground and surroundings that are usually behind everything else. Using sky boxes prevents the sky being plain black.

Here is the demo (just click). To explore, click and drag to find your way around.

And here is the code:

package {
 
	import away3d.cameras.HoverCamera3D;
	import away3d.containers.Scene3D;
	import away3d.containers.View3D;
	import away3d.materials.BitmapMaterial;
	import away3d.primitives.Skybox;
	import away3d.core.utils.Cast;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class SkyStuff extends Sprite {
 
		public var cam:HoverCamera3D = new HoverCamera3D( { zoom:2 } );
		public var scene:Scene3D = new Scene3D;
		public var view:View3D = new View3D( { camera:cam, scene:scene, x:0, y:0 } );
 
		// Skybox stuff.
		public var sky:Skybox;
		// Materials....
		public var sky_front_material:BitmapMaterial;
		public var sky_back_material:BitmapMaterial;
		public var sky_left_material:BitmapMaterial;
		public var sky_right_material:BitmapMaterial;
		public var sky_up_material:BitmapMaterial;
		public var sky_down_material:BitmapMaterial;
 
		// Movement vars.
		public var move:Boolean = false;
		public var lastPanAngle:Number;
		public var lastTiltAngle:Number;
		public var lastMouseX:Number;
		public var lastMouseY:Number;
 
		public function SkyStuff():void {
			addEventListener(Event.ADDED_TO_STAGE, Init);
		}
 
		private function Init(evt:Event):void {
			InitStage();
			InitEngine();
			InitMaterials();
			InitObjects();
			InitListeners();
		}
 
		private function InitStage():void {
			stage.align = StageAlign.TOP_LEFT
			stage.scaleMode = StageScaleMode.NO_SCALE;
		}
 
		private function InitEngine():void {
			cam.mintiltangle = -80;
			cam.maxtiltangle = 20;
			cam.targetpanangle = cam.panangle = 0;
			cam.targettiltangle = cam.tiltangle = 0;
 
			addChild(view);
		}
 
		private function InitObjects():void {
			sky = new Skybox( sky_front_material, sky_left_material, sky_back_material, sky_right_material, sky_up_material, sky_down_material );
			sky.quarterFaces();
			view.scene.addChild(sky);
		}
 
		private function InitMaterials():void {
			sky_front_material = new BitmapMaterial(Cast.bitmap(SkyFront));
			sky_back_material = new BitmapMaterial(Cast.bitmap(SkyBack));
			sky_left_material = new BitmapMaterial(Cast.bitmap(SkyLeft));
			sky_up_material = new BitmapMaterial(Cast.bitmap(SkyTop));
			sky_right_material = new BitmapMaterial(Cast.bitmap(SkyRight));
		}
 
		private function InitListeners():void {
			addEventListener(Event.ENTER_FRAME, EnterFrame);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
			stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);
			stage.addEventListener(Event.RESIZE, Resize);
		}
 
		private function EnterFrame(evt:Event):void {
			if (move) {
				cam.targetpanangle = 0.3 * (stage.mouseX - lastMouseX) + lastPanAngle;
				cam.targettiltangle = 0.3 * (stage.mouseY - lastMouseY) + lastTiltAngle;
			}
			cam.hover();
			view.render();
		}
 
		private function MouseDown(evt:MouseEvent):void {
			lastPanAngle = cam.panangle;
			lastTiltAngle = cam.tiltangle;
			lastMouseX = stage.mouseX;
			lastMouseY = stage.mouseY;
			move = true;
			stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function MouseUp(evt:MouseEvent):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function onStageMouseLeave(evt:Event):void {
			move = false;
			stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
		}
 
		private function Resize(evt:Event):void {
			view.x = stage.stageWidth / 3;
			view.y = stage.stageHeight / 3;
		}
	}
 
}

Now,I personally think skyboxes are a good piece of knowledge to have, as they provide, in my opinion, an effective and fairly easy way to get a fairly natural looking environment quickly. Once you have a skybox in place, you can concentrate on the more important objects, and not making the surrounding environment look good.

There is also another way of creating sky-boxes and this is using the Skybox6 class. This differs from the original method as instead of having six separate images, you have all your graphic in one jpg (png, or whatever).

I will also be trying to post versions of the examples in Papervision3d. This gives me a good understanding of how the engines differ, which ones I prefer and how they work.

You can download the whole thing (images as well!) here: http://harry-northover-code-store.googlecode.com/files/A3DSkyBox.zip

Harry.

I just found this example over at Away3d.org and I have to say it is the best one yet!

Here’s the link: http://www.closier.nl/playground/railaway_express.html. This is a new demo/game to show of Away3D 2.2 new features!!

Enjoy, and good night.

Harry