PIXI.jsでのWebGLRendererでsubtractする

プロジェクトで利用しているPIXI.jsで必要になったので。

PIXI.jsはHTMLのcanvasを操作するライブラリ。
利用可能な環境であればWebGLで動作し、利用できない環境であればCanvasにフォールバックしてくれる。
グラフィックの操作やマウスイベントをハンドリングをいい感じに行なってくれるけれども、subtract、描画したグラフィックで背面のグラフィックを消すこと、canvasの destination-out がサポートされていないし、以下のような制約がある。

The WebGL renderer only supports the NORMAL, ADD, MULTIPLY and SCREEN blend modes.

PIXI.BLEND_MODES

ただ、内部的には当然ブラウザのAPIを利用しているので、少しの工夫で実現が可能。

mapWebGLBlendModesToPixi ここでPIXI.jsのブレンドモードとWebGLの設定のマッピングが行われている。

renderer.state でアクセスできる WebGLState にドキュメントにはないけど、 blendModes というプロパティが存在してさっきの mapWebGLBlendModesToPixi を保持している。
mapWebGLBlendModesToPixi は配列で numberである BLEND_MODES の各値をインデックスとして取得するので、配列の最後に任意の設定を追加して、 Graphics の blendMode に直接その値を指定すれば、その設定を利用して描画してくれるようになる。

具体的には以下のコード。

app.renderer.state.blendModes[20] = [0, 0x0303];

設定している値はここで呼び出している blendFunc(sfactor, dfactor) の引数。
直接設定してしまっているけれど、 WebGL constants で設定した方が行儀がいい。
描画元は alpha を 0 に、描画先は元のままとすることで、描画しようとしたところだけ透明になる。

今回はWebGLのみのサポートで決め打ちしてしまっているけれど、Canvasも対象とするのだったらWebGLが使えるかを判定した後に、それぞれ設定する方がいいと思う。