WebGL2 / GLSL ES 3.00

WebGL2 / GLSL ES 3.00 学習ノート

three.js のような抽象化レイヤーを使わず、WebGL2RenderingContextと GLSL ES 3.00 を直接扱って、3D ラスタライズパイプラインとプロシージャル/ジェネラティブ表現の両方を 体系的に習得するための学習サイトです。

第1部 WebGL2 の基本 — 三角形が描けるまで

  1. WebGL2 とは何か — GPU・状態機械・描画パイプライン
  2. コンテキストとキャンバス — 解像度・viewport・リサイズ
  3. 最初の三角形 — シェーダー・VBO・VAO・ドローコール
  4. アニメーションと uniform — 時間・マウス・描画ループ
  5. GLSL ES 3.00 言語ガイド
  6. 全画面シェーダー環境を作る — 自前 Shadertoy ハーネス

第2部 シェーダーで学ぶ数学 — 2D 表現の基礎

  1. UV 座標と色 — グラデーションと補間関数
  2. 形を描く — step / smoothstep / 距離
  3. 三角関数 — 波・振動・円運動
  4. 極座標と 2D 回転 — atan / length / mat2

第3部 3D ラスタライズパイプライン

  1. ベクトルと行列 — gl-matrix で学ぶ線形代数
  2. 座標変換 — モデル・ビュー・射影 (MVP)
  3. 最初の 3D — インデックス描画・深度テスト・カリング
  4. ジオメトリをつくる — 球・トーラスのプロシージャル生成
  5. カメラ — 軌道カメラ・追跡カメラ
  6. テクスチャ — フィルタ・ラップ・ミップマップ・複数ユニット
  7. ライティング基礎 — 法線・拡散反射・鏡面反射
  8. 複数光源とマテリアル — 点光源・スポットライト・減衰
  9. モデル読み込み — OBJ と glTF 2.0
  10. フレームバッファ — オフスクリーン描画とレンダーターゲット
  11. シャドウマッピング — 光源視点の深度パスと影の品質
  12. PBR — 物理ベースレンダリングと IBL
  13. ディファードレンダリング — MRT と G-buffer

第4部 プロシージャル & ジェネラティブ

  1. 2D SDF — 距離場で形を合成する
  2. 乱数とノイズ — hash / value noise / gradient noise
  3. fbm とドメインワーピング — 雲・大理石・有機的な模様
  4. 色とパレット — sRGB・トーンマッピング・余弦パレット(準備中)
  5. レイマーチング — 3D SDF の世界(準備中)
  6. フィードバック — ping-pong バッファと自己組織化する系(準備中)

第5部 大量描画・GPGPU・統合

  1. ブレンディングとパーティクル — 加算合成と深度の兼ね合い(準備中)
  2. インスタンシング — 1 ドローコールで大量描画(準備中)
  3. Transform Feedback — GPU パーティクルと GPGPU(準備中)
  4. ポストプロセス — ブルーム・トーンマップ・FXAA(準備中)
  5. UBO と抽象化 — ミニエンジンを設計する(準備中)
  6. パフォーマンスとロバスト性 — 計測・コンテキストロスト(準備中)
  7. インタラクションと出力 — ポインタ・オーディオ反応・書き出し(準備中)