I finally took some time away from Away3D… and dove into Away3DLite! Away3dLite is quite simply your choice when you need performance over functionality. It strips a lot of the heavier features from Away3D and leverages improvements in Flash Player 10 directly. For this reason it’s only compatible with Flash Player 10 (sorry 2.x users). Away3dLite in the right hands, though, is no slouch in the visual flair department.
In this demo I take a JPG, slice and dice it up into cubes, apply a color material to each cube that is the “color average” of a chunk of BitmapData, then let you change the background color and blend mode to get some interesting visual effects. The demo below has almost 5000 faces and 400 color materials, which would likely bring Away3D down to a crawl in terms of frame rate. With Away3dLite, though, I’m currently getting a steady ~27 frame per second! Great performance and cool effects all rolled into one great package.
You can right click and “view source” on the demo to get a look at exactly what I did, but there’s one section of code in particular I’d like to point out here. In Away3D, if you want to apply Flash filters and blending, you needed to do the following:
var object:Cube = new Cube(); object.ownCanvas = true; object.filters = [new GlowFilter()]; object.blendmode = BlendMode.ADD; view.scene.addChild(object);
In Away3DLite, things are slightly different. In Away3DLite, objects don’t have their own canvas by default, I assume as a performance boost. To give your objects a canvas and achieve the same as the above code, you have to create your own canvas in the layer property of Object3D and add it to the view, like this:
var object:Cube6 = new Cube6(); object.layer = new Sprite(); object.layer.filters = [new GlowFilter()]; object.layer.blendmode = BlendMode.ADD; view.addChild(cube.layer); view.scene.addChild(cube);
Hopefully this saves somebody switching from Away3D to Away3DLite a few minutes (or hours).
Featured Away3dLite Code:
- flash.display.BitmapData.getPixel()
- flash.display.BlendMode
- away3dlite.primitives.Cube6
- away3dlite.core.base.Object3D.layer
Just have to say, the “About” of this blog has got to be the most awesome thing on the internet, I have read, ever.
Haha, thanks Peter. I knew I recognized the name of your site. Very slick and clean design. The shadows really make it stand out.
Hey, cool site. I can’t seem to get the filter to work, I tried like you said, make a new sprite and add a layer. I’m trying to add a blur effect to a plane.
@SomeFunkyDude Post up your code or send me an email and I’ll take a look. You’re using Away3dLite, right? I haven’t been back in it in a while, but I remember one of the devs talking about a “canvas” property being added to objects to avoid the need for adding your own layer. See if the objects in your version of away3dlite have a “canvas” property you can use.
Right, Thanks, I did more searching and found your comment on the mailing list. Apparently if you want to use the canvas property, you have to download a branch of the Away3DLite library. I got it to work, woohooooo
var plane:Plane = scene.addChild(new Plane(material,220,220,4,4,false)) as Plane;
plane.bothsides = true;
plane.canvas = view.addChild(new Sprite()) as Sprite;
plane.canvas.filters = [new BlurFilter(4, 4, 3)];
was the code that worked (with the updated branch).
Overall, it’s basically the same scene I had set up in Papervision3D but half the file size.