Ryan Phelan - Bending and Flexing
21
Copyright © 2004 - 2009 All Rights Reserved Bending and Flexing Using Pixel Bender with Flex Ryan Phelan - www.rphelan.com - @rphelan 360|Flex Indianapolis
-
Upload
360conferences -
Category
Technology
-
view
1.724 -
download
2
description
Learn how to use Adobe’s Pixel Bender technology to trick out your applications with a limitless variety of effects and transitions. Write pixel shaders with the Pixel Bender Toolkit and integrate them into Flex. Bring your shaders to life using the Flex effects library and other popular tweening libraries. Leverage Pixel Bender’s processing power for non-visual computations. Discover the pros and cons of using Pixel Bender vs. traditional AS3 approaches. Expect lots of demos and open source code to play with.
Transcript of Ryan Phelan - Bending and Flexing
Copyright © 2004 - 2009 All Rights Reserved
Bending and Flexing Using Pixel Bender with Flex
Ryan Phelan - www.rphelan.com - @rphelan
360|Flex Indianapolis
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
Similar to other C-based shader languages
GLSL
HLSL
What is Pixel Bender?
Programming language for creating pixel shaders
Used with Flash, After Effects, and Photoshop
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 Toolkithttp://labs.adobe.com/downloads/pixelbender.html
Copyright © 2004 - 2009 All Rights Reserved
Data Types
Basic:
bool, int, float, pixel1
Matrix:
float2x2
float3x3
float4x4
Vector:
float2, float3, float4
bool2, bool3, bool4
int2, int3, int4
pixel2, pixel3, pixel4
Copyright © 2004 - 2009 All Rights Reserved
Vector Swizzling & Write Masking
Interchangeable
pixel.r == pixel.x
pixel.rgb == pixel.stp
Not mixable
pixel.ryp
pixel.xyza
3 Forms:
r, g, b, a
x, y, z, w
s, t, p, q
(AKA topics that will make you a hit at any party)
Copyright © 2004 - 2009 All Rights Reserved
Vector Swizzling & Write Masking
You can change the order to swap values
pixel.bgr
pixel.yx
You can repeat channels
pixel.rrr
pixel.xx
(AKA topics that will make you a hit at any party)
Copyright © 2004 - 2009 All Rights Reserved
Limitations
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.
Specification
Copyright © 2004 - 2009 All Rights Reserved
Limitations
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
What can’t Pixel Bender Do?
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
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
Official
Copyright © 2004 - 2009 All Rights Reserved
Resources
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
Sample Code
AuthoringEclipse Plugin - http://blog.joa-ebert.com/pbdt/
Copyright © 2004 - 2009 All Rights Reserved
Resources
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
Blogs
