使用著色器做為混合模式

使用著色器做為混合模式就像使用其它混合模式一樣。著色器會定義兩個顯示物件混合在一起所產生的視覺外觀。若要使用著色器做為混合模式，請將 Shader 物件指定給前景顯示物件的 blendShader 屬性。將 null 以外的值指定給 blendShader 屬性時，會自動將顯示物件的 blendMode 屬性設定為 BlendMode.SHADER 。下列程式碼會示範如何使用著色器做為混合模式。請注意，這個範例會假設顯示清單上有個名為 foreground 的顯示物件包含在與其它顯示內容相同的父輩中，而且 foreground 與其它內容重疊：

foreground.blendShader = myShader;

當您使用著色器做為混合模式時，必須使用至少兩個輸入來定義著色器。如上述範例所示，您不需在程式碼中設定輸入值，程式碼會自動使用兩個混合的影像做為著色器輸入。前景影像會設定為第二個影像 (它是已套用混合模式的顯示物件)。背景影像是透過採用合成前景影像的範圍框後方的所有像素所建立。背景影像會設定為第一個輸入影像。如果您將使用兩個以上的輸入來定義著色器，則必須為前兩個輸入之後的任何輸入提供值。

下列範例會示範如何使用著色器做為混合模式。這個範例會使用以明度為基礎的變亮混合模式。混合的結果，就是這兩個混合物件的最亮像素值會變成所顯示的像素。

這個重要的 ActionScript 程式碼是以下列兩個方法為基礎所撰寫：

• init() ：載入應用程式時，會呼叫 init() 方法。在這個方法中，程式碼會載入著色器位元組碼檔案。

• onLoadComplete() ：在 onLoadComplete() 方法中，程式碼會建立名為 shader 的 Shader 物件，再繪製三個物件。第一個物件 backdrop 是暗灰色的背景，位於混合物件後方。第二個物件 backgroundShape 是具有綠色漸層的橢圓。第三個物件 foregroundShape 是具有橘色漸層的橢圓。

  foregroundShape 橢圓是混合的前景物件，混合的背景影像則是由 foregroundShape 物件的範圍框所重疊之部分 backdrop 和部分 backgroundShape 所組成。 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; 
    } 
}

如需有關使用混合模式的詳細資訊，請參閱 套用混合模式 。

Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。