PixelBender(着色器)初体验

只要是玩过photoshop的人,一定会对ps中的各式各样、功能强大的滤镜(filter)留下深刻的印象。 Adobe是靠图形处理软件起家的,这方面一直是它的强项。这一技术经过不断发展,最终形成了今天的Pixel Bender(官方翻译为"着色器"),它在Adobe CS系列的主要产品中都被良好支持(包括Flash),而且据官方的介绍pixel bender支持GPU,多线程.

下面是几个在Flash中使用pixelBender的示例:

1.RGB色彩反相(有点象底片效果)

package {

	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.*;
	import flash.utils.ByteArray;

	[SWF(width="300",height="450",backgroundColor="#000000",framerate="30")]
	public class Demo1 extends Sprite {

		[Embed("invertRGB.pbj",mimeType="application/octet-stream")]
		private var TestFilter:Class;

		[Embed(source="mm1.png")]
		private var image:Class;
		private var im:Bitmap;
		private var btnAdd:FlatButton;
		private var isApply:Boolean=false;

		public function Demo1():void {
			im=new image   as Bitmap;
			addChild(im);
			btnAdd = new FlatButton();
			addChild(btnAdd);
			btnAdd.scaleX=btnAdd.scaleY=1.5;
			btnAdd.x=stage.stageWidth/2;
			btnAdd.y=25;
			btnAdd.addEventListener(MouseEvent.CLICK,btnAddClickHandler);
		}

		function btnAddClickHandler(e:MouseEvent):void {
			if (! isApply) {
				var shader:Shader = new Shader(new TestFilter() as ByteArray);
				var filter:ShaderFilter=new ShaderFilter(shader);
				im.filters=[filter];
				isApply=true;
			} else {
				im.filters=[];
				isApply=false;
			}
		}
	}
}

2.变色效果

package {

	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.*;
	import flash.utils.ByteArray;
	import fl.controls.*;
	import fl.events.SliderEvent;

	[SWF(width="300",height="450",backgroundColor="#000000",framerate="30")]
	public class Demo2 extends Sprite {

		[Embed("sepia.pbj",mimeType="application/octet-stream")]
		private var TestFilter:Class;

		[Embed(source="mm1.png")]
		private var image:Class;
		private var im:Bitmap;
		private var sl:Slider;

		public function Demo2():void {
			im=new image   as Bitmap;
			addChild(im);
			sl = new Slider();
			addChild(sl);
			sl.scaleX=sl.scaleY=2.0;
			sl.x=stage.stageWidth/2-sl.width/2;
			sl.y=20;
			sl.minimum=-1.0;
			sl.maximum=1.0;
			sl.snapInterval=0.05;
			sl.addEventListener(SliderEvent.THUMB_DRAG,changeHandler);
		}

		function changeHandler(e:SliderEvent):void {
			var shader:Shader = new Shader(new TestFilter() as ByteArray);			
			shader.data["intensity"].value[0] = e.value;
			var filter:ShaderFilter=new ShaderFilter(shader);			
			im.filters=[filter];
		}
	}
}

3.马赛克效果

package {

	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.*;
	import flash.utils.ByteArray;
	import fl.controls.*;
	import fl.events.SliderEvent;

	[SWF(width="300",height="450",backgroundColor="#000000",framerate="30")]
	public class Demo3 extends Sprite {

		[Embed("pixelate.pbj",mimeType="application/octet-stream")]
		private var TestFilter:Class;

		[Embed(source="mm1.png")]
		private var image:Class;
		private var im:Bitmap;
		private var sl:Slider;

		public function Demo3():void {
			im=new image   as Bitmap;
			addChild(im);
			sl = new Slider();
			addChild(sl);
			sl.scaleX=sl.scaleY=2.0;
			sl.x=stage.stageWidth/2-sl.width/2;
			sl.y=20;
			sl.minimum=1;
			sl.maximum=50;
			sl.snapInterval=1;
			sl.addEventListener(SliderEvent.THUMB_DRAG,changeHandler);
		}

		function changeHandler(e:SliderEvent):void {
			var shader:Shader = new Shader(new TestFilter() as ByteArray);			
			shader.data["dimension"].value[0] = e.value;
			var filter:ShaderFilter=new ShaderFilter(shader);			
			im.filters=[filter];			
		}
	}
}

4.扭曲效果

package {

	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.*;
	import flash.utils.ByteArray;
	import fl.controls.*;
	import fl.events.SliderEvent;

	[SWF(width="300",height="450",backgroundColor="#000000",framerate="30")]
	public class Demo4 extends Sprite {

		[Embed("twirl.pbj",mimeType="application/octet-stream")]
		private var TestFilter:Class;

		[Embed(source="mm1.png")]
		private var image:Class;
		private var im:Bitmap;
		private var slRadius:Slider;
		private var slCenterX:Slider;
		private var slCenterY:Slider;
		private var sAngle:Slider;

		public function Demo4():void {
			im=new image   as Bitmap;
			addChild(im);
			slRadius = new Slider();
			slCenterX = new Slider();
			slCenterY = new Slider();
			sAngle = new Slider();

			addChild(slRadius);
			addChild(slCenterX);
			addChild(slCenterY);
			addChild(sAngle);
			slRadius.scaleX=slRadius.scaleY=slCenterX.scaleX=slCenterX.scaleY=slCenterY.scaleX=slCenterY.scaleY=sAngle.scaleX=sAngle.scaleY=2.0;
			slRadius.x=stage.stageWidth/2-slRadius.width/2;
			slRadius.y=20;			
			slCenterX.x = slRadius.x;
			slCenterX.y = slRadius.y + 20;
			slCenterY.x = slRadius.x;
			slCenterY.y = slCenterX.y + 20;
			sAngle.x = slRadius.x;
			sAngle.y = slCenterY.y + 20;
			
			slRadius.minimum=10;
			slRadius.maximum=290;
			slRadius.snapInterval=1;
			
			slCenterX.minimum=0;
			slCenterX.maximum=300;
			slCenterX.snapInterval=1;
			
			slCenterY.minimum=0;
			slCenterY.maximum=450;
			slCenterY.snapInterval=1;
			
			sAngle.minimum=0;
			sAngle.maximum=360;
			sAngle.snapInterval=1;
			sAngle.value = 90;
			
			
			slRadius.addEventListener(SliderEvent.THUMB_DRAG,slRadiusHandler);			
			slCenterX.addEventListener(SliderEvent.THUMB_DRAG,slRadiusHandler);
			slCenterY.addEventListener(SliderEvent.THUMB_DRAG,slRadiusHandler);
			sAngle.addEventListener(SliderEvent.THUMB_DRAG,slRadiusHandler);
		}

		function slRadiusHandler(e:SliderEvent):void {
			var shader:Shader = new Shader(new TestFilter() as ByteArray);
			shader.data["twirlAngle"].value[0]=sAngle.value;
			shader.data["center"].value[0]=slCenterX.value;
			shader.data["center"].value[1]=slCenterY.value;
			shader.data["radius"].value[0]=slRadius.value;
			var filter:ShaderFilter=new ShaderFilter(shader);
			im.filters=[filter];
		}
	}
}

5.混合过渡效果

package {

	import flash.display.*;
	import flash.events.*;
	import flash.filters.*;
	import flash.net.*;
	import flash.utils.ByteArray;
	import fl.controls.*;


	[SWF(width="300",height="450",backgroundColor="#000000",framerate="30")]
	public class Demo5 extends Sprite {

		[Embed("crossfade.pbj",mimeType="application/octet-stream")]
		private var TestFilter:Class;

		[Embed(source="mm1.png")]
		private var image:Class;

		[Embed(source="mm2.jpg")]
		private var image2:Class;

		private var im:Bitmap;
		private var im2:Bitmap;
		private var sl:Slider;


		public function Demo5():void {
			im=new image   as Bitmap;
			im2=new image2   as Bitmap;
			addChild(im);
			addChild(im2);
			sl = new Slider();
			addChild(sl);
			sl.minimum=0;
			sl.maximum=1;
			sl.snapInterval=0.01;
			sl.value=1;
			sl.scaleX=sl.scaleY=2.0;
			sl.x=stage.stageWidth/2-sl.width/2;
			sl.y=20;
			addEventListener(Event.ENTER_FRAME,enterFrameHandler);
		}

		function enterFrameHandler(e:Event):void {
			var shader:Shader = new Shader(new TestFilter() as ByteArray);
			shader.data.frontImage.input=im2.bitmapData;
			shader.data.backImage.input=im.bitmapData;
			shader.data["intensity"].value[0]=sl.value;
			im2.blendMode=BlendMode.SCREEN;//这一句加上后,好象容易引起Flash崩溃,但不加这一句,又无法实时刷新。
			im2.blendShader=shader;
		}
	}
}

 以上效果都是PixelBender ToolKit自带的,如果您想开发自己想要的效果,Adobe也提供了详细的在线教程方便开发者学习。

源文件下载:http://cid-2959920b8267aaca.office.live.com/self.aspx/Flash/PixelBender.rar

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web 开发

第一双AIR FORCE

终于有了一双正品的AIR FORCE了,虽然之前已经有了一双AIR FORCE 1了,但只是高仿,并非真品。而这次的AIR FORCE 25 LOW可是一双货真...

751
来自专栏码匠的流水账

聊聊ImageIO使用argb操作jpg的bug

本文主要来聊一下使用ImageIO在BufferedImage.TYPE_INT_ARGB默认下操作jpg格式图片显示黑色的bug。

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

Silverlight Telerik控件学习:TreeView数据绑定并初始化选中状态、PanelBar的Accordion效果、TabPanel、Frame基本使用

实际开发中控件的数据源肯定是动态绑定的,不可能在xaml里写死item项。既然要绑定,就先来几个实体类: ? 上面是类图,各类的代码如下:  Business...

2978
来自专栏c#开发者

在DataGrid中选择,确认,删除多行复选框列表

在DataGrid中选择,确认,删除多行复选框列表 Selecting, Confirming & Deleting Mul...

3777
来自专栏calvin

SignalR主动通知订阅者示例

关键点:GlobalHost.ConnectionManager.GetHubContext

1493
来自专栏Android知识点总结

看得见的数据结构Android版之开篇前言

862
来自专栏Golang语言社区

使用WebAssembly和Go编写前端Web框架

JavaScript Frontend frameworks have undoubtedly helped to push the boundaries of...

2623
来自专栏技术之路

c# 调用win32模拟点击的两种方法

第一种 using System; using System.Collections.Generic; using System.ComponentModel;...

24010
来自专栏跟着阿笨一起玩NET

从sql server 中读取二进制图片

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

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

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

2015

扫码关注云+社区

领取腾讯云代金券