PV3D Image Extrusion

You know, you’d think with all the 3D crap I’ve been playing with lately that I actually like the stuff. I’m really not that into 3D work in Flash. I just had to try out Augmented reality when it first came around and seemed to get sucked into it all. I guess it really is interesting. Just wish I understood it all beyond utilizing libraries written by others. Ah well. That bit of rambling aside, I was looking around the other day for a way to extrude text with Papervision3D, when a bit of googling led me to Den Ivanov’s awesome ExtrudedBitmap class. This seemed like it would do just what I needed. My first thought was to put the text I wanted into a .png file and load it using Ivanov’s class. But poking through the code a bit, I thought, why bother loading something – why not simply pass the class an image directly and let it do its thing? So, I played around a little bit and came up with this ExtrudedImage class (still 98.23% Ivanov’s work, but still)…

package {
 
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.DisplayObject;
	import flash.display.Loader;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
 
	import org.papervision3d.core.proto.MaterialObject3D;
	import org.papervision3d.materials.BitmapMaterial;
	import org.papervision3d.materials.ColorMaterial;
	import org.papervision3d.objects.DisplayObject3D;
	import org.papervision3d.objects.primitives.Plane;	
 
	/**
	 * @author den ivanov
 	 * 		   www.cleoag.ru
	 * 		   den [at] cleoag.ru
	 * 
	 * slightly modified by devon wolfgang
	 * 			www.onebyonedesign.com
	 *
	 */
	public class ExtrudedImage extends DisplayObject3D {
 
		private var front:Plane;
		private var back:Plane;
		private var sides:ExtrudedBitmapSides;
		private var zoom:int;
		private var image:BitmapData;
		private var depth:Number;
		private var loader:Loader;
		private var useSmooth:Boolean;
 
		public function ExtrudedImage(img:DisplayObject, useSmooth:Boolean = false, zoomRatio:int = 20, depth:Number = 100) {
			super();
			this.zoom = zoomRatio;
			this.depth = depth * .5;
			this.useSmooth = useSmooth;
			extrudeImage(img);
		}
 
		private function extrudeImage(img:DisplayObject):void {
			clear();
			image = new BitmapData(img.width, img.height, true, 0x00000000);
			image.draw(img);
 
			var m1:BitmapMaterial = new BitmapMaterial(image);
			m1.smooth = useSmooth;
			front = new Plane(m1, image.width * zoom, image.height * zoom, Math.floor(image.width * .25), Math.floor(image.height * .25));
			front.name = "front";
 
			var m2:BitmapMaterial = new BitmapMaterial(image);
			m2.smooth = useSmooth;
			m2.opposite = true;
			back = new Plane(m2, image.width * zoom, image.height * zoom, Math.floor(image.width * .25), Math.floor(image.height * .25));
			back.name = "back";
 
			front.z = -depth;
			back.z = depth;
 
			addChild(front);
			addChild(back);
 
			var m3:BitmapMaterial = new BitmapMaterial(image);
			m3.smooth = useSmooth;
			sides = new ExtrudedBitmapSides(m3, image, zoom, depth);
			sides.name = "sides";
			addChild(sides);
		}
 
		override public function get material():MaterialObject3D { return front.material }
 
		override public function set material(value:MaterialObject3D):void {
			front.material = value;
			back.material = value;
			sides.material = value;
		}
 
		public function clear() : void {
			if (image != null) {
				removeChild(sides);
				removeChild(front);
				removeChild(back);
				sides = null;
				front = null;
				back = null;
				image.dispose();
			}
		}
	}
}

With these changes, now intstead of passing the class a url to an image file, you just pass it an image (DisplayObject instance, that is) directly. This means you can create DisplayObjects on the fly (including those with text) and make 3D extrusions of them. Also, by giving the PV3D items inside the ExtrudedImage class names (“front”, “back”, and “sides”) you can reference those items and swap out their materials (or add a shader to them or what have you). Sort of like this:

var extrudedImage = new ExtrudedImage(someSprite, true, 4);
var shader:GouraudShader = new GouraudShader(_light);
var shadeMat:ShadedMaterial = new ShadedMaterial((extrudedImage.material) as BitmapMaterial, shader);
shadeMat.smooth = true;
extrudedImage.getChildByName("front").material = shadeMat;

So, after coming up with text effect I was looking for in the first place, I played around a bit more and came up with little example app. Use the drawing tool to the left to create a work of art (click the top black square to change the color, the black circle to change the brush shape, the slider to change the brush size, and draw on the graph paper). When finished, click “save”, give it a span of time or two, then check out your creation in glorious 3D to the right (use the mouse to hover around a bit and mousewheel to zoom in/out). Pretty freaking nifty. Of course all the credit really goes to Den Ivanov. I have next to no idea how it works. :)

Get Adobe Flash player

6 Comments »

  1. [...] is my own rough attempt at it but thanks to Devon Wolfgang and Den Ivanov I was finally able to do something that I had wanted to do for awhile in Flash and [...]

  2. [...] A Bitmap instance is created from that BitmapData and then passed on to an image extruder like I rambled on about here. That 3d object is then passed on to a Papervision3d/FLAR scene and that’s that. Fun [...]

  3. Marissa says:

    would it be possible to see your source? I can’t quite seem to get mine up and running.

  4. Gerry says:

    I had issues with this but was wondering why you didn’t type the var in the example code?
    var extrudedImage = new ExtrudedImage(someSprite, true, 4);

    I couldn’t get my image to extrude.

  5. Gerry says:

    Nevermind that last comment, I did get it to extrude. Now I’ll be working on using a different back image.

  6. Devon O. says:

    Glad you got it working. Why I didn’t type the var – I don’t know. Maybe I was just testing to see if anyone noticed.. :)

RSS feed for comments on this post. / TrackBack URI

Leave a Reply

Devon O. Wolfgang

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development”

Contributing Author of “Flash AS3 for Interactive Agencies”

Senior Software Developer in Dublin, Ireland

Portfolio

Bayer Pixel Bender Filter

Bayer Mosaic Filter in Pixel Bender


Now, seeing as how I’ve been trying to learn some Pixel Bender coding lately[...]

Liquitext

Liquid Text Effect


Haven’t been too active around here lately due to a major on going project at work lately as well as the fact that my wife and I are in the slow process of moving homes. Really, the only free time it seems I have these days is during the lunch hour. So, over the past two days, I came up with this fun little toy during lunches[...]

Google’s Text To Speech Engine in Flash

I’m not sure how I managed to miss this, but I just happened to run across a ‘new’ (well, newish), albeit still unofficial, offering of Google today: text-to-speech. You can see what few details there are on this Techcrunch post. Basically, it just boils down to this though – you send your phrase to be [...]

Quick Sound Effects Generator


Need some beeps, boops, or bops, to go with your UI or games [...]

Quick QuickBox2D Tip II – Collision Detection

Custom collision detection/handling in QuickBox2D [...]

None of This Runs Eternal


No Flash/Actionscript stuff here. Just me rambling about the upcoming Current 93 concert [...]

Playing Around with the New UndoManager

Included in the Flex 4.0 SDK and the, just released, Flash Professional CS5 lies a new hidden little gem of a class: flashx.undo.UndoManager (although the Flex 4.0 SDK’s been out for awhile, I have to admit I didn’t even notice this until I installed Flash CS5 and started poking around the documentation looking for new [...]

Making Waves

In a previous post, “Digging into the Microphone in Flash Player 10.1″, reader David Law asked in the comments how it would be possible to save .wav files to the server. I wasn’t sure right offhand, but thought I’d spend my lunch hour yesterday looking into it. Well, after reading this quick tutorial on Adobe [...]

Some Drawing Fun and a Bad Movie You’ll Never See

Earlier today, Dave Gillem posted a link on Facebook to an incredible Processing based drawing application. Thought I’d have a go at reproducing something similar in Flash. Well, I failed miserably, but the results were still interesting enough to check out. You can play around with it below. Just mouse down to draw in the [...]

Animating Bezier Curves


The other day I got the notion in my head that I wanted to draw some bezier curves in an animated fashion. I’m sure this has been done a million times before, but sometimes reinventing the wheel can be a good learning experience [...]

My God, It’s Full of Stars…


Just a quick little thing I got an idea for (i.e. pretty much ripped off) while browsing Processing examples.

Another Year, Another Look

As a few folks may have noticed, the blog is looking a little bit different as of today [...]

The Webcam Warholizer


Just a little bit of quick Friday fun with webcam and bitmapata…

More With the JiglibFlash Terrain

Playing around a bit more with the animated JiglibFlash terrain idea from my last post, I wanted to see how it would work in conjunction with a webcam. So, needless to say, you’ll need a webcam to check out the results below.

Rockin and Rollin with the JiglibFlash Terrain


Finally got the chance to play around with the new JiglibFlash height map terrain, today, and have to say I am very impressed [...]