PixelBender(着色器)初体验
时间:2022-04-23
本文章向大家介绍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
- 使用Python制作一个简单的刷博器
- 零基础学编程031:Python与其它语言最不同的一条语法规则
- dedecms批量导出新增文章url和标题
- 明理知意:复合索引优化及索引访问原理
- WCF配置文件与文件下载之坎坷路
- 零基础学编程030:像黑客般玩玩字符艺术
- Android获取SD卡总容量,可用大小,机身内存总容量及可用大小
- 零基础学编程029:程序员作图不用笔
- 零基础学编程028:面向对象编程OOP
- 如何修改帝国cms文章点击量默认值和成倍增加
- 深入内核:监听器的工作原理与故障诊断分析
- 零基础学编程027:站在巨人的肩膀上
- 群分享:Markdown + CSS 实现微信公众号排版
- Android 蓝牙操作详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 常用方法(文件夹操作)
- 常用方法(文件名操作)
- 构建File对象
- 两个常用静态变量
- Spring MVC 整合 Servlet 3.0
- 初探 SpringBoot 自动装配
- 报错405:HTTP method GET is not supported by this URL
- 思科模拟器:网络安全实验
- Django入门:基于 Django 的 Web 页面开发
- 从零开始重新认识 Spring Framework
- 思科模拟器:高级交换实验
- ElasticSearch 基本的查询命令+集成 SpringBoot
- 数据库能力测试:SQL 语句改错
- IDEA 导入并运行 Eclipse 的 JavaWeb 项目
- 使用思科模拟器 Cisco Packet Tracer 模拟交换机基本配置