p5.js でのシェーダーを使った描画に WebGL 2.0（GLSL ES 3.0）を使う 〜その3：JavaScript側から時間の情報を渡す、createFilterShader() を併用〜

以下の記事で試してきた、p5.js でのシェーダーを使った描画に WebGL 2.0（GLSL ES 3.0）を使う話の、さらに続きのお試しです。

●p5.js でのシェーダーを使った描画に WebGL 2.0（GLSL ES 3.0）を使う - Qiita
　https://qiita.com/youtoy/items/af009f7401fd3ce861dd

●p5.js のフィルター用シェーダー「createFilterShader()」で WebGL 2.0（GLSL ES 3.0）を使う ＋ 色・座標情報に関わる書き方を WebGL 2.0対応にする - Qiita
　https://qiita.com/youtoy/items/8b22073f2666ac0c8a3e

上記の 2番目と同様に、フィルター用シェーダー「createFilterShader()」を使うことにします。
そして、今回は p5.js のプログラムからシェーダーに時間情報を渡して、それをシェーダーで利用してみます。

プログラムの内容と実行結果

それでは、前回の記事の 1つ目のお試しを流用して、プログラムを作ってみます。

今回、試しに作った内容は以下の 2パターンです

パターン1： mod() を使う

let s;

function setup() {
  const fragSrc = `#version 300 es
  precision mediump float;

  out vec4 outColor;

  uniform float time;

  void main() {
    float modTime = mod(time, 2.0);
    float colB = modTime > 1.0 ? 2.0 - modTime : modTime;

    vec4 myColor = vec4(0.1, 0.3, colB, 1.0);
    outColor = myColor;
  }`;

  createCanvas(500, 400, WEBGL);
  pixelDensity(1);

  s = createFilterShader(fragSrc);
}

function draw() {
  s.setUniform("time", millis() / 1000.0);

  filter(s);
}

時間の情報の受け渡しは、シェーダー側は uniform float time の部分、JavaScript側は s.setUniform("time", millis() / 1000.0) の部分です。

それを、以下の処理で 0 から 1 の間を往復する値にして、青の色の値に用いています。

    float modTime = mod(time, 2.0);
    float colB = modTime > 1.0 ? 2.0 - modTime : modTime;

これを実行すると、色が時間変化する描画が行われるのが分かります。

パターン2： 三角関数を使う

次は、三角関数を組み合わせてみます。

まず、作ったプログラムは以下のとおりです。

let s;

function setup() {
  const fragSrc = `#version 300 es
  precision mediump float;

  out vec4 outColor;

  uniform float time;

  void main() {
    float colB = (sin(time*1.5) + 1.0) / 2.0;

    vec4 myColor = vec4(0.1, 0.3, colB, 1.0);
    outColor = myColor;
  }`;

  createCanvas(500, 400, WEBGL);
  pixelDensity(1);

  s = createFilterShader(fragSrc);
}

function draw() {
  s.setUniform("time", millis() / 1000.0);

  filter(s);
}

時間の情報の受け渡し方は、パターン1 と同じやり方です。
それをシェーダー側で使う際に、以下のようにしています。

    float colB = (sin(time*1.5) + 1.0) / 2.0;

大まかなところを言うと、-1 から 1 の値をとる sin() の値を、0 から　1 の間の値になるように補正しています。
上記のとおり、1 を加算して 0 から　2 の値の範囲になったものを、2 で除算して 0 から 1 の値の範囲にするという、シンプルな計算です。

変化のしかたについては、パターン1 と異なり sin() を使っているので線形の増減とは少し違った増減になります。

利用例

上記の 2つは、プログラムの内容をシンプルにするため、簡素な処理にしています。
（キャンバス全体が単色で塗られ、その塗りの色が時間変化するという描画）

最後に、今回の時間情報を使って、シェーダーの処理に反映させた場合の描画例を紹介してみます。

以下は、シェーダー側でグローエフェクト（光るエフェクト）をかけているのですが、その光り方の強さを、時間で変化させています。