Sandy 3D engine Blog » Resources

AS3Dmod, a modifier library for all Flash 3d engines

kiroukou — Wed, 03 Sep 2008 09:52:35 +0000

Bartek Drozdz released today an early version of his AS3DMod library.

This library will allow Sandy3D user to apply some modifiers to 3D objects geometry.

What are Modifiers?

let’s quote Bartek

Modifiers are basically functions that can be applied to a 3d object to transform it in a certain way. They can be used separately, but when combined they become a very powerful tool. In this, they are much like filters in Photoshop.

Right now that library, which should be fully documented in the coming weeks, offers:

a framework for creating static and animated modifier stacks

3 basic modifiers: Noise, Bend and Perlin

Check this project at google code and play with it until some other cool Sandy3D news be available

Far, far away…

makc — Wed, 16 Apr 2008 06:05:18 +0000

Seems like yesterday was busy day for flash 3D world. Away3D has just released v2, that includes all the stuff they were carefully hiding from us since 2007 fall. Release comes with kick-ass alien planet demo:

Well, Away3D has really gone far away from PV3D now. As Rob wrote before, they “no longer measure success with a Papervision yardstick”.

Congrats to Away team!

Five3D goes AS3.

makc — Mon, 14 Apr 2008 08:01:15 +0000

Two months after unofficial port, Mathieu Badimon finally took his time to make official release today, along with typography tools.

This is certainly one of most compact engines (and so is very easy to start working with), with some unique features, such as 3D vector drawing and text support. Now, rewritten in AS3, it is probably fast enough to handle very complex scenes, but also very limited dynamically because of fixed rendering order.

This release comes with promise of v2.1 in coming weeks, so let’s see what comes next.

Get Five3D 2.0 here.

Blender export for Sandy3D available

kiroukou — Wed, 02 Jan 2008 14:47:04 +0000

Dennis Ippel, one of the Sandy3D developers, just released his Blender export script. for Sandy3D, but also Away3D and Papervision 1.7.

Check it here and let your comments there!

This Blender (free 3D modelisation tool) export script is a possibility to generate native 3D objects (no parsing required), as the Seraf AS3 geom exporter is doing with 3DS Max .

Good job Dennis!

DistortImage in AS3

kiroukou — Mon, 25 Jun 2007 09:26:45 +0000

Hi all,
it’s been a while without giving any news, but a lot of work lately.

I often receive some questions about the AS3 port of my DistortImage class.
Several people already port it I guess, as Alex Ulhmann and Carles Sanz who sent me their work.

Alex has done a kind of refactoring, to optimize and clean my old code resulting in 3 classes instead of one, and Carles offers a simple port.

So I finally take time to make them available to everyone interessted

DistortImage AS3 by Alex

DistortImage AS3 by Carles Sanz

[UPDATE]
Ruben Swieringa blog entry with link to his version with demo

Have fun,
Thomas

DistortImage 2.0, the fastest way to freely distort image with Flash in actionscript

kiroukou — Fri, 24 Mar 2006 12:07:29 +0000

Hi all,

As I thought, the idea I told you about in my previous post has been implemented ! Thanks to Richard Lester and Didier Brun we were able to run my idea correctly.

But in the same time we found some nice optimizations that we can add to the original DistordImage class. And after acomplete benchmark, we can see that the two solutions performances are equivalent now. The new class runs between 2.5 3 times faster !

But a feature we wanted to take under consideration was to allow the user to distort a Video Stream as easily as possible.

You can see an example of myself distorted using my webcam stream

Here an example with a webcam stream :

Finally we decided to publish the following class.

PLAIN TEXT

JavaScript:

/*
****************************
* From a first idea and first implementation of Andre Michelle www.andre-michelle.com
* @version 2.0
* @author Thomas Pfeiffer - kiroukou - http://www.thomas-pfeiffer.info
* @author Richard Lester - RichL
* @author Didier Brun - foxy - http://www.foxaweb.com
* @website: http://sandy.media-box.net
* @description: Tesselate a movieclip into several triangles to allow free transform distorsion.
* *************************
* Licensed under the CREATIVE COMMONS Attribution-NonCommercial-ShareAlike 2.0
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.en_GB
***************************
* DistortImage class
* Availability : Flash Player 8.
**********************************************
*/
import flash.geom.Matrix;
import flash.display.BitmapData;
class DistortImage
{
// -- texture to distord
public var texture:BitmapData;
/*
* Constructor
* @param mc MovieClip : the movieClip containing the distorded picture
* @param symbolId String : th link name of the picture in the library
* @param vseg Number : the vertical precision
* @param hseg Number : the horizontal precision
* @throws: An error in the second constructor parameter isn't a BitmapData or a MovieClip
*/
public function DistortImage( mc: MovieClip, ptexture, vseg: Number, hseg: Number )
{
_mc = mc;
if( ptexture instanceof BitmapData )
{
texture = ptexture;
}
else if( ptexture instanceof MovieClip )
{
texture = new BitmapData( ptexture._width, ptexture._height );
texture.draw( ptexture );
}
else
{
throw new Error('Second argument in DistortImage class must be a BitmapData object or a Movieclip');
}
_vseg = vseg || 0;
_hseg = hseg || 0;
// --
_w = texture.width ;
_h = texture.height;
// --
_aMcs = new Array();
_p = new Array();
_tri = new Array();
// --
__init();
}
/**
* setTransform
*
* @param x0 Number the horizontal coordinate of the first point
* @param y0 Number the vertical coordinate of the first point
* @param x1 Number the horizontal coordinate of the second point
* @param y1 Number the vertical coordinate of the second point
* @param x2 Number the horizontal coordinate of the third point
* @param y2 Number the vertical coordinate of the third point
* @param x3 Number the horizontal coordinate of the fourth point
* @param y3 Number the vertical coordinate of the fourth point
*
* @description : Distord the bitmap to ajust it to those points.
*/
function setTransform( x0:Number , y0:Number , x1:Number , y1:Number , x2:Number , y2:Number , x3:Number , y3:Number ): Void
{
var w:Number = _w;
var h:Number = _h;
var dx30:Number = x3 - x0;
var dy30:Number = y3 - y0;
var dx21:Number = x2 - x1;
var dy21:Number = y2 - y1;
var l:Number = _p.length;
while( --l> -1 )
{
var point:Object = _p[ l ];
var gx = ( point.x - _xMin ) / w;
var gy = ( point.y - _yMin ) / h;
var bx = x0 + gy * ( dx30 );
var by = y0 + gy * ( dy30 );
point.sx = bx + gx * ( ( x1 + gy * ( dx21 ) ) - bx );
point.sy = by + gx * ( ( y1 + gy * ( dy21 ) ) - by );
}
__render();
}
/////////////////////////
/// PRIVATE METHODS ///
/////////////////////////
private function __init( Void ): Void
{
_p = new Array();
_tri = new Array();
var ix:Number, iy:Number;
var w2: Number = _w / 2;
var h2: Number = _h / 2;
_xMin = _yMin = 0;
_xMax = _w; _yMax = _h;
_hsLen = _w / ( _hseg + 1 );
_vsLen = _h / ( _vseg + 1 );
var x:Number, y:Number;
var p0:Object, p1:Object, p2:Object;
// -- we create the points
for ( ix = 0 ; ix <_hseg + 2 ; ix++ )
{
for ( iy = 0 ; iy <_vseg + 2 ; iy++ )
{
x = ix * _hsLen;
y = iy * _vsLen;
_p.push( { x: x, y: y, sx: x, sy: y } );
}
}
// -- we create the triangles
for ( ix = 0 ; ix <_vseg + 1 ; ix++ )
{
for ( iy = 0 ; iy <_hseg + 1 ; iy++ )
{
p0 = _p[ iy + ix * ( _hseg + 2 ) ];
p1 = _p[ iy + ix * ( _hseg + 2 ) + 1 ];
p2 = _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) ];
__addTriangle( p0, p1, p2 );
// --
p0 = _p[ iy + ( ix + 1 ) * ( _vseg + 2 ) + 1 ];
p1 = _p[ iy + ( ix + 1 ) * ( _vseg + 2 ) ];
p2 = _p[ iy + ix * ( _vseg + 2 ) + 1 ];
__addTriangle( p0, p1, p2 );
}
}
__render();
}
private function __addTriangle( p0:Object, p1:Object, p2:Object ):Void
{
var u0:Number, v0:Number, u1:Number, v1:Number, u2:Number, v2:Number;
var tMat:Object = {};
// --
u0 = p0.x; v0 = p0.y;
u1 = p1.x; v1 = p1.y;
u2 = p2.x; v2 = p2.y;
tMat.tx = -v0*(_w / (v1 - v0));
tMat.ty = -u0*(_h / (u2 - u0));
tMat.a = tMat.d = 0;
tMat.b = _h / (u2 - u0);
tMat.c = _w / (v1 - v0);
// --
_tri.push( [p0, p1, p2, tMat] );
}
private function __render( Void ): Void
{
var vertices: Array;
var p0, p1, p2:Object;
var x0:Number, y0:Number;
var ih:Number = 1/_h, iw:Number = 1/_w;
var c:MovieClip = _mc; c.clear();
var a:Array;
var sM = {};
var tM = {};
//--
var l:Number = _tri.length;
while( --l> -1 )
{
a = _tri[ l ];
p0 = a[0];
p1 = a[1];
p2 = a[2];
tM = a[3];
// --
sM.a = ( p1.sx - ( x0 = p0.sx ) ) * iw;
sM.b = ( p1.sy - ( y0 = p0.sy ) ) * iw;
sM.c = ( p2.sx - x0 ) * ih;
sM.d = ( p2.sy - y0 ) * ih;
sM.tx = x0;
sM.ty = y0;
// --
sM = __concat( sM, tM );
c.beginBitmapFill( texture, sM, false, false );
c.moveTo( x0, y0 );
c.lineTo( p1.sx, p1.sy );
c.lineTo( p2.sx, p2.sy );
c.endFill();
}
}
private function __concat( m1, m2 ):Object
{ //Relies on the original triangles being right angled with p0 being the right angle.
//Therefore a = d = zero (before and after invert)
var mat = {};
mat.a = m1.c * m2.b;
mat.b = m1.d * m2.b;
mat.c = m1.a * m2.c;
mat.d = m1.b * m2.c;
mat.tx = m1.a * m2.tx + m1.c * m2.ty + m1.tx;
mat.ty = m1.b * m2.tx + m1.d * m2.ty + m1.ty;
return mat;
}
/////////////////////////
/// PRIVATE PROPERTIES //
/////////////////////////
private var _mc:MovieClip;
private var _w:Number;
private var _h:Number;
private var _xMin:Number, _xMax:Number, _yMin:Number, _yMax:Number;
// -- picture segmentation properties
private var _hseg:Number;
private var _vseg:Number;
private var _hsLen:Number;
private var _vsLen:Number;
// -- arrays of differents datas types
private var _p:Array;
private var _tri:Array;
private var _aMcs:Array;
}

All the source files are available here : source files

DistortImage V2, I need your help!

kiroukou — Mon, 20 Mar 2006 18:36:31 +0000

Hi,

I wanted to update (and rename!) my DistordImage class, which has been very popular , for a long time and yesterday night I had what I hope to be a great idea to make it much more faster.

Unfortunately I don't have time currently to test it as I want (nor to continue Sandy btw), so I decided to share my actual code/idea and ask to the community to help me to finish it As it is free and opensource, and that a lot of talented people are interessted in this class, we should have an efficent DistortImage class soon

I've written a topic in Sandy's forum with my details and source. You can see it here : http://sandy.media-box.net/forum/index.php?showtopic=5168

I hope you will play the game if you have some free time.
Good work everybody

Flash player 8 sous Linux !

kiroukou — Sat, 11 Mar 2006 12:04:52 +0000

Hi all,

This morning a friend of mine with a good knowledge of Linux platform told me about ies4linux !

Quote from their website:

IEs for Linux is a simple Bash Script program that installs Internet Explorer 6, 5.5 and 5 on Linux using Wine. The whole process is automatic and very easy.
... You don’t need to click on anything to install IE6, IE5.5 and IE5 - with FlashPlayer 8!

A really good news for all Linux fanatics

Webcam 3D objects texturing thanks to BitmapData

Kiroukou — Wed, 16 Nov 2005 23:40:09 +0000

All the people who were interested by 3D has thought about the texturing thing. . We all hoped to be able to distort a bitmap to fits it on the 3D object's face. But who expected to be able to texture with a live video such as webcam?

People who have already looked at our examples files should know that Sandy gives the possibility to easily texture an object with your webcam video stream, and I will explain this point a bit more in this post

Since Flash8, as all of you already know, you are allowed to access to pixel with the BitmapData class. But the best thing is that Macromedia gave us the possibility to use this thing pretty much everywhere ! We have a complete MovieClip BitmapData relation which is really powerful. Moreover, you can use directly some transformations for the bitmap drawing.

We use this new feature in our API to texture a face. Basically we align the whole bitmap to fit it with our 3 points, and then use MovieClip.beginBitmapFill() to draw only what we need. So now, our TextureSkin class, which is the class used to texture Object3D, is basically a composition of a bitmapData with some face's points access.

You should be able to find the following part by yourself now

Since a Video object must be into a MovieClip, we just have to draw every time we want the Video's clip into our TextureSkin classbitmapData property with MovieClip.draw method , that's all And as we use a single bitmapData, it's not more CPU intensive than a BitmapData containing a static picture (well if we forgot the clip's draw into the bitmapdata for sure).

Here is the example :

and a picture for those who don't have a webcam :

And for those who don't have tried our API, here is the code needed to realize that :

PLAIN TEXT

JavaScript:

import mb.sandy.core.data.*;
import flash.display.BitmapData;
import mb.sandy.primitive.*;
import mb.sandy.view.*;
import mb.sandy.core.transform.*;
import mb.sandy.core.*;
import mb.sandy.core.group.*;
import mb.sandy.skin.*;
import mb.sandy.event.*;
class Test extends Sandy
{
private var _ts:TextureSkin;
public function Test( mc:MovieClip )
{
super( mc );
// -- _mc.clip.vid is the link to our video object on the scene
_mc.clip.vid.attachVideo( Camera.get() );
}
public static function main( mc:MovieClip ):Void
{
var t:Test = new Test( mc );
t.start ();
}
public function start( Void ):Void
{
// -- object skin creation. Here a bitmapData
_ts = new TextureSkin( new BitmapData(200, 200) );
// The 3D object, here a simple box
var box:Box = new Box( 100, 50, 100);
// -- we attach the skin to the object
box.setSkin( _ts );
// -- we place our objet on the scene at x:0, y:0, z:550.
box.setPosition(0,0,550);
// -- we create the group (group of objects or of groups too)
var g:Group = new Group();
// -- we create a transformation to apply to our object, here a rotation ( parameters are axis, speed as angle in degrees)
var r:Transform3D = new Rotation3D( new Vector4(1,1,1), 2 );
// -- we create the transformGroup which manage all the transformations to aply to the objects of a group (here a single rotation)
var tg:TransformGroup = new TransformGroup();
// We add the rotation to the group
tg.addTransform( r );
// we compile it to be faster later
tg.compile();
// -- we attach the transformGroup to this group.
g.setTransformGroup( tg );
// -- we add the Box to our group
g.addObject( box );
// -- we add our group to our world object
_world.addGroup( g );
// -- we create some Frame call to wake the realtime rendering & texturing
var fcall:FrameCall = new FrameCall( this, "rendering" );
fcall.connect ();
var tcall:FrameCall = new FrameCall( this, "camTexturing" );
tcall.connect();
}
private function camTexturing( Void ):Void
{
// -- we just copy the movieclip containing the webcam stream into our texture bitmapdata.
_ts.texture.draw( _mc.clip );
}
private function rendering(Void):Void
{
// we render the world scene (here a simple group owning a simple object)
_world.render();
}
}

I hope you find this article interessting and please leave a comment if you have a question or if you want to notice something. Sorry if I made some English mistake, I'll do my best (feel free to correct me !)

Regards thomas

DistordImage, the way to distord bitmaps by code

Kiroukou — Tue, 01 Nov 2005 10:18:54 +0000

Who never hoped to be able to transform some bitmaps directly by code. Yes We can now skew and scale a MovieClip in Flash8, but when you need to map a bitmap on a more complex support, you just can't.

But thanks to Andre Michelle we were able to do that for two years, but this technics wasn't really optimized and precise.

Today Flash 8 brings some new possibilities making this very accurate.

Here is the example :

Play with the anchors clips to distort the picture

Here is the class :

PLAIN TEXT

JavaScript:

/**********************************************
* reserved.
*
* Licensed under the CREATIVE COMMONS Attribution-NonCommercial-ShareAlike 2.0
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://creativecommons.org/licenses/by-nc-sa/2.0/fr/deed.en_GB
*
* DistortImage class
* Availability : Flash Player 8.
*
* Description
* _________
* Tesselate a movieclip into several triangles
* to allow free transform distorsion.
****************************
* From an idea and a first implementation from (C) Andre Michelle
* http://www.andre-michelle.com
****************************
* @author Thomas Pfeiffer - kiroukou
* @contact kiroukou@@gmail..com
**********************************************/
import flash.geom.Matrix;
import flash.display.BitmapData;
class com.kiroukou.graphics.DistordImage
{
private var _mc: MovieClip;
private var _w: Number;
private var _h: Number;
// -- skew and translation matrix
private var _sMat:Matrix ;
private var _tMat:Matrix ;
private var _xMin, _xMax, _yMin, _yMax: Number;
private var _hseg: Number;
private var _vseg: Number;
private var _hsLen: Number;
private var _vsLen: Number;
private var _p: Array;
private var _tri: Array;
private var _texture:BitmapData;
/* Constructor
*
* @param mc MovieClip : the movieClip containing the distorded picture
* @param symbolId String : th link name of the picture in the library
* @param vseg Number : the vertical precision
* @param hseg Number : the horizontal precision
*/
public function DistordImage( mc: MovieClip, symbolId: String, vseg: Number, hseg: Number )
{
_mc = mc;
_texture = BitmapData.loadBitmap( symbolId );
_vseg = vseg;
_hseg = hseg;
_w = _texture.width ;
_h = _texture.height;
__init();
}
private function __init( Void ): Void
{
_p = new Array();
_tri = new Array();
var ix: Number;
var iy: Number;
var w2: Number = _w / 2;
var h2: Number = _h / 2;
_xMin = _yMin = 0;
_xMax = _w; _yMax = _h;
_hsLen = _w / ( _hseg + 1 );
_vsLen = _h / ( _vseg + 1 );
var x: Number, y: Number;
// -- we create the points
for ( ix = 0 ; ix <_vseg + 2 ; ix++ )
{
for ( iy = 0 ; iy <_hseg + 2 ; iy++ )
{
x = ix * _hsLen;
y = iy * _vsLen;
_p.push( { x: x, y: y, sx: x, sy: y } );
}
}
// -- we create the triangles
for ( ix = 0 ; ix <_vseg + 1 ; ix++ )
{
for ( iy = 0 ; iy <_hseg + 1 ; iy++ )
{
_tri.push([ _p[ iy + ix * ( _hseg + 2 ) ] , _p[ iy + ix * ( _hseg + 2 ) + 1 ] , _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) ] ] );
_tri.push([ _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) + 1 ] , _p[ iy + ( ix + 1 ) * ( _hseg + 2 ) ] , _p[ iy + ix * ( _hseg + 2 ) + 1 ] ] );
}
}
__render();
}
/* setTransform
*
* @param x0 Number the horizontal coordinate of the first point
* @param y0 Number the vertical coordinate of the first point
* @param x1 Number the horizontal coordinate of the second point
* @param y1 Number the vertical coordinate of the second point
* @param x2 Number the horizontal coordinate of the third point
* @param y2 Number the vertical coordinate of the third point
* @param x3 Number the horizontal coordinate of the fourth point
* @param y3 Number the vertical coordinate of the fourth point
*
* @description : Distord the bitmap to ajust it to those points.
*/
function setTransform( x0:Number , y0:Number , x1:Number , y1:Number , x2:Number , y2:Number , x3:Number , y3:Number ): Void
{
var w:Number = _w;
var h:Number = _h;
var dx30:Number = x3 - x0;
var dy30:Number = y3 - y0;
var dx21:Number = x2 - x1;
var dy21:Number = y2 - y1;
var l:Number = _p.length;
while( --l> -1 )
{
var point:Object = _p[ l ];
var gx = ( point.x - _xMin ) / w;
var gy = ( point.y - _yMin ) / h;
var bx = x0 + gy * ( dx30 );
var by = y0 + gy * ( dy30 );
point.sx = bx + gx * ( ( x1 + gy * ( dx21 ) ) - bx );
point.sy = by + gx * ( ( y1 + gy * ( dy21 ) ) - by );
}
__render();
}
private function __render( Void ): Void
{
var t: Number;
var vertices: Array;
var p0, p1, p2:Object;
var c:MovieClip = _mc;
var a:Array;
c.clear();
_sMat = new Matrix();
_tMat = new Matrix();
var l:Number = _tri.length;
while( --l> -1 )
{
a = _tri[ l ];
p0 = a[0];
p1 = a[1];
p2 = a[2];
var x0: Number = p0.sx;
var y0: Number = p0.sy;
var x1: Number = p1.sx;
var y1: Number = p1.sy;
var x2: Number = p2.sx;
var y2: Number = p2.sy;
var u0: Number = p0.x;
var v0: Number = p0.y;
var u1: Number = p1.x;
var v1: Number = p1.y;
var u2: Number = p2.x;
var v2: Number = p2.y;
_tMat.tx = u0;
_tMat.ty = v0;
_tMat.a = ( u1 - u0 ) / _w;
_tMat.b = ( v1 - v0 ) / _w;
_tMat.c = ( u2 - u0 ) / _h;
_tMat.d = ( v2 - v0 ) / _h;
_sMat.a = ( x1 - x0 ) / _w;
_sMat.b = ( y1 - y0 ) / _w;
_sMat.c = ( x2 - x0 ) / _h;
_sMat.d = ( y2 - y0 ) / _h;
_sMat.tx = x0;
_sMat.ty = y0;
_tMat.invert();
_tMat.concat( _sMat );
c.beginBitmapFill( _texture, _tMat, false, false );
c.moveTo( x0, y0 );
c.lineTo( x1, y1 );
c.lineTo( x2, y2 );
c.endFill();
}
}
}

You can find the fla : here

Have fun