Skip navigation
Prophessor Balthazar
Currently Being Moderated

Blending two bitmaps into a new BitmapData, using a blend shader

Sep 21, 2013 2:51 PM

Tags: #actionscript_3.0 #pixel_bender

Hi

 

I have:

 

Two bitmap images of the same size, as BitmapData.

 

I want:

 

One larger BitmapData, with the two images blended together in a gradient, like this...

 

Row 1: [ BitmapData 1 ]

Row 2: [ BitmapData 1 with BitmapData 2 blended on top, alpha 0.1 ]

Row 3: [ BitmapData 1 with BitmapData 2 blended on top, alpha 0.2 ]

Row 4: [ BitmapData 1 with BitmapData 2 blended on top, alpha 0.3 ]

 

....

 

Row n: [ BitmapData 2 ]

 

------------------------------------

 

I can easily implement this using standard alpha blending. However, I would like to use my own blending algorithm, and doing it with actionscript is too slow. Therefore, I want to implement the blending function as a Pixel Bender shader. I have come so far as to make a function that works with standard alpha blending, and no custom shader involved:

 

protected function createGradientLookupTable( bitmapAtBlend0:BitmapData, bitmapAtBlend1:BitmapData, steps:uint ):BitmapData {
    var gradient:BitmapData = new BitmapData( 256, bitmapAtBlend0.height * steps );
    var translationMatrix:Matrix = new Matrix();
    var alphaTransform:ColorTransform = new ColorTransform();

    for( var row:int = 0; row < steps; row++ ) {
        gradient.draw(bitmapAtBlend0, translationMatrix);
        alphaTransform.alphaMultiplier = row / ( steps - 1 );
        gradient.draw(bitmapAtBlend1, translationMatrix, alphaTransform );
        translationMatrix.translate( 0, bitmapAtBlend0.height );
    }

    return gradient;
}

 

This works. To begin with, I have made a standard alpha blending shader in Pixel Bender, just to check whether I can load it in my Flash Builder project and make it work. This filter works in Pixel Bender 2.5:

 

<languageVersion : 1.0;>
kernel BlendHCL
<   namespace : "com.yadayada";
    vendor : "Yada Yada";
    version : 1;
    description : "Blends colors using hue chroma luma";
>
{
    input image4 src1;
    input image4 src2;
    output pixel4 dst;

    parameter float alpha;

    void
    evaluatePixel()
    {
        float4 pixelBottom = sampleNearest(src1,outCoord());
        float4 pixelTop = sampleNearest(src2,outCoord());

        dst = pixelBottom + ( pixelTop - pixelBottom ) * alpha;

    }
}

 

Don't mind the description etc, currently it's only supposed to take one alpha parameter, and blend using standard alpha blending. Just to see that I can get it to work. Here is my modified Actionscript code to use the custom blender, this code does NOT work:

 

protected function createGradientLookupTable( bitmapAtBlend0:BitmapData, bitmapAtBlend1:BitmapData, steps:uint ):BitmapData {
    var gradient:BitmapData = new BitmapData( 256, bitmapAtBlend0.height * steps );
    var translationMatrix:Matrix = new Matrix();
    var bitmap1:Bitmap = new Bitmap( bitmapAtBlend1 );
    var blendShader:Shader = new Shader( blendShaderCode );

    for( var row:int = 0; row < steps; row++ ) {
        gradient.draw(bitmapAtBlend0, translationMatrix);
        blendShader.data.alpha.value = [ row / ( steps - 1 ) ];
        bitmap1.blendShader = blendShader;
        try {
//            gradient.draw( bitmap1, translationMatrix ); // doesn't work
            gradient.draw( bitmap1, translationMatrix, null, BlendMode.SHADER ); // doesn't work either
        }
        catch( e:Error ) {
            trace( "Error happened! " + e.message ); // No error messages reported
        }
        translationMatrix.translate( 0, bitmapAtBlend0.height );
    }

    return gradient;
}

 

This modified code does not report any errors, it simply acts as if the alpha is always 1.0. The second image completely replaces the first. This is the expected result if the blend shader is not in effect at all. All the example code I find using a blend shader, simply blends the colors directly to the screen, not into a new Bitmap or BitmapData object. Can anyone help?

 

PS: Debugging in Flash Builder 4.7 and inspecting the variables indicates I have a valid shader object (blendShader).

 
Replies

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points