How to use filters on ios mobile devices (iPhone/iPad) using GPU rendering (Solved)

[DaveGallant]

Many moons ago I asked a question here on the forums about how to use filters (specifically a glow filter) on a mobile devices (specifically the iPhone) when using GPU rendering and high resolution.

At the time, there was no answer... filters were unsupported. Period.

Well, Thanks to a buddy of mine, this problem has been solved and I can report that I have gotten a color matrix filter for desaturation AND a glow filter working on the iPhone and the iPad using GPU rendering and high resolution.

The solution, in a nut shell is as follows:

1: Create your display object... ie: a sprite.
2. Apply your filter to the sprite like you normally would.
3. Create a new bitmapdata and then draw that display object into the bitmap data.
4. Put the new bitmapdata into a bitmap and then put it on the stage or do what you want.

When you draw the display object into the bitmapdata, it will draw it WITH THE FILTER!
So even if you put your display object onto the stage, the filter will not be visible, but the new bitmapdata will!

Here is a sample app I created and tested on the iphone and ipad

var bm:Bitmap;			// temp bitmap object
var bmData:BitmapData;			// temp bitmapData object
var m:Matrix;			// temp matrix object
var gl:GlowFilter;			// the glow filter we are going to use
var sprGL:Sprite;			// the source sprite we are going to apply the filter too
var sprGL2:Sprite;			// the sprite that will hold our final bitmapdata containing the original sprite with a filter.

// create the filters we are going to use.

gl = new GlowFilter(0xFF0000, 0.9, 10, 10, 5, 2, false, false);

// create the source sprite that will use our glow filter.

sprGL = new Sprite();

// create a bitmap with any image from our library to place into our source sprite.

bm = new Bitmap(new Msgbox_Background(), "auto", true);

// add the bitmap to our source sprite.

sprGL.addChild(bm);

// add the glow filter to the source sprite.

sprGL.filters = [gl];

// create the bitmapdata that will draw our glowing sprite.

sprGL2 = new Sprite();

// create the bitmap data to hold our new image... remember, with glow filters, you need to add the padding for the flow manually. Should be double the blur size

bmData = new BitmapData(sprGL.width+20, sprGL.height+20, true, 0);

// create a matrix to translate our source image when we draw it. Should be the same as our filter blur size.

m = new Matrix(1,0,0,1, 10, 10);

// draw the source sprite containing the filter into our bitmap data

bmData.draw(sprGL, m);

// put the new bitmap data into a bitmap so we can see it on screen.

bm = new Bitmap(bmData, "auto", true);

// put the new bitmap into a sprite - this is just because the rest of my test app needed it, you can probably just put the bitmap right on the screen directly.

sprGL2.addChild(bm);

// put the source sprite with the filter on the stage. It should draw, but you will not see the filter.

sprGL.x = 100;

sprGL.y = 50;

this.addChild(sprGL);

// put the filtered sprite on the stage. it shoudl appear like the source sprite, but a little bigger (because of the glow padding)

// and unlike the source sprite, the flow filter should acutally be visible now!

sprGL2.x = 300;

sprGL2.y = 50;

this.addChild(sprGL2);

[taran0]

Great stuff dave

I currently have a slider which changes the hue of an image in a movieclip, I need it to move through he full range -180 to 180.

I desperately need to get this working on a tablet but cant get the filters to work in GPU mode. My application works too slow in cpu mode.

var Mcolor:AdjustColor = new AdjustColor();   //This object will hold the color properties

var Mfilter:ColorMatrixFilter;                           //Will store the modified color filter to change the image

var markerSli:SliderUI = new SliderUI(stage, "x", markerSli.track_mc, markerSli.slider_mc, -180, 180, 0, 1);   //using slider from http://evolve.reintroducing.com

Mcolor.brightness = 0;  Mcolor.contrast = 0; Mcolor.hue = 0; Mcolor.saturation = 0;            // Set initial value for filter

markerSli.addEventListener(SliderUIEvent.ON_UPDATE, markerSlider);                          // listen for slider changes

function markerSlider($evt:SliderUIEvent):void {

    Mcolor.hue = $evt.currentValue;                        

    updateM();

            }

function updateM():void{

    Mfilter = new ColorMatrixFilter(Mcolor.CalculateFinalFlatArray());

    all.marker.filters = [Mfilter];

}

how would I use your solution in my case

many thanks.