Apple-like reflection using Pixel Bender

By Jon on December 2, 2008 10:38 AM
pixelbender.jpg
Update: Fixed a minor bug when dealing with transparent sources.

Everyone loves pixel bender and everyone loves those apple-like reflections. So why not combine them? That's why we've gone ahead and created a very simple pixel bender filter for creating just this effect, even on video (and it looks especially good on video).

Source code and download after the jump.

Here is the pbk source code for the filter:

  1. kernel ReflectionFilter
  2. <  namespace : "com.squidder";
  3.    vendor : "Jon Reiling / Squidder.com";
  4.    version : 1;
  5.    description : "Filter for creating an apple-like reflection.";
  6. >
  7. {
  8.    input image4 src;
  9.    output pixel4 dst;
  10.    
  11.    parameter float imageheight
  12.    <
  13.       minValue: 0.0;
  14.       maxValue : 1000.0;
  15.       defaultValue : 300.0;
  16.    
  17.    >;
  18.       
  19.    parameter float fadeheight
  20.    <
  21.       minValue : 0.0;
  22.       maxValue: 1000.0;
  23.       defaultValue: 100.0;
  24.    >;
  25.    
  26.    parameter float fadealpha
  27.    <
  28.       minValue : 0.0;
  29.       maxValue : 1.0;
  30.       defaultValue : 0.5;
  31.    >;
  33.    void
  34.    evaluatePixel()
  35.    {
  36.       float2 coord = outCoord();
  37.       
  38.       if ( coord[ 1 ] < imageheight ) {
  40.          dst = sampleNearest(src, coord );
  42.       } else {
  43.          
  44.          float alpha = 1.0 - ( coord[ 1 ] - imageheight ) / fadeheight;
  45.          coord[ 1 ] = imageheight - ( coord[ 1 ] - imageheight );
  46.          
  47.          dst = sampleNearest( src, coord );
  48.          
  49.          alpha *= fadealpha;
  50.          dst.a *= alpha;
  51.          dst.r *= alpha;
  52.          dst.b *= alpha;
  53.          dst.g *= alpha;
  54.       }
  55.       
  56.       
  57.    }
  58. }

As you may be able to tell, there are two unfortunate aspects to this filter. The first is that you have to manually pass in the height of the image. I have yet to figure out how to get the overall height of the image being passed in -- if anyone knows, please hit us up in the comments!

Secondly, if you try this out, you'll see that the reflection actually overwrites the bottom part of the source image. This is because, as far as I can tell, you can't add height to your output. So to counter this, you'll need to artificially add height to your target clip. You can do this easily by adding a transparent shape the height of your reflection. Again, if you have any notions on this, please drop a comment.

Finally, here is the flash code to read in and apply the filter:

  1. var reflectionHeight : int = 50;
  3. var urlLoader : URLLoader = new URLLoader();
  4. urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
  5. urlLoader.addEventListener( Event.COMPLETE , _applyFilter );
  6. urlLoader.load( new URLRequest( "ReflectionFilter.pbj" ) );
  8. function _applyFilter( event : Event ) : void {
  10.    var shader:Shader = new Shader( URLLoader( event.target ).data );
  11.    
  12.    shader.data.imageheight.value = [ target.height - reflectionHeight ];
  13.    shader.data.fadeheight.value = [ reflectionHeight ];
  14.    shader.data.fadealpha.value = [ 0.4 ];
  15.       
  16.    var filter : ShaderFilter = new ShaderFilter( shader );
  17.    target.filters = [ filter ];
  18. }

Posted under as3, labs

Leave a comment

AS3 and Flash you'll lose your ink over.