<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Promethe's Blog &#187; ActionScript 3.0</title>
	<atom:link href="http://blog.promethe.net/tag/actionscript-30/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.promethe.net</link>
	<description>Web, RIAs and chocolate spaghettis...</description>
	<lastBuildDate>Tue, 29 Jun 2010 09:24:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>Pixel shader demo using Flash 10, Pixel Bender and Minko</title>
		<link>http://blog.promethe.net/2010/06/09/pixel-shader-demo-using-flash-10-pixel-bender-and-minko/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=pixel-shader-demo-using-flash-10-pixel-bender-and-minko</link>
		<comments>http://blog.promethe.net/2010/06/09/pixel-shader-demo-using-flash-10-pixel-bender-and-minko/#comments</comments>
		<pubDate>Wed, 09 Jun 2010 12:42:47 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Aerys]]></category>
		<category><![CDATA[Minko]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[Flash 10]]></category>
		<category><![CDATA[Flash 10.1]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=770</guid>
		<description><![CDATA[I'm really excited to announce Minko (which is, by the way, the final name for my 3D library) has reached a new level: pixel shader integration! Pixel shaders are little programs that run on each pixel and can modify their final color. They are often written in C-like languages and in this precise case we [...]]]></description>
			<content:encoded><![CDATA[<p>I'm really excited to announce Minko (which is, by the way, the final name for my 3D library) has reached a new level: pixel shader integration! Pixel shaders are little programs that run on each pixel and can modify their final color. They are often written in C-like languages and in this precise case we use Pixel Bender, the shader language introduced with Flash 10.</p>
<p>In this post I will:</p>
<ul>
<li>Explain how any 3D scene is built when using Minko</li>
<li>Explain how pixel shaders are integrated in the 3D scene</li>
<li>Explain how pixel shaders are built using Pixel Bender</li>
<li>Show you a very simple demo of the kind of effects pixel shaders will provide</li>
<li>Explain how the demo was built</li>
</ul>
<p>Here are a two screenshots to show the results:</p>
<div id="attachment_824" class="wp-caption aligncenter" style="width: 650px"><a href="http://blog.promethe.net/wp-content/uploads/2010/06/minko_lamborghini.jpg" rel="shadowbox[post-770];player=img;"><img class="size-full wp-image-824 " title="minko_lamborghini" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_lamborghini.jpg" alt="" width="640" height="360" /></a><p class="wp-caption-text">Phong shading + spheric environment mapping on a 2700+ polygons Lamborghini</p></div>
<div id="attachment_782" class="wp-caption aligncenter" style="width: 508px"><a href="http://blog.promethe.net/wp-content/uploads/2010/06/minko_phong_1.jpg" rel="shadowbox[post-770];player=img;"><img class="size-full wp-image-782 " title="minko_phong_1" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_phong_1.jpg" alt="" width="498" height="373" /></a><p class="wp-caption-text">Phong shading + spheric environment mapping demo</p></div>
<p><span id="more-770"></span></p>
<h4>The Scene Graph API</h4>
<p>This API is used to build and manage the 3D scene. Scene graph is the most common data-structure used to build 3D scenes. It is simple to understand and both memory wise and CPU efficient. To explain what the scene graph is, start thinking about Flash's display list. In ActionScript 3.0, the display list is actually a tree. The root of the tree is the Stage and you can add multiple children to it. Each child can be a leaf, such as a Bitmap object, or a container such as a Sprite. One of the limitations of a tree is that every node can have multiple children but each child can have only one parent. This property is what makes it look like a tree: branches (and leaves for that matter...) have only one parent branch.</p>
<p>A direct consequence of that paradigm is that if you want 20 red circles, you will have to create 20 red circles and add them to the display tree. Despite the fact that those 20 red circles will be exactly the same you will still have to create and add all of them to the display tree. Thus, you will use 19 times more memory than what is actually needed. That's where the graph kicks in...</p>
<p>A graph is just like a tree except every node can have multiple parents. You can see graphs as a generalization of trees. But you can also say that trees are particular graphs where each node can have only one parent. Anyway, we can now create one red circle and use it as many times as we need! To understand how this apply to a 3D scene, lets consider the following rendering:</p>
<p><a href="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph_demo.jpg" rel="shadowbox[post-770];player=img;"><img class="aligncenter size-full wp-image-771" title="minko_scene_graph_demo" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph_demo.jpg" alt="" width="413" height="308" /></a></p>
<p>And here is the corresponding scene graph:</p>
<p><a href="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph.jpg" rel="shadowbox[post-770];player=img;"><img class="aligncenter size-medium wp-image-786" title="minko_scene_graph" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph-300x176.jpg" alt="" width="300" height="176" /></a></p>
<p>There are five things to notice:</p>
<ol>
<li>The figure doesn't show the whole graph (I removed the camera and materials).</li>
<li><strong>The Scene Graph API is all about interfaces</strong>. You can add new features to the API and still extend the classes you need/want (ie. EventDispatcher).</li>
<li>The CubeMesh.cubeMesh, SquareMesh.squareMesh and SphereMesh.sphereMesh nodes, which contain the primitives geometry, exist only once each but are used by many IDisplayObject3D. Therefore there is <strong>no useless memory consumption</strong>! The same can be done with any node in the graph: containers, display objects, materials, etc...</li>
<li>The orange circled <strong>nodes apply a (3D) transformation to their children</strong>, just like Flash containers apply (2D) transformations to their own children.</li>
<li><strong>Z-Sorting is here enabled by two different technics</strong>: the <strong>drawing order</strong> (which is pretty much the same as in a classic-2D-Flash display tree) and the <strong>DepthSortContainer3D</strong> node. This node takes care of z-sorting by sorting its children using their average depth. This way, <strong>z-sorting occurs only when needed</strong> and only on relevant geometry.</li>
</ol>
<p>There a lot to explain about the Scene Graph API! But the main point is to understand how it compares to Flash's display tree and what benefits it provides: <strong>lower memory consumption and powerful scene building</strong>. You are likely to need to find a way to fit in the Scene Graph API anytime you want to extend Minko to add a new feature. In this precise case I will talk about how pixel shaders fits in.</p>
<h4>Pixel shader integration</h4>
<p>The first step is to find "where" in the graph your new feature will be used. Close to the scene "root" you will more likely find containers. And the "leaves" are often more tangible objects such as a materials or meshes. A pixel shader is some kind of a material so that's where we should start looking!</p>
<p>In the Scene Graph API, there is a special way to handle materials: the "<strong>material stack</strong>". It's a part of the graph - a subgraph really - that looks very much like a stack because every node uses an "underlaying" material node. Lets consider the orange box from the previous example:</p>
<p><a href="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph_material.jpg" rel="shadowbox[post-770];player=img;"><img class="aligncenter size-full wp-image-790" title="minko_scene_graph_material" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph_material.jpg" alt="" width="424" height="348" /></a></p>
<p>This figure shows the orange cube subgraph. On this graph I added the material nodes to demonstrate how the material stack works. In this precise case, the stack is made of a WireframeMaterial node and a SolidMaterial node. The first one provides a wireframe rendering and the second one is a solid fill. When rendering, <strong>the resulting graphics operations will be the list of all the graphics instructions outputed by each node of the stack</strong>. Thus, we will here obtain an (orange) solid fill with a (purple) wireframe. So where does the pixel shader fits in the material stack? Well you might have noticed there are two different kinds of nodes in the material stack:</p>
<ol>
<li>the bottom of the stack is more likely to be a "<strong>base material</strong>", like a solid fill or a texture</li>
<li>and the rest of the stack will be mainly "<strong>modifiers</strong>". In the case of the orange cube, the WireframeMaterial node acts as a modifier for the SolidMaterial node</li>
</ol>
<p><strong>Our pixel shader material will be a modifier</strong> because it will work on an underlaying texture. Now we know our pixel shader material should be on the top of the material stack we have to know what data it needs and how to provide it!</p>
<h4>Pixel shader creation using Pixel Bender</h4>
<p>A pixel shader works at the pixel level (true story). Therefore, <strong>we need per-pixel data</strong>. But because we use Flash's drawing API we don't have a direct access to the actual pixels (I'm oversimplifying but that's the idea). The trick is to <strong>work on the material BitmapData itself rather than the screen pixels</strong>. Thus, I will now talk about "<strong>texels</strong>" (texture pixels) rather than pixels (so I guess it should be called a "texel shader" then...). Anyway, <strong>our shader will then most certainly always need three inputs</strong>:</p>
<ol>
<li>The color of each texel, also called a "<strong>diffuse map</strong>" or... a texture. Any material will do the trick (we can get a BitmapData out of any material).</li>
<li>The position of each texel, also called a "<strong>position map</strong>".</li>
<li>The normal of each texel, also called a "<strong>normal map</strong>".</li>
</ol>
<p>The position map will be generated at runtime. It is mainly a BitmapData where <strong>each pixel stores the (x, y, z) values of the position</strong> of the corresponding texel instead of an (r, g, b) color value. The normal map can be generated at runtime. It can also be any material as long as it provides a relevant BitmapData. This BitmapData stores <strong>the (nx, ny, nz) values of the normal</strong> of the corresponding texel. Here is an example:</p>
<p><a href="http://blog.promethe.net/wp-content/uploads/2010/06/minko_maps_generation.jpg" rel="shadowbox[post-770];player=img;"><img class="aligncenter size-medium wp-image-777" title="minko_maps_generation" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_maps_generation-300x85.jpg" alt="" width="300" height="85" /></a></p>
<p>In this example both the normal and the position maps have been generated using Minko's NormalMap and PositionMap classes. This picture is actually a screenshot of a demo Flash application. I wont talk too much about this generation step for now, but its done using Pixel Bender and its lighting fast!</p>
<p>In order to make this data available to any pixel shader, the diffuse, normal and position maps are stored in a one-and-only scene graph node: the <strong>PixelMaterial</strong>. This node will then provide <strong>per-texel data access</strong> to its modifiers. We can now implement a real pixel shader on top of any PixelMaterial! Everything we need now is a <strong>Pixel Bender kernel that takes our 3 maps (diffuse, position and normal) in input</strong>.</p>
<p>The following Pixel Bender filter performs <a href="http://en.wikipedia.org/wiki/Phong_shading" target="_blank">Phong shading</a>:</p>

<div class="wp_syntax"><div class="code"><pre class="pixelbender" style="font-family:monospace;"><span style="color: #0033ff;">void</span>
<span style="color: #0033ff; font-weight: bold;">evaluatePixel</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>
<span style="color: #000000;">&#123;</span>
        <span style="color: #0033ff;">float2</span> o <span style="color: #000000; font-weight: bold;">=</span> <span style="color: #333333;">outCoord</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span>;
        <span style="color: #0033ff;">float3</span> position <span style="color: #000000; font-weight: bold;">=</span> <span style="color: #333333;">sampleNearest</span><span style="color: #000000;">&#40;</span>positionMap, o<span style="color: #000000;">&#41;</span>;
        <span style="color: #0033ff;">float3</span> normal <span style="color: #000000; font-weight: bold;">=</span> <span style="color: #333333;">sampleNearest</span><span style="color: #000000;">&#40;</span>normalMap, o<span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">*</span> 2. <span style="color: #000000; font-weight: bold;">-</span> ONE;
        <span style="color: #0033ff;">float3</span> light <span style="color: #000000; font-weight: bold;">=</span> <span style="color: #333333;">normalize</span><span style="color: #000000;">&#40;</span>light <span style="color: #000000; font-weight: bold;">-</span> position<span style="color: #000000;">&#41;</span>;
&nbsp;
        <span style="color: #009900;">// ambient</span>
        <span style="color: #0033ff;">float</span> l <span style="color: #000000; font-weight: bold;">=</span> ambient <span style="color: #000000; font-weight: bold;">*</span> intensity;
&nbsp;
        <span style="color: #009900;">// diffuse</span>
        l <span style="color: #000000; font-weight: bold;">+=</span> <span style="color: #333333;">max</span><span style="color: #000000;">&#40;</span>0., <span style="color: #333333;">dot</span><span style="color: #000000;">&#40;</span>light, normal<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">*</span> diffuse <span style="color: #000000; font-weight: bold;">*</span> intensity;
&nbsp;
        dst <span style="color: #000000; font-weight: bold;">=</span> <span style="color: #333333;">sampleNearest</span><span style="color: #000000;">&#40;</span>diffuseMap, o<span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">*</span> <span style="color: #0033ff;">float4</span><span style="color: #000000;">&#40;</span>l, l, l, 1.<span style="color: #000000;">&#41;</span>;
<span style="color: #000000;">&#125;</span></pre></div></div>

<p>As you can see its really straight forward. This is due to the Scene Graph API which makes it possible to <strong>do every computation in local space</strong>. Therefore we don't have to care about where those computations happen in the 3D scene.</p>
<h4>Demo</h4>
<p><a href="http://en.wikipedia.org/wiki/Phong_shading" target="_blank">Phong shading</a> or <a href="http://en.wikipedia.org/wiki/Reflection_mapping" target="_blank">reflection mapping</a> are great examples of pixel shaders. The following demo uses both (the white diamond stands for the light source):</p>
<div id="attachment_779" class="wp-caption aligncenter" style="width: 648px"><a href="http://blog.promethe.net/wp-content/uploads/2010/06/PixelShaderDemo.swf" rel="shadowbox[post-770];width=640;height=385;"><img class="size-full wp-image-779 " title="minko_phong_cubic" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_phong_cubic.jpg" alt="" width="638" height="359" /></a><p class="wp-caption-text">Phong shading + spheric environment mapping demo</p></div>
<div id="attachment_797" class="wp-caption aligncenter" style="width: 310px"><a href="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph_phong_spheric.jpg" rel="shadowbox[post-770];player=img;"><img class="size-medium wp-image-797 " title="minko_scene_graph_phong_spheric" src="http://blog.promethe.net/wp-content/uploads/2010/06/minko_scene_graph_phong_spheric-300x229.jpg" alt="" width="300" height="229" /></a><p class="wp-caption-text">Phong shading + spheric environment mapping scene graph</p></div>
<p style="text-align: left;">And to put it in a nutshell, a few performances considerations:</p>
<ul>
<li>Everything is done in <strong>real time</strong>.</li>
<li>Thanks to the Scene Graph API, <strong>every computation is done in local space</strong>. It avoids matrix multiplications by the thousand and gives a significant performance boost.</li>
<li>The application takes <strong>less than 20Mb of memory</strong> and weights less than 100Kb.</li>
<li>There are a total of <strong>6 pixel shaders run at each frame</strong> (only the visible faces materials are computed and there are 2 shaders per face).</li>
<li>Those shaders work on <strong>128*128 pixels diffuse/normal/position maps</strong></li>
<li>That's a total of <strong>98,304 pixels per frame</strong></li>
<li>Each frame is <strong>"processed" in an average of 10ms.</strong> (Core2 Duo U9400 @ 1.4Ghz, Flash 10.1 RC7, Chrome 5)</li>
<li>That's <strong>9,830,400 pixels per second!</strong></li>
<li>There is a <strong>~30% performance boost with Flash 10.1 RC7</strong></li>
<li><strong>The number of triangles does not impact the performances</strong></li>
<li>Do not hesitate to post your own results (with your configuration of course)! <img src='http://blog.promethe.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </li>
</ul>
<p style="text-align: left;">
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2010/06/09/pixel-shader-demo-using-flash-10-pixel-bender-and-minko/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>Apple makes its own compiler&#8230; illegal!</title>
		<link>http://blog.promethe.net/2010/04/09/apple-makes-its-own-compiler-illegal/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=apple-makes-its-own-compiler-illegal</link>
		<comments>http://blog.promethe.net/2010/04/09/apple-makes-its-own-compiler-illegal/#comments</comments>
		<pubDate>Fri, 09 Apr 2010 11:21:51 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Aerys]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[Apple]]></category>
		<category><![CDATA[Flash-to-iPhone packager]]></category>
		<category><![CDATA[iPad]]></category>
		<category><![CDATA[iPhone]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=715</guid>
		<description><![CDATA[﻿"3.3.1 … Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.promethe.net/wp-content/uploads/2010/04/demotivator_compiling.jpg" rel="shadowbox[post-715];player=img;"><br />
<img class="aligncenter size-medium wp-image-717" title="demotivator_compiling" src="http://blog.promethe.net/wp-content/uploads/2010/04/demotivator_compiling-300x235.jpg" alt="" width="300" height="235" /></a></p>
<p><em>﻿"3.3.1 … Applications must be originally written in Objective-C, C, C++, or JavaScript as executed by the iPhone OS WebKit engine, and only code written in C, C++, and Objective-C may compile and directly link against the Documented APIs (e.g., Applications that link to Documented APIs through an intermediary translation or compatibility layer or tool are prohibited)."</em></p>
<p>This is the very bad (sad) addition (restriction) to the iPhone developers program everyone is talking about right now. And I feel very concerned about this... and now everyone is wondering if software like the Flash-to-iPhone packager, Mono or Unity are definitely banned from the iPhone programming tool-chain.</p>
<p>I never talked about it before, but Aerys is working on a project targeting the iPhone and the iPad (among a lot of other platforms). And this very project is leveraged by some home-made code generation tool. Therefore, we are very scared of what this kind of restrictions might imply for our business.</p>
<p>But as scary as this statement might look at first, it is actually even funnier when you understand it makes any iPhone/iPad application illegal. And it gets even better because even Apple's standard tool-chain finds itself... prohibited!</p>
<p>The reason is very simple: Objective-C, C or C++ never "link" to any library providing the Documented iPhone APIs. Objective-C, C or C++ actually never link to anything. When compiling your code, the compiler creates an intermediary representation of your program in order to make it easier to (eventually cross-)compile it. In the case of GCC, the compiler used to build such applications, those intermediary languages are:</p>
<ul>
<li>﻿the historical <a title="Register Transfer Language" href="http://en.wikipedia.org/wiki/Register_Transfer_Language">Register Transfer Language</a> (RTL)</li>
<li>the tree language <a title="GENERIC" href="http://en.wikipedia.org/wiki/GENERIC">GENERIC</a></li>
<li>the <a title="Static single assignment form" href="http://en.wikipedia.org/wiki/Static_single_assignment_form">SSA</a>-based <a title="GIMPLE" href="http://en.wikipedia.org/wiki/GIMPLE">GIMPLE</a></li>
</ul>
<p>(Source: <a href="http://en.wikipedia.org/wiki/Intermediate_language" target="_blank">Wikipedia - Intermediate language</a>)</p>
<p><strong>This very intermediate representation is built</strong> before the symbols resolution and <strong>before any linking is done</strong>. Thus, linking against the "Documented APIs" has always been done "through an intermediary translation or compatibility layer". And it won't change anytime soon! But, still, <strong>I wish good luck to Apple's engineers in their future work to patch GCC and make it "compliant" (sic!)</strong>.</p>
<p>To me, it is the most obvious sign that Apple doesn't care about its developers (but I was still pretty thrilled to eventually become one of them about a few days ago...). Not because it bannishes any interesting cross-compiling software venture. And not even because any iPhone/iPad developper who knows about other platforms openness and ease of production will feel sick just by reading this kind of restrictions.</p>
<p>No. To me, Apple is losing it all simply because this kind of idiocy can only be written by someone who doesn't have a clue about how a computer/compiler works! Apple started building casual devices and ends up targeting casual developers. Could this be the first sign of how (so called) intuitiveness - when enforced by completely hermeticly closed devices - finally makes people... dumber? So now the real question is "<strong>What happens when your developers program EULA is written by a marketing control-freak moron?</strong>".</p>
<p><em>PS : The title of this article was desgined to attract the eye. It is my interpretation of the latest Apple's developers program EULA additions and I might be completely off or wrong. Anyway, the doubt and worry caused by this very fuzzy and unclear addition stands as a major issue for all the companies and developers targeting the iPhone and iPad platforms.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2010/04/09/apple-makes-its-own-compiler-illegal/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>AS3 Monitor released on Google Code</title>
		<link>http://blog.promethe.net/2010/04/01/as3-monitor-released-on-google-code/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=as3-monitor-released-on-google-code</link>
		<comments>http://blog.promethe.net/2010/04/01/as3-monitor-released-on-google-code/#comments</comments>
		<pubDate>Thu, 01 Apr 2010 17:22:01 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Aerys]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=683</guid>
		<description><![CDATA[I just released a small but useful piece of software on Google Code: my ActionScript 3.0 Monitor class. This little class makes it possible to watch the properties of any object directly on the stage. It was inspired by Mr. Doob's Stats class. But my Monitor class is entirely dynamic and you can watch any [...]]]></description>
			<content:encoded><![CDATA[<p>I just released a small but useful piece of software on Google Code: my ActionScript 3.0 Monitor class. This little class makes it possible to watch the properties of any object directly on the stage.</p>
<p>It was inspired by <a href="http://code.google.com/p/mrdoob/wiki/stats" target="_blank">Mr. Doob's Stats class</a>. But my Monitor class is entirely dynamic and you can watch any property of any object.</p>
<p>The following simple (and useless?) code sample show how to track the (x, y) position of the mouse cursor on the stage:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package
<span style="color: #66cc66;">&#123;</span>
  <span style="color: #0066CC;">import</span> aerys.<span style="color: #006600;">monitor</span>.<span style="color: #006600;">Monitor</span>;
&nbsp;
  <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
&nbsp;
  <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MonitorDemo <span style="color: #0066CC;">extends</span> Sprite
  <span style="color: #66cc66;">&#123;</span>
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> MonitorDemo<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
    <span style="color: #66cc66;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">var</span> monitor : Monitor	= <span style="color: #000000; font-weight: bold;">new</span> Monitor<span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">30</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
      monitor.<span style="color: #0066CC;">watch</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">stage</span>, <span style="color: #ff0000;">&quot;mouseX&quot;</span>, 0xff0000, 1. <span style="color: #66cc66;">/</span> <span style="color: #0066CC;">stage</span>.<span style="color: #006600;">stageWidth</span><span style="color: #66cc66;">&#41;</span>;
      monitor.<span style="color: #0066CC;">watch</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">stage</span>, <span style="color: #ff0000;">&quot;mouseY&quot;</span>, 0x008800, 1. <span style="color: #66cc66;">/</span> <span style="color: #0066CC;">stage</span>.<span style="color: #006600;">stageHeight</span><span style="color: #66cc66;">&#41;</span>;
      addChild<span style="color: #66cc66;">&#40;</span>monitor<span style="color: #66cc66;">&#41;</span>;
    <span style="color: #66cc66;">&#125;</span>
  <span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>And here is the result:</p>
<p><a href="http://blog.promethe.net/wp-content/uploads/2010/04/MonitorDemo.swf" rel="shadowbox[monitor];width=500;height=375;options={flashParams: {wmode:'opaque'}}"><img src="http://blog.promethe.net/wp-content/uploads/2010/04/aerys_monitor_demo.jpg" alt="" title="aerys_monitor_demo" width="516" height="433" class="aligncenter size-full wp-image-688" /></a></p>
<p>Here is another simple use case: tracking the (x, y, z) rotation of a 3D camera (<b>the actual application is available on <a href="http://aerys.in" target="_blank">the official Aerys website</a></b>):</p>
<p><a href="http://blog.promethe.net/wp-content/uploads/2010/04/aerys_monitor.jpg" rel="shadowbox[post-683];player=img;"><img src="http://blog.promethe.net/wp-content/uploads/2010/04/aerys_monitor-300x224.jpg" alt="" title="aerys_monitor" width="300" height="224" class="aligncenter size-medium wp-image-705" /></a></p>
<p>The code is open source and <a href="http://code.google.com/p/aerys-monitor/" target="_blank">available on Google Code</a>. Comments and suggestions would be greatly appreciated!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2010/04/01/as3-monitor-released-on-google-code/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>AIR 2.0 HTTP Web Server</title>
		<link>http://blog.promethe.net/2009/12/17/air-2-0-http-web-server/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=air-2-0-http-web-server</link>
		<comments>http://blog.promethe.net/2009/12/17/air-2-0-http-web-server/#comments</comments>
		<pubDate>Thu, 17 Dec 2009 10:42:50 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[AIR]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[AIR 2.0]]></category>
		<category><![CDATA[experiment]]></category>
		<category><![CDATA[RIA]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=607</guid>
		<description><![CDATA[AIR 2.0 brings a lot of new features. Among them is the new ServerSocket class. The Socket class exists since Flash 9 and enabled a lot of new client/server applications. But it has always been limited to client side sockets as long as AIR (and the Flash Platform as a whole for that matter) is [...]]]></description>
			<content:encoded><![CDATA[<p>AIR 2.0 brings a lot of new features. Among them is the new ServerSocket class. The Socket class exists since Flash 9 and enabled a lot of new client/server applications. But it has always been limited to client side sockets as long as AIR (and the Flash Platform as a whole for that matter) is concerned. Therefor, this new server socket feature makes it possible to build actual server software using AIR!</p>
<p>Rich of this new and incredible ability, Christophe Coenraets posted a small but yet very powerful <a href="http://coenraets.org/blog/2009/12/air-2-0-web-server-using-the-new-server-socket-api/">code snippet to build an HTTP web server using AIR 2.0</a>!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2009/12/17/air-2-0-http-web-server/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Voice Recognition in Flash 10</title>
		<link>http://blog.promethe.net/2009/12/16/voice-recognition-in-flash-10/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=voice-recognition-in-flash-10</link>
		<comments>http://blog.promethe.net/2009/12/16/voice-recognition-in-flash-10/#comments</comments>
		<pubDate>Wed, 16 Dec 2009 09:59:05 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[demo]]></category>
		<category><![CDATA[Flash 10]]></category>
		<category><![CDATA[Microphone]]></category>
		<category><![CDATA[RIA]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=602</guid>
		<description><![CDATA[The following video demonstrates a new "voice gesture" library targeting the Flash Platform. As you might have guessed, those "voice gestures" are pretty much like "mouse gestures" but they are activated by voice only. I guess it uses some kind of voice learning/recognition algorithm. I can't stress enough how trhilled I am to see this [...]]]></description>
			<content:encoded><![CDATA[<p>The following video demonstrates a new "voice gesture" library targeting the Flash Platform. As you might have guessed, those "voice gestures" are pretty much like "mouse gestures" but they are activated by voice only. I guess it uses some kind of voice learning/recognition algorithm. I can't stress enough how trhilled I am to see this kind of new and powerful software coming to Flash. This enables a whole new kind of usages and applications...</p>
<p><center><br />
<object width="400" height="300"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8203323&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=8203323&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300"></embed></object>
<p><a href="http://vimeo.com/8203323">Voice Gesture</a> from <a href="http://vimeo.com/user2807938">didier.brun</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p></center></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2009/12/16/voice-recognition-in-flash-10/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Frustum Culling in Flash 10</title>
		<link>http://blog.promethe.net/2009/12/13/frustum-culling-in-flash-10/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=frustum-culling-in-flash-10</link>
		<comments>http://blog.promethe.net/2009/12/13/frustum-culling-in-flash-10/#comments</comments>
		<pubDate>Sun, 13 Dec 2009 15:43:05 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Snippets]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[experiment]]></category>
		<category><![CDATA[Flash 10]]></category>
		<category><![CDATA[tutorial]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=558</guid>
		<description><![CDATA[Update: corrected a few glitches in the bounding sphere creation routine. Optimization is always important. But when it comes to 3D for the Flash Platform, it's an everyday battle. The first ideas that come to mind are to avoid: redrawing the same regions : each pixel value must be set once and only once rendering [...]]]></description>
			<content:encoded><![CDATA[<p><strong><span style="color:#ff0000">Update:</span></strong> corrected a few glitches in the bounding sphere creation routine.</p>
<p>Optimization is always important. But when it comes to 3D for the Flash Platform, it's an everyday battle. The first ideas that come to mind are to avoid:</p>
<ol>
<li>redrawing the same regions : each pixel value must be set once and only once</li>
<li>rendering invisible objects : objects that are out of sight still take a lot of CPU horsepower</li>
</ol>
<p>While Flash takes care of the first one in its very renderer, the second one is not handled. But that is something we can easily address!</p>
<h4 style="text-align: left;">The Technic</h4>
<p>The method is called "frustum culling". The big picture is that every mesh is approximated using a bounding volume (typically a sphere or a box). If the bounding volume is visible, the corresponding mesh is rendered. The two following pictures show the frustum culling caught in action:</p>
<div id="attachment_569" class="wp-caption aligncenter" style="width: 510px"><a href="http://blog.promethe.net/wp-content/uploads/2009/12/frustum_culling_scene.PNG" rel="shadowbox[post-558];player=img;"><img class="size-full wp-image-569" title="frustum_culling_scene" src="http://blog.promethe.net/wp-content/uploads/2009/12/frustum_culling_scene.PNG" alt="The mesh is visible" width="500" height="375" /></a><p class="wp-caption-text">The mesh is visible: TPS counter indicates 18900 triangles per seconds</p></div>
<div id="attachment_568" class="wp-caption aligncenter" style="width: 510px"><a href="http://blog.promethe.net/wp-content/uploads/2009/12/frustum_culling_acting.PNG" rel="shadowbox[post-558];player=img;"><img class="size-full wp-image-568" title="frustum_culling_acting" src="http://blog.promethe.net/wp-content/uploads/2009/12/frustum_culling_acting.PNG" alt="Frustum culling in action (TPS counter indicates 0!)" width="500" height="375" /></a><p class="wp-caption-text">The mesh is out of sight: frustum culling is acting and TPS counter indicates 0!</p></div>
<p><span id="more-558"></span></p>
<h5>1. The frustum</h5>
<p>First things first: before performing frustum culling, you need to build the frustum! The frustum is the 3D shape that contains everything the camera can see. It's made of 6 planes and looks like a truncated pyramid:</p>
<div id="attachment_563" class="wp-caption aligncenter" style="width: 517px"><a href="http://blog.promethe.net/wp-content/uploads/2009/12/view_frustum.png" rel="shadowbox[post-558];player=img;"><img class="size-full wp-image-563" title="view_frustum" src="http://blog.promethe.net/wp-content/uploads/2009/12/view_frustum.png" alt="The view frustum" width="507" height="302" /></a><p class="wp-caption-text">The view frustum</p></div>
<p>Each plane is defined by a plane equation: ax + by + cz + d, where (a, b, c) is the normal of the plane and d the distance on that normal. The 6 planes must be extracted from one of the Matrix3D object used to define the transform from one space to another (world to camera for example). Here are the 6 plane equations:</p>
<ul>
<li>left: (a = m14 + m11, b = m24 + m21, c = m34 + m31, d = m44 + m41)</li>
<li>right: (a = m14 − m11, b = m24 − m21, c = m34 − m31, d = m44 − m41)</li>
<li>bottom: (a = m14 + m12, b = m24 + m22, c = m34 + m32, d = m44 + m42)</li>
<li>top: (a = m14 − m12, b = m24 − m22, c = m34 − m32, d = m44 − m42)</li>
<li>near: (a = m13, b = m23, c = m33, d = m43)</li>
<li>far: (a = m13, b = m23, c = m33, d = m43)</li>
</ul>
<p>The source matrix you chose defines the coordinates systems of the extracted planes:</p>
<ul>
<li>the projection matrix provides planes in view (or camera) space</li>
<li>the view * projection matrix provides planes in world space</li>
<li>the world * view * projection matrix provides planes in object (or local) space</li>
</ul>
<h5>2. Bounding volumes</h5>
<p>Testing every polygon against the frustum is a very expensive task. In order to speed things up, we will rather test a primitive shape that bounds the mesh: a "bounding volume". Common bounding volumes are spheres or boxes. I'll focus on the first one in the rest of the article.</p>
<p>A bounding sphere is pretty simple to implement: you just need to store the center of the sphere and it's radius. That being said, a BoundingSphere class would just contain the center as a Vector3D and the radius as a Number. When you have all the vertices of a mesh, building the bounding sphere is easy :</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> computeBoundingSphere<span style="color: #000000;">&#40;</span>myVertices <span style="color: #000000; font-weight: bold;">:</span> Vector.<span style="color: #000000; font-weight: bold;">&lt;</span>Number<span style="color: #000000; font-weight: bold;">&gt;</span><span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">:</span> BoundingSphere
<span style="color: #000000;">&#123;</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">min</span> <span style="color: #000000; font-weight: bold;">:</span> Vector3D = <span style="color: #0033ff; font-weight: bold;">new</span> Vector3D<span style="color: #000000;">&#40;</span><span style="color: #004993;">Number</span>.<span style="color: #004993;">MAX_VALUE</span>, <span style="color: #004993;">Number</span>.<span style="color: #004993;">MAX_VALUE</span>, <span style="color: #004993;">Number</span>.<span style="color: #004993;">MAX_VALUE</span><span style="color: #000000;">&#41;</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">max</span> <span style="color: #000000; font-weight: bold;">:</span> Vector3D = <span style="color: #0033ff; font-weight: bold;">new</span> Vector3D<span style="color: #000000;">&#40;</span><span style="color: #004993;">Number</span>.<span style="color: #004993;">MIN_VALUE</span>, <span style="color: #004993;">Number</span>.<span style="color: #004993;">MIN_VALUE</span>, <span style="color: #004993;">Number</span>.<span style="color: #004993;">MIN_VALUE</span><span style="color: #000000;">&#41;</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">length</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">int</span> = myVertices.<span style="color: #004993;">length</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> center <span style="color: #000000; font-weight: bold;">:</span> Vector3D = <span style="color: #0033ff; font-weight: bold;">null</span>;
	<span style="color: #6699cc; font-weight: bold;">var</span> radius <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">Number</span> = <span style="color: #0033ff; font-weight: bold;">null</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> i <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">uint</span> = <span style="color: #000000; font-weight:bold;">0</span>; i <span style="color: #000000; font-weight: bold;">&lt;</span> <span style="color: #004993;">length</span>; i <span style="color: #000000; font-weight: bold;">+</span>= <span style="color: #000000; font-weight:bold;">3</span><span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		<span style="color: #004993;">min</span>.<span style="color: #004993;">x</span> = myVertices <span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">&lt;</span> <span style="color: #004993;">min</span>.<span style="color: #004993;">x</span> <span style="color: #000000; font-weight: bold;">?</span> myVertices<span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">min</span>.<span style="color: #004993;">x</span>;
		<span style="color: #004993;">min</span>.<span style="color: #004993;">y</span> = myVertices <span style="color: #000000;">&#91;</span><span style="color: #004993;">uint</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">&lt;</span> <span style="color: #004993;">min</span>.<span style="color: #004993;">y</span> <span style="color: #000000; font-weight: bold;">?</span> myVertices<span style="color: #000000;">&#91;</span><span style="color: #004993;">int</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">min</span>.<span style="color: #004993;">y</span>;
		<span style="color: #004993;">min</span>.z = myVertices <span style="color: #000000;">&#91;</span><span style="color: #004993;">uint</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">2</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">&lt;</span> <span style="color: #004993;">min</span>.z <span style="color: #000000; font-weight: bold;">?</span> myVertices<span style="color: #000000;">&#91;</span><span style="color: #004993;">int</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">2</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">min</span>.z;
&nbsp;
 		<span style="color: #004993;">max</span>.<span style="color: #004993;">x</span> = myVertices <span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #004993;">max</span>.<span style="color: #004993;">x</span> <span style="color: #000000; font-weight: bold;">?</span> myVertices <span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">max</span>.<span style="color: #004993;">x</span>;
		<span style="color: #004993;">max</span>.<span style="color: #004993;">y</span> = myVertices <span style="color: #000000;">&#91;</span><span style="color: #004993;">uint</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #004993;">max</span>.<span style="color: #004993;">y</span> <span style="color: #000000; font-weight: bold;">?</span> myVertices<span style="color: #000000;">&#91;</span><span style="color: #004993;">int</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">max</span>.<span style="color: #004993;">y</span>;
		<span style="color: #004993;">max</span>.z = myVertices <span style="color: #000000;">&#91;</span><span style="color: #004993;">uint</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">2</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">&gt;</span> <span style="color: #004993;">max</span>.z <span style="color: #000000; font-weight: bold;">?</span> myVertices<span style="color: #000000;">&#91;</span><span style="color: #004993;">int</span><span style="color: #000000;">&#40;</span>i <span style="color: #000000; font-weight: bold;">+</span> <span style="color: #000000; font-weight:bold;">2</span><span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">max</span>.z;
	<span style="color: #000000;">&#125;</span>
&nbsp;
	center = <span style="color: #0033ff; font-weight: bold;">new</span> Vector3D<span style="color: #000000;">&#40;</span><span style="color: #000000;">&#40;</span>myMax.<span style="color: #004993;">x</span> <span style="color: #000000; font-weight: bold;">+</span> myMin.<span style="color: #004993;">x</span><span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">/</span> <span style="color: #000000; font-weight:bold;">2.0</span>, <span style="color: #000000;">&#40;</span>myMax.<span style="color: #004993;">y</span> <span style="color: #000000; font-weight: bold;">+</span> myMin.<span style="color: #004993;">y</span><span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">/</span> <span style="color: #000000; font-weight:bold;">2.0</span>, <span style="color: #000000;">&#40;</span>myMax.z <span style="color: #000000; font-weight: bold;">+</span> myMin.z<span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">/</span> <span style="color: #000000; font-weight:bold;">2.0</span><span style="color: #000000;">&#41;</span>;
        radius = <span style="color: #004993;">Math</span>.<span style="color: #004993;">max</span><span style="color: #000000;">&#40;</span>myMax.<span style="color: #004993;">x</span> <span style="color: #000000; font-weight: bold;">-</span> center.<span style="color: #004993;">x</span>, myMax.<span style="color: #004993;">y</span> <span style="color: #000000; font-weight: bold;">-</span> center.<span style="color: #004993;">y</span>, myMax.z <span style="color: #000000; font-weight: bold;">-</span> center.z,
		          center.<span style="color: #004993;">x</span> <span style="color: #000000; font-weight: bold;">-</span> myMin.<span style="color: #004993;">x</span>, center.<span style="color: #004993;">y</span> <span style="color: #000000; font-weight: bold;">-</span> myMin.<span style="color: #004993;">y</span>, center.z <span style="color: #000000; font-weight: bold;">-</span> myMin.z<span style="color: #000000;">&#41;</span>;	
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #0033ff; font-weight: bold;">new</span> BoundingSphere<span style="color: #000000;">&#40;</span>center, radius<span style="color: #000000;">&#41;</span>;
<span style="color: #000000;">&#125;</span></pre></div></div>

<h5>3. Point to plane distance</h5>
<p>The plane equation (ax + by + cz + d) can be stored as a Vector3D object. Indeed, the Vector3D implements x, y and z but also a w Number attribute. This last one is supposed to store the homogenous coordinate. Nonetheless, we can use those 4 Number attributes to store the (a, b, c, d) values that defines our plane equation.</p>
<p>In order to test whether a bounding volume is inside or outside the frustum, we must be able to compute the distance of this object to the plane. To do so, we use the dot product of the point with the plane normal (which must be normalized first) :</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> planeToPointDistance<span style="color: #000000;">&#40;</span>myPlane <span style="color: #000000; font-weight: bold;">:</span> Vector3D, myPoint <span style="color: #000000; font-weight: bold;">:</span> Vector3D<span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">Number</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #0033ff; font-weight: bold;">return</span> myPlane.<span style="color: #004993;">x</span> <span style="color: #000000; font-weight: bold;">*</span> myPoint.<span style="color: #004993;">x</span> <span style="color: #000000; font-weight: bold;">+</span> myPlane.<span style="color: #004993;">y</span> <span style="color: #000000; font-weight: bold;">*</span> myPoint.<span style="color: #004993;">y</span> <span style="color: #000000; font-weight: bold;">+</span> myPlane.z <span style="color: #000000; font-weight: bold;">*</span> myPoint.z <span style="color: #000000; font-weight: bold;">+</span> myPlane.w;
<span style="color: #000000;">&#125;</span></pre></div></div>

<h5>4. The test function</h5>
<p>Now that our frustum and our bounding volumes are ready, we can add this little test function that checks whether an object is visible or not:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript3" style="font-family:monospace;"><span style="color: #0033ff; font-weight: bold;">public</span> <span style="color: #339966; font-weight: bold;">function</span> testBoundingSphere<span style="color: #000000;">&#40;</span>myPlanes      <span style="color: #000000; font-weight: bold;">:</span> Vector.,
                                   mySphere      <span style="color: #000000; font-weight: bold;">:</span> BoundingSphere<span style="color: #000000;">&#41;</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">Boolean</span>
<span style="color: #000000;">&#123;</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">length</span> <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">int</span> = myPlanes.<span style="color: #004993;">length</span>;
&nbsp;
	<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span><span style="color: #6699cc; font-weight: bold;">var</span> i <span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">uint</span> = <span style="color: #000000; font-weight:bold;">0</span>; i <span style="color: #000000; font-weight: bold;">&lt;</span> <span style="color: #004993;">length</span>; <span style="color: #000000; font-weight: bold;">++</span>i<span style="color: #000000;">&#41;</span>
	<span style="color: #000000;">&#123;</span>
		<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">d</span> 	<span style="color: #000000; font-weight: bold;">:</span> <span style="color: #004993;">Number</span> = planeToPointDistance<span style="color: #000000;">&#40;</span>myPlanes<span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span><span style="color: #000000;">&#41;</span>;
&nbsp;
		<span style="color: #009900;">// bouding sphere is out of the frustum</span>
		<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">d</span> <span style="color: #000000; font-weight: bold;">+</span> mySphere.radius <span style="color: #000000; font-weight: bold;">&lt;</span> <span style="color: #000000; font-weight:bold;">0.0</span><span style="color: #000000;">&#41;</span>
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #0033ff; font-weight: bold;">false</span>;
		<span style="color: #009900;">// bounding sphere is spanning</span>
		<span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span><span style="color: #004993;">d</span> <span style="color: #000000; font-weight: bold;">-</span> mySphere.radius <span style="color: #000000; font-weight: bold;">&lt;</span>= <span style="color: #000000; font-weight:bold;">0.0</span><span style="color: #000000;">&#41;</span>
			<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #0033ff; font-weight: bold;">true</span>;
	<span style="color: #000000;">&#125;</span>
&nbsp;
	<span style="color: #009900;">// bounding sphere is inside the frustum</span>
	<span style="color: #0033ff; font-weight: bold;">return</span> <span style="color: #0033ff; font-weight: bold;">true</span>;
<span style="color: #000000;">&#125;</span></pre></div></div>

<h4>The Experiment</h4>
<p>The following experiment demonstrates frustum culling in action (click on the picture to open the application) :</p>
<div id="attachment_560" class="wp-caption aligncenter" style="width: 510px"><a rel="shadowbox[tekkaman];width=500;height=375]" href="http://blog.promethe.net/wp-content/uploads/2009/12/Tekkaman.swf"><img class="size-full wp-image-560" title="frustum_culling" src="http://blog.promethe.net/wp-content/uploads/2009/12/frustum_culling.png" alt="frustum_culling" width="500" height="375" /></a><p class="wp-caption-text">Frustum culling experiment (use the arrow keys to move)</p></div>
<p style="text-align: left;">Use the arrow keys to move the robot across the scene. You can notice the TPS counter drops down to zero whenever the character is out of sight (on the near left or near right side of the screen). When the TPS indicates 0, no triangles are rendered and CPU usage drops down to 0%. It actually means that the rest of the rendering process has a minimal overhead!</p>
<h4>And it's even more awesome...</h4>
<p style="text-align: left;">This experiment also introduce my brand new mini-debugger inspired of <a href="http://mrdoob.com/80/Stats">Mr. Doob's work</a>. I replaced the maximum memory footprint counter with a per-second rendered triangles counter (or TPS counter). CPU usage or framerate alone are not absolute measurements but the TPS counter reflects the true performance of the application the old fashioned way: the more polygons per second the better. I also updated the timer to display the processing time and the overall rendering time.</p>
<p style="text-align: left;">You can compare this experiment to the <a href="http://blog.promethe.net/2009/10/07/quake-2-3d-models-in-flash-10/">"old" one I made up a few weeks ago</a>: the displayed 3D model features 30% more polygons but the CPU usage is the same.</p>
<p style="text-align: left;">The rendering process is done in such a way that absolutely no computation occurs on invisible objects, not even the slightest animation or z-sorting operation.</p>
<p style="text-align: left;">I enabled dynamic bounding volumes for animated meshes: if you place the mesh on the edges of the viewing space, you might notice that the TPS counter sometimes goes down to zero to raise up again to a few hundreds/thousands of triangles per second. The explanation is simple: the visibility test is done dynamically and follows the mesh animations. If the animation drives the mesh out of the viewing frustum, culling operates and it is not renderered.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2009/12/13/frustum-culling-in-flash-10/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>MadCompany: Coming Soon!</title>
		<link>http://blog.promethe.net/2009/12/10/madcompany-coming-soon/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=madcompany-coming-soon</link>
		<comments>http://blog.promethe.net/2009/12/10/madcompany-coming-soon/#comments</comments>
		<pubDate>Wed, 09 Dec 2009 23:05:04 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[Augmented Reality]]></category>
		<category><![CDATA[FLARToolkit]]></category>
		<category><![CDATA[Flash 10]]></category>
		<category><![CDATA[Flex]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=554</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<p><center><br />
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/wrfLwa1aXrI&#038;hl=en_US&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/wrfLwa1aXrI&#038;hl=en_US&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object><br />
</center></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2009/12/10/madcompany-coming-soon/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Amazon Web Services REST queries signature in ActionScript 3</title>
		<link>http://blog.promethe.net/2009/08/24/amazon-web-services-rest-queries-signature-in-actionscript-3/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=amazon-web-services-rest-queries-signature-in-actionscript-3</link>
		<comments>http://blog.promethe.net/2009/08/24/amazon-web-services-rest-queries-signature-in-actionscript-3/#comments</comments>
		<pubDate>Mon, 24 Aug 2009 10:00:12 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[Amazon]]></category>
		<category><![CDATA[Web Service]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=368</guid>
		<description><![CDATA[As I was working on a custom MP3 player, I wanted to use a web service to search for album arts in order to display them as the corresponding music is played. After a quic Google search I found Amazon Web Services (AWS). Amazon actually provides services to search items in their catalog and therefor [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">As I was working on a custom MP3 player, I wanted to use a web service to search for album arts in order to display them as the corresponding music is played. After a quic Google search I found Amazon Web Services (AWS). Amazon actually provides services to search items in their catalog and therefor you can look for a precise music album and get its cover. This very service is the Product Advertising and is accessible through the <a title="Documentation for Amazon's Product Advertising API" href="http://docs.amazonwebservices.com/AWSECommerceService/latest/DG/" target="_blank">Product Advertising API</a>.</p>
<p style="text-align: justify;">But since the 15th of August 2009 AWS requires every request to be signed. It simply means that a "Signature" parameter must be added to each and every request. One might think that the API key should be enough, but this key is inserted in every query URL and can be read by pretty much anyone. The signature is created using the secret AWS password and crypted using the HMAC/SHA256 algorithms so that AWS can be sure the request actually comes from the genuine owner of the API key.</p>
<p style="text-align: justify;">The documentation features a guide to explain the whole <a href="http://docs.amazonwebservices.com/AWSECommerceService/latest/DG/index.html?rest-signature.html" target="_blank">signing process step-by-step</a> but as you might have guesses, there is a huge difference between reading it on the documentation and actually implementing it successfully.</p>
<p style="text-align: justify;">Full code right after the jump...</p>
<p style="text-align: justify;"><span id="more-368"></span></p>
<p style="text-align: justify;">The following class wrap the URLRequest class to provide signed requests to AWS (requires <a href="http://code.google.com/p/as3corelib/" target="_blank">AS3CoreLib</a>):</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package com.<span style="color: #006600;">amazon</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">crypto</span>.<span style="color: #006600;">HMAC</span>;
	<span style="color: #0066CC;">import</span> com.<span style="color: #006600;">adobe</span>.<span style="color: #006600;">crypto</span>.<span style="color: #006600;">SHA256</span>;
&nbsp;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">net</span>.<span style="color: #006600;">URLRequest</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">utils</span>.<span style="color: #006600;">ByteArray</span>;
&nbsp;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">formatters</span>.<span style="color: #006600;">DateFormatter</span>;
	<span style="color: #0066CC;">import</span> mx.<span style="color: #006600;">utils</span>.<span style="color: #006600;">Base64Encoder</span>;
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> AmazonRequest
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> const AWS_NAMESPACE	: Namespace	= <span style="color: #000000; font-weight: bold;">new</span> Namespace<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;http://webservices.amazon.com/AWSECommerceService/2009-01-06&quot;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> const AWS_KEY		: <span style="color: #0066CC;">String</span>	= <span style="color: #ff0000;">&quot;your_aws_api_key_here&quot;</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> const AWS_SECRET 	: <span style="color: #0066CC;">String</span>	= <span style="color: #ff0000;">&quot;your_aws_secret_key_here&quot;</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> const AWS_METHOD		: <span style="color: #0066CC;">String</span>	= <span style="color: #ff0000;">&quot;GET&quot;</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> const AWS_HOST		: <span style="color: #0066CC;">String</span>	= <span style="color: #ff0000;">&quot;ecs.amazonaws.com&quot;</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> const AWS_PATH		: <span style="color: #0066CC;">String</span>	= <span style="color: #ff0000;">&quot;/onca/xml&quot;</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #0066CC;">static</span> const AWS_URL		: <span style="color: #0066CC;">String</span>	= <span style="color: #ff0000;">&quot;http://&quot;</span> + AWS_HOST + AWS_PATH;
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _URLRequest		: URLRequest	= <span style="color: #000000; font-weight: bold;">new</span> URLRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> _DateFormatter	: DateFormatter	= <span style="color: #000000; font-weight: bold;">new</span> DateFormatter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> <span style="color: #0066CC;">url</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">String</span> <span style="color: #66cc66;">&#123;</span><span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span>_URLRequest.<span style="color: #0066CC;">url</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> <span style="color: #0066CC;">data</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">Object</span> <span style="color: #66cc66;">&#123;</span><span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span>_URLRequest.<span style="color: #0066CC;">data</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> requestHeaders<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">Array</span> <span style="color: #66cc66;">&#123;</span><span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span>_URLRequest.<span style="color: #006600;">requestHeaders</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">get</span> urlRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : URLRequest <span style="color: #66cc66;">&#123;</span><span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span>signRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> <span style="color: #0066CC;">url</span><span style="color: #66cc66;">&#40;</span>value : <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>_URLRequest.<span style="color: #0066CC;">url</span> = value;<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> <span style="color: #0066CC;">data</span><span style="color: #66cc66;">&#40;</span>value : <span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>_URLRequest.<span style="color: #0066CC;">data</span> = value;<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">set</span> requestHeader<span style="color: #66cc66;">&#40;</span>value : <span style="color: #0066CC;">Array</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>_URLRequest.<span style="color: #006600;">requestHeaders</span> = value;<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> AmazonRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			_URLRequest.<span style="color: #0066CC;">url</span> = AWS_URL;
			_DateFormatter.<span style="color: #006600;">formatString</span> = <span style="color: #ff0000;">&quot;YYYY-MM-DDTJJ:NN:SS.000Z&quot;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> parametersSort<span style="color: #66cc66;">&#40;</span>s1 : <span style="color: #0066CC;">Object</span>, s2 : <span style="color: #0066CC;">Object</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">Number</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> c1 : <span style="color: #0066CC;">Number</span> = <span style="color: #66cc66;">&#40;</span>s1.<span style="color: #0066CC;">name</span> as <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">charCodeAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> c2 : <span style="color: #0066CC;">Number</span> = <span style="color: #66cc66;">&#40;</span>s2.<span style="color: #0066CC;">name</span> as <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">charCodeAt</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span>c1 <span style="color: #66cc66;">&gt;</span> c2 ? <span style="color: #cc66cc;">1.0</span> : -<span style="color: #cc66cc;">1.0</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> signRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : URLRequest
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> vars : <span style="color: #0066CC;">Array</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> signature : <span style="color: #0066CC;">String</span> = AWS_METHOD + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> + AWS_HOST + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span> + AWS_PATH + <span style="color: #ff0000;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> timestamp : <span style="color: #0066CC;">String</span> = <span style="color: #000000; font-weight: bold;">null</span>;
			<span style="color: #000000; font-weight: bold;">var</span> encoder	 : Base64Encoder = <span style="color: #000000; font-weight: bold;">new</span> Base64Encoder<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> secretBytes : ByteArray = <span style="color: #000000; font-weight: bold;">new</span> ByteArray<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> requestBytes : ByteArray = <span style="color: #000000; font-weight: bold;">new</span> ByteArray<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> now : <span style="color: #0066CC;">Date</span> = <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Date</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #000000; font-weight: bold;">var</span> hash : <span style="color: #0066CC;">String</span> = <span style="color: #000000; font-weight: bold;">null</span>;
			<span style="color: #000000; font-weight: bold;">var</span> hashBytes : ByteArray = <span style="color: #000000; font-weight: bold;">new</span> ByteArray<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">// build the timestamp</span>
			now.<span style="color: #0066CC;">setTime</span><span style="color: #66cc66;">&#40;</span>now.<span style="color: #0066CC;">getTime</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> + <span style="color: #66cc66;">&#40;</span>now.<span style="color: #0066CC;">getTimezoneOffset</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">*</span> <span style="color: #cc66cc;">60</span> <span style="color: #66cc66;">*</span> <span style="color: #cc66cc;">1000</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			timestamp = _DateFormatter.<span style="color: #006600;">format</span><span style="color: #66cc66;">&#40;</span>now<span style="color: #66cc66;">&#41;</span>;
&nbsp;
			vars.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #0066CC;">name</span>: <span style="color: #ff0000;">&quot;Timestamp&quot;</span>, value: encodeURIComponent<span style="color: #66cc66;">&#40;</span>decodeURIComponent<span style="color: #66cc66;">&#40;</span>timestamp<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">// add the API Key</span>
			_URLRequest.<span style="color: #0066CC;">data</span>.<span style="color: #006600;">AWSAccessKeyId</span> = AWS_KEY;
&nbsp;
			<span style="color: #808080; font-style: italic;">// extract and sort parameters</span>
			<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> o : <span style="color: #0066CC;">Object</span> <span style="color: #b1b100;">in</span> _URLRequest.<span style="color: #0066CC;">data</span><span style="color: #66cc66;">&#41;</span>
				vars.<span style="color: #0066CC;">push</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#123;</span><span style="color: #0066CC;">name</span>: o, value: _URLRequest.<span style="color: #0066CC;">data</span><span style="color: #66cc66;">&#91;</span>o<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#125;</span><span style="color: #66cc66;">&#41;</span>;
			vars = vars.<span style="color: #0066CC;">sortOn</span><span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;name&quot;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">// build the string to sign</span>
			<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> i : <span style="color: #0066CC;">int</span> = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> vars.<span style="color: #0066CC;">length</span>; i++<span style="color: #66cc66;">&#41;</span>
				signature += <span style="color: #66cc66;">&#40;</span>i ? <span style="color: #ff0000;">&quot;&amp;&quot;</span> : <span style="color: #ff0000;">&quot;&quot;</span><span style="color: #66cc66;">&#41;</span> + encodeURIComponent<span style="color: #66cc66;">&#40;</span>decodeURIComponent<span style="color: #66cc66;">&#40;</span>vars<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #0066CC;">name</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>
							 + <span style="color: #ff0000;">&quot;=&quot;</span> + encodeURIComponent<span style="color: #66cc66;">&#40;</span>decodeURIComponent<span style="color: #66cc66;">&#40;</span>vars<span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">value</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">// build the signature</span>
			hash = HMAC.<span style="color: #006600;">hash</span><span style="color: #66cc66;">&#40;</span>AWS_SECRET, signature, SHA256<span style="color: #66cc66;">&#41;</span>;
			<span style="color: #b1b100;">for</span> <span style="color: #66cc66;">&#40;</span>i = <span style="color: #cc66cc;">0</span>; i <span style="color: #66cc66;">&lt;</span> hash.<span style="color: #0066CC;">length</span>; i += <span style="color: #cc66cc;">2</span><span style="color: #66cc66;">&#41;</span>
				hashBytes.<span style="color: #006600;">writeByte</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">parseInt</span><span style="color: #66cc66;">&#40;</span>hash.<span style="color: #0066CC;">charAt</span><span style="color: #66cc66;">&#40;</span>i<span style="color: #66cc66;">&#41;</span> + hash.<span style="color: #0066CC;">charAt</span><span style="color: #66cc66;">&#40;</span>i + <span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>, <span style="color: #cc66cc;">16</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">// encode the signature to Base64</span>
			encoder.<span style="color: #006600;">encodeBytes</span><span style="color: #66cc66;">&#40;</span>hashBytes<span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">// the the Signature and Timestamp parameters</span>
			_URLRequest.<span style="color: #0066CC;">data</span>.<span style="color: #006600;">Signature</span> = encodeURI<span style="color: #66cc66;">&#40;</span>encoder.<span style="color: #0066CC;">toString</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
			_URLRequest.<span style="color: #0066CC;">data</span>.<span style="color: #006600;">Timestamp</span> = timestamp;
&nbsp;
			<span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span>_URLRequest<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p style="text-align: justify;">... and the following example function demonstrates how to use this class to actually query AWS to get album arts from a given album name:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> getCovers<span style="color: #66cc66;">&#40;</span>myAlbum : <span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span>
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">var</span> request	: AmazonRequest = <span style="color: #000000; font-weight: bold;">new</span> AmazonRequest<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #000000; font-weight: bold;">var</span> loader : URLLoader = <span style="color: #000000; font-weight: bold;">new</span> URLLoader<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
	<span style="color: #000000; font-weight: bold;">var</span> vars : URLVariables = <span style="color: #000000; font-weight: bold;">new</span> URLVariables<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
	vars.<span style="color: #006600;">Service</span> = <span style="color: #ff0000;">'AWSECommerceService'</span>;
	vars.<span style="color: #006600;">Operation</span> = <span style="color: #ff0000;">'ItemSearch'</span>;
	vars.<span style="color: #006600;">Keywords</span> = myAlbum;
	vars.<span style="color: #0066CC;">Version</span> = <span style="color: #ff0000;">&quot;2009-01-06&quot;</span>;
	vars.<span style="color: #006600;">SearchIndex</span> = <span style="color: #ff0000;">&quot;Music&quot;</span>;
	vars.<span style="color: #006600;">ResponseGroup</span> = <span style="color: #ff0000;">&quot;Images&quot;</span>;
&nbsp;
	request.<span style="color: #0066CC;">data</span> = vars;
&nbsp;
	loader.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span>Event.<span style="color: #006600;">COMPLETE</span>, requestCompleteHandler<span style="color: #66cc66;">&#41;</span>;
	loader.<span style="color: #0066CC;">load</span><span style="color: #66cc66;">&#40;</span>request.<span style="color: #006600;">urlRequest</span><span style="color: #66cc66;">&#41;</span>;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p style="text-align: justify;">And voila, I hope this will help!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2009/08/24/amazon-web-services-rest-queries-signature-in-actionscript-3/feed/</wfw:commentRss>
		<slash:comments>22</slash:comments>
		</item>
		<item>
		<title>DirectFlex and Flash 10 : what&#8217;s next ?</title>
		<link>http://blog.promethe.net/2008/08/26/directflex-and-flash-10-whats-next/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=directflex-and-flash-10-whats-next</link>
		<comments>http://blog.promethe.net/2008/08/26/directflex-and-flash-10-whats-next/#comments</comments>
		<pubDate>Mon, 25 Aug 2008 22:59:41 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[DirectFlex]]></category>
		<category><![CDATA[Flash 10]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=78</guid>
		<description><![CDATA[My first post was about the 3D Flash library I'm currently working on : DirectFlex. As I said, it is not a simple 3D engine but a full 3D API like DirectX or OpenGL. As Flash 10 is likely to be available when the first public version of DirectFlex will be released, I decided to [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><a href="http://blog.promethe.net/wp-content/uploads/2008/08/dflex_logo_2_400x400.png" rel="shadowbox[post-78];player=img;"><img class="size-thumbnail wp-image-14 aligncenter" title="dflex_logo_2_400x400" src="http://blog.promethe.net/wp-content/uploads/2008/08/dflex_logo_2_400x400-150x150.png" alt="" width="150" height="150" /></a></p>
<p style="text-align: justify;">My first post was about the 3D Flash library I'm currently working on : DirectFlex. As I said, it is not a simple 3D engine but a full 3D API like DirectX or OpenGL. As Flash 10 is likely to be available when the first public version of DirectFlex will be released, I decided to rewrite the API's core to take advantage of the new 3D mathematics classes and the hardware acceleration features. This is actually the third time that DirectFlex is entirely rewritten from scratch... but time after time the quality of the work and the performances have improved a lot.</p>
<p><span id="more-78"></span></p>
<p style="text-align: justify;"><strong>DirectFlex and the good old Flash 9 ...</strong></p>
<p style="text-align: justify;">DirectFlex' developpement started more than a year ago and it was designed to be used in Flash 9. It's first "correct" rendering was a wireframe spinning cube. One year later, it's last Flash 9 version was able to draw up to 3 000 polygons at 20 frames per second.</p>
<p style="text-align: justify;">
<p style="text-align: justify;">
<p style="text-align: justify;">
<p style="text-align: center;"><a href="http://blog.promethe.net/wp-content/uploads/2008/08/directflex_cs16_gign.png" rel="shadowbox[post-78];player=img;"><img class="size-medium wp-image-79 aligncenter" title="directflex_cs16_gign" src="http://blog.promethe.net/wp-content/uploads/2008/08/directflex_cs16_gign-300x210.png" alt="" width="300" height="210" /></a></p>
<p style="text-align: justify;">
<p style="text-align: justify;">
<p style="text-align: justify;">
<p style="text-align: justify;">Here is a screenshot of a flat-shaded 3D model loaded and displayed with DirectFlex. This mesh was actually extracted from Counter Strike 1.6 and is the 3D model of the GIGN skin. With 3000 polygons you can draw this very 3D mesh up to 7 times.</p>
<p style="text-align: justify;">As you can see on the screenshot, the framerate is about 23 frames per second. It's not much, but it is enough to be perfectly smooth inside the Flash player. I could do some ActionScript magic to get a 30 frames per second framerate but that would require a lot more CPU. The most important thing is to get a smooth display without draining to much CPU, and that's exactly what we have here.</p>
<p style="text-align: justify;">Here are two extra screenshots :</p>
<p style="text-align: justify;">
<p style="text-align: justify;">
<p style="text-align: justify;">
<p style="text-align: center;"><a href="http://blog.promethe.net/wp-content/uploads/2008/08/directflex_m16.png" rel="shadowbox[post-78];player=img;"><img class="size-medium wp-image-80 aligncenter" title="directflex_m16" src="http://blog.promethe.net/wp-content/uploads/2008/08/directflex_m16-300x210.png" alt="" width="300" height="210" /></a></p>
<p style="text-align: center;"><a href="http://blog.promethe.net/wp-content/uploads/2008/08/directflex_spaceship.png" rel="shadowbox[post-78];player=img;"><img class="size-medium wp-image-81 aligncenter" title="directflex_spaceship" src="http://blog.promethe.net/wp-content/uploads/2008/08/directflex_spaceship-300x210.png" alt="" width="300" height="210" /></a></p>
<p style="text-align: justify;"><span style="color: #ff0000;">Please keep in my mind that those screenshots come from the "old" Flash 9 version of DirectFlex. A lot of changes have been made since.</span> However, those screenshots are a good apetizer... and there is a lot more to come with the new Flash 10 version. As you might have understand, my main objective is to  make sure the "basic stuff" runs as fast as possible. Then some fancy effects will be added...</p>
<p style="text-align: justify;">
<p style="text-align: justify;"><strong>So what's new with Flash 10 (doctor) ?</strong></p>
<p style="text-align: justify;">Well the drawing API is a bit faster, and DirectFlex can now draw something like 5 000 polygons at 20 frames per second at least without any hardware acceleration. In fact, hardware acceleration in Flash 10 is still tricky and I didn't manage to enable it for now. Flash 10 is still in beta and is a work in progress. Performances are not stable yet and it is pretty hard to make a good guess about the final release capabilities.</p>
<p style="text-align: justify;">Still, I've been running some tests and Flash 10  seams to be capable to compute up to 50 000 vertices. As you can make at least 16 000 polygons with those 50 000 vertices, it is indeed very frustrating to be able to draw "only" 5 000 of them in the end. Now that Flash 10 has a powerful 3D mathematics API, the drawing API seams to be the real bottleneck but I guess hardware acceleration will make it (a lot) faster.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2008/08/26/directflex-and-flash-10-whats-next/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>DirectFlex : a new Flash 10 3D API</title>
		<link>http://blog.promethe.net/2008/08/21/directflex-flash-10-3d-api/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=directflex-flash-10-3d-api</link>
		<comments>http://blog.promethe.net/2008/08/21/directflex-flash-10-3d-api/#comments</comments>
		<pubDate>Thu, 21 Aug 2008 15:46:18 +0000</pubDate>
		<dc:creator>Promethe</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[3D]]></category>
		<category><![CDATA[ActionScript 3.0]]></category>
		<category><![CDATA[DirectFlex]]></category>
		<category><![CDATA[Flash 10]]></category>

		<guid isPermaLink="false">http://blog.promethe.net/?p=15</guid>
		<description><![CDATA[The next version of the Flash player will introduce a lot of new cool/useful features. One of them is the brand new 3D API. Of course, a lot of people are talking about the cool new "3D effects" that use this 3D API, but in the end those do not allow "real" and "complex" 3D [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">The next version of the Flash player will introduce a lot of new cool/useful features. One of them is the brand new 3D API. Of course, a lot of people are talking about the cool new "3D effects" that use this 3D API, but in the end those do not allow "real" and "complex" 3D such as real-time 3D games. So basically, yeah, drawing 3D spinning planes is "cool", but that's not how you're gonna create some "ass-kicking" RIA...</p>
<p style="text-align: justify;">In order to render complex 3D geometry, you'll have to use the underneath 3D API itself. This 3D API is mainly about three classes : Matrix3D, Vector3D and Utils3D. Those implements data types and methods to transform vertices data from a space to another in order to render actual 3D geometry on our very 2d flat screens. And... that's it. We also have the new "Graphics.drawTriangles" method and hardware acceleration, but all of this does not provide what we could call a user-friendly 3D API. But here comes...</p>
<p style="text-align: justify;">
<div class="mceTemp mceIEcenter"><a href="http://blog.promethe.net/wp-content/uploads/2008/08/dflex_logo_2_400x400.png" rel="shadowbox[post-15];player=img;"></a></div>
<div class="mceTemp mceIEcenter" style="text-align: center;"><a href="http://blog.promethe.net/wp-content/uploads/2008/08/dflex_logo_2_400x400.png" rel="shadowbox[post-15];player=img;"><img class="aligncenter size-thumbnail wp-image-14" title="dflex_logo_2_400x400" src="http://blog.promethe.net/wp-content/uploads/2008/08/dflex_logo_2_400x400-150x150.png" alt="" width="150" height="150" /></a></div>
<p><span id="more-15"></span></p>
<p style="text-align: justify;">DirectFlex is a "real" 3D API that uses the low level Flash 10 3D API to make it look and behave like any other 3D API such as DirectX or OpenGL. DirectFlex implementation and prototyping have actually a lot in common with Mirosoft's DirectX. A lot of concepts and programing techniques of DirectX can be found in DirectFlex. It means that most of the DirectX resources such as tutorials and samples will be relevant and will provide a lot of help to DirectFlex users.</p>
<p style="text-align: justify;">The main difference between DirectFlex and any other third party 3D flash librairy is the simple fact that DirectFlex actually <strong>is</strong> a 3D API, and not some kind of a "fake" 3D engine. It means that you can work at the lowest level just like you would do it with DirectX or OpenGL : you have a total control on mathematics, algorithms and vertices/primitives data.</p>
<p style="text-align: justify;">DirectFlex core takes care of most of the 3D rendering issues such as mathematics, z-sorting, mapping, and more. Although, because DirectX programming is not something any flash developer can handle, DirectFlex also includes a fully functional 3D engine and a 3D stage that mimics the behavior of the 2D stage of ActionScript 3.0.</p>
<p>Some demo applications, screenshots and a developers's blog will be released... "when it's done" <img src='http://blog.promethe.net/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.promethe.net/2008/08/21/directflex-flash-10-3d-api/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
