WebGL で色々な表現に挑戦する - 時間経過による変化（概要）

この記事の概要

前回や前々回の記事で、静的なグラフィック表現をいくつか実装しました。

今回は時間にあわせて見た目が変化するようにしてみます。

ユニフォーム変数の使用

TypeScript 側から時間に関する変数を渡して、シェーダー側で受け取って変化を実現します。

また、アニメーションさせるために requestAnimationFrame を使用します。

main.ts

  // シェーダーの渡すデータの設定
  const positionAttributeLocation = gl.getAttribLocation(
    shaderProgram,
    "aPosition"
  );
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

+ const timeUniformLocation = gl.getUniformLocation(shaderProgram, "uTime");

  // 描画の実行
- function drawScene() {
+ function drawScene(time: number) {
+   const currentTime = time * 0.001;
+   gl.uniform1f(timeUniformLocation, currentTime);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+   requestAnimationFrame(drawScene);
  }

  // ウィンドウサイズに合わせてcanvasのサイズを変更する
  function resizeCanvasToDisplaySize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    gl.viewport(0, 0, canvas.width, canvas.height);
-   drawScene();
+   drawScene(0.0);
  }

次にシェーダーで受け取ります。
ハイライトしている箇所で時間を扱い、見た目を変化させています。

plane.frag

  precision mediump float;

+ uniform float uTime;

  out vec4 outColor;

  void main() {
+   float red = sin(uTime * 0.5) + 0.5;
+   float green = cos(uTime * 0.7) + 0.5;
+   float blue = sin(uTime * 1.3) + 0.5;

    outColor = vec4(red, green, blue, 1.0);
  }

ただのベタ塗りですが、時間経過にあわせて変化するようになりました。

最後に

ここにグラデーションやノイズをあわせて行こうと思ったのですが、一旦分割します。
次回の記事で、静的に表現していたものに時間経過を組み合わせていきます。