以下の記事で試してきた、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つは、プログラムの内容をシンプルにするため、簡素な処理にしています。
（キャンバス全体が単色で塗られ、その塗りの色が時間変化するという描画）
最後に、今回の時間情報を使って、シェーダーの処理に反映させた場合の描画例を紹介してみます。
以下は、シェーダー側でグローエフェクト（光るエフェクト）をかけているのですが、その光り方の強さを、時間で変化させています。