アニメーションと uniform

// uniform のロケーションは初期化時に 1 回だけ取得してキャッシュする
// (getUniformLocation は名前の文字列検索なので、毎フレーム呼ぶものではない)
const timeLocation = gl.getUniformLocation(program, 'u_time');
const mouseLocation = gl.getUniformLocation(program, 'u_mouse');

function frame(timestamp: DOMHighResTimeStamp): void {
  resizeIfNeeded();

  const time = timestamp / 1000; // rAF の引数はミリ秒。秒に直して使う

  gl.clear(gl.COLOR_BUFFER_BIT);

  // uniform の設定は「いま使っているプログラム」に対して行われる
  gl.useProgram(program);
  gl.uniform1f(timeLocation, time);
  gl.uniform2f(mouseLocation, mouseX, mouseY);

  gl.bindVertexArray(vao);
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  requestAnimationFrame(frame); // 次のフレームを予約する
}

requestAnimationFrame(frame); // ループ開始

#version 300 es

// 頂点属性: 頂点ごとに違う値。VBO 経由で渡される(第3章と同じ)
layout(location = 0) in vec2 a_position;
layout(location = 1) in vec3 a_color;

// uniform: ドローコール全体で共通の値。CPU 側から設定する
uniform float u_time; // 経過時間(秒)
uniform vec2 u_mouse; // マウス位置(クリップ空間 -1〜+1)

out vec3 v_color;

void main() {
  v_color = a_color;

  // ① ゆっくり回転する。sin / cos を直接書いた 2D 回転
  //    (この計算が mat2 という行列 1 つにまとまることを第10章で学ぶ)
  float angle = u_time * 0.5;
  float c = cos(angle);
  float s = sin(angle);
  vec2 pos = vec2(
    a_position.x * c - a_position.y * s,
    a_position.x * s + a_position.y * c
  );

  // ② sin で拡大率を揺らして脈動させる(0.55〜0.75 倍)
  pos *= 0.65 + 0.1 * sin(u_time * 2.0);

  // ③ マウスの方向へ寄せる(u_mouse はクリップ空間なのでそのまま足せる)
  pos += u_mouse * 0.3;

  gl_Position = vec4(pos, 0.0, 1.0);
}

#version 300 es

precision highp float;

// uniform は頂点・フラグメントのどちらのシェーダーでも宣言できる。
// 同じ名前・同じ型で両方に宣言すると、リンク後は 1 つの uniform として共有される
uniform float u_time;

in vec3 v_color;

out vec4 fragColor;

void main() {
  // 頂点色をゆっくり明滅させる(0.75〜1.0 倍)
  float pulse = 0.875 + 0.125 * sin(u_time * 3.0);
  fragColor = vec4(v_color * pulse, 1.0);
}

let mouseX = 0; // クリップ空間 (-1〜+1) で保持する。初期値は中央
let mouseY = 0;

canvas.addEventListener('pointermove', (event) => {
  const rect = canvas.getBoundingClientRect();

  // ① canvas の描画領域内の位置 → 0〜1 に正規化。
  //    rect はボーダーを含むので、clientLeft/Top(ボーダー幅)を引き、
  //    ボーダーを除いた表示サイズ clientWidth/Height で割る
  const x = (event.clientX - rect.left - canvas.clientLeft) / canvas.clientWidth;
  const y = (event.clientY - rect.top - canvas.clientTop) / canvas.clientHeight;

  // ② 0〜1 → クリップ空間 (-1〜+1)。y は向きが逆なので反転する
  mouseX = x * 2 - 1; // -1(左)〜+1(右)
  mouseY = 1 - y * 2; // -1(下)〜+1(上)
});

function resizeIfNeeded(): void {
  const dpr = Math.min(window.devicePixelRatio, 2);
  const width = Math.floor(canvas.clientWidth * dpr);
  const height = Math.floor(canvas.clientHeight * dpr);

  // width / height への代入は描画バッファの作り直し(中身も消える)なので、変化時のみ
  if (canvas.width !== width || canvas.height !== height) {
    canvas.width = width;
    canvas.height = height;
    // 描画バッファを作り直したら viewport も合わせ直す(第2章)
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  }
}

// 第4章: アニメーションと uniform
// 第3章の静止した三角形に uniform で時間とマウス座標を渡し、
// requestAnimationFrame のループで毎フレーム描画する。
// リサイズ処理は「ループの先頭でサイズが変わっていれば作り直す」形に統合する(第2章の続き)。

import fragmentSource from './triangle.frag?raw';
import vertexSource from './triangle.vert?raw';

// ---------------------------------------------------------------------------
// シェーダーのコンパイルとプログラムのリンク(第3章と同じ)
// ---------------------------------------------------------------------------

function compileShader(gl: WebGL2RenderingContext, type: GLenum, source: string): WebGLShader {
  const shader = gl.createShader(type);
  if (!shader) {
    throw new Error('シェーダーオブジェクトを作成できませんでした');
  }
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
    const log = gl.getShaderInfoLog(shader);
    gl.deleteShader(shader);
    throw new Error(`シェーダーのコンパイルに失敗しました:\n${log ?? '(ログなし)'}`);
  }
  return shader;
}

function linkProgram(
  gl: WebGL2RenderingContext,
  vertexShader: WebGLShader,
  fragmentShader: WebGLShader,
): WebGLProgram {
  const program = gl.createProgram();
  if (!program) {
    throw new Error('プログラムオブジェクトを作成できませんでした');
  }
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    const log = gl.getProgramInfoLog(program);
    gl.deleteProgram(program);
    throw new Error(`プログラムのリンクに失敗しました:\n${log ?? '(ログなし)'}`);
  }
  gl.deleteShader(vertexShader);
  gl.deleteShader(fragmentShader);
  return program;
}

// ---------------------------------------------------------------------------
// デモ本体
// ---------------------------------------------------------------------------

function setup(gl: WebGL2RenderingContext, canvas: HTMLCanvasElement): void {
  // --- 初期化(1 回だけ実行する部分) ---------------------------------------

  const program = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource),
  );

  // 頂点データと VAO の配線は第3章とまったく同じ
  // biome-ignore format: 1 頂点 = 1 行の並びを保つ
  const positions = new Float32Array([
    0.0, 0.8, // 上
    -0.8, -0.8, // 左下
    0.8, -0.8, // 右下
  ]);
  // biome-ignore format: 1 頂点 = 1 行の並びを保つ
  const colors = new Float32Array([
    1.0, 0.25, 0.35, // 上: 赤
    0.25, 0.9, 0.5, // 左下: 緑
    0.3, 0.5, 1.0, // 右下: 青
  ]);

  const vao = gl.createVertexArray();
  gl.bindVertexArray(vao);

  const positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

  const colorBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
  gl.enableVertexAttribArray(1);
  gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

  gl.bindVertexArray(null);

  // uniform のロケーションは初期化時に 1 回だけ取得してキャッシュする
  // (getUniformLocation は名前の文字列検索なので、毎フレーム呼ぶものではない)
  const timeLocation = gl.getUniformLocation(program, 'u_time');
  const mouseLocation = gl.getUniformLocation(program, 'u_mouse');

  // クリア色も「状態」なので、毎フレーム設定し直す必要はない
  gl.clearColor(0.06, 0.07, 0.09, 1.0);

  // --- マウス: DOM 座標をクリップ空間へ変換して保持する --------------------

  let mouseX = 0; // クリップ空間 (-1〜+1) で保持する。初期値は中央
  let mouseY = 0;

  canvas.addEventListener('pointermove', (event) => {
    const rect = canvas.getBoundingClientRect();

    // ① canvas の描画領域内の位置 → 0〜1 に正規化。
    //    rect はボーダーを含むので、clientLeft/Top(ボーダー幅)を引き、
    //    ボーダーを除いた表示サイズ clientWidth/Height で割る
    const x = (event.clientX - rect.left - canvas.clientLeft) / canvas.clientWidth;
    const y = (event.clientY - rect.top - canvas.clientTop) / canvas.clientHeight;

    // ② 0〜1 → クリップ空間 (-1〜+1)。y は向きが逆なので反転する
    mouseX = x * 2 - 1; // -1(左)〜+1(右)
    mouseY = 1 - y * 2; // -1(下)〜+1(上)
  });

  // --- リサイズ: ループの先頭で「変わっていれば作り直す」(第2章の統合形) ----

  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, 2);
    const width = Math.floor(canvas.clientWidth * dpr);
    const height = Math.floor(canvas.clientHeight * dpr);

    // width / height への代入は描画バッファの作り直し(中身も消える)なので、変化時のみ
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
      // 描画バッファを作り直したら viewport も合わせ直す(第2章)
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    }
  }

  // --- 描画ループ: 毎フレーム実行する部分 ----------------------------------

  function frame(timestamp: DOMHighResTimeStamp): void {
    resizeIfNeeded();

    const time = timestamp / 1000; // rAF の引数はミリ秒。秒に直して使う

    gl.clear(gl.COLOR_BUFFER_BIT);

    // uniform の設定は「いま使っているプログラム」に対して行われる
    gl.useProgram(program);
    gl.uniform1f(timeLocation, time);
    gl.uniform2f(mouseLocation, mouseX, mouseY);

    gl.bindVertexArray(vao);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    requestAnimationFrame(frame); // 次のフレームを予約する
  }

  requestAnimationFrame(frame); // ループ開始
}

// ---------------------------------------------------------------------------
// 要素とコンテキストの取得
// ---------------------------------------------------------------------------

const canvas = document.querySelector<HTMLCanvasElement>('#demo');
if (!canvas) {
  throw new Error('canvas 要素 #demo が見つかりません');
}

const gl = canvas.getContext('webgl2');
if (!gl) {
  throw new Error('このブラウザは WebGL2 に対応していません');
}

setup(gl, canvas);