360|Flex Indianapolis
Bending and Flexing Using Pixel Bender with Flex
Ryan Phelan - www.rphelan.com - @rphelan
Copyright © 2004 - 2009 All Rights Reserved

Bending and Flexing?
? ?
Copyright © 2004 - 2009 All Rights Reserved

Who Am I?
5+ years developing RIA & desktop apps in Flash/Flex/AIR
Currently Lead Interactive Developer at Phenomblue
Focus on
Emerging technologies
Improving workflow and productivity
Copyright © 2004 - 2009 All Rights Reserved

Topics
Practical applications of Pixel Bender
Technology/terminology overview
Pixel Bender Toolkit
Project Integration
Performance Considerations
Advanced Techniques
Demos
Copyright © 2004 - 2009 All Rights Reserved

What is a pixel shader?
Coloring
Lighting
Bump Mapping
Reflection
Specular Highlights
Distortion
Other Effects
Copyright © 2004 - 2009 All Rights Reserved

What is a pixel shader?
One pixel at a time
Can be done in parallel
Takes 0 or more images as input
and outputs an image based on
a set of parameters
Copyright © 2004 - 2009 All Rights Reserved

What is Pixel Bender?
Programming language for creating pixel shaders Similar to other C-based
shader languages
Used with Flash, After Effects, and Photoshop
GLSL
HLSL
Copyright © 2004 - 2009 All Rights Reserved

GPU vs. CPU
Only runs on CPU in Flash
Multi-threading used instead
How does this affect performance?
Copyright © 2004 - 2009 All Rights Reserved

The Pixel Bender Toolkit
http://labs.adobe.com/downloads/pixelbender.html
Copyright © 2004 - 2009 All Rights Reserved

Data Types
Basic: Vector:
bool, int, float, pixel1 float2, float3, float4
Matrix: bool2, bool3, bool4
float2x2 int2, int3, int4
float3x3 pixel2, pixel3, pixel4
float4x4
Copyright © 2004 - 2009 All Rights Reserved

Vector Swizzling & Write Masking
(AKA topics that will make you a hit at any party)
3 Forms: Interchangeable Not mixable
r, g, b, a pixel.r == pixel.x pixel.ryp
x, y, z, w pixel.rgb == pixel.stp pixel.xyza
s, t, p, q
Copyright © 2004 - 2009 All Rights Reserved

Vector Swizzling & Write Masking
(AKA topics that will make you a hit at any party)
You can change the order to You can repeat channels
swap values
pixel.rrr
pixel.bgr
pixel.xx
pixel.yx
Copyright © 2004 - 2009 All Rights Reserved

Limitations
Specification
Pixel Bender is Based on Shader Model spec (directX)
Flash uses Shader Model 2.0
Photoshop and After Effects use Shader Model 3.0
Why? Flash is web based, needs to work on wider range of
hardware.
Copyright © 2004 - 2009 All Rights Reserved

Limitations
What can’t Pixel Bender Do?
Loops or control structures other than if and else
Custom support functions and libraries
Region functions
Arrays
Dependent values
Non-constant indices into vector values
Copyright © 2004 - 2009 All Rights Reserved

Incorporating Pixel Bender in Flex
1. Embed or load at runtime
2. Pass byte code to instance of Shader class
3. Render
Use as a filter via DisplayObject.filters or BitmapData.applyFilter
Use as a fill via Graphics.beginShaderFill or GraphicsShaderFill
Use as a blend mode via DisplayObject.blendShader
Crunch numbers via ShaderJob
Copyright © 2004 - 2009 All Rights Reserved

Performance
ActionScript is faster for small data sets
Asynchronous ShaderJobs are slower
than synchronous
Vector input is faster than ByteArray for
large data sets
Your mileage may vary
(Don’t forget about alchemy)
Copyright © 2004 - 2009 All Rights Reserved

Wrapper Classes
Wrapper classes provide
Strong typing
Known API
Better reusability
Ability to limit shader input values
For fills and blend modes, extend flash.display.Shader
For filters, extend flash.display.ShaderFilter
Copyright © 2004 - 2009 All Rights Reserved

Wrap Up
Pixel Bender can be used in a large variety of ways, it’s not just for
image editing apps.
It can do certain types of calculations very efficiently.
It can also be a CPU hog.
Wrapper classes make your shaders simple to use.
We have only scratched the surface. Go out there and innovate!
Copyright © 2004 - 2009 All Rights Reserved

Resources
Official
Pixel Bender Wiki – http://www.adobe.com/go/pixelbender_toolkit
Pixel Bender Exchange – http://www.adobe.com/cfusion/exchange/index.cfm?
event=productHome&exc=26
Pixel Bender on Twitter - http://twitter.com/pixelbender
Forums - http://forums.adobe.com/community/adobe_labs/pixelbender
Copyright © 2004 - 2009 All Rights Reserved

Resources
Sample Code
Pixel Bender Explorer - http://extjs.com/blog/2009/02/19/pixel-bender-explorer
BendPixels – http://code.google.com/p/bendpixels
WPF Pixel Shader Effects Library - http://wpffx.codeplex.com
Tutorials - http://www.gotoandlearn.com
Authoring
Eclipse Plugin - http://blog.joa-ebert.com/pbdt/
Copyright © 2004 - 2009 All Rights Reserved

Resources
Blogs
Ryan Phelan - http://www.rphelan.com
Joa Ebert - http://blog.joa-ebert.com
Mr. Doob - http://mrdoob.com/blog
Tom Beddard - http://www.subblue.com
David Lenaert - http://www.derschmale.com
Frank Reitberger - http://www.dasprinzip.com/prinzipiell
Petri Leskinen - http://pixelero.wordpress.com
Copyright © 2004 - 2009 All Rights Reserved