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 Flash Engineer PopCap Games, International Ltd.

Portfolio

UV Scrolling in Starling


Obviously this could come in pretty darned handy for space games, side scrollers, etc, etc[...]

Drawing on Stuff in Away3D 4.0

So, Easter Day, I thought I’d sit down and make a little ‘Paint on an Egg and Send it to Your Friend’ app.

Santabot: A Unity3D Flash Game


All right, so a Christmas game like “Santabot vs. The Flying Saucers from Mars” may be a day late[...]

Magnify – a jQuery Plugin


Let me begin by saying right up front, I have not given up on Flash[...]

It’s a Starling Halloween


Getting some practice for the upcoming Zombie Apocalypse[...]

Getting Started with Proscenium

So I had a chance this weekend to sit down and play around with Adobe’s new 3D framework for Stage3D, Proscenium, and thought I’d share a few of the results (a word of caution, there are no preloaders for any of the examples and may load a bit slowly). The first shows some reflections and [...]

Particle Editor for Starling Framework

An in-browser particle editor for the Starling 2D Framework for Flash Player 11.

So Long and Thanks for all the Flash on the Beach

So, another Flash on the Beach has just has just drawn to a close[...]

Game Development Tips from the Trenches of PopCap

Well, this is a post that’s a bit overdue, but, thanks to a well timed bank holiday, I finally had the opportunity to sit down and type up what I’ve been meaning to for some time now…

Old Skool Demoscene FX as 3D Textures

Many moons ago, I got the idea to create some demoscene plane deformation effects in Flash based on the formulas found here: http://www.iquilezles.org/www/articles/deform/deform.htm. I posted my less than desired results up on wonderfl. Thankfully, fellow wonderfl user, Hasufel, forked my attempt and optimized the hell out of it coming up with this. Well, today, for no [...]

Making The Gaming Scene (A Change in Careers)

And for my second blog post of the day, a much more personal note. After about three years of working with, what I would consider as objectively as possible, the best digital agency in Ireland, vStream Digital Media, I have made the immense career decision to leave the agency world and enter the arena of [...]

Feeling Lucky?

Images to dice, kick ascii style [...]

Adventures in Playbook Land

Adventures in Playbook Land


Now that the ordeal is over, I thought I’d take the time to sit down and share my account of what it was like to develop a Blackberry Playbook application using the Adobe Flex SDK[...]

Flash

Draw it for Me

So many ideas – so little time….

Kinect Application Running in Dublin

So, on Friday I just wrapped up our latest project at vStream Digital Media, a Kinect powered flipbook that lets users flip through the hand written notebooks of Philip Lynott of Thin Lizzy. The app uses OpenNI, runs in Adobe AIR and is currently on display at a pretty bitchin’ Phil Lynott exhibition running in [...]

Beach Ball Kinect Party

So we finally got a Kinect camera hooked up to a pc at work and, while it doesn’t seem to be legal to use it for commercial projects (but, hey, I’m no lawyer), the boss asked me to get it figured out and come up with some ideas just in case it would be feasible [...]