专栏首页菩提树下的杨过PixelBender(着色器)初体验

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 条评论
登录 后参与评论

相关文章

  • struts2: 通过流输出实现exce导出

    参考下面代码,在Action中加一个方法: 1 // 导出excel 2 public String excel() throws Exce...

    菩提树下的杨过
  • IIS7的应用程序池

    最近将原来的系统迁移到IIS7.5上了,发现AspNetUpload只能运行在"程序程序池"的"经典"模式之下,采用"集成"模式后,AspnetUpload....

    菩提树下的杨过
  • AS3:小游戏“贪吃蛇”的实现

    前几天在园子里看到有人用Silverlight做了一个"贪吃蛇",一时兴起也想用AS3.0做一个,虽然这个游戏已经被很多开发者做烂了,但是作为AS的初学者,重新...

    菩提树下的杨过
  • 《Redis设计与实现》读书笔记(三十四) ——Redis Lua脚本环境设计与实现

    《Redis设计与实现》读书笔记(三十四) ——Redis Lua脚本环境设计与实现 (原创内容,转载请注明来源,谢谢) 一、创建lua环境 为了在redis...

    用户1327360
  • redis中的lua

    温安适
  • lua脚本操作redis数据库

    为什么要用lua脚本操作redis数据库? 1.减少开销–减少向redis服务器的请求次数 2.原子操作–redis将lua脚本作为一个原子执行 3.可复...

    编程珠玑
  • 侠盗猎车手GTA5单机版

    《侠盗猎车手5》(Grand Theft Auto V)又名“给他爱5”,是由Rockstar Games游戏公司出版发行的一款围绕犯罪为主题的开放式动作冒险游...

    叮当叮
  • docker搭建redis集群

    运行redis镜像 首先使用docker启动3个redis容器服务,分别使用到6379、6380、6381端口 docker run --name redis-...

    似水的流年
  • 利用基于AngularJS的XSS实现提权

    大家好,我是Shawar Khan。自我上次写作以来已经时隔好几个月了,这段时间我一直忙于不同的测试目标。最近我在某个目标中发现了一个有趣的XSS漏洞,通过该漏...

    FB客服
  • 《挑战30天C++入门极限》C/C++中字符指针数组及指向指针的指针的含义

      函数存放在内存的代码区域内,它们同样有地址,我们如何能获得函数的地址呢?   如果我们有一个int test(int a)的函数,那么,它的地址就...

    landv

扫码关注云+社区

领取腾讯云代金券