apache-flexactionscript-3shaderblurpixel-bender

Flex shader effects: render one object into another


I want to make such effect: draggable semi-transparent object (let's call it 'plastic strip') over window with arbitrary objects. Plastic strip should be turbid, i.e. it blurs content under it (not blurred itself). What's the best way to do that with PixelBender shader on Flex?


Solution

  • It turned to be simple, actually. To update plastic strip, I'm drawing window content into bitmap, then feed it to shader to draw strip (called blurred here):

    private function onBlurredUpdate():void {
        matrix.identity();
        matrix.translate(-blurred.x, -blurred.y);
        clipRect.width = blurred.width;
        clipRect.height = blurred.height;
    
        body.removeChild(blurred);
        bitmapData.draw(body, matrix, null, null, clipRect);
        body.addChild(blurred);
    
        shader.data.src.input = bitmapData;
    
        var graphics:Graphics = blurred.graphics;
        graphics.clear();
        graphics.lineStyle(2, 0xC0C0C0);
        graphics.beginShaderFill(shader);
        graphics.drawRoundRect(0, 0, blurred.width, blurred.height, 10, 10);
        graphics.endFill();
    }
    

    Shader is simple box filter from PixelBender samples. If I skip removing strip from window before draw, it gives funny feedback effect - blurred pixels continue to blur like ink.