全画面シェーダー環境を作る

#version 300 es

// 共通モジュール: 全画面三角形の頂点シェーダー
//
// 頂点バッファ(VBO)も VAO の配線も使わない。in 変数がひとつもない代わりに、
// 「いま何番目の頂点を処理しているか」が入る組み込み変数 gl_VertexID(第5章)から
// クリップ空間の座標を直接計算する。
//
// drawArrays(gl.TRIANGLES, 0, 3) で呼ばれると、3 頂点は次の位置になる:
//   gl_VertexID = 0 → (-1, -1)  画面の左下の角
//   gl_VertexID = 1 → ( 3, -1)  右下のはるか外
//   gl_VertexID = 2 → (-1,  3)  左上のはるか外
// この三角形はクリップ空間の正方形 (-1〜+1) を完全に覆い、
// はみ出した部分はクリッピングで捨てられるため、結果として画面全体が塗られる。

void main() {
  float x = gl_VertexID == 1 ? 3.0 : -1.0;
  float y = gl_VertexID == 2 ? 3.0 : -1.0;
  gl_Position = vec4(x, y, 0.0, 1.0);
}

import { startFullscreenShader } from '../../lib/fullscreen-shader';

// canvas とフラグメントシェーダーのソースを渡すとループが始まる。
// オプションは省略可(maxDpr の既定は 2)。返り値の stop() でループを止められる
const { stop } = startFullscreenShader(canvas, fragmentSource, { maxDpr: 2 });

// uniform ロケーションは毎フレーム引かず、一度だけ取得してキャッシュする。
// フラグメントシェーダー側で宣言していない(または未使用で最適化により消えた)
// uniform のロケーションは null になるが、null を渡した uniform* 呼び出しは
// 黙って無視される(第4章)。だから 3 つのうち必要なものだけ使うシェーダーでも動く。
const timeLocation = gl.getUniformLocation(program, 'u_time');
const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
const mouseLocation = gl.getUniformLocation(program, 'u_mouse');

function onPointerMove(event: PointerEvent): void {
  const rect = canvas.getBoundingClientRect();
  // DOM 座標(左上原点・CSS ピクセル)→ 左下原点・描画バッファのピクセルへ変換。
  // rect はボーダーを含む外形なので、clientLeft/Top(ボーダー幅)を引いて
  // 描画領域内の位置にし、ボーダーを除いたサイズ clientWidth/Height で換算する。
  // canvas.width / canvas.clientWidth が「CSS 1px あたりの描画バッファのピクセル数」(≒ dpr)
  const x = event.clientX - rect.left - canvas.clientLeft;
  const y = event.clientY - rect.top - canvas.clientTop;
  const scaleX = canvas.width / canvas.clientWidth;
  const scaleY = canvas.height / canvas.clientHeight;
  mouseX = x * scaleX;
  mouseY = (canvas.clientHeight - y) * scaleY;
  pointerActive = true;
}
canvas.addEventListener('pointermove', onPointerMove);

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

  const width = gl.drawingBufferWidth;
  const height = gl.drawingBufferHeight;
  gl.viewport(0, 0, width, height);

  // 標準 uniform を更新する。時間は rAF の timestamp(ミリ秒)を秒に直したもの
  gl.uniform1f(timeLocation, timestamp * 0.001);
  gl.uniform2f(resolutionLocation, width, height);
  if (pointerActive) {
    gl.uniform2f(mouseLocation, mouseX, mouseY);
  } else {
    gl.uniform2f(mouseLocation, width / 2, height / 2);
  }

  // VAO も VBO もバインドしないまま「3 頂点で三角形 1 枚」を描く。
  // 頂点データは使わず、頂点シェーダーが gl_VertexID から座標を作る。
  // 三角形が毎フレーム全ピクセルを塗り直すので、clear も不要
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  rafId = requestAnimationFrame(render);
}

// 第6章: 全画面シェーダー環境を作る
// 共通化の成果として、使う側はここまで薄くなる。
// canvas とフラグメントシェーダーを渡すだけで、コンパイル・リンク・リサイズ・
// uniform 更新・描画ループはすべてハーネス(src/lib/fullscreen-shader.ts)がやる。

import { startFullscreenShader } from '../../lib/fullscreen-shader';
import fragmentSource from './first.frag?raw';

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

startFullscreenShader(canvas, fragmentSource);

#version 300 es

// 第6章のデモ: ハーネスの標準 uniform を 3 つとも使う最小のフラグメントシェーダー。
// 使っている関数は mix / sin / length / min だけ。
// 本格的な 2D 表現の数学(UV・アスペクト比・形)は第7章から。

precision highp float;

// ハーネス(src/lib/fullscreen-shader.ts)が毎フレーム更新してくれる標準セット
uniform float u_time; // 経過時間(秒)
uniform vec2 u_resolution; // 描画バッファのサイズ(ピクセル)
uniform vec2 u_mouse; // ポインタ位置(ピクセル・左下原点 = gl_FragCoord と同じ)

out vec4 fragColor;

void main() {
  // このピクセルの位置を 0〜1 に正規化する(いわゆる UV 座標。詳しくは第7章)
  vec2 uv = gl_FragCoord.xy / u_resolution;

  // 2 色を uv.x の割合で混ぜ、その割合を時間でゆっくり揺らす。
  // mix の第 3 引数は clamp されない(0〜1 の外では外挿になる)ため、0〜1 に収めておく
  vec3 colorA = vec3(0.10, 0.14, 0.35); // 深い青
  vec3 colorB = vec3(0.90, 0.55, 0.25); // オレンジ
  float t = clamp(uv.x + 0.15 * sin(u_time * 0.8 + uv.y * 4.0), 0.0, 1.0);
  vec3 color = mix(colorA, colorB, t);

  // ポインタに近いピクセルほど少し明るくする。
  // u_mouse は gl_FragCoord と同じ座標系なので、変換なしでそのまま距離が取れる
  float dist = length(gl_FragCoord.xy - u_mouse);
  float glow = 1.0 - min(dist / (0.6 * u_resolution.y), 1.0);
  color += 0.2 * glow;

  fragColor = vec4(color, 1.0);
}

// 共通モジュール: シェーダーのコンパイルとプログラムのリンク
//
// 実装は第3章 (src/lessons/03-first-triangle/main.ts) で書いたローカル関数を
// そのまま移動したもので、中身は変えていない。
// コンパイル・リンクは失敗しても JavaScript の例外が発生しないため、
// 必ず状態をチェックし、失敗時はログを添えて throw する(第3章)。

export 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;
}

export 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;
}

#version 300 es

// 共通モジュール: 全画面三角形の頂点シェーダー
//
// 頂点バッファ(VBO)も VAO の配線も使わない。in 変数がひとつもない代わりに、
// 「いま何番目の頂点を処理しているか」が入る組み込み変数 gl_VertexID(第5章)から
// クリップ空間の座標を直接計算する。
//
// drawArrays(gl.TRIANGLES, 0, 3) で呼ばれると、3 頂点は次の位置になる:
//   gl_VertexID = 0 → (-1, -1)  画面の左下の角
//   gl_VertexID = 1 → ( 3, -1)  右下のはるか外
//   gl_VertexID = 2 → (-1,  3)  左上のはるか外
// この三角形はクリップ空間の正方形 (-1〜+1) を完全に覆い、
// はみ出した部分はクリッピングで捨てられるため、結果として画面全体が塗られる。

void main() {
  float x = gl_VertexID == 1 ? 3.0 : -1.0;
  float y = gl_VertexID == 2 ? 3.0 : -1.0;
  gl_Position = vec4(x, y, 0.0, 1.0);
}

// 共通モジュール: 全画面シェーダーのハーネス
//
// canvas とフラグメントシェーダーのソースを渡すと、
// 「毎フレーム、画面全体をそのシェーダーで塗る」ループを開始する。
// 中身はすべて第2〜4章で書いてきたコードの再構成で、新しい API は登場しない。
//   - コンテキスト取得と devicePixelRatio(第2章)
//   - コンパイル・リンク(第3章 → lib/shader.ts)
//   - rAF ループ・ループ先頭のリサイズチェック・uniform 更新・マウス(第4章)
// 頂点まわり(VBO / VAO)だけは「何も作らない」— 理由は第6章本文を参照。

import vertexSource from './fullscreen.vert?raw';
import { compileShader, linkProgram } from './shader';

export interface FullscreenShaderOptions {
  /** devicePixelRatio の上限(既定 2)。負荷を抑えたいときは 1 に下げる */
  maxDpr?: number;
}

export interface FullscreenShaderHandle {
  /** 描画ループを止め、イベントリスナーを解除する */
  stop: () => void;
}

export function startFullscreenShader(
  canvas: HTMLCanvasElement,
  fragmentSource: string,
  options: FullscreenShaderOptions = {},
): FullscreenShaderHandle {
  const maxDpr = options.maxDpr ?? 2;

  const maybeGl = canvas.getContext('webgl2');
  if (!maybeGl) {
    throw new Error('このブラウザは WebGL2 に対応していません');
  }
  // null を除外した型で持ち直す。こうしておくと、下で定義する描画ループなどの
  // 内側の関数からも「null かもしれない」チェックなしで gl を使える
  const gl = maybeGl;

  // 全画面三角形の頂点シェーダー + 渡されたフラグメントシェーダーでプログラムを作る
  const program = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource),
  );

  // uniform ロケーションは毎フレーム引かず、一度だけ取得してキャッシュする。
  // フラグメントシェーダー側で宣言していない(または未使用で最適化により消えた)
  // uniform のロケーションは null になるが、null を渡した uniform* 呼び出しは
  // 黙って無視される(第4章)。だから 3 つのうち必要なものだけ使うシェーダーでも動く。
  const timeLocation = gl.getUniformLocation(program, 'u_time');
  const resolutionLocation = gl.getUniformLocation(program, 'u_resolution');
  const mouseLocation = gl.getUniformLocation(program, 'u_mouse');

  // この canvas ではこのプログラムしか使わないので、状態として一度設定すれば十分
  gl.useProgram(program);

  // u_mouse は「描画バッファのピクセル・左下原点」= gl_FragCoord と同じ座標系。
  // ポインタが一度も動いていない間は画面中央を渡す(描画ループ側で分岐)
  let pointerActive = false;
  let mouseX = 0;
  let mouseY = 0;

  function onPointerMove(event: PointerEvent): void {
    const rect = canvas.getBoundingClientRect();
    // DOM 座標(左上原点・CSS ピクセル)→ 左下原点・描画バッファのピクセルへ変換。
    // rect はボーダーを含む外形なので、clientLeft/Top(ボーダー幅)を引いて
    // 描画領域内の位置にし、ボーダーを除いたサイズ clientWidth/Height で換算する。
    // canvas.width / canvas.clientWidth が「CSS 1px あたりの描画バッファのピクセル数」(≒ dpr)
    const x = event.clientX - rect.left - canvas.clientLeft;
    const y = event.clientY - rect.top - canvas.clientTop;
    const scaleX = canvas.width / canvas.clientWidth;
    const scaleY = canvas.height / canvas.clientHeight;
    mouseX = x * scaleX;
    mouseY = (canvas.clientHeight - y) * scaleY;
    pointerActive = true;
  }
  canvas.addEventListener('pointermove', onPointerMove);

  // 毎フレーム先頭でサイズを確認し、変わっていたときだけ描画バッファを作り直す。
  // 毎フレーム確認するので、ResizeObserver も dpr 変化の監視も要らない(第2・4章)
  function resizeIfNeeded(): void {
    const dpr = Math.min(window.devicePixelRatio, maxDpr);
    // display: none などで表示サイズが 0 のときも、バッファは最低 1px 確保しておく
    const width = Math.max(1, Math.floor(canvas.clientWidth * dpr));
    const height = Math.max(1, Math.floor(canvas.clientHeight * dpr));
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    }
  }

  let rafId = 0;

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

    const width = gl.drawingBufferWidth;
    const height = gl.drawingBufferHeight;
    gl.viewport(0, 0, width, height);

    // 標準 uniform を更新する。時間は rAF の timestamp(ミリ秒)を秒に直したもの
    gl.uniform1f(timeLocation, timestamp * 0.001);
    gl.uniform2f(resolutionLocation, width, height);
    if (pointerActive) {
      gl.uniform2f(mouseLocation, mouseX, mouseY);
    } else {
      gl.uniform2f(mouseLocation, width / 2, height / 2);
    }

    // VAO も VBO もバインドしないまま「3 頂点で三角形 1 枚」を描く。
    // 頂点データは使わず、頂点シェーダーが gl_VertexID から座標を作る。
    // 三角形が毎フレーム全ピクセルを塗り直すので、clear も不要
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    rafId = requestAnimationFrame(render);
  }
  rafId = requestAnimationFrame(render);

  return {
    stop(): void {
      cancelAnimationFrame(rafId);
      canvas.removeEventListener('pointermove', onPointerMove);
    },
  };
}

#version 300 es

// 第6章のデモ: ハーネスの標準 uniform を 3 つとも使う最小のフラグメントシェーダー。
// 使っている関数は mix / sin / length / min だけ。
// 本格的な 2D 表現の数学(UV・アスペクト比・形)は第7章から。

precision highp float;

// ハーネス(src/lib/fullscreen-shader.ts)が毎フレーム更新してくれる標準セット
uniform float u_time; // 経過時間(秒)
uniform vec2 u_resolution; // 描画バッファのサイズ(ピクセル)
uniform vec2 u_mouse; // ポインタ位置(ピクセル・左下原点 = gl_FragCoord と同じ)

out vec4 fragColor;

void main() {
  // このピクセルの位置を 0〜1 に正規化する(いわゆる UV 座標。詳しくは第7章)
  vec2 uv = gl_FragCoord.xy / u_resolution;

  // 2 色を uv.x の割合で混ぜ、その割合を時間でゆっくり揺らす。
  // mix の第 3 引数は clamp されない(0〜1 の外では外挿になる)ため、0〜1 に収めておく
  vec3 colorA = vec3(0.10, 0.14, 0.35); // 深い青
  vec3 colorB = vec3(0.90, 0.55, 0.25); // オレンジ
  float t = clamp(uv.x + 0.15 * sin(u_time * 0.8 + uv.y * 4.0), 0.0, 1.0);
  vec3 color = mix(colorA, colorB, t);

  // ポインタに近いピクセルほど少し明るくする。
  // u_mouse は gl_FragCoord と同じ座標系なので、変換なしでそのまま距離が取れる
  float dist = length(gl_FragCoord.xy - u_mouse);
  float glow = 1.0 - min(dist / (0.6 * u_resolution.y), 1.0);
  color += 0.2 * glow;

  fragColor = vec4(color, 1.0);
}