jit.gl.shader / GLSL アルファテスト&デプステストを使った透過テクスチャの描画 #maxmsp #jitter #glsl

OpenGLの透過&深度

スクリーンショット 2014-08-06 22.15.08
JitterのOpenGLにおいて、透過テクスチャを使う場合は、@blendenable 1 @depthenable 0 と設定します。ただし、その方法では奥行き(Z軸)も使ったポイントスプライト等の描画(@depathenable 1)をしたい場合に、上記画像のようにテクスチャの枠が出てしまう問題があります。描画するメッシュのZ座標が「画家のアルゴリズム」で想定される順番と逆方向に並んでいるために、手前の画像を描く方が先だと、後ろの画像がdepth testで描画されなくなっちゃうんですね。Zソートが出来れば良いですが、Jitterには実装されていないようです。

GLSLを使ったAlpha Test(アルファテスト)

スクリーンショット 2014-08-06 22.14.55
上記問題を解決するために、Alpha Testという方法があります。OpenGLのWikiに載っていたのですが、フラグメントシェーダで透過値が0なら描画をキャンセルすればOKという簡単な手法です。ただし、この方法は透過がbinaryつまり0か1のどちらかしか無い場合にしか使えないようです。

上記画像はポイントスプライトのGLSLに追加で実装してみた結果です。綺麗に描画されましたね。

GLSL / Fragment Shader

#version 120
uniform sampler2DRect tex0;

void main (void)
{
	vec4 texel = texture2DRect(tex0, gl_TexCoord[0].st);
	
        //Alpha Test
	if(texel.a < 1.0)
		discard;
	
	gl_FragColor = texel;
}

半透明ポリゴンは・・・?

Wikiに書いてあるように、Depth Sort(Z軸でメッシュの並べ替え)が必要です。Sortの方法にはBSP Tree Sorting(バイナリ空間分割)やDepth peelingという手法があるそうです。そのうち必要になったら実装してみたいと思います。

おぱんちゅ

スクリーンショット 2014-08-06 22.36.30
ぱんつつくった by 貞子♂様 ありがとうございます!

Leave a Comment