WebGL で高速 BlendMode その 2

Posted : 2013-08-07

この前の記事で試したブレンドモードは、ひとつのメッシュでのテクスチャーの色合成だったため、それぞれの画像を別々に管理できませんでした。この課題は、blendFunc を使えば解決できます。

OpenGL 由来の関数を使いながらなので、ブレンドモードの公式にそのまま当てはめて計算とは行かないのですが、よく利用しそうなブレンドはおおよそできました。個別のレイヤーなので、それぞれに別の動き（アニメーションなど）を与えながら色のブレンドをすることもできます。

demo

DEFAULT

gl.enable( gl.BLEND );
...
gl.drawElements( /* Background */ );

gl.blendFunc( gl.ONE, gl.ZERO );
gl.drawElements( /* Foreground */ );

ADD

gl.enable( gl.BLEND );
...
gl.drawElements( /* Background */ );

gl.blendFunc( gl.SRC_ALPHA, gl.ONE );
gl.drawElements( /* Foreground */ );

MULTIPLY

gl.enable( gl.BLEND );
...
gl.drawElements( /* Background */ );

gl.blendFunc( gl.DST_COLOR, gl.ZERO );
gl.drawElements( /* Foreground */ );

または gl.blendFunc( gl.ZERO, gl.SRC_COLOR ) でも同じ

SCREEN

gl.enable( gl.BLEND );
...
gl.drawElements( /* Background */ );

gl.blendFunc( gl.ONE_MINUS_DST_COLOR, gl.ONE );
gl.drawElements( /* Foreground */ );

gl.blendFunc、gl.blendEquation とは別に、gl.blendFuncSeparate と gl.blendEquationSeparate という関数もあり、これらを使うと alpha 値を別で渡すことができます。

考え方はブレンディング::計算式の設定の例1が参考になりました。

glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA)

この場合、
現在の色(Rd, Gd, Bd, Ad)
これから塗る色(Rs, Gs, Bs, As)
とした時、ブレンディング係数は
(Sr, Sg, Sb, Sa) → ( As, As, As, As)
(Dr, Dg, Db, Da) → (1-As, 1-As, 1-As)
となる。

つまり、「これから塗る色」のα値：Asが混ざり具合を決定する。(アルファブレンド)