ブラーフィルターによるぼかし処理
今回はフレームバッファを活用する一つの例として、ブラーフィルターをやってみます。
一度レンダリングした結果にぼかしを適用する
https://gyazo.com/6684ef556ed3c5166e5355ac0275017d
画素ごとにこんな感じのウェイトで混ぜる
マルチシェーダ
読んで字の如く、複数のシェーダを同時に使いこなす処理のことを言います。
まずフレームバッファに対して最初のレンダリングを行ないます。
この時点では前回のサンプルで使ったライティングなどを行なうことが可能なシェーダを使います。
フレームバッファへのレンダリングが済んだら、
今度はブラーフィルターをかけるための専用のシェーダに切り替えて再度レンダリングを行ないます。
つまり、頂点シェーダとフラグメントシェーダを二組用意しておき、
目的に応じて切り替えながらレンダリングを行なうわけです。
まずはライティングなどを行なう一つ目のシェーダに関連する部分です。
ブラーフィルターシェーダ
code:vert
attribute vec3 position;
attribute vec4 color;
uniform mat4 mvpMatrix;
varying vec4 vColor;
void main(void){
vColor = color;
gl_Position = mvpMatrix * vec4(position, 1.0);
}
code:frag
precision mediump float;
uniform sampler2D texture;
uniform bool useBlur;
varying vec4 vColor;
void main(void){
vec2 tFrag = vec2(1.0 / 256.0);
vec4 destColor = texture2D(texture, gl_FragCoord.st * tFrag);
if(useBlur){
destColor *= 0.36;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, 1.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, 1.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, 1.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, 0.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, 0.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, -1.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, -1.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, -1.0)) * tFrag) * 0.04;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, 2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, 2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, 2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, 2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, 2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, 1.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, 1.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, 0.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, 0.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, -1.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, -1.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-2.0, -2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2(-1.0, -2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 0.0, -2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 1.0, -2.0)) * tFrag) * 0.02;
destColor += texture2D(texture, (gl_FragCoord.st + vec2( 2.0, -2.0)) * tFrag) * 0.02;
}
gl_FragColor = vColor * destColor;
}
まじでそのまま周囲の画素を取得して足してる