GLSL ES 3.00 言語ガイド

#version 300 es

// フラグメントシェーダーの float には既定精度がないため、この宣言が必須(本文 7 節)
precision highp float;

// 頂点シェーダーの out と同じ名前・型で受け取る。補間済みの頂点色が入る
in vec3 v_color;

out vec4 fragColor;

void main() {
  // 補間された頂点色を素材に、スウィズルと組み込み関数で加工する実験台。
  // 各行をコメントアウトしたり、数値や関数を書き換えたりして試すのがこの章の演習
  vec3 color = v_color;

  // スウィズル: 成分の並べ替え(R と B を入れ替える)
  color = color.bgr;

  // fract: 小数部だけを残す。値を増幅してから取ると縞模様になる
  color = fract(color * 3.0);

  // abs を使った折り返し: 0〜1 の値を「0 → 1 → 0」の山型に変える
  color = 1.0 - abs(color * 2.0 - 1.0);

  // step: しきい値でくっきり 2 値化(試すときはコメントを外す)
  // color = step(0.5, color);

  fragColor = vec4(color, 1.0);
}

float f = 1.0; // 小数点があれば float
int i = -3; // なければ int
uint u = 7u; // 符号なし整数はサフィックス u
bool b = true;

vec3 color = vec3(1.0, 0.5, 0.0); // float × 3
ivec2 cell = ivec2(3, 7); // int × 2
bvec3 mask = bvec3(true, false, true); // bool × 3
mat3 m = mat3(1.0); // 3×3 行列(この書き方は単位行列。演算の意味は第11章)

float a = 1; // コンパイルエラー: int から float への暗黙変換はない
float b = 1.0; // OK

int i = 3;
float c = i * 0.5; // コンパイルエラー: int と float は混ぜられない
float d = float(i) * 0.5; // OK: コンストラクタ構文で明示的に変換する

int ratio = 1 / 2; // エラーではないが 0 になる(整数同士の除算は切り捨て)
float e = 1.0 / 2.0; // 0.5

vec3 v = vec3(1.0, 2.0, 3.0);

// ベクトルやスカラーを混ぜて組み立てられる
vec4 a = vec4(v, 1.0); // (1.0, 2.0, 3.0, 1.0) — 色 + アルファの定番
vec4 b = vec4(v.rg, 0.0, 1.0); // スウィズルとの合わせ技
vec3 c = vec3(0.5); // 引数 1 つなら全成分に同じ値 (0.5, 0.5, 0.5)
vec2 d = vec2(a); // 大きいベクトルは先頭から切り詰め (1.0, 2.0)

vec4 v = vec4(1.0, 2.0, 3.0, 4.0);

// 読み出しは並べ替え・重複が自由
vec3 a = v.xyz; // (1.0, 2.0, 3.0)
vec3 b = v.bgr; // (3.0, 2.0, 1.0) — rgba 系でも同じ成分を指す
vec4 c = v.xxyy; // (1.0, 1.0, 2.0, 2.0) — 重複もできる
float x = v.x; // 1 成分だけならスカラー

// 左辺(書き込み先)にも使えるが、同じ成分を繰り返すことはできない
v.xy = vec2(9.0, 8.0); // OK: x と y だけ書き換える
// v.xx = vec2(9.0, 8.0); // コンパイルエラー: 書き込み先で x が重複

vec3 a = vec3(1.0, 2.0, 3.0);
vec3 b = vec3(10.0, 20.0, 30.0);

vec3 sum = a + b; // (11.0, 22.0, 33.0) — 成分ごと
vec3 prod = a * b; // (10.0, 40.0, 90.0) — これも成分ごと。内積ではない!
vec3 scaled = a * 2.0; // (2.0, 4.0, 6.0) — スカラーは全成分に効く

float d = dot(a, b); // 内積が欲しいときは関数を使う (= 140.0)

// 戻り値と引数の型を明示する。既定の修飾子は in(値渡し)
float invert(float v) {
  return 1.0 - v;
}

// out 引数を使うと、戻り値のほかにも結果を返せる
void polar(in vec2 p, out float radius, out float angle) {
  radius = length(p);
  angle = atan(p.y, p.x);
}

void main() {
  float r;
  float a;
  polar(vec2(1.0, 1.0), r, a);
  // invert(...) を invert の定義の中から呼ぶような再帰は禁止
}

vec3 color = v_color;

// if / else は普通に書ける
if (color.r > 0.5) {
  color = color.bgr;
}

// ループ回数が実行時に決まるループも WebGL2 (GLSL ES 3.00) では書ける
// (GLSL ES 1.00 ではループの境界はコンパイル時定数でなければならなかった)
uniform int u_steps;
// ...
for (int i = 0; i < u_steps; i++) {
  color = fract(color * 1.5);
}

#version 300 es

// このシェーダー内の float 系(float / vec* / mat*)の既定精度を宣言する
precision highp float;

// 変数単位で個別に指定することもできる
mediump float roughness;

// 頂点シェーダー側
flat out vec3 v_color;

// フラグメントシェーダー側(同じ修飾子を付ける)
flat in vec3 v_color;

#define PI 3.141592653589793
#define USE_STRIPES

void main() {
  float angle = PI * 0.5; // コンパイル前に文字列として置換される

#ifdef USE_STRIPES
  // USE_STRIPES が #define されているときだけコンパイルされる
#endif
}

#version 300 es

// 第3章と同じ: クリップ空間の位置と頂点色を受け取る
layout(location = 0) in vec2 a_position;
layout(location = 1) in vec3 a_color;

// 補間修飾子を省略すると smooth(滑らかに補間)。
// 先頭に flat を付けると補間されなくなる(フラグメント側の in にも同じ修飾子を付けること)
out vec3 v_color;

void main() {
  v_color = a_color;
  gl_Position = vec4(a_position, 0.0, 1.0);
}

#version 300 es

// フラグメントシェーダーの float には既定精度がないため、この宣言が必須(本文 7 節)
precision highp float;

// 頂点シェーダーの out と同じ名前・型で受け取る。補間済みの頂点色が入る
in vec3 v_color;

out vec4 fragColor;

void main() {
  // 補間された頂点色を素材に、スウィズルと組み込み関数で加工する実験台。
  // 各行をコメントアウトしたり、数値や関数を書き換えたりして試すのがこの章の演習
  vec3 color = v_color;

  // スウィズル: 成分の並べ替え(R と B を入れ替える)
  color = color.bgr;

  // fract: 小数部だけを残す。値を増幅してから取ると縞模様になる
  color = fract(color * 3.0);

  // abs を使った折り返し: 0〜1 の値を「0 → 1 → 0」の山型に変える
  color = 1.0 - abs(color * 2.0 - 1.0);

  // step: しきい値でくっきり 2 値化(試すときはコメントを外す)
  // color = step(0.5, color);

  fragColor = vec4(color, 1.0);
}

// 第5章: GLSL ES 3.00 言語ガイド
// CPU 側は第3章の三角形とほぼ同じで、新しい API は登場しない。
// この章の主役はフラグメントシェーダー playground.frag —
// スウィズルや組み込み関数を書き換えて試すための実験台になっている。

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

// ---------------------------------------------------------------------------
// シェーダーのコンパイルとリンク(第3章と同じ。第6章で共通モジュールへ抽出する)
// ---------------------------------------------------------------------------

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

// ---------------------------------------------------------------------------
// デモ本体: 第3章と同じ三角形を描く(静止画なので、リサイズしたときだけ描き直す)
// ---------------------------------------------------------------------------

function setup(gl: WebGL2RenderingContext, canvas: HTMLCanvasElement): void {
  const program = linkProgram(
    gl,
    compileShader(gl, gl.VERTEX_SHADER, vertexSource),
    compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource),
  );

  // クリップ空間 (-1〜+1) での xy 座標。3 頂点 = 三角形 1 枚
  // biome-ignore format: 1 頂点 = 1 行の並びを保つ
  const positions = new Float32Array([
    0.0, 0.8, // 上
    -0.8, -0.8, // 左下
    0.8, -0.8, // 右下
  ]);

  // 各頂点の RGB 色。flat 補間にすると最後の頂点(右下)の色が全面に使われる(本文 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);

  // 位置: シェーダーの layout(location = 0) in vec2 a_position へ
  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);

  // 色: シェーダーの layout(location = 1) in vec3 a_color へ
  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);

  gl.clearColor(0.06, 0.07, 0.09, 1.0);

  function draw(): void {
    gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);
    gl.bindVertexArray(vao);
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  }

  // 静止画のデモなので、描画ループではなく ResizeObserver で追従する(第2章・第4章)。
  // 表示サイズが変わったときだけ描画バッファを作り直し、描き直す
  function resize(): void {
    const dpr = Math.min(window.devicePixelRatio, 2);
    const width = Math.floor(canvas.clientWidth * dpr);
    const height = Math.floor(canvas.clientHeight * dpr);
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    }
    draw();
  }

  // observe() の直後にも 1 回発火するので、初回の描画もこの経路で行われる(第2章)
  const observer = new ResizeObserver(resize);
  observer.observe(canvas);
}

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

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);