visual-learning
コンピュータグラフィックス インタラクティブ可視化
ラスタライズ・シェーディング・テクスチャ・投影・ベジェ・レイマーチングなど、CGレンダリングの仕組みを動かして体感できる POC 集。
ラスタライズ・投影
ラスタライズ
ラスタライズ（三角形→画素）
バリセントリック座標で各グリッドセルが内側か外側かを判定。属性補間の基礎。
開く →
深度テストZバッファと深度テスト
各ピクセルに深度値を記録し、前景だけを描く隠面消去。Zバッファをグレースケールで可視化。
開く →
投影透視投影（FOV と消失点）
3D 立方体を FOV と距離で投影。広角は歪み大。正投影との比較も。
開く →
テクスチャ・シェーディング
テクスチャ
テクスチャマッピング
UV 座標でテクスチャをポリゴンに貼り付け。バイリニア補間とタイリングを操作できる。
開く →
シェーディングフォン・シェーディング
環境光＋拡散反射（ランバート）＋鏡面反射の 3 成分。光源をドラッグして陰影を体感。
開く →
品質向上・曲線
AA
アンチエイリアシング（SSAA）
左右でサンプル数を比較。SSAA 倍率を上げるとジャギーが消える様子を x8 ズームで確認。
開く →
曲線ベジェ曲線と de Casteljau
制御点をドラッグ、de Casteljau の再帰補間を t アニメーションで可視化。
開く →