<?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>blog.betabong.com &#187; 3d</title>
	<atom:link href="http://blog.betabong.com/tag/3d/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.betabong.com</link>
	<description></description>
	<lastBuildDate>Thu, 02 Feb 2012 10:45:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>MetaTunnel with Pixel Bender</title>
		<link>http://blog.betabong.com/2009/04/17/metatunnel-with-pixel-bender/</link>
		<comments>http://blog.betabong.com/2009/04/17/metatunnel-with-pixel-bender/#comments</comments>
		<pubDate>Fri, 17 Apr 2009 21:37:31 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[Labs]]></category>
		<category><![CDATA[Pixel Bender]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=252</guid>
		<description><![CDATA[<p>This is a follow-up of <a href="/2009/04/13/metatunnel-1k-demo-as-vs-js/">this</a>.</p>
<p><img src="http://blog.betabong.com/wp-content/uploads/2009/04/metatunnel-pixelbender.jpg" alt="metatunnel-pixelbender" title="metatunnel-pixelbender" width="512" height="512" class="alignnone size-full wp-image-254" /></p>
<p>Yeah well, I was more than optimistic to show <a href="http://demoscene.appjet.net/">those JS guys</a> how fast Flash can be with the help of some brand new Adobe magic – but Pixel Bender was, unfortunately,&#8230; <a href="http://blog.betabong.com/2009/04/17/metatunnel-with-pixel-bender/" class="read_more">Read more</a></p>
Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/gridfittype-animation/' rel='bookmark' title='GridFitType (&amp; animation)'>GridFitType (&#038; animation)</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>This is a follow-up of <a href="/2009/04/13/metatunnel-1k-demo-as-vs-js/">this</a>.</p>
<p><img src="http://blog.betabong.com/wp-content/uploads/2009/04/metatunnel-pixelbender.jpg" alt="metatunnel-pixelbender" title="metatunnel-pixelbender" width="512" height="512" class="alignnone size-full wp-image-254" /></p>
<p>Yeah well, I was more than optimistic to show <a href="http://demoscene.appjet.net/">those JS guys</a> how fast Flash can be with the help of some brand new Adobe magic – but Pixel Bender was, unfortunately, quite disappointing:<br />
<span id="more-252"></span></p>
<ol>
<li>I spent hours to successfully migrate the code to Pixel Bender Toolkit (wasn&#8217;t that difficult actually, but a wrong character there and your math is all screwed up). So here the first letdown: Pixel Bender Toolkit is <strong>not a very nice coding environment</strong>. It&#8217;s a rough baby. But I&#8217;d do everything for speed :-)..</li>
<li>Once I had it running (the above picture is captured from Pixel Bender) I tried to export it for Flash Player. But hoohoo! <strong>no support for loops</strong> in Flash Player! Yeah, well, ..(and also <strong>no custom functions</strong> by the way)</li>
<li>But I didn&#8217;t give up. I just calculated how many max loops where needed (about 100) and replicated the while loop with many if-conditions (I love to do computer&#8217;s dummy job ;). Then finally: Export to Flash Player! But in Flash Player having the shader as Filter for a BitmapData just <strong>really fucked up the rendering</strong>. I even went down to 1fps, but still no luck. What a bummer! (sometimes I saw a few pixels blue, but very unusable: I&#8217;ve written <a href="http://forums.adobe.com/thread/419485">to the Pixel Bender Forum </a>- invited by <a href="http://twitter.com/pixelbender">@Pixelbender</a> – but that led to nothing so far).</li>
<li>Today, finally, I got it working by taking a more rough approach (not BitmapFilter, but ShaderJob). <strong>But hell is it slow!!!</strong> And it eats all my 8 cpu cores!! So I wondered how that could be: Fast as hell in Pixel Bender Toolkit (uses may be 2% of my cpu at full fps!), but slow as hell in Flash Player?! The answer is obvious: <strong>Adobe decided not to talk to the GCU (Graphics Card)</strong> for the calculations, probably to keep the Flash Player be as platform independent as possible &#8211; and as small as possible. But then I wonder.. WTF do you give us this toy if we can&#8217;t use it?!! It&#8217;s like Apple would say: «Great news: we have Core Graphics on the iPhone &#8211; without hardware acceleration..» Adobe, to me, this doesn&#8217;t make too much sense. (But I&#8217;m so very much pleased about the new Text Engine – *that* was a good job)</li>
</ol>
<p>Here the result: (Click to start, it&#8217;ll eat your cpu!)</p>

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_0" width="520" height="128">
      <param name="movie" value="/wp-content/uploads/flash/MetaTunnelBender.swf" />
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="/wp-content/uploads/flash/MetaTunnelBender.swf" width="520" height="128">
      <!--<![endif]-->
        
      <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>

<p>And for the geeks, here we go with the source codes:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #339933;">&lt;</span>languageVersion <span style="color: #339933;">:</span> <span style="color: #CC0000;">1.0</span><span style="color: #339933;">;&gt;</span>
&nbsp;
kernel MetaTunnel
<span style="color: #339933;">&lt;</span>   <span style="color: #003366; font-weight: bold;">namespace</span> <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;com.betabong&quot;</span><span style="color: #339933;">;</span>
    vendor <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;Betabong&quot;</span><span style="color: #339933;">;</span>
    version <span style="color: #339933;">:</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
    description <span style="color: #339933;">:</span> <span style="color: #3366CC;">&quot;MetaTunnel Port&quot;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&gt;</span>
&nbsp;
<span style="color: #009900;">&#123;</span>
    parameter int size
    <span style="color: #339933;">&lt;</span>
        minValue<span style="color: #339933;">:</span> <span style="color: #CC0000;">16</span><span style="color: #339933;">;</span>
        maxValue<span style="color: #339933;">:</span> <span style="color: #CC0000;">512</span><span style="color: #339933;">;</span>
        defaultValue<span style="color: #339933;">:</span> <span style="color: #CC0000;">128</span><span style="color: #339933;">;</span>
    <span style="color: #339933;">&gt;;</span>
&nbsp;
&nbsp;
    parameter float time
    <span style="color: #339933;">&lt;</span>
        minValue<span style="color: #339933;">:</span> float<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        maxValue<span style="color: #339933;">:</span> float<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">15.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        defaultValue<span style="color: #339933;">:</span> float<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #339933;">&gt;;</span>
&nbsp;
&nbsp;
&nbsp;
&nbsp;
    input image4 src<span style="color: #339933;">;</span>
    output pixel3 dst<span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000066; font-weight: bold;">void</span>
    evaluatePixel<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        float cos1 <span style="color: #339933;">=</span> cos<span style="color: #009900;">&#40;</span> time <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float cos0_5 <span style="color: #339933;">=</span> cos<span style="color: #009900;">&#40;</span>time <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float cos0_7 <span style="color: #339933;">=</span> cos<span style="color: #009900;">&#40;</span>time <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.7</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float sin1 <span style="color: #339933;">=</span> sin<span style="color: #009900;">&#40;</span> time <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float sin0_2 <span style="color: #339933;">=</span> sin<span style="color: #009900;">&#40;</span>time <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float sin_0_5 <span style="color: #339933;">=</span> sin<span style="color: #009900;">&#40;</span>time <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.5</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        float dim <span style="color: #339933;">=</span> float<span style="color: #009900;">&#40;</span> size <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float2 point <span style="color: #339933;">=</span> outCoord<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> dim<span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span> point.<span style="color: #660066;">x</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">||</span> point.<span style="color: #660066;">y</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            dst.<span style="color: #660066;">rgb</span> <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">1.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #009900;">&#123;</span>
&nbsp;
        float2 vp <span style="color: #339933;">=</span> float2<span style="color: #009900;">&#40;</span> point.<span style="color: #660066;">x</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">2.0</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">,</span> <span style="color: #339933;">-</span>point.<span style="color: #660066;">y</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">2.0</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">1.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float s <span style="color: #339933;">=</span> float<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.4</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float3 op <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> vp.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> vp.<span style="color: #660066;">y</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">1.25</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float3 dp <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span>vp.<span style="color: #660066;">x</span> <span style="color: #339933;">+</span> cos1 <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.3</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">/</span> <span style="color: #CC0000;">64.0</span> <span style="color: #339933;">,</span> vp.<span style="color: #660066;">y</span><span style="color: #339933;">/</span><span style="color: #CC0000;">64.0</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">1.0</span><span style="color: #339933;">/</span><span style="color: #CC0000;">64.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float f <span style="color: #339933;">=</span> float<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        float tt <span style="color: #339933;">=</span> float<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float g <span style="color: #339933;">=</span> float<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        float3 p <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">1.0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1.0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#40;</span>g <span style="color: #339933;">&gt;</span> s<span style="color: #009900;">&#41;</span> <span style="color: #339933;">&amp;&amp;</span> <span style="color: #009900;">&#40;</span>tt<span style="color: #339933;">&lt;</span><span style="color: #CC0000;">375.0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            p <span style="color: #339933;">=</span> op <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span> dp <span style="color: #339933;">*</span> tt <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">=</span> <span style="color: #CC0000;">1.0</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> abs<span style="color: #009900;">&#40;</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> cos1<span style="color: #339933;">+</span>sin0_2 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>cos0_5<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> abs<span style="color: #009900;">&#40;</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>cos0_7 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>sin_0_5 <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> abs<span style="color: #009900;">&#40;</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>sin0_2<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #339933;">,</span> sin1 <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">-</span> <span style="color: #CC0000;">0.1</span> <span style="color: #339933;">-</span> cos<span style="color: #009900;">&#40;</span> p.<span style="color: #660066;">z</span><span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span> <span style="color: #339933;">+</span> time<span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #339933;">*</span><span style="color: #CC0000;">3.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #339933;">*</span><span style="color: #CC0000;">4.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">;</span>
            g <span style="color: #339933;">=</span> f<span style="color: #339933;">;</span>
            tt <span style="color: #339933;">+=</span> g <span style="color: #339933;">*</span> <span style="color: #CC0000;">4.0</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
        float color <span style="color: #339933;">=</span> <span style="color: #CC0000;">0.0</span><span style="color: #339933;">;</span>
        float3 dtt <span style="color: #339933;">=</span> op <span style="color: #339933;">+</span> <span style="color: #009900;">&#40;</span> dp <span style="color: #339933;">*</span> tt<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        p <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> dtt.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">y</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">z</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">=</span> <span style="color: #CC0000;">1.0</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> cos1<span style="color: #339933;">+</span>sin0_2 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>cos0_5<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>cos0_7 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>sin_0_5 <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>sin0_2<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #339933;">,</span> sin1 <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">-</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">z</span><span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #339933;">+</span>time<span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #339933;">*</span><span style="color: #CC0000;">3.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #339933;">*</span><span style="color: #CC0000;">4.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">;</span>
        float objd <span style="color: #339933;">=</span> f<span style="color: #339933;">;</span>
&nbsp;
        float3 np <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0.0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0.0</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        p <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> dtt.<span style="color: #660066;">x</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.01</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">y</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">z</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">=</span> <span style="color: #CC0000;">1.0</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> cos1<span style="color: #339933;">+</span>sin0_2 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>cos0_5<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>cos0_7 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>sin_0_5 <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>sin0_2<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #339933;">,</span> sin1 <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">-</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">z</span><span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #339933;">+</span>time<span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #339933;">*</span><span style="color: #CC0000;">3.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #339933;">*</span><span style="color: #CC0000;">4.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">;</span>
        np.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> objd <span style="color: #339933;">-</span> f<span style="color: #339933;">;</span>
&nbsp;
        p <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> dtt.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">y</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.01</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">z</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">=</span> <span style="color: #CC0000;">1.0</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> cos1<span style="color: #339933;">+</span>sin0_2 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>cos0_5<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>cos0_7 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>sin_0_5 <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>sin0_2<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #339933;">,</span> sin1 <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">-</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">z</span><span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #339933;">+</span>time<span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #339933;">*</span><span style="color: #CC0000;">3.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #339933;">*</span><span style="color: #CC0000;">4.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">;</span>
        np.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> objd <span style="color: #339933;">-</span> f<span style="color: #339933;">;</span>
&nbsp;
        p <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span> dtt.<span style="color: #660066;">x</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">y</span> <span style="color: #339933;">,</span> dtt.<span style="color: #660066;">z</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.01</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">=</span> <span style="color: #CC0000;">1.0</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> cos1<span style="color: #339933;">+</span>sin0_2 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>cos0_5<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>cos0_7 <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.3</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span><span style="color: #339933;">+</span>sin_0_5 <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            f <span style="color: #339933;">*=</span> distance<span style="color: #009900;">&#40;</span> float3<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span>sin0_2<span style="color: #339933;">*</span><span style="color: #CC0000;">0.5</span> <span style="color: #339933;">,</span> sin1 <span style="color: #339933;">,</span> <span style="color: #CC0000;">2.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">,</span> p <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        f <span style="color: #339933;">*=</span> cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">-</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">-</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">z</span><span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #339933;">+</span>time<span style="color: #339933;">*</span><span style="color: #CC0000;">7.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">x</span><span style="color: #339933;">*</span><span style="color: #CC0000;">3.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span>cos<span style="color: #009900;">&#40;</span>p.<span style="color: #660066;">y</span><span style="color: #339933;">*</span><span style="color: #CC0000;">4.0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">0.1</span><span style="color: #339933;">;</span>
        np.<span style="color: #660066;">z</span> <span style="color: #339933;">=</span> objd <span style="color: #339933;">-</span> f<span style="color: #339933;">;</span>
&nbsp;
        float d <span style="color: #339933;">=</span> length<span style="color: #009900;">&#40;</span> np <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        np.<span style="color: #660066;">y</span> <span style="color: #339933;">/=</span> d<span style="color: #339933;">;</span>
        np.<span style="color: #660066;">z</span> <span style="color: #339933;">/=</span> d<span style="color: #339933;">;</span>
&nbsp;
        color <span style="color: #339933;">=</span> max<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">0.5</span> <span style="color: #339933;">*</span> np.<span style="color: #660066;">z</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> max<span style="color: #009900;">&#40;</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">0.5</span> <span style="color: #339933;">*</span>np.<span style="color: #660066;">y</span> <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.5</span> <span style="color: #339933;">*</span> np.<span style="color: #660066;">z</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">0.0</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.5</span><span style="color: #339933;">;</span>
        float3 rgb <span style="color: #339933;">=</span> float3<span style="color: #009900;">&#40;</span>color  <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.1</span> <span style="color: #339933;">*</span> tt <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.025</span> <span style="color: #339933;">,</span> color  <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.2</span> <span style="color: #339933;">*</span> tt <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.025</span>  <span style="color: #339933;">,</span> color <span style="color: #339933;">+</span> <span style="color: #CC0000;">0.5</span> <span style="color: #339933;">*</span> tt <span style="color: #339933;">*</span> <span style="color: #CC0000;">0.025</span>   <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        rgb.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> max<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.0</span> <span style="color: #339933;">,</span> min<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">,</span> rgb.<span style="color: #660066;">x</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        rgb.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> max<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.0</span> <span style="color: #339933;">,</span> min<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">,</span> rgb.<span style="color: #660066;">y</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        rgb.<span style="color: #660066;">z</span> <span style="color: #339933;">=</span> max<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">0.0</span> <span style="color: #339933;">,</span> min<span style="color: #009900;">&#40;</span> <span style="color: #CC0000;">1.0</span> <span style="color: #339933;">,</span> rgb.<span style="color: #660066;">z</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        dst.<span style="color: #660066;">rgb</span> <span style="color: #339933;">=</span> rgb<span style="color: #339933;">;</span>
&nbsp;
&nbsp;
      <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>And here the Actionscript part:</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> flash.<span style="color: #006600;">display</span>.<span style="color: #66cc66;">*</span>;
    <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #66cc66;">*</span>;
    <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">filters</span>.<span style="color: #66cc66;">*</span>;
    <span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">net</span>.<span style="color: #66cc66;">*</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> net.<span style="color: #006600;">hires</span>.<span style="color: #006600;">debug</span>.<span style="color: #006600;">Stats</span>;
    <span style="color: #808080; font-style: italic;">// SWF Metadata </span>
    <span style="color: #66cc66;">&#91;</span>SWF<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">width</span> = <span style="color: #ff0000;">&quot;520&quot;</span>, <span style="color: #0066CC;">height</span> = <span style="color: #ff0000;">&quot;128&quot;</span>, <span style="color: #0066CC;">backgroundColor</span> = <span style="color: #ff0000;">&quot;#000000&quot;</span>, framerate = <span style="color: #ff0000;">&quot;1&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
    <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MetaTunnelBender <span style="color: #0066CC;">extends</span> Sprite <span style="color: #66cc66;">&#123;</span>
&nbsp;
        <span style="color: #66cc66;">&#91;</span>Embed<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">&quot;test/MetaTunnel-stupid.pbj&quot;</span>, mimeType = <span style="color: #ff0000;">&quot;application/octet-stream&quot;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#93;</span>
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> TestFilter: <span style="color: #000000; font-weight: bold;">Class</span>;
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> playing : <span style="color: #0066CC;">Boolean</span>;
&nbsp;
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> im: Bitmap;
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> job:ShaderJob;
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> shader: Shader;
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> shaderfilter:ByteArray;
        <span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">time</span>:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">0.0</span>;
        <span style="color: #0066CC;">private</span> const <span style="color: #0066CC;">SIZE</span>:<span style="color: #0066CC;">Number</span> = <span style="color: #cc66cc;">64</span>;
        <span style="color: #0066CC;">private</span> const WHITE:BitmapData = <span style="color: #000000; font-weight: bold;">new</span> BitmapData<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">SIZE</span> , <span style="color: #0066CC;">SIZE</span> , <span style="color: #000000; font-weight: bold;">false</span> , 0xffffff <span style="color: #66cc66;">&#41;</span>;
&nbsp;
        <span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> MetaTunnelBender<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
        	<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">frameRate</span> = <span style="color: #cc66cc;">20</span>;
            im = <span style="color: #000000; font-weight: bold;">new</span> Bitmap<span style="color: #66cc66;">&#40;</span> WHITE.<span style="color: #006600;">clone</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
            im.<span style="color: #006600;">scaleX</span> = im.<span style="color: #006600;">scaleY</span> = <span style="color: #cc66cc;">2</span>;
            addChild<span style="color: #66cc66;">&#40;</span>im<span style="color: #66cc66;">&#41;</span>;
&nbsp;
            <span style="color: #808080; font-style: italic;">// stat info</span>
            <span style="color: #000000; font-weight: bold;">var</span> s:DisplayObject = <span style="color: #000000; font-weight: bold;">new</span> Stats<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
            addChild<span style="color: #66cc66;">&#40;</span> s <span style="color: #66cc66;">&#41;</span>;
            s.<span style="color: #006600;">x</span> = <span style="color: #cc66cc;">128</span>;
&nbsp;
            <span style="color: #808080; font-style: italic;">//Pass the embedded filter to the Shader as a ByteArray </span>
            shaderfilter = <span style="color: #000000; font-weight: bold;">new</span> TestFilter<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> as ByteArray;
            shader = <span style="color: #000000; font-weight: bold;">new</span> Shader<span style="color: #66cc66;">&#40;</span> shaderfilter <span style="color: #66cc66;">&#41;</span>;
            shader.<span style="color: #0066CC;">data</span>.<span style="color: #0066CC;">size</span>.<span style="color: #006600;">value</span> = <span style="color: #66cc66;">&#91;</span> <span style="color: #0066CC;">SIZE</span> <span style="color: #66cc66;">&#93;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">//start shaderjob (async start won't work - bug?)            </span>
            job = <span style="color: #000000; font-weight: bold;">new</span> ShaderJob<span style="color: #66cc66;">&#40;</span> shader , im.<span style="color: #006600;">bitmapData</span> , im.<span style="color: #0066CC;">width</span> , im.<span style="color: #0066CC;">height</span> <span style="color: #66cc66;">&#41;</span>;
			job.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
			<span style="color: #808080; font-style: italic;">// let's start/stop on click</span>
			<span style="color: #0066CC;">stage</span>.<span style="color: #006600;">addEventListener</span><span style="color: #66cc66;">&#40;</span> MouseEvent.<span style="color: #006600;">CLICK</span> , click <span style="color: #66cc66;">&#41;</span>;
&nbsp;
            <span style="color: #808080; font-style: italic;">// render first frame</span>
			enterframe<span style="color: #66cc66;">&#40;</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> enterframe<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:Event = <span style="color: #000000; font-weight: bold;">null</span> <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
        	<span style="color: #0066CC;">time</span> += <span style="color: #cc66cc;">0.05</span>;
			shader.<span style="color: #0066CC;">data</span>.<span style="color: #0066CC;">time</span>.<span style="color: #006600;">value</span> = <span style="color: #66cc66;">&#91;</span> <span style="color: #0066CC;">time</span> <span style="color: #66cc66;">&#93;</span>;
			<span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> job.<span style="color: #006600;">progress</span> <span style="color: #66cc66;">&#41;</span>;
            job = <span style="color: #000000; font-weight: bold;">new</span> ShaderJob<span style="color: #66cc66;">&#40;</span> shader , im.<span style="color: #006600;">bitmapData</span> , im.<span style="color: #0066CC;">width</span> , im.<span style="color: #0066CC;">height</span> <span style="color: #66cc66;">&#41;</span>;
			job.<span style="color: #0066CC;">start</span><span style="color: #66cc66;">&#40;</span> <span style="color: #000000; font-weight: bold;">true</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> click<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:<span style="color: #66cc66;">*</span> = <span style="color: #000000; font-weight: bold;">null</span> <span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
        	<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">!</span>playing <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
	           addEventListener<span style="color: #66cc66;">&#40;</span> Event.<span style="color: #006600;">ENTER_FRAME</span> , enterframe <span style="color: #66cc66;">&#41;</span>;
	        <span style="color: #66cc66;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #66cc66;">&#123;</span>
	           removeEventListener<span style="color: #66cc66;">&#40;</span> Event.<span style="color: #006600;">ENTER_FRAME</span> , enterframe <span style="color: #66cc66;">&#41;</span>;
	        <span style="color: #66cc66;">&#125;</span>
	        playing = <span style="color: #66cc66;">!</span>playing;
        <span style="color: #66cc66;">&#125;</span>
&nbsp;
    <span style="color: #66cc66;">&#125;</span>
&nbsp;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/gridfittype-animation/' rel='bookmark' title='GridFitType (&amp; animation)'>GridFitType (&#038; animation)</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2009/04/17/metatunnel-with-pixel-bender/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>3D Point Cloud with Javascript and Canvas</title>
		<link>http://blog.betabong.com/2009/03/05/javascript-canvas-3d/</link>
		<comments>http://blog.betabong.com/2009/03/05/javascript-canvas-3d/#comments</comments>
		<pubDate>Thu, 05 Mar 2009 15:02:32 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=208</guid>
		<description><![CDATA[<p>I was doing some stuff with 3D in Flash. And so I wondered wether sth similar might be achieved with pure HTML/Javascript. And yes, modern browsers (so not IE) can!</p>
<p>What I&#8217;ve done is this (a litte simplified):</p>
<ul>
<li>Migrated</li></ul><p>&#8230; <a href="http://blog.betabong.com/2009/03/05/javascript-canvas-3d/" class="read_more">Read more</a></p>
No related posts.]]></description>
			<content:encoded><![CDATA[<p>I was doing some stuff with 3D in Flash. And so I wondered wether sth similar might be achieved with pure HTML/Javascript. And yes, modern browsers (so not IE) can!</p>
<p>What I&#8217;ve done is this (a litte simplified):</p>
<ul>
<li>Migrated my 3D engine I&#8217;ve written years ago from AS1 to Javascript</li>
<li>Extracted point cloud from Colada 3D object</li>
<li>Draw rectangles for every point to canvas</li>
</ul>
<p>And that&#8217;s how it looks:</p>
<p>    <canvas id="canvas" width="512" height="360"></canvas><br />
	<script src="http://www.betabong.com/work/lab/js/3d/3dEngine.js" type="text/javascript" charset="utf-8"></script><br />
	<script src="http://www.betabong.com/work/lab/js/3d/duck.js" type="text/javascript" charset="utf-8"></script></p>
<p>Should work on Safari, Firefox and Opera.</p>
<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2009/03/05/javascript-canvas-3d/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>CoverFlow: 3D with Flash Player 10</title>
		<link>http://blog.betabong.com/2008/12/08/coverflow-3d-with-flash-player-10/</link>
		<comments>http://blog.betabong.com/2008/12/08/coverflow-3d-with-flash-player-10/#comments</comments>
		<pubDate>Mon, 08 Dec 2008 21:55:26 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Frontend]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[Flash 10]]></category>
		<category><![CDATA[project]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=172</guid>
		<description><![CDATA[<p>I&#8217;m close to finishing a new project. Well, it&#8217;s actually not that new of a project, but it hasn&#8217;t gone online so far, and when I did the first version back in March I&#8217;ve used <strong>Papervision</strong> to achieve the goals.&#8230; <a href="http://blog.betabong.com/2008/12/08/coverflow-3d-with-flash-player-10/" class="read_more">Read more</a></p>
No related posts.]]></description>
			<content:encoded><![CDATA[<p>I&#8217;m close to finishing a new project. Well, it&#8217;s actually not that new of a project, but it hasn&#8217;t gone online so far, and when I did the first version back in March I&#8217;ve used <strong>Papervision</strong> to achieve the goals. It&#8217;s basically a simple CoverFlow effect to scroll through Logos.</p>
<p>The thing with the old Papervision version was.. it got pretty slow when loading many pictures (resulting in many 3d objects). I got briefed with a screen design more or less and expected much less elements to be loaded. Now they got back to me saying they had some problems. Oh yes, they had. Boy was it slow!!</p>
<p>So I did a new version, skipping Papervision for the <strong>new Flash Player 10 </strong>capabilities. Wow! What an improvement not only in <strong>speed</strong>, but also in <strong>quality</strong> (because I wouldn&#8217;t have to switch to crispy bitmap handling for acceptable speed &#8211; and Flash doesn&#8217;t provide that feature anyway) and <strong>file size</strong> (less than 25%!). Now I just hope that the end client will have the nuts to go with Flash Player 10 :-) (Adobe still doesn&#8217;t provide any <a href="http://www.adobe.com/products/player_census/flashplayer/version_penetration.html">statistics</a>, but it&#8217;s not that wide spread yet as for now).</p>
<p>See here the result (still in development – click the picture). You&#8217;ll need Flash Player 10 (I don&#8217;t check for the version in this example):</p>
<p><a href="http://www.betabong.com/work/nose/globusflow2/GlobusFlow2.html" target="_blank"><img class="alignnone size-full wp-image-173" title="coverflow" src="http://blog.betabong.com/wp-content/uploads/2008/12/coverflow.jpg" alt="" width="512" height="204" /></a></p>
<p>I made use of <a href="http://theflashblog.com/?p=470">SimpleZSorter</a></p>
<p><strong>Update:</strong> Well, the client wouldn&#8217;t go with 10. So I had to recode the Papervision version to speed it up as much as possible, and I think it got pretty speedy after all. <a href="http://www.betabong.com/work/nose/globusflow-pv3d/" target="_blank">See here for comparison.</a></p>
<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2008/12/08/coverflow-3d-with-flash-player-10/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>How about we go fuck instead?</title>
		<link>http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/</link>
		<comments>http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/#comments</comments>
		<pubDate>Wed, 08 Oct 2008 23:44:50 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Random]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[sound]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=135</guid>
		<description><![CDATA[<p><a href="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" rel="lightbox[135]"><img class="alignnone size-full wp-image-136" title="Canvas Demo" src="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" alt="" width="512" height="308" /></a></p>
<p><a href="http://antisocial.demozoo.org/demo.html">A sweet nice canvas demo</a> with some (pseudo?) 3D. A lot of code for a little story. But I like it. You&#8217;ll gonna need a fast computer ;)</p>
<p>Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k</a></li></ol>&#8230; <a href="http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/" class="read_more">Read more</a></p>
Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" rel="lightbox[135]"><img class="alignnone size-full wp-image-136" title="Canvas Demo" src="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" alt="" width="512" height="308" /></a></p>
<p><a href="http://antisocial.demozoo.org/demo.html">A sweet nice canvas demo</a> with some (pseudo?) 3D. A lot of code for a little story. But I like it. You&#8217;ll gonna need a fast computer ;)</p>
<p>Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Multitouch Finger Fun</title>
		<link>http://blog.betabong.com/2008/08/27/multitouch-progress/</link>
		<comments>http://blog.betabong.com/2008/08/27/multitouch-progress/#comments</comments>
		<pubDate>Wed, 27 Aug 2008 21:22:48 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[gui]]></category>
		<category><![CDATA[interface]]></category>
		<category><![CDATA[multitouch]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=94</guid>
		<description><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/9zGDNFpOMcA&#38;hl=en&#38;fs=0&#38;color1=0xeeeeee&#38;color2=0xeeeeee&#38;ap=%2526fmt%3D18" /><embed type="application/x-shockwave-flash" width="520" height="400" src="http://www.youtube.com/v/9zGDNFpOMcA&#38;hl=en&#38;fs=0&#38;color1=0xeeeeee&#38;color2=0xeeeeee&#38;ap=%2526fmt%3D18" wmode="transparent"></embed></object></p>
<p>It&#8217;s very cool and interesting to see that kind of things. Much progress has been made with this kind of multitouch interface, both from a technical and a user interface view. Things got much more responsive and start to&#8230; <a href="http://blog.betabong.com/2008/08/27/multitouch-progress/" class="read_more">Read more</a></p>
No related posts.]]></description>
			<content:encoded><![CDATA[<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="wmode" value="transparent" /><param name="src" value="http://www.youtube.com/v/9zGDNFpOMcA&amp;hl=en&amp;fs=0&amp;color1=0xeeeeee&amp;color2=0xeeeeee&amp;ap=%2526fmt%3D18" /><embed type="application/x-shockwave-flash" width="520" height="400" src="http://www.youtube.com/v/9zGDNFpOMcA&amp;hl=en&amp;fs=0&amp;color1=0xeeeeee&amp;color2=0xeeeeee&amp;ap=%2526fmt%3D18" wmode="transparent"></embed></object></p>
<p>It&#8217;s very cool and interesting to see that kind of things. Much progress has been made with this kind of multitouch interface, both from a technical and a user interface view. Things got much more responsive and start to make sense.. <strong>with that kind of data</strong> (especially data that&#8217;s hard to manage with keyboard). So, in my opinion, it&#8217;s a great replacement for most things that we do with the mouse&#8230; but hey, in a productive environement, we deal a lot with language input, don&#8217;t we?</p>
<p>And while a virtual keyboard on an iPhone makes sense (switching languages, improving functionality via sw update, not taking any space where not much space is), i&#8217;m less than sure that this would work on a desktop device. Sure, writing on a keyboard is nothing easy to learn, but once you have it, you can write much faster than by hand, and everybody who has to write a lot knows about the importance of <strong>some good tactile feedback</strong>.</p>
<p>Anyway, I&#8217;m more than interested where this will lead to. I&#8217;m pretty sure we&#8217;ll first see this kind of things in (productive) environments that have to deal with (3D) imagery (like in medicine). Hmm hmm.</p>
<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2008/08/27/multitouch-progress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>RA D IOHEA_D HO_US E OF/ CARD_S</title>
		<link>http://blog.betabong.com/2008/07/17/ra-d-iohea_d-ho_us-e-of-card_s/</link>
		<comments>http://blog.betabong.com/2008/07/17/ra-d-iohea_d-ho_us-e-of-card_s/#comments</comments>
		<pubDate>Thu, 17 Jul 2008 12:48:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[Frontend]]></category>
		<category><![CDATA[Music]]></category>
		<category><![CDATA[Random]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[radiohead]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=25</guid>
		<description><![CDATA[<p>It doesn&#8217;t happen that often that I see stuff that amazes me from a professional and private perspective in so many ways. Well, it happened today when I saw:</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.youtube.com/v/8nTFjVm9sTQ&#38;hl=en&#38;fs=0&#38;color1=0xeeeeee&#38;color2=0xeeeeee&#38;ap=%2526fmt%3D18" /><embed type="application/x-shockwave-flash" width="520" height="400" src="http://www.youtube.com/v/8nTFjVm9sTQ&#38;hl=en&#38;fs=0&#38;color1=0xeeeeee&#38;color2=0xeeeeee&#38;ap=%2526fmt%3D18"></embed></object></p>
<p><a title="Radiohead Interactive 3D Viewer" href="http://code.google.com/creative/radiohead/viewer.html">http://code.google.com/creative/radiohead/viewer.html</a> (Flash)</p>
<p><a title="The starting page" href="http://code.google.com/creative/radiohead/">http://code.google.com/creative/radiohead/</a> (see video in better quality, making of&#8230; <a href="http://blog.betabong.com/2008/07/17/ra-d-iohea_d-ho_us-e-of-card_s/" class="read_more">Read more</a></p>
No related posts.]]></description>
			<content:encoded><![CDATA[<p>It doesn&#8217;t happen that often that I see stuff that amazes me from a professional and private perspective in so many ways. Well, it happened today when I saw:</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="520" height="400" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.youtube.com/v/8nTFjVm9sTQ&amp;hl=en&amp;fs=0&amp;color1=0xeeeeee&amp;color2=0xeeeeee&amp;ap=%2526fmt%3D18" /><embed type="application/x-shockwave-flash" width="520" height="400" src="http://www.youtube.com/v/8nTFjVm9sTQ&amp;hl=en&amp;fs=0&amp;color1=0xeeeeee&amp;color2=0xeeeeee&amp;ap=%2526fmt%3D18"></embed></object></p>
<p><a title="Radiohead Interactive 3D Viewer" href="http://code.google.com/creative/radiohead/viewer.html">http://code.google.com/creative/radiohead/viewer.html</a> (Flash)</p>
<p><a title="The starting page" href="http://code.google.com/creative/radiohead/">http://code.google.com/creative/radiohead/</a> (see video in better quality, making of and more&#8230;)</p>
<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2008/07/17/ra-d-iohea_d-ho_us-e-of-card_s/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced

Served from: blog.betabong.com @ 2012-02-05 05:27:32 -->
