使用着色器作为混合模式

使用着色器作为混合模式与使用其他混合模式类似。着色器定义的外观取决于将两个显示对象混合在一起的视觉效果。若要将着色器用于混合模式，请将 Shader 对象指派给前景显示对象的 blendShader 属性。如果为 blendShader 属性指定非 null 值，显示对象的 blendMode 属性将自动设置为 BlendMode.SHADER。下面的清单演示如何使用着色器作为混合模式。注意，此示例假定存在名为 foreground 的显示对象。该对象与其他显示内容包含在显示列表的同一父级中，而 foreground 与其他内容重叠：

foreground.blendShader = myShader;

使用着色器作为混合模式时，着色器必须由至少两个输入定义。如示例所示，您未在代码中设置输入值。而是将两个混合后的图像自动用作着色器的输入。前景图像设置为第二个图像。（此显示对象便是要对其应用混合模式的对象。）背景图像由前景图像边框后的所有像素组合而成。背景图像设置为第一个输入图像。如果所用着色器要求两个以上的输入，则还需为前两个之外的其他输入提供值。

下面的示例演示如何使用着色器作为混合模式。此示例使用基于亮度的加亮混合模式。混合的结果是以任一混合对象中最亮的像素值显示该像素。

这段重要的 ActionScript 代码用到下面两个方法：

• init()：应用程序加载时调用 init() 方法。在此方法中，代码加载着色器字节代码文件。

• onLoadComplete()：在 onLoadComplete() 方法中，代码创建名为 shader 的 Shader 对象。然后绘制三个对象。第一个对象 backdrop 是混合对象后的深灰色背景。第二个对象 backgroundShape 是绿色渐变椭圆。第三个对象 foregroundShape 是橙色渐变椭圆。

  foregroundShape 椭圆是混合的前景对象。混合的背景图像由部分 backdrop 和部分 backgroundShape 构成，并叠加了 foregroundShape 对象的边框。foregroundShape 对象是位于显示列表最前面的对象。它与 backgroundShape 部分重叠，与 backdrop 全部重叠。由于上述重叠的存在，如果不应用混合模式，橙色椭圆 (foregroundShape) 将全部显示，并遮盖住绿色椭圆 (backgroundShape) 的一部分：

  

  而在应用混合模式之后，绿色椭圆的较亮部分会“穿透”前景显示出来，因为该部分比遮盖它的那部分 foregroundShape 更亮。

  

下面是此示例的 ActionScript 代码。使用此类作为 Flash Builder 中纯 ActionScript 项目的主应用程序类，或者作为 Flash Professional 中 FLA 文件的文档类：

package 
{ 
    import flash.display.BlendMode; 
    import flash.display.GradientType; 
    import flash.display.Graphics; 
    import flash.display.Shader; 
    import flash.display.Shape; 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.geom.Matrix; 
    import flash.net.URLLoader; 
    import flash.net.URLLoaderDataFormat; 
    import flash.net.URLRequest; 
     
    public class LumaLighten extends Sprite 
    { 
        private var shader:Shader; 
        private var loader:URLLoader; 
         
        public function LumaLighten() 
        { 
            init(); 
        } 
         
        private function init():void 
        { 
            loader = new URLLoader(); 
            loader.dataFormat = URLLoaderDataFormat.BINARY; 
            loader.addEventListener(Event.COMPLETE, onLoadComplete); 
            loader.load(new URLRequest("LumaLighten.pbj")); 
        } 
         
         
        private function onLoadComplete(event:Event):void 
        { 
            shader = new Shader(loader.data); 
             
            var backdrop:Shape = new Shape(); 
            var g0:Graphics = backdrop.graphics; 
            g0.beginFill(0x303030); 
            g0.drawRect(0, 0, 400, 200); 
            g0.endFill(); 
            addChild(backdrop); 
             
            var backgroundShape:Shape = new Shape(); 
            var g1:Graphics = backgroundShape.graphics; 
            var c1:Array = [0x336600, 0x80ff00]; 
            var a1:Array = [255, 255]; 
            var r1:Array = [100, 255]; 
            var m1:Matrix = new Matrix(); 
            m1.createGradientBox(300, 200); 
            g1.beginGradientFill(GradientType.LINEAR, c1, a1, r1, m1); 
            g1.drawEllipse(0, 0, 300, 200); 
            g1.endFill(); 
            addChild(backgroundShape); 
             
            var foregroundShape:Shape = new Shape(); 
            var g2:Graphics = foregroundShape.graphics; 
            var c2:Array = [0xff8000, 0x663300]; 
            var a2:Array = [255, 255]; 
            var r2:Array = [100, 255]; 
            var m2:Matrix = new Matrix(); 
            m2.createGradientBox(300, 200); 
            g2.beginGradientFill(GradientType.LINEAR, c2, a2, r2, m2); 
            g2.drawEllipse(100, 0, 300, 200); 
            g2.endFill(); 
            addChild(foregroundShape); 
             
            foregroundShape.blendShader = shader; 
            foregroundShape.blendMode = BlendMode.SHADER; 
        } 
    } 
}

下面是 LumaLighten 着色器内核的源代码，用于创建“LumaLighten.pbj”Pixel Bender 字节代码文件：

<languageVersion : 1.0;> 
kernel LumaLighten 
< 
    namespace : "com.quasimondo.blendModes"; 
    vendor : "Quasimondo.com"; 
    version : 1; 
    description : "Luminance based lighten blend mode"; 
> 
{ 
    input image4 background; 
    input image4 foreground; 
 
    output pixel4 dst; 
     
    const float3 LUMA = float3(0.212671, 0.715160, 0.072169); 
 
    void evaluatePixel() 
    { 
        float4 a = sampleNearest(foreground, outCoord()); 
        float4 b = sampleNearest(background, outCoord()); 
        float luma_a = a.r * LUMA.r + a.g * LUMA.g + a.b * LUMA.b; 
        float luma_b = b.r * LUMA.r + b.g * LUMA.g + b.b * LUMA.b; 
         
        dst = luma_a > luma_b ? a : b; 
    } 
}

有关使用混合模式的详细信息，请参阅应用混合模式。

 Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下