p5.js のフィルター用シェーダー「createFilterShader()」で座標情報を使った着色のお試し

はじめに

この記事では、以下の記事でも扱った「p5.js の createFilterShader()」を使います。

●p5.js の createFilterShader() を使ったフィルター用シェーダーのお試し - Qiita
　https://qiita.com/youtoy/items/1083d6319ddab6d525d3

今回は、座標を使った着色を試してみます。

createFilterShader() を使う

createFilterShader() で座標情報を扱う

まずは公式のリファレンスを見て、「createFilterShader()」で座標の情報を取得する方法を確認します。

●reference | createFilterShader()
　https://p5js.org/reference/#/p5/createFilterShader

サンプルコードの中に、バーテックスシェーダーから受けとった座標の情報が「vTexCoord」の保持されている、という説明が書かれていました。

プログラムを書いてみる

vTexCoord は vec2 となっているので、x と y の座標の値を「vTexCoord.x」「vTexCoord.y」といったやり方で得られそうです。

そうやって得た値を、RGB の R と G にそれぞれ反映させてみました。

function setup() {
  let fragSrc = `precision highp float;

  varying vec2 vTexCoord;
  uniform sampler2D tex0;

  void main() {
    vec4 color = texture2D(tex0, vTexCoord);
    color.r = vTexCoord.x;
    color.g = vTexCoord.y;

    gl_FragColor = vec4(color.rgb, 1.0);
  }`;

  createCanvas(400, 400, WEBGL);
  
  let s = createFilterShader(fragSrc);
  filter(s);
}

実行結果

上記のプログラムを実行すると、以下の描画が行われることが確認できました。

vTexCoord に格納された値は、0 から 1 の範囲になっているようで、そのまま R や　G の値として使うことができました。

バーテックスシェーダーはおまかせにして、フラグメントシェーダーだけを扱い、座標情報を使った簡単な描画を行うことができました。