Sunday, December 23, 2012

Use HxSL/Stage3D to Create 2D Filters/Shaders

Update on 2014/01/04:
Many things changed since the original post was published. Now HaXe is 3.0 and HXSL reaches 2.0. So here is the updated source code of the example for HaXe 3 and HXSL 2:
https://flaswf.googlecode.com/svn/trunk/flaswfblog/Tutorials/HxSL2DShader/HaXe3HXSL2/
====================

Maybe you know how to use Pixel Bender in your Flash project to create some custom filters. Alternatively, with the new Stage3D API introduced in Flash 11, we can write 2D filters running with GPU. Here is the example:



The idea is simple: draw a plane using two triangles, upload the images you want to process as textures and do all the magic in your fragment shaders. I recommended you to try HxSL, an advanced shader language which has similar grammar to the Pixel Bender language. The above example - Poster Effect is ported from the Pixel Bender filter with only a few modifications of the original Pixel Bender filter code.

The full source code of the above example (HaXe/HxSL):
https://flaswf.googlecode.com/svn/trunk/flaswfblog/Tutorials/HxSL2DShader
The source code of the Poster Shader in Pixel Bender Language：
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=2400022

Links:
Announcing HxSL:
http://ncannasse.fr/blog/announcing_hxsl
Using Flash 3D API:
http://haxe.org/doc/advanced/flash3d
HxSL API:
http://haxe.org/manual/hxsl

Posted by Bruce at 11:40 PM
Labels: , , , ,

6 comments:

  1. UnknownJune 13, 2013 at 7:01 PM

    hi.. just wanted to ask if this can run on ios? with the pixel bender pbj files?

    ReplyDelete
    Replies
    1. BruceJune 13, 2013 at 11:49 PM

      The example will run as a swf, so will not work on IOS, until HxSL can compile to IOS. However, the idea will work on IOS, because you can create apps using AIR and Stage3D. And please note that the above example has nothing to do with pixel bender, it is Stage3D.

      Delete
  2. Dewi MorganJanuary 2, 2014 at 7:00 PM

    Have you managed to get this example to run in Haxe3? With a little work, I got it to compile, but it crashes with an assert when I run it. Shame, because it's close to exactly what I need for my project :(

    ReplyDelete
    Replies
    1. BruceJanuary 4, 2014 at 2:26 AM

      Updated for HaXe3 and HXSL2:
      https://flaswf.googlecode.com/svn/trunk/flaswfblog/Tutorials/HxSL2DShader
      P.S. It seems the line "c = int(c);" will cause some runtime error, I'm not sure whether this is a bug or something else.

      Delete
    2. BruceJanuary 4, 2014 at 2:27 AM

      The new link:
      https://flaswf.googlecode.com/svn/trunk/flaswfblog/Tutorials/HxSL2DShader/HaXe3HXSL2/

      Delete
  3. bestessaysMarch 12, 2017 at 3:46 AM

    That is really very informative and useful blog. Need to keep this script for future reference. Thanks for sharing it and keep posting

    ReplyDelete

Subscribe to: Post Comments (Atom)

Sponsors