January 14, 2010
Pibeca - Pixel Bender for Canvas

Let me say this first - I am not a fan of Canvas and tinkering around with this project I realized why I prefer programming in AS3 so much more to Javascript: my goodness - this language is a dirty mess, how can anyone get anything done with it? But for fairness sake - I guess there must be some pro development tools out there which I don't know about and my using of notepad might not be the true JS developer experience.

So even though I think that compared to the capabilities of the Flash Player Canvas still lacks a lot, it cannot be ignored since it is now available on most major browsers. As a Flasher I find it especially entertaining to watch how history keeps repeating - browsing Canvas community blogs is like time traveling: plasma effects, l-systems, bitmap manipulations, physics engines, vector drawing experiments, emulators - in short everything that we were excited and enthusiastic about years ago is now being rediscovered, ported or reinvented on Canvas, just like we rediscovered, ported or reinvented things that had been done in Java or C years before Flash. But hey, I actually envy these guys - there is nothing more rewarding and creativity boosting than trying to push a limited platform to the maximum.

So since we are not so different after all, here's a little contribution to world platform peace - Pibeca allows you to use pixel shaders on Canvas Bitmaps. It achieves that by using Adobe® Pixel Bender™ filters which can be written with the freely available Pixel Bender™ toolkit. Those kernels are very small programs who's only purpose in life it is to push pixels around very fast.

So here is an proof of concept which should work on any browser that supports canvas:

Under the hood a canvas bitmap and a kernel url is being sent to an invisible SWF which loads the Pixel Bender filter kernel, processes the bitmap and then sends it back to JavaScript which passes it back to a canvas. That's all. Given that I have to encode the bitmap to a string in order to get it to the other side and back the speed is pretty okay I think.

I wanted to get this prototype out quickly, so until I have prepared some docs and more examples those who are adventurous can already have a look at QuasimondoLibs and check out the Actionscript and Javascript source code for this demo. Pibeca is released under MIT License.

Posted at January 14, 2010 12:59 PM | Further reading

AS reasonable Development environment for JavaScript I was told to take a deeper look at Aptana IDE (didn't have time or need to do that by now).

Beside that: What is the advantage of this roundtrip to ActionScript? The display Area looks pretty much the same, you still have to have Flash installed, its slower than the Flash version (and worse to be controlled).

The only (obvious) reason I see is that this integrates better in a html page. But dare to do animations or interaction manipulation with it. Keeping the speed limitation in mind it might not cost much more to just process the pbj and execute it with javascript. Okay, it will take longer but it will also work on browser without flash (namely iPhone) - i can think of a hybrid solution as well. As you mentioned: PixelBender Language is quite simple - shouldn't be too big of a deal...

Posted by: Martin Heidegger on January 14, 2010 01:45 PM

For me coming from Flash there is no advantage of using Canvas in the first place. So this whole project is more of a proof of concept that you can share binary data between Flash and JavaScript.

Your idea to emulate Pixel Bender entirely in JavaScript sounds great. Given the enthusiasm of the canvas community I bet someone will do it within the next 6 months.

Posted by: Mario Klingemann on January 14, 2010 02:21 PM

Martin is so right about that stuff. It's pointless, writing PixelBender parser in JS shouldn't be a big deal, and if you don't like JS language (I don't, it lacks OOP stuff), you can always use Java (GWT), and have your code optimized.

You can use Jison to make a parser, I would really be interested in how such project could end up.


Posted by: skrat on January 14, 2010 02:21 PM

Is like Gordon : Flash runtime written in JavaScript

Posted by: Mem's on January 14, 2010 04:05 PM

Gordon is a great project, but AFAIK it does not yet support any ActionScript - just vector animation.

Posted by: Mario Klingemann on January 14, 2010 04:11 PM

You can also use HaXe and have your code optimized. :-)

Posted by: Kevin Newman on January 14, 2010 09:33 PM

Aptana studio is the way to go for .js development: http://www.aptana.org/
If the other browsers would run javascript engines that are anywhere close to as fast as Chrome's then flash might finally get a run for it's money.

Posted by: pixelrevision on February 24, 2010 01:22 AM
Post a comment

Email Address:



Remember info?

Thank you!

Most Visited Entries
Sketches, Works & Source Code
In Love with
Powered by
Movable Type 2.661

© Copyright Mario Klingemann

Syndicate this site:
RSS 1.0 - RSS 2.0

Quasimondo @ flickr
Quasimondo @ LinkedIn
Quasimondo @ Twitter
Quasimondo @ Facebook
Quasimondo @ MySpace
Quasimondo is a Bright
Citizen of the TRansnational Republic
My other blog in german

My family name is written Klingemann,
not Klingelmann, Klingeman, Klingaman, Kingemann,
Kindermann, Killingaman, Klingman, Klingmann, Klingonman
Klingemman, Cleangerman, Klingerman or Kleangerman

profile for Quasimondo at Stack Overflow, Q&A for professional and enthusiast programmers