01 · 公開済みCANVAS 2D
ワイヤーフレーム
立方体の8頂点・12辺を、回転行列と透視投影で画面に描く。見えない辺も描いてしまう問題から、次の章へ。
HISTORY × MATHEMATICS × CODE
線から始まり、
GPUへつながる。
立体を線で描くには、何を計算すればよいのか。面の表裏はどう決め、隠れた面はどう消すのか。
歴史上の課題をひとつずつ解きながら、Three.jsとWebGPUの内部へ進む教科書です。
CURRICULUM
章を追って学ぶ
どの章も「当時の課題 → 数式 → 最小コード → 実験 → 限界」の順で進みます。
02 · 公開済みCANVAS 2D
面・法線・背面カリング
6枚の面を追加し、外積・内積で表裏を判定。2個の立方体で背面カリングとPainter法の違いを実験する。
03 · 企画中
Z-buffer
画素ごとに深度を記憶して隠面を解決する。ラスタライズと深度テストの基礎へ。
04 · 先取り編・公開済みWEBGL 2
OpenGLとWebGL
固定機能からシェーダーへ。OpenGL / ES / WebGLの違いを読み、WebGL 2のZ-buffer・背面カリングを2つの立方体で実験する。第3章より先に読める特別編。
05 · 先取り編・公開済みCPU / RAY CASTING
レイトレーシングとレイマーチング
画素からレイを飛ばし、球との解析的な交差判定とSDFによるsphere tracingを比較する。最大ステップ数・誤差・カメラ角度を操作して探索過程を読む。
06 · 発展編・実装済みWEBGPU / WGSL
WebGPUレイトレーシング
CPU版の球・床の交差判定をWGSLのCompute Shaderへ移植。GPUで一次レイ、影用レイ、最大3回の鏡面反射を計算し、画素を並列に描画する。
07+ · 企画中
Three.jsと高度なGPU描画
シーン管理、パストレーシング、BVH、計算シェーダーの発展へ。
OVERVIEW REFERENCE
全体像を先に読む
「レンダリング技術の進化史 ― Z-bufferからThree.js、WebGPUへ」。技術の転換点を図と年表でまとめたA4・11ページの参考資料です。