フラグメントシェーダーでモノクロエフェクトするためのメモ

フラグメントシェーダーでモノクロエフェクトをやってみます。 このエフェクトは比較的分かりやすかったです。

下の画像をモノクロ表示してみたいと思います。

普通にやる場合は、テクスチャのRGBの値をすべて足して、3で割ってあげれば色が均等になってグレーになります。

void main(){
  vec4 destColor = texture2D(uTex, vUv); 
  //内積を使って計算する
  //r * r + g * g + b * b
  float mono = dot(destColor.rgb, vec3(1.0/3.0));
  gl_FragColor = vec4(vec3(mono), destColor.a);
}

NTSC 系加重平均法

人間の目は青を暗く感じるらしく、rgbの割合を調整することでより自然なモノクロ画像がつくれるみたいです。

const float redScale   = 0.298912; 
const float greenScale = 0.586611; 
const float blueScale  = 0.114478;
const vec3  monochromeScale = vec3(redScale, greenScale, blueScale);

void main(){
  vec4 destColor = texture2D(uTex, vUv); 
  float mono = dot(destColor.rgb, monochromeScale);
  gl_FragColor = vec4(vec3(mono), destColor.a);
}