Webcam 3D objects texturing thanks to BitmapData

November 16th, 2005 by Kiroukou :: Resources, en :: RSS 2.0 :: trackback

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 :
placeholder for flash movie
and a picture for those who don't have a webcam :

webcam texturing

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

PLAIN TEXT
JavaScript:
  1. import mb.sandy.core.data.*;
  2. import flash.display.BitmapData;
  3. import mb.sandy.primitive.*;
  4. import mb.sandy.view.*;
  5. import mb.sandy.core.transform.*;
  6. import mb.sandy.core.*;
  7. import mb.sandy.core.group.*;
  8. import mb.sandy.skin.*;
  9. import mb.sandy.event.*;
  10.  
  11. class Test extends Sandy
  12. {
  13.     private var _ts:TextureSkin;
  14.    
  15.     public function Test( mc:MovieClip )
  16.     {
  17.         super( mc );
  18.         // -- _mc.clip.vid is the link to our video object on the scene
  19.         _mc.clip.vid.attachVideo( Camera.get() );
  20.     }
  21.  
  22.     public static function main( mc:MovieClip ):Void
  23.     {
  24.         var t:Test = new Test( mc );
  25.         t.start ();
  26.     }
  27.        
  28.     public function start( Void ):Void
  29.     {
  30.         // -- object skin creation. Here a bitmapData
  31.         _ts = new TextureSkin( new BitmapData(200, 200) );
  32.         // The 3D object, here a simple box
  33.         var box:Box = new Box( 100, 50, 100);
  34.         // -- we attach the skin to the object
  35.         box.setSkin( _ts );
  36.         // -- we place our objet on the scene at x:0, y:0, z:550.
  37.         box.setPosition(0,0,550);
  38.         // -- we create the group (group of objects or of groups too)
  39.         var g:Group = new Group();
  40.         // -- we create a transformation to apply to our object, here a rotation ( parameters are axis, speed as angle in degrees)
  41.         var r:Transform3D = new Rotation3D( new Vector4(1,1,1), 2 );
  42.         // -- we create the transformGroup which manage all the transformations to aply to the objects of a group (here a single rotation)
  43.         var tg:TransformGroup = new TransformGroup();
  44.                 // We add the rotation to the group
  45.         tg.addTransform( r );
  46.                 // we compile it to be faster later
  47.         tg.compile();
  48.         // -- we attach the transformGroup to this group.
  49.         g.setTransformGroup( tg );
  50.         // -- we add the Box to our group
  51.         g.addObject( box );
  52.         // -- we add our group to our world object
  53.         _world.addGroup( g );
  54.         // -- we create some Frame call to wake the realtime rendering & texturing
  55.         var fcall:FrameCall = new FrameCall( this, "rendering" );
  56.         fcall.connect ();
  57.         var tcall:FrameCall = new FrameCall( this, "camTexturing" );
  58.         tcall.connect();
  59.     }
  60.    
  61.     private function camTexturing( Void ):Void
  62.     {
  63.         // -- we just copy the movieclip containing the webcam stream into our texture bitmapdata.
  64.         _ts.texture.draw( _mc.clip );      
  65.     }
  66.    
  67.     private function rendering(Void):Void
  68.     {
  69.         // we render the world scene (here a simple group owning a simple object)
  70.         _world.render();
  71.     }
  72.    
  73. }

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

One Response to “Webcam 3D objects texturing thanks to BitmapData”

  1. December 1st, 2005 at 3:11 pm :: kiroukou

    Some english modifications :) Thanks François !

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>