最初の三角形

#version 300 es

// 頂点属性: CPU 側から VBO 経由で渡されるデータ。
// layout(location = N) で「配線番号」を固定している。
layout(location = 0) in vec2 a_position;
layout(location = 1) in vec3 a_color;

// フラグメントシェーダーへ渡す値。ラスタライザが頂点間を補間する。
out vec3 v_color;

void main() {
  v_color = a_color;

  // gl_Position はクリップ空間の座標 (vec4)。
  // z = 0.0(奥行きなし)、w = 1.0(同次座標。詳細は第12章)
  gl_Position = vec4(a_position, 0.0, 1.0);
}

#version 300 es

// フラグメントシェーダーでは float の精度指定が必須
precision highp float;

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

// 出力先。WebGL1 の gl_FragColor は廃止され、自分で out を宣言する
out vec4 fragColor;

void main() {
  fragColor = vec4(v_color, 1.0);
}

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

const program = gl.createProgram();
gl.attachShader(program, vertexShader); // 頂点シェーダーを取り付け
gl.attachShader(program, fragmentShader); // フラグメントシェーダーを取り付け
gl.linkProgram(program); // 2 つを 1 本のパイプラインに結合

if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
  throw new Error(gl.getProgramInfoLog(program) ?? '');
}

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

const positionBuffer = gl.createBuffer(); // ① GPU 側にバッファを作る
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // ② 「作業対象」としてバインドする
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); // ③ データを転送する

// 各頂点の RGB 色も、まったく同じ ①②③ の手順で別のバッファへ
const colors = new Float32Array([
  1.0, 0.25, 0.35, // 上: 赤
  0.25, 0.9, 0.5, // 左下: 緑
  0.3, 0.5, 1.0, // 右下: 青
]);

const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

const vao = gl.createVertexArray();
gl.bindVertexArray(vao); // 以降の属性設定はこの VAO に記録される

// 位置: layout(location = 0) in vec2 a_position へ
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(0); // location 0 を有効化
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);

// 色: layout(location = 1) in vec3 a_color へ
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.enableVertexAttribArray(1);
gl.vertexAttribPointer(1, 3, gl.FLOAT, false, 0, 0);

gl.bindVertexArray(null); // 記録し終わったので解除しておく

// クリップ空間 (-1〜+1) と描画バッファのピクセルの対応を設定
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

// 画面をクリア
gl.clearColor(0.06, 0.07, 0.09, 1.0); // クリア色を状態として設定
gl.clear(gl.COLOR_BUFFER_BIT); // 実際に塗りつぶす

// 「このプログラム」と「この配線」で 3 頂点を三角形として描画
gl.useProgram(program);
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, 3);

// 第3章: 最初の三角形
// シェーダーのコンパイル → 頂点データの転送 → 属性の配線 → 描画、という
// WebGL2 のコア描画パスを、抽象化なしで一通り書く。

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

// ---------------------------------------------------------------------------
// シェーダーのコンパイルとプログラムのリンク
// 失敗しても JavaScript の例外は発生しないため、必ず自分でチェックする
// ---------------------------------------------------------------------------

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

// ---------------------------------------------------------------------------
// 1. コンテキストの取得
// ---------------------------------------------------------------------------

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

// 描画バッファの解像度を「CSS 上の表示サイズ × devicePixelRatio」に合わせる(第2章)
const dpr = Math.min(window.devicePixelRatio, 2);
canvas.width = Math.floor(canvas.clientWidth * dpr);
canvas.height = Math.floor(canvas.clientHeight * dpr);

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

// ---------------------------------------------------------------------------
// 2. シェーダーをコンパイルしてプログラムを作る
// ---------------------------------------------------------------------------

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

// ---------------------------------------------------------------------------
// 3. 頂点データを用意して GPU のバッファ(VBO)へ転送する
// ---------------------------------------------------------------------------

// クリップ空間 (-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 色
// 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, // 右下: 青
]);

// ---------------------------------------------------------------------------
// 4. VAO を作り、バッファと頂点属性の配線を記録する
// ---------------------------------------------------------------------------

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

// ---------------------------------------------------------------------------
// 5. 描画する
// ---------------------------------------------------------------------------

// クリップ空間と描画バッファのピクセルの対応を設定
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

// 画面を塗りつぶす色を指定してクリア
gl.clearColor(0.06, 0.07, 0.09, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

// 「このプログラム」と「この VAO(配線)」を使って 3 頂点を三角形として描画
gl.useProgram(program);
gl.bindVertexArray(vao);
gl.drawArrays(gl.TRIANGLES, 0, 3);