描画の塗りでのシェーダーの使用

シェーダーを使用して描画の塗りを作成する場合は、描画 API メソッドを使用してベクターシェイプを作成します。描画 API を使用してビットマップイメージをビットマップ塗りに使用できるのと同様に、シェーダーの出力はシェイプの塗りに使用されます。シェーダーの塗りを作成するには、コード内のシェイプの描画を開始する場所で、Graphics オブジェクトの beginShaderFill() メソッドを呼び出します。次のリストに示すように、 beginShaderFill() メソッドの第 1 引数として Shader オブジェクトを渡します。

var canvas:Sprite = new Sprite(); 
canvas.graphics.beginShaderFill(myShader); 
canvas.graphics.drawRect(10, 10, 150, 150); 
canvas.graphics.endFill(); 
// add canvas to the display list to see the result

シェーダーを描画の塗りとして使用する場合は、シェーダーで必要なすべての入力イメージ値およびパラメーター値を設定します。

次の例は、シェーダーを描画の塗りとして使用する方法を示します。この例では、シェーダーによって 3 つの点のグラデーションが作成されます。三角形の頂点にグラデーションの 3 色が示され、中間でブレンドされます。さらに、各色が回転し、回転するカラーエフェクトのアニメーションが作成されます。

ActionScript コードには 3 つのメソッドがあります。

• init() ：アプリケーションがロードされると、 init() メソッドが呼び出されます。このメソッドでは、三角形の頂点を表す Point オブジェクトの初期値を設定します。また、 canvas という名前の Sprite インスタンスも作成します。後から、 updateShaderFill() で、1 フレームに 1 回、シェーダーの結果が canvas に描画されます。最後に、シェーダーのバイトコードファイルがロードされます。

• onLoadComplete() ： onLoadComplete() メソッドで、 shader という名前の Shader オブジェクトが作成されます。また、パラメーターの初期値も設定されます。最後に、 updateShaderFill() メソッドが enterFrame イベントのリスナーとして追加されるため、アニメーションエフェクトを作成するために 1 フレームに 1 回呼び出されます。

• updateShaderFill() ： updateShaderFill() メソッドは 1 フレームに 1 回呼び出され、アニメーションエフェクトを作成します。このメソッドで、シェーダーのパラメーター値が計算され、設定されます。次に、 beginShaderFill() メソッドを呼び出してシェーダーの塗りを作成し、別の描画 API メソッドを呼び出してシェーダーの結果を三角形に描画します。

この例の ActionScript コードは次のようになります。Flash Builder の ActionScript のみのプロジェクトでは、このクラスをメインアプリケーションクラスとして使用します。または、Flash Professional の FLA ファイルでは、ドキュメントクラスとして使用します。

package 
{ 
    import flash.display.Shader; 
    import flash.display.Sprite; 
    import flash.events.Event; 
    import flash.geom.Point; 
    import flash.net.URLLoader; 
    import flash.net.URLLoaderDataFormat; 
    import flash.net.URLRequest; 
     
    public class ThreePointGradient extends Sprite 
    { 
        private var canvas:Sprite; 
        private var shader:Shader; 
        private var loader:URLLoader; 
         
        private var topMiddle:Point; 
        private var bottomLeft:Point; 
        private var bottomRight:Point; 
         
        private var colorAngle:Number = 0.0; 
        private const d120:Number = 120 / 180 * Math.PI; // 120 degrees in radians 
         
         
        public function ThreePointGradient() 
        { 
            init(); 
        } 
         
        private function init():void 
        { 
            canvas = new Sprite(); 
            addChild(canvas); 
             
            var size:int = 400; 
            topMiddle = new Point(size / 2, 10); 
            bottomLeft = new Point(0, size - 10); 
            bottomRight = new Point(size, size - 10); 
             
            loader = new URLLoader(); 
            loader.dataFormat = URLLoaderDataFormat.BINARY; 
            loader.addEventListener(Event.COMPLETE, onLoadComplete); 
            loader.load(new URLRequest("ThreePointGradient.pbj")); 
        } 
         
        private function onLoadComplete(event:Event):void 
        { 
            shader = new Shader(loader.data); 
             
            shader.data.point1.value = [topMiddle.x, topMiddle.y]; 
            shader.data.point2.value = [bottomLeft.x, bottomLeft.y]; 
            shader.data.point3.value = [bottomRight.x, bottomRight.y]; 
             
            addEventListener(Event.ENTER_FRAME, updateShaderFill); 
        } 
         
        private function updateShaderFill(event:Event):void 
        { 
            colorAngle += .06; 
             
            var c1:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle); 
            var c2:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle + d120); 
            var c3:Number = 1 / 3 + 2 / 3 * Math.cos(colorAngle - d120); 
             
            shader.data.color1.value = [c1, c2, c3, 1.0]; 
            shader.data.color2.value = [c3, c1, c2, 1.0]; 
            shader.data.color3.value = [c2, c3, c1, 1.0]; 
             
            canvas.graphics.clear(); 
            canvas.graphics.beginShaderFill(shader); 
             
            canvas.graphics.moveTo(topMiddle.x, topMiddle.y); 
            canvas.graphics.lineTo(bottomLeft.x, bottomLeft.y); 
            canvas.graphics.lineTo(bottomRight.x, bottomLeft.y); 
             
            canvas.graphics.endFill(); 
        } 
    } 
}

次の例は、「ThreePointGradient.pbj」という Pixel Bender バイトコードファイルの作成に使用された ThreePointGradient シェーダーカーネルのソースコードです。

<languageVersion : 1.0;> 
kernel ThreePointGradient 
< 
    namespace : "Petri Leskinen::Example"; 
    vendor : "Petri Leskinen"; 
    version : 1; 
    description : "Creates a gradient fill using three specified points and colors."; 
> 
{ 
    parameter float2 point1 // coordinates of the first point 
    < 
        minValue:float2(0, 0); 
        maxValue:float2(4000, 4000); 
        defaultValue:float2(0, 0); 
    >; 
     
    parameter float4 color1 // color at the first point, opaque red by default 
    < 
        defaultValue:float4(1.0, 0.0, 0.0, 1.0); 
    >; 
     
    parameter float2 point2 // coordinates of the second point 
    < 
        minValue:float2(0, 0); 
        maxValue:float2(4000, 4000); 
        defaultValue:float2(0, 500); 
    >; 
     
    parameter float4 color2 // color at the second point, opaque green by default 
    < 
        defaultValue:float4(0.0, 1.0, 0.0, 1.0); 
    >; 
     
    parameter float2 point3 // coordinates of the third point 
    < 
        minValue:float2(0, 0); 
        maxValue:float2(4000, 4000); 
        defaultValue:float2(0, 500); 
    >; 
     
    parameter float4 color3 // color at the third point, opaque blue by default 
    < 
        defaultValue:float4(0.0, 0.0, 1.0, 1.0); 
    >; 
     
    output pixel4 dst; 
     
    void evaluatePixel() 
    { 
        float2 d2 = point2 - point1; 
        float2 d3 = point3 - point1; 
         
        // transformation to a new coordinate system 
        // transforms point 1 to origin, point2 to (1, 0), and point3 to (0, 1) 
        float2x2 mtrx = float2x2(d3.y, -d2.y, -d3.x, d2.x) / (d2.x * d3.y - d3.x * d2.y); 
        float2 pNew = mtrx * (outCoord() - point1); 
         
        // repeat the edge colors on the outside 
        pNew.xy = clamp(pNew.xy, 0.0, 1.0); // set the range to 0.0 ... 1.0 
         
        // interpolating the output color or alpha value 
        dst = mix(mix(color1, color2, pNew.x), color3, pNew.y); 
    } 
}

描画 API を使用したシェイプの描画について詳しくは、 描画 API の使用 を参照してください。

Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。