Stage3d AGAL GPU处理照片 旧照片效果 sepia || pixelbender

如果看不到下边的flash,请更新flash player到最新版本。

利用AGAL实现旧照片效果,大家可以对照一下之前一篇文章,关于图像处理(pixelbender)。硬件处理肯定会更快,但这里无法表现出来,毕竟图片就这么小。拖拉进度条,可以设置照片旧的程度。

package 
{
    import com.adobe.utils.AGALMiniAssembler;
    import com.bit101.components.HSlider;
    import com.bit101.components.PushButton;
    
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Loader;
    import flash.display.Sprite;
    import flash.display.Stage3D;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.display3D.Context3D;
    import flash.display3D.IndexBuffer3D;
    import flash.display3D.Program3D;
    import flash.display3D.VertexBuffer3D;
    import flash.display3D.textures.Texture;
    import flash.events.Event;
    import flash.geom.Matrix;
    import flash.geom.Matrix3D;
    import flash.net.FileFilter;
    import flash.net.FileReference;
    import flash.utils.ByteArray;
    
    import net.hires.debug.Stats;
    
    /**
     * 借用了boycy815的代码框架
     * @author kenkozheng
     */
    [SWF(frameRate="60")]
    public class AGAL_Filter extends Sprite 
    {
        private const WIDTH:Number = 512;
        private const HEIGHT:Number = 512;
        
        //stage3d五巨头
        private var _stage3d:Stage3D;
        private var _context3d:Context3D;
        private var _program3d:Program3D;
        private var _index:IndexBuffer3D;
        private var _vertex:VertexBuffer3D;
        private var _texture:Texture;
        
        [Embed(source=("4.jpg"))]
        private var ImageSource:Class;
        
        private var _vertexProgram:String = "mov op, va0\n" +
                                        "mov v0, va1";            //传递给片段shader坐标值
        
        private var _fragmentProgram:String = "tex ft1, v0, fs0<2d,linear,nomip>\n" +
                                            "m44 ft2, ft1, fc1\n" +            //颜色变换
                                            "mul ft2, ft2, fc0.x\n" +        //效果图跟原图做multiply,向量float4 * float = float4,类似PixelBender
                                            "mul ft1, ft1, fc0.y\n" +
                                            "add ft2, ft2, ft1\n" +
                                            "mov oc, ft2";
        
        public function AGAL_Filter():void 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            removeEventListener(Event.ADDED_TO_STAGE, init);
            _stage3d = stage.stage3Ds[0];
            _stage3d.addEventListener(Event.CONTEXT3D_CREATE, onCreate);
            _stage3d.requestContext3D();
            addChild(new Stats());
        }
        
        private function onCreate(e:Event):void
        {
            e.target.removeEventListener(Event.CONTEXT3D_CREATE, onCreate);
            
            _context3d = _stage3d.context3D;
            _context3d.enableErrorChecking = true;
            
            var agal:AGALMiniAssembler = new AGALMiniAssembler();
            
            var vp:ByteArray = agal.assemble("vertex", _vertexProgram);
            var fp:ByteArray = agal.assemble("fragment", _fragmentProgram);
            _program3d = _context3d.createProgram();
            _program3d.upload(vp, fp);
            _context3d.setProgram(_program3d);
            
            _context3d.configureBackBuffer(WIDTH, HEIGHT, 0, false);
            _context3d.setBlendFactors("one", "zero");
            _context3d.setCulling("back");
            
            //两个三角形拼成平面
            _index = _context3d.createIndexBuffer(6);
            _index.uploadFromVector(new<uint>[0, 1, 2, 0, 2, 3], 0, 6);
            
            _vertex = _context3d.createVertexBuffer(4, 4);
            //这是由于纹理的坐标原点是左上角,y轴向下,最大值为1最小值为0
            //而顶点的坐标原点则是在舞台中央,而且y轴向上,最大值为1最小值为-1
            //那么(-1,-1)点对应的纹理就是(0,1)
            _vertex.uploadFromVector(new<Number>[
                //x, y, u, v
                -1, -1, 0, 1,
                -1, 1, 0, 0,
                1, 1, 1, 0,
                1, -1, 1, 1], 0, 4);
            _context3d.setVertexBufferAt(0, _vertex, 0, "float2"); //xy坐标
            _context3d.setVertexBufferAt(1, _vertex, 2, "float2");    //uv坐标
            
            //纹理位图
            var bt:Bitmap = Bitmap(new ImageSource());
            var btmap:BitmapData = new BitmapData(WIDTH, HEIGHT);
            btmap.draw(bt);
            
            //上传纹理
            _texture = _context3d.createTexture(btmap.width, btmap.height, "bgra", false);
            _texture.uploadFromBitmapData(btmap);
            _context3d.setTextureAt(0, _texture);
            //multiple比例
            _context3d.setProgramConstantsFromVector("fragment", 0, new<Number>[1, 0, 0, 0]);
            //颜色矩阵
            _context3d.setProgramConstantsFromMatrix("fragment", 1, new Matrix3D(new <Number>[
                0.393, 0.768, 0.189, 0,
                0.349, 0.686, 0.168, 0,
                0.272, 0.534, 0.13, 0,
                0, 0, 0, 1
            ]));
            
            _context3d.clear(0, 0, 0, 0);
            _context3d.drawTriangles(_index);
            _context3d.present();
            
            start();
        }
        
        private function start():void
        {
            new PushButton(this, 282, 515, "change", onUpload);
            new HSlider(this, 392, 520, onBar).setSliderParams(0, 1, 1);
        }
        
        private function onBar(e:Event):void
        {
            var v:Number = e.currentTarget.value;
            _context3d.setProgramConstantsFromVector("fragment", 0, new<Number>[v, 1-v, 0, 0]);
            _context3d.clear(0, 0, 0, 0);
            _context3d.drawTriangles(_index);
            _context3d.present();
        }
        
        private function onUpload(e:Event):void
        {
            var fr:FileReference = new FileReference();
            fr.addEventListener(Event.SELECT, onSelect);
            fr.browse([new FileFilter("jpg/png", "*.jpg;*.png")]);
        }
        
        private function onSelect(e:Event):void
        {
            e.currentTarget.removeEventListener(Event.SELECT, onSelect);
            e.currentTarget.addEventListener(Event.COMPLETE, onComplete);
            e.currentTarget.addEventListener(Event.OPEN, function(e:Event):void { } );
            e.currentTarget.load();
        }
        
        private function onComplete(e:Event):void
        {
            e.currentTarget.removeEventListener(Event.COMPLETE, onComplete);
            var loader:Loader = new Loader();
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderOnComplete);
            loader.loadBytes(e.currentTarget.data);
        }
        
        private function loaderOnComplete(e:Event):void
        {
            e.currentTarget.removeEventListener(Event.COMPLETE, loaderOnComplete);
            
            var btmap:BitmapData = new BitmapData(WIDTH, HEIGHT);
            var scale:Number = Math.max(WIDTH/e.currentTarget.loader.width, HEIGHT/e.currentTarget.loader.height);
            btmap.draw(e.currentTarget.loader, new Matrix(scale, 0, 0, scale), null, null, null, true);
            
            _texture.uploadFromBitmapData(btmap);
            
            _context3d.clear(0, 0, 0, 0);
            _context3d.drawTriangles(_index);
            _context3d.present();
        }
    }
    
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

PixelBender(着色器)初体验

只要是玩过photoshop的人,一定会对ps中的各式各样、功能强大的滤镜(filter)留下深刻的印象。 Adobe是靠图形处理软件起家的,这方面一直是它的强...

2316
来自专栏HenCoder

Android 开发进阶: 自定义 View 1-1 绘制基础

从今天开始,HenCoder 就正式开讲知识技能了。按照我的计划,第一季是 UI,UI 一共分为三部分:绘制、布局和触摸反馈。本期是绘制部分的第一期。绘制大概会...

682
来自专栏非著名程序员

十分钟搞定酷炫动画,Android自定义 View 入门

前几天 Ui 突然给我一个 gif 图说要把这个做成启动动画,看到效果图的我表示一脸懵逼。 ? 好吧,懵逼归懵逼,效果还是要做出来,作为一只没怎么写过动效的猿...

2258
来自专栏進无尽的文章

绘图-UIBezierPath

UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC...

902
来自专栏技术之路

用 WPF 写的颜色拾取器

之前都是用别人的颜色拾取器,今天自己用WPF写了一个颜色拾取器小程序 拾取鼠标所在位置的颜色,按键盘上的空格键停止取色 程序下载:MyWPFScreenColo...

2357
来自专栏菩提树下的杨过

Flash/Flex学习笔记(38):缓动动画

缓动 与 匀变速 看上去很类似,但其实有区别: 匀变速的公式为 V = V0 + at --速度v与时间t是线性(正比)关系,而且这种运动不需要确定目标点,速度...

1955
来自专栏木子昭的博客

CSS宽高等比布局

宽度是高度的两倍(等比缩放) 实现思路: 以父级元素为基准, 子级width:100%;(也就是父级宽度的100%), padding-top:50%(也就是...

3327
来自专栏GIS讲堂

Python中用GDAL实现矢量对栅格的切割

753
来自专栏程序你好

.Net GDI+的图件绘制平台(三)-绘图相关的Utility库

893
来自专栏菩提树下的杨过

Flash/Flex学习笔记(40):弹性运动续--弹簧

上一篇里演示的弹性运动加上摩擦力因素后,物体最终基本上都会比较准确的停在目标位置。但是我们回想一下现实世界中的弹簧,如果把弹簧的一头固定起来(即相当于目标点),...

1865

扫码关注云+社区