PixelBender: May the force be with it!

The release of FP 10 has brought us some really big features. One of the greatest things, in my opinion, is the possibility of including custom native filters. I am currently doing some research on how they could be used for post-processing effects in Flash-based games.

First result here. Click on image in the demo to start effect (FP 10 needed).

Update

PixelBender Kernel

Actionscript:
  1. <languageVersion : 1.0;>
  2. kernel HorizontalAverage
  3. <
  4. namespace:          "com.impossiblearts";
  5. vendor:             "Hannes Moser";
  6. version:            1;
  7. description:        "damped sin-wave depending on time";
  8. >
  9. {
  10. input image4 source;
  11. output pixel4 result;
  12.  
  13. const float pi = 3.14;
  14.  
  15. parameter float2 pos
  16. <
  17. minValue:float2(0.0, 0.0);
  18. maxValue:float2(2880.0, 2880.0);
  19. defaultValue:float2(225.0, 125.0);
  20. >;
  21.  
  22. parameter float amount
  23. <
  24. minValue:0.001;
  25. maxValue:0.1;
  26. defaultValue:0.01;
  27. >;
  28.  
  29. parameter float wavelength
  30. <
  31. minValue:0.0;
  32. maxValue:1.0;
  33. defaultValue:0.7;
  34. >;
  35.  
  36. parameter float damping
  37. <
  38. minValue:0.0;
  39. maxValue:1.0;
  40. defaultValue:0.5;
  41. >;
  42.  
  43. parameter float maxradius
  44. <
  45. minValue:0.1;
  46. maxValue:2880.0;
  47. defaultValue:200.0;
  48. >;
  49.  
  50. parameter float t
  51. <
  52. minValue:0.0;
  53. maxValue:10.0;
  54. defaultValue:0.0;
  55. >;
  56.  
  57. void evaluatePixel()
  58. {
  59. float2 coord = outCoord();
  60.  
  61. float wlength = 1.0 - wavelength;
  62. float dist = distance(pos, coord);
  63. float curve = sin(dist * wlength - t * pi) / (amount * dist * wlength);
  64. float distDamping = max(dist / maxradius, 1.0);
  65. float2 cw = coord + (curve * distDamping);
  66.  
  67. result = sampleNearest(source, cw);
  68. }
  69. }

AS (extended from lee brimelow's gotoandlearn example)

Actionscript:
  1. package
  2. {
  3. import caurina.transitions.Equations;
  4. import caurina.transitions.Tweener;
  5.  
  6. import flash.display.Bitmap;
  7. import flash.display.Shader;
  8. import flash.display.Sprite;
  9. import flash.events.Event;
  10. import flash.events.MouseEvent;
  11. import flash.filters.ShaderFilter;
  12. import flash.net.URLLoader;
  13. import flash.net.URLLoaderDataFormat;
  14. import flash.net.URLRequest;
  15.  
  16. // swf metadata
  17. [SWF(width="450", height="250", backgroundColor="#000000", framerate="60")]
  18.  
  19. public class NativePostProcessing extends Sprite
  20. {
  21. [Embed(source="starwars_tfu.jpg")]
  22. private var image:Class;
  23.  
  24. private var loader:URLLoader;
  25. private var shader:Shader;
  26. private var filter:ShaderFilter;
  27. private var im:Bitmap;
  28.  
  29. public function NativePostProcessing()
  30. {
  31. im = new image() as Bitmap;
  32. addChild(im);
  33. loader = new URLLoader();
  34. loader.dataFormat = URLLoaderDataFormat.BINARY;
  35. loader.addEventListener(Event.COMPLETE, onFilterLoad);
  36. loader.load(new URLRequest("filters/waves.pbj"));
  37. }
  38.  
  39. private function onFilterLoad(ev:Event):void
  40. {
  41. shader = new Shader(loader.data);
  42. shader.data.pos.value = [225, 85];
  43. shader.data.amount.value = [0];
  44. shader.data.wavelength.value = [0.2];
  45. shader.data.damping.value = [0.5];
  46.  
  47. // start effect onclick
  48. stage.addEventListener(MouseEvent.CLICK, this.startEffect);
  49. }
  50.  
  51. private function startEffect(ev:MouseEvent):void
  52. {
  53. Tweener.addTween(this, { waveTime:6, time:1.5, transition:Equations.easeNone, onComplete:resetValues });
  54.  
  55. Tweener.addTween(this, { wavelength:0.9, time:1.3, transition:Equations.easeOutQuart });
  56.  
  57. Tweener.addTween(this, { amount:2, time:0.7, transition:Equations.easeNone });
  58. Tweener.addTween(this, { amount:0, time:0.35, delay:0.9, transition:Equations.easeInOutQuint });
  59.  
  60. addEventListener(Event.ENTER_FRAME, this.update);
  61. }
  62.  
  63. private function resetValues():void
  64. {
  65. waveTime = 0;
  66. amount = 0.0;
  67. wavelength = 0.2;
  68. }
  69.  
  70. public var waveTime:Number = 0;
  71. public var amount:Number = 0.0;
  72. public var wavelength:Number = 0.2;
  73.  
  74. private function update(ev:Event):void
  75. {
  76. shader.data.t.value = [waveTime];
  77. shader.data.amount.value = [amount];
  78. shader.data.wavelength.value = [wavelength];
  79.  
  80. filter = new ShaderFilter(shader);
  81. im.filters = [filter];
  82. }
  83. }
  84. }

Flex - ActionScript project

Attention: You need Tweener to compile this files.


About this entry