{"id":394,"date":"2009-09-01T01:16:24","date_gmt":"2009-09-01T08:16:24","guid":{"rendered":"https:\/\/actionsnippet.com\/?p=2092"},"modified":"2009-09-01T01:16:24","modified_gmt":"2009-09-01T08:16:24","slug":"more-z-sorting","status":"publish","type":"post","link":"https:\/\/actionsnippet.com\/?p=394","title":{"rendered":"More z-sorting"},"content":{"rendered":"
\r\n[SWF(width = 500, height=500, backgroundColor = 0x333333)]\r\nx = stage.stageWidth \/ 2;\r\ny = stage.stageHeight \/ 2;\r\n\r\n\r\nvar polyNum:int = 3000;\r\n\/\/ standard Vectors for using drawTriangles\r\nvar verts:Vector.<Number> = new Vector.<Number>();\r\nvar pVerts:Vector.<Number>;\r\nvar uvts:Vector.<Number> = new Vector.<Number>();\r\nvar indices:Vector.<int> = new Vector.<int>();\r\n\/\/ needed for z-sorting\r\nvar sortedIndices:Vector.<int>;\r\nvar faces:Array = [];\r\n\r\n\/\/ we'll use this for tranforming points\r\n\/\/ and as the transormation matrix for our render\r\nvar m:Matrix3D = new Matrix3D();\r\n\r\n\/\/ plot a poly\r\nvar poly:Vector.<Number>;\r\npoly = Vector.<Number>([ 0, 0, 0,\r\n\t\t\t\t\t    10, 0, 0,\r\n\t\t\t\t\t    0,10, 0]);\r\n\r\n\/\/ temp vect for any transformed polygons\r\nvar transPoly:Vector.<Number> = new Vector.<Number>();\r\n\r\nvar i:int;\r\nvar inc:int = 0;\r\nfor (i = 0; i<polyNum; i++){\r\n\tm.identity();\r\n\tvar s:Number = (int(Math.random()*50) == 1) ? 4 + Math.random()*2 : 1 + Math.random() * 2;\r\n\tm.appendScale(s, s, 1);\r\n\tm.appendRotation(Math.random()*360, Vector3D.X_AXIS);\r\n\tm.appendRotation(Math.random()*360, Vector3D.Y_AXIS);\r\n\tm.appendRotation(Math.random()*360, Vector3D.Z_AXIS);\r\n\tm.appendTranslation(200,0,0);\r\n\t\t\t\t\t\t \r\n\tm.appendRotation(Math.random()*360, Vector3D.X_AXIS);\r\n\tm.appendRotation(Math.random()*360, Vector3D.Y_AXIS);\r\n\tm.appendRotation(Math.random()*360, Vector3D.Z_AXIS);\r\n\t\r\n\tm.transformVectors(poly, transPoly);\r\n\t\r\n\tverts = verts.concat(transPoly);\r\n\tfaces.push(new Vector3D());\r\n\tindices.push(inc++, inc++, inc++);\r\n\tuvts.push(Math.random(), Math.random(), 0, Math.random(), Math.random(), 0, Math.random(), Math.random(), 0);\r\n}\r\n\r\nsortedIndices = new Vector.<int>(indices.length, true);\r\n\r\n\/\/ create texture\r\nvar tex:BitmapData = new BitmapData(400,400,false, 0x000000);\r\nvar grad:Shape = new Shape();\r\nvar mat:Matrix = new Matrix();\r\nmat.createGradientBox(400,400,0,0,0);\r\nwith (grad.graphics){\r\n\tbeginGradientFill(GradientType.LINEAR, [0x000000, 0xAA0000, 0xFFFF00], [1, 1, 1], [20, 200, 255], mat);\r\n\tdrawRect(0,0,400,400);\r\n}\r\ntex.draw(grad);\r\n\r\n\/\/ create background\r\nmat.createGradientBox(1600,1000,0,-550, -100);\r\nwith (grad.graphics){\r\n\tbeginGradientFill(GradientType.RADIAL, [0x333333, 0xffffff], [1, 1], [0, 255], mat);\r\n\tdrawRect(0,0,500,500);\r\n}\r\ngrad.x = -stage.stageWidth\/2\r\ngrad.y = -stage.stageHeight\/2;\r\naddChild(grad);\r\n\r\n\/\/ triangles will be drawn to this\r\nvar render:Shape = Shape(addChild(new Shape()));\r\n\r\n\/\/ fix all vector lengths\r\nverts.fixed = true, uvts.fixed = true, indices.fixed = true\r\npVerts = new Vector.<Number>(verts.length\/3 * 2, true); \r\n\r\n\/\/ we need these if we want perspective\r\nvar persp:PerspectiveProjection = new PerspectiveProjection();\r\npersp.fieldOfView = 45;\r\n\/\/ projection matrix\r\nvar proj:Matrix3D = persp.toMatrix3D();\r\n\r\nvar dx:Number = 0, dy:Number = 0;\r\naddEventListener(Event.ENTER_FRAME, onLoop);\r\nfunction onLoop(evt:Event):void {\r\n\tdx += (mouseX - dx) \/ 4;\r\n\tdy += (mouseY - dy) \/ 4;\r\n\tm.identity();\r\n\tm.appendRotation(dy, Vector3D.X_AXIS);\r\n\tm.appendRotation(dx, Vector3D.Y_AXIS);\r\n\t\/\/ push everything back so its not to close\r\n\tm.appendTranslation(0,0,800);\r\n\t\/\/ append the projection matrix at the end\r\n\tm.append(proj);\r\n\t\r\n\tUtils3D.projectVectors(m, verts, pVerts, uvts);\r\n\t\r\n\tvar face:Vector3D;\r\n\tinc = 0;\r\n\tfor (var i:int = 0; i<indices.length; i+=3){\r\n\t\tface = faces[inc];\r\n\t\tface.x = indices[i];\r\n\t\t\/\/ it may look odd, but casting to an int \r\n\t\t\/\/ when doing operations inside array sytnax\r\n\t\t\/\/ adds a big speed boost\r\n\t\tface.y = indices[int(i + 1)];\r\n\t\tface.z = indices[int(i + 2)];\r\n\t\tvar i3:int = i * 3;\r\n\t\t\/\/ get the average z position (t value) and store it in the Vector3D w property\r\n\t\t\/\/ depending on your model, you may not need to do an average of all 3 values\r\n\t\tface.w = (uvts[int(i3 + 2)] + uvts[int(i3 + 5)] + uvts[int(i3 + 8)]) * 0.333333;\r\n\t\tinc++;\r\n\t}\r\n\t \r\n\t\/\/ sort on w, so far this beats all other sorting methods for speed,\r\n\t\/\/ faster than Vector.sort(), faster than any custom sort method I could find\r\n\tfaces.sortOn("w", Array.NUMERIC);\r\n\r\n\t\/\/ re-order indices so that faces are drawn in the correct order (back to front);\r\n\tinc = 0;\r\n\tfor each (face in faces){\r\n\t\tsortedIndices[inc++] = face.x;\r\n\t\tsortedIndices[inc++] = face.y;\r\n\t\tsortedIndices[inc++] = face.z;\r\n\t}\r\n\t\r\n\trender.graphics.clear();\r\n\trender.graphics.beginBitmapFill(tex, null, false, false);\r\n\trender.graphics.drawTriangles(pVerts, sortedIndices, uvts, TriangleCulling.NONE);\r\n}\r\n<\/pre>\n
This is a slightly more advanced version of the z-sorting demo from yesterday<\/a>. Here 3000 polygons are randomly arranged in a sphere formation…<\/p>\n

\nHave a look at the swf…<\/p>\n
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
[SWF(width = 500, height=500, backgroundColor = 0x333333)] x = stage.stageWidth \/ 2; y = stage.stageHeight \/ 2; var polyNum:int = 3000; \/\/ standard Vectors for using drawTriangles var verts:Vector.<Number> = new Vector.<Number>(); var pVerts:Vector.<Number>; var uvts:Vector.<Number> = new Vector.<Number>(); var indices:Vector.<int> = new Vector.<int>(); \/\/ needed for z-sorting var sortedIndices:Vector.<int>; var faces:Array = []; \/\/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[101,33,118,94,79],"tags":[3,14,129,4,49],"class_list":["post-394","post","type-post","status-publish","format-standard","hentry","category-3d","category-graphics","category-matrix","category-misc","category-vector","tag-actionscript","tag-as3","tag-drawtriangles","tag-flash","tag-z-sorting"],"_links":{"self":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=394"}],"version-history":[{"count":0,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=\/wp\/v2\/posts\/394\/revisions"}],"wp:attachment":[{"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/actionsnippet.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}