Monthly Archives: August 2009

drawTriangles() & z-sorting

By Zevan | August 31, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width = 500, height=500, backgroundColor = 0x000000)]
  2. x = stage.stageWidth / 2;
  3. y = stage.stageHeight / 2;
  4.  
  5. // standard Vectors for using drawTriangles and projectVectors
  6. var verts:Vector.<Number> = new Vector.<Number>();
  7. var pVerts:Vector.<Number>;
  8. var uvts:Vector.<Number>;
  9. var indices:Vector.<int>;
  10. // needed for z-sorting
  11. var sortedIndices:Vector.<int>;
  12. var faces:Array = [];
  13.  
  14. // we'll use this for transforming points
  15. // and as the transformation matrix for our render
  16. var m:Matrix3D = new Matrix3D();
  17.  
  18. // plot a poly
  19. var poly:Vector.<Number>;
  20. poly = Vector.<Number>([ 0, 0, 0,
  21.                         10, 0, 0,
  22.                         0,10, 0]);
  23.  
  24. verts = verts.concat(poly);
  25. faces.push(new Vector3D());
  26.  
  27. // add two more polygons by transorming the poly Vector
  28. // and concatenating it to the verts Vector
  29. // Vector3D instances are added to the faces
  30. // Array for z-sorting
  31.  
  32. // temp vect for any transformed polygons
  33. var transPoly:Vector.<Number> = new Vector.<Number>();
  34.  
  35. m.appendRotation(10, Vector3D.Z_AXIS);
  36. m.appendTranslation(0,-2,5);
  37. m.transformVectors(poly, transPoly);
  38.  
  39. verts = verts.concat(transPoly);
  40. faces.push(new Vector3D());
  41.  
  42. m.appendRotation(10, Vector3D.Z_AXIS);
  43. m.appendTranslation(0,-2,5);
  44. m.transformVectors(poly, transPoly);
  45. verts = verts.concat(transPoly);
  46. faces.push(new Vector3D());
  47.  
  48. // hard coded indices
  49. indices = Vector.<int>([0, 1, 2, 3, 4, 5, 6, 7, 8]);
  50. sortedIndices = new Vector.<int>(indices.length, true);
  51.  
  52. // create texture
  53. var tex:BitmapData = new BitmapData(100,100,false, 0x000000);
  54. tex.fillRect(new Rectangle(0,0,50,50), 0xFF0000);
  55. tex.fillRect(new Rectangle(50,0,50,50), 0x0000FF);
  56. tex.fillRect(new Rectangle(0,50,50,50), 0x00FF00);
  57.  
  58. // hard coded uvts
  59. uvts = Vector.<Number>([0,0,0, .5,0,0, 0,.5,0,
  60.                         .53, 0, 0, 1, 0, 0, .53, .5, 0,
  61.                          0,.6,.5, 0,.6,0, 0,1, 0]);
  62.                        
  63. // fix all vector lengths
  64. verts.fixed = true, uvts.fixed = true, indices.fixed = true
  65. pVerts = new Vector.<Number>(verts.length/3 * 2, true);
  66.  
  67. // we need these if we want perspective
  68. var persp:PerspectiveProjection = new PerspectiveProjection();
  69. // projection matrix
  70. var proj:Matrix3D = persp.toMatrix3D();
  71.  
  72. addEventListener(Event.ENTER_FRAME, onLoop);
  73. function onLoop(evt:Event):void {
  74.     m.identity();
  75.     m.appendRotation(mouseY * 2, Vector3D.X_AXIS);
  76.     m.appendRotation(mouseX * 2, Vector3D.Y_AXIS);
  77.     // push everything back so its not too close
  78.     m.appendTranslation(0,0,40);
  79.     // append the projection matrix at the end
  80.     m.append(proj);
  81.    
  82.     Utils3D.projectVectors(m, verts, pVerts, uvts);
  83.    
  84.     var face:Vector3D;
  85.     var inc:int = 0;
  86.     for (var i:int = 0; i<indices.length; i+=3){
  87.         face = faces[inc];
  88.         face.x = indices[i];
  89.         // it may look odd, but casting to an int
  90.         // when doing operations inside array sytnax
  91.         // adds a big speed boost
  92.         face.y = indices[int(i + 1)];
  93.         face.z = indices[int(i + 2)];
  94.         var i3:int = i * 3;
  95.         // get the average z position (t value) and store it in the Vector3D w property
  96.         // depending on your model, you may not need to do an average of all 3 values
  97.                 // (t is the distance from the eye to the texture)
  98.         face.w = (uvts[int(i3 + 2)] + uvts[int(i3 + 5)] + uvts[int(i3 + 8)]) * 0.333333;
  99.         inc++;
  100.     }
  101.    
  102.     // sort on w, so far this beats all other sorting methods for speed,
  103.     // faster than Vector.sort(), faster than any custom sort method I could find
  104.     faces.sortOn("w", Array.NUMERIC);
  105.    
  106.     // re-order indices so that faces are drawn in the correct order (back to front);
  107.     inc = 0;
  108.     for each (face in faces){
  109.         sortedIndices[inc++] = face.x;
  110.         sortedIndices[inc++] = face.y;
  111.         sortedIndices[inc++] = face.z;
  112.     }
  113.    
  114.     graphics.clear();
  115.     graphics.beginBitmapFill(tex, null, false, false);
  116.     graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NONE);
  117. }

So you want to be able to do some z-sorting with drawTriangles()? Well, its extremely unintuitive. Here is what you need to know:

1) Vector.sort() is slow
2) Array.sortOn() is quite fast
3) I couldn't get any custom sorting method to be faster than Array.sortOn
4) You can use the t value from uvts to do z-sorting (like in this demo)
5) If your going for speed, don't forget to use fixed Vectors (I often forget this step)
6) When working with Vectors cast any operations inside brackets to int() (my tests showed this is a huge speed boost up to 3x faster - franky I think it's horrible that you have to do this).

The swf is not very interesting because I wanted to keep it super simple, but here it is anyway...


Questions

I was told and have read that drawTriangles is slower than using drawGraphicsData and a GraphicsTrianglePath instance. I tested this extensively and found that drawGraphicsData was slower. I'm still not sure which is faster but am up for checking out any simple benchmarks that people have.

drawTriangles is supposed to be faster without adding t values to the uvts Vector. In my benchmark tests there was no real difference in speed. The t value is used to render more accurate textures - which would mean you could potentially use less triangles in your models. One would assume that not using a t value would be faster... but I couldn't confirm this. Again if someone has a good benchmark for this, please let me know.

Help

I had a great deal of help from a few people on Twitter, Katopz (Away3D contributor) of sleepydesign.com made me aware of the fact that Array.sortOn is the way to go... You can see some great demos over at Katopz's blog. While I didn't end up using a custom sorting method, Inspirit
pointed me to his article about custom Vector sorting methods which proved to be very enlightening. I was able to get some really great results for doing different types of sorting - just sorting 1D Vectors with FlashSort can be very fast (faster than Array.sortOn - but not helpful for sorting a 1D Vector of indices).

I also learned a good deal by looking at this code post by Psyark... I actually optimized that code to run about 2x faster (will post that on wonderfl.net at some point, it just needs to be cleaned up).

kevinSuttle sent me a link to The video

Posted in 3D, Graphics, Vector, matrix | Tagged , , , , | 3 Comments

globalToLocal() in 3D

By Zevan | August 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(frameRate=60, backgroundColor=0x000000, width=500, height=500)]
  2. stage.quality = "medium";
  3. var frame:Sprite = Sprite(addChild(new Sprite()));
  4. with (frame.graphics) beginFill(0xCCCCCC), drawRect(-200, -200, 400, 400), endFill();
  5. frame.x = stage.stageWidth / 2;
  6. frame.y = stage.stageHeight / 2;
  7. frame.z = 100;
  8.  
  9. var canvas:Shape = Shape(frame.addChild(new Shape()));
  10. var msk:Shape = Shape(frame.addChild(new Shape()));
  11. with (msk.graphics) beginFill(0x00FF00), drawRect(-200, -200, 400, 400), endFill();
  12. canvas.mask = msk
  13.  
  14. var txt:TextField = TextField(addChild(new TextField()));
  15. txt.defaultTextFormat = new TextFormat("_sans", 12);
  16. txt.x = txt.y = 10;
  17. txt.textColor = 0xFFFFFF, txt.autoSize="left", txt.text = "Draw on the 3D plane...";
  18.  
  19. stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown);
  20. stage.addEventListener(MouseEvent.MOUSE_UP, onUp);
  21. function onDown(evt:MouseEvent):void{
  22.     canvas.graphics.lineStyle(4, 0x000000);
  23.     var pnt:Point = frame.globalToLocal(new Point(mouseX, mouseY));
  24.     canvas.graphics.moveTo(pnt.x, pnt.y);
  25.     addEventListener(Event.ENTER_FRAME, onDraw);
  26. }
  27. function onUp(evt:MouseEvent):void{
  28.     removeEventListener(Event.ENTER_FRAME, onDraw);
  29. }
  30.  
  31. var t:Number = 0;
  32. addEventListener(Event.ENTER_FRAME, onLoop);
  33. function onLoop(evt:Event):void {
  34.     frame.rotationY = 35 * Math.sin(t);
  35.     frame.rotationX = 35 * Math.cos(t);
  36.     t+=0.02;
  37. }
  38.  
  39. function onDraw(evt:Event):void {
  40.         var pnt:Point = frame.globalToLocal(new Point(mouseX, mouseY));
  41.     canvas.graphics.lineTo(pnt.x, pnt.y);
  42. }

This demo shows that globalToLocal() works with 3D - saving us the trouble of doing some extra math if we want to draw on 3D display objects...

Have a look at the swf....


Was made aware of this trick by watching a video that kevinSuttle sent me via twitter. The video is an interview with Chris Nuuja (one of the flash player engineers).

Posted in 3D, DisplayObject, Graphics, misc, motion | Tagged , , | 3 Comments

3D Key Controls

By Zevan | August 30, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x000000, width=500, height=500)]
  2. var hsw:Number = stage.stageWidth / 2;
  3. var hsh:Number = stage.stageHeight / 2;
  4. var pointNum:int = 300;
  5. var points3D:Vector.<Number> = new Vector.<Number>();
  6. var points2D:Vector.<Number> = new Vector.<Number>();
  7. var uvts:Vector.<Number> = new Vector.<Number>();
  8. var sorted:Array = [];
  9. var pnt:Point = new Point();
  10. var m:Matrix3D = new Matrix3D();
  11. var v:Vector3D = new Vector3D();
  12. for (var i:int = 0; i<pointNum; i++){
  13.     v.x = 300;
  14.     v.y = v.z = 0;
  15.     m.identity();
  16.     m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  17.     m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  18.     m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  19.     v = m.transformVector(v);
  20.     points3D.push(v.x, v.y, v.z);
  21.     points2D.push(0,0);
  22.     uvts.push(0,0,0);
  23.     sorted.push(new Vector3D());
  24. }
  25. points3D.fixed = true;
  26. points2D.fixed = true;
  27. uvts.fixed = true;
  28. var p:PerspectiveProjection = new PerspectiveProjection();
  29. var proj:Matrix3D = p.toMatrix3D();
  30. var rx:Number = 0, ry:Number = 0;
  31. addEventListener(Event.ENTER_FRAME, onLoop);
  32. function onLoop(evt:Event):void {
  33.     var i:int, j:int;
  34.     m.identity();
  35.     if (key[Keyboard.RIGHT]){
  36.         rx+=3
  37.     }else
  38.     if (key[Keyboard.LEFT]){
  39.         rx-=3
  40.     }else
  41.     if (key[Keyboard.UP]){
  42.         ry-=3
  43.     }else
  44.     if (key[Keyboard.DOWN]){
  45.         ry+=3
  46.     }
  47.     m.appendRotation(rx, Vector3D.Y_AXIS);
  48.     m.appendRotation(ry, Vector3D.X_AXIS);
  49.     m.appendTranslation(0, 0, 1000);
  50.     m.append(proj);
  51.     Utils3D.projectVectors(m, points3D, points2D, uvts);
  52.     for (i = 0, j = 0; i<points2D.length; i+=2, j++){
  53.         sorted[j].x = points2D[i] + hsw;
  54.         sorted[j].y = points2D[i + 1] + hsh;
  55.         sorted[j].z = uvts[j * 3 + 2];
  56.     }
  57.     sorted.sortOn("z", Array.NUMERIC);
  58.     graphics.clear();
  59.     graphics.lineStyle(2, 0x000000, 0.1);
  60.     for(i = 0; i<sorted.length; i++){
  61.         var zpos:Number = sorted[i].z * 12000;
  62.         var c:int = zpos * 14;
  63.         c = (c> 255) ? 255 : c;
  64.         graphics.beginFill(100<<16 | 100 <<8 |c);
  65.         graphics.drawCircle(sorted[i].x, sorted[i].y,zpos);
  66.         graphics.endFill();
  67.     }
  68. }
  69.  
  70. // permanently applies the matrix to the points3D vector
  71. function applyTransform():void{
  72.     m.identity();
  73.     m.appendRotation(rx, Vector3D.Y_AXIS);
  74.     m.appendRotation(ry, Vector3D.X_AXIS);
  75.     var temp:Vector.<Number> = new Vector.<Number>();
  76.     m.transformVectors(points3D, temp);
  77.     points3D = temp;
  78.     points3D.fixed = true;
  79.     rx = 0, ry = 0;
  80. }
  81.  
  82. // basic key setup
  83. var key:Object = new Object();
  84. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  85. stage.addEventListener(KeyboardEvent.KEY_UP, onKeyReleased);
  86. function onKeyPressed(evt:KeyboardEvent):void {
  87.     key[evt.keyCode] = true;
  88.     key.keyCode = evt.keyCode;
  89. }
  90. function onKeyReleased(evt:KeyboardEvent):void {
  91.   applyTransform();
  92.   key[evt.keyCode] = false;
  93. }

In response to Thomas Francis's question, this snippet takes the Simple z-sorting snippet and shows how one might go about adding some basic key controls to it. It works by permanently applying x and y rotation transformations to the set of 3D points every time a key is released.

Check out the swf...

If you need to be able to rotate on both the x and y axis at the same time - and just need more flexibility... one way to do it would be to use quaternions - which may be tricky - but there are plenty of examples out there in java, processing and C/C++ just waiting to be ported (been on the todo list for some time actually).

Haven't been posting every day because I've been out of the country and away from my computer... have a backlog of snippets that need to be cleaned up and put in the pipeline...

Posted in 3D, Graphics, Vector, keys | Tagged , , | 3 Comments

Simple z-sorting

By Zevan | August 28, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(backgroundColor=0x444444, width=500, height=500)]
  2. var hsw:Number = stage.stageWidth / 2;
  3. var hsh:Number = stage.stageHeight / 2;
  4.  
  5. var pointNum:int = 200;
  6. var points3D:Vector.<Number> = new Vector.<Number>();
  7. var points2D:Vector.<Number> = new Vector.<Number>();
  8. var uvts:Vector.<Number> = new Vector.<Number>();
  9. var sorted:Array = [];
  10.  
  11. var pnt:Point = new Point();
  12. var m:Matrix3D = new Matrix3D();
  13. var v:Vector3D = new Vector3D();
  14. for (var i:int = 0; i<pointNum; i++){
  15.     v.x = Math.random()*400-200;
  16.     m.identity();
  17.     m.appendRotation(Math.random()*360, Vector3D.X_AXIS);
  18.     m.appendRotation(Math.random()*360, Vector3D.Y_AXIS);
  19.     m.appendRotation(Math.random()*360, Vector3D.Z_AXIS);
  20.     v = m.transformVector(v);
  21.     points3D.push(v.x, v.y, v.z);
  22.     points2D.push(0,0);
  23.     uvts.push(0,0,0);
  24.     sorted.push(new Vector3D());
  25. }
  26. points3D.fixed = true;
  27. points2D.fixed = true;
  28. uvts.fixed = true;
  29.  
  30. var p:PerspectiveProjection = new PerspectiveProjection();
  31. var proj:Matrix3D = p.toMatrix3D();
  32.  
  33. var dx:Number = 0, dy:Number = 0;
  34. addEventListener(Event.ENTER_FRAME, onLoop);
  35. function onLoop(evt:Event):void {
  36.     var i:int, j:int;
  37.     dx += (mouseX - dx) / 4;
  38.     dy += (mouseY - dy) / 4;
  39.     m.identity();
  40.     m.appendRotation(dx, Vector3D.Y_AXIS);
  41.     m.appendRotation(dy, Vector3D.X_AXIS);
  42.     m.appendTranslation(0, 0, 1000);
  43.     m.append(proj);
  44.    
  45.     Utils3D.projectVectors(m, points3D, points2D, uvts);
  46.    
  47.     for (i = 0, j = 0; i<points2D.length; i+=2, j++){
  48.         sorted[j].x = points2D[i] + hsw;
  49.         sorted[j].y = points2D[i + 1] + hsh;
  50.         sorted[j].z = uvts[j * 3 + 2];
  51.     }
  52.     sorted.sortOn("z", Array.NUMERIC);
  53.    
  54.     graphics.clear();
  55.     for(i = 0; i<sorted.length; i++){
  56.         var zpos:Number = sorted[i].z * 12000;
  57.         var c:int = zpos * 14;
  58.         graphics.beginFill(c <<16 | c <<8 | c);
  59.         graphics.drawCircle(sorted[i].x, sorted[i].y,zpos);
  60.         graphics.endFill();
  61.     }
  62. }

Here is an easy way to do z-sorting on a cluster of circles.


Have a look at the swf over at wonderfl...

Posted in 3D, Graphics, Vector, sortOn | Tagged , , | 5 Comments