アルファブレンディング
WebGL においては色を混ぜ合わせることをブレンディングと呼んでいます。
深度テストやカリングがそうであったように、ブレンディングも既定値は無効
gl.enable(gl.BLEND);
アルファブレンディング――つまり、半透明描画処理を行なうために、ブレンディングが必要になります。
ブレンディングとは
描画元( これから描画されようとする色 )と、
描画先( 既に描画されている色 )の二つを混ぜる
ブレンディングを有効にしたら、次にブレンドファクターを設定します。
※ブレンドファクター( ブレンド係数 )は一般的な呼称ではないかもしれませんが、
当サイトのテキストでは、ブレンディングに関する設定を総称してブレンドファクターと呼ぶことにします。
ブレンドファクターは、描画元と描画先、それぞれに対して設定することができます。
そして、それを行なうためのメソッドがblendFuncメソッドです。
gl.blendFunc(sourceFactor, destinationFactor);
このメソッドは引数を二つ取ります。
第一引数には描画元に適用するブレンドファクターを、
第二引数には描画先に適用するブレンドファクターを指定します。
table:ブレンドファクタ
定数名 値・式
gl.ZERO (0, 0, 0, 0)
gl.ONE (1, 1, 1, 1)
gl.SRC_COLOR (Rs, Gs, Bs, As)
gl.DST_COLOR (Rd, Gd, Bd, Ad)
gl.ONE_MINUS_SRC_COLOR (1, 1, 1, 1) - (Rs, Gs, Bs, As)
gl.ONE_MINUS_DST_COLOR (1, 1, 1, 1) - (Rd, Gd, Bd, Ad)
gl.SRC_ALPHA (As, As, As, As)
gl.DST_ALPHA (Ad, Ad, Ad, Ad)
gl.ONE_MINUS_SRC_ALPHA (1, 1, 1, 1) - (As, As, As, As)
gl.ONE_MINUS_DST_ALPHA (1, 1, 1, 1) - (Ad, Ad, Ad, Ad)
gl.CONSTANT_COLOR (Rc, Gc, Bc, Ac)
gl.ONE_MINUS_CONSTANT_COLOR (1, 1, 1, 1) - (Rc, Gc, Bc, Ac)
gl.CONSTANT_ALPHA (Ac, Ac, Ac, Ac)
gl.ONE_MINUS_CONSTANT_ALPHA (1, 1, 1, 1) - (Ac, Ac, Ac, Ac)
gl.SRC_ALPHA_SATURATE (f, f, f, 1) f = min(As, 1 - Ad)
blend有効時のデフォルトはgl.blendFunc(gl.ONE, gl.ZERO);
src dst
つまりこれは不透明の単なる塗りつぶし
アルファブレンディングをやるには
例
青い背景(0.0, 0.0, 1.0)に、赤いポリゴンを不透明度 70 %(1.0, 0.0, 0.0, 0.7)で描画
描画元(ポリゴン) + 描画先(コンテキスト) = 最終出力色
(1.0, 0.0, 0.0) * sFactor + (0.0, 0.0, 1.0) * dFactor = (0.7, 0.0, 0.3)
sFactorには、srcのRGBに不透明度0.7をかければいい
dFactorには、(1-不透明度)をかければよい
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
ただし、このままだとRGBAのAも動く
RGBとAを別々に制御したいなら、blendFuncSeparate