Computer Graphics from Scratch: A Programmer's Introduction to 3D Rendering（ゼロから作るコンピュータグラフィックス：プログラマのための3Dレンダリング入門）

引用

Gambetta, G. (2021). Computer Graphics from Scratch: A Programmer's Introduction to 3D Rendering. No Starch Press. Free official edition: https://gabrielgambetta.com/computer-graphics-from-scratch/

章の要約

はじめに

序章は主題をコンピュータグラフィックスの一分野、すなわち 3D シーンのレンダリングに絞る。大学の 3 年生向け科目としてこの分野を 5 年間教えた Gambetta は、高校生からプロのエンジニアまでを読者に想定し、業界標準の各アルゴリズムについて最も理解しやすい版を選びつつ、ごまかしは避けると述べる。前提とする唯一の基本操作は、一つのピクセルの色を設定する関数である。本書はレイトレーサとラスタライザという二つのレンダラを、特定の言語に依存しない擬似コードで作り、動作する JavaScript のデモへのリンクを添える。OpenGL、Vulkan、Metal、DirectX などの API は意図的に扱わない。

第1章：基本概念

この短い章では、キャンバスとその座標系、唯一の描画操作である PutPixel、そして色の表し方を定義する。減法混色と加法混色、色深度、値の切り詰めを伴う色の拡大縮小や加算といった操作である。最後にシーンとその 3D 座標系を導入し、本書の二つの部の共通の土台とする。

第2章：基本的なレイトレーシング

第 I 部はたとえ話から始まる。固定した虫取り網越しに風景を眺め、各マス目から見える色を写していけば絵が描ける、というものである。ここから固定したカメラとビューポート、キャンバスのピクセルからビューポート上の点への対応、レイの方程式、球の方程式、両者の交点を与える二次方程式を導く。結果として、球を単色の円として描く最初のレイトレーサができる。

第3章：光

レイトレーサに照明が加わる。点光源、平行光源、環境光を定義し、つや消しの表面を拡散反射（表面の法線と光の方向のなす角を使う）で、光沢のある表面を鏡面指数で制御される鏡面反射の項でモデル化し、それらを完全な照明方程式にまとめる。球が立体的に見えるようになる。

第4章：影と反射

物体どうしが影響し合うようになる。影は、各点から各光源へレイを飛ばして遮るものがあるかを調べることで求める。反射は反射レイを再帰的に追跡して求め、鏡の間での無限の跳ね返りを防ぐために再帰の上限を設ける。

第5章：レイトレーサの拡張

本書の範囲を超える機能の概観である。回転を含む任意のカメラ配置、性能向上の技法（並列化、キャッシュ、影の最適化、空間データ構造、サブサンプリング）、三角形などの他のプリミティブ、CSG（構成的立体幾何）、屈折を伴う透明、スーパーサンプリングを紹介する。最後に、レイトレーシングがなぜリアルタイム用途には遅すぎたのかを説明し、第 II 部への動機とする。

第6章：直線

第 II 部は再び白紙のキャンバスから始まる。PutPixel を使って任意の傾きの線分を描くアルゴリズムを作り、整数刻みで一次関数の値を計算する補助関数 Interpolate を導入する。著者は、この関数が以後の全編で使われることを強調する。

第7章：塗りつぶした三角形

直線をもとに、まずワイヤフレームの三角形を、次に塗りつぶした三角形を描く。頂点を並べ替え、三角形を辺に沿って補間した端点を持つ水平線分の積み重ねとして扱う。

第8章：陰影付きの三角形

塗りつぶしのアルゴリズムを拡張し、強度の値をまず各辺に沿って、次に各水平線分に沿って補間することで、なめらかなグラデーションを作る。著者は、同じ方法で画面上で線形に変化する任意の頂点属性を補間できると指摘し、後の章でこれを活用する。

第9章：透視投影

本書は 3D に移り、相似な三角形から透視投影の方程式を導き、その性質（直線は直線に投影される）を調べ、立方体の頂点を投影してワイヤフレームとして描く。幾何データと投影のコードが混在していること、カメラの後ろにある点という二つの課題が残される。

第10章：シーンの記述とレンダリング

この長い章では、物体を頂点と三角形からなるモデルとして表し、一つのモデルの複数のインスタンスをシーンに置き、モデル変換とカメラ変換を適用してカメラを動かせるようにする。続いて同次座標を導入し、回転、拡大縮小、平行移動、投影、ビューポートからキャンバスへの対応をすべて行列で表し、一連の変換を少数の行列積にまとめる。

第11章：クリッピング

カメラの後ろや視野の外にある幾何を扱うため、5 枚の平面で囲まれたクリッピング領域を定義し、物体全体はバウンディング球で、個々の三角形は線分と平面の交点を計算してクリップする。擬似コードを示し、レンダリングパイプラインにおけるクリッピングの位置を論じる。

第12章：隠面消去

立体を描くため、画家のアルゴリズムと深度バッファを比較し、バッファに Z ではなく 1/Z を格納する理由を説明し、カメラに背を向けた三角形を簡単な代数的判定で省く背面カリングを加える。

第13章：シェーディング

第3章の照明方程式を三角形に適用する。照明とシェーディングを区別し、速度と画質のトレードオフとして三つの方法を示す。フラットシェーディング、グーローシェーディング（頂点の照明を補間）、フォンシェーディング（法線を補間してピクセルごとに照明を計算）である。

第14章：テクスチャ

木箱のテクスチャを例に、三角形に画像を貼る。透視投影のもとでテクスチャ座標を単純に補間すると不自然になる理由を示して透視補正テクスチャマッピングを導き、さらにバイリニアフィルタリング、ミップマッピング、トライリニアフィルタリングで画質を高める。

第15章：ラスタライザの拡張

最終章ではさらなる技法を概観する。法線マッピング、環境マッピング、そしてラスタライザで影を実現する二つの方法、ステンシルシャドウ（ステンシルバッファでシャドウボリュームを数える）とシャドウマッピングである。

付録：線形代数、あとがき

付録は、本書で使う点、ベクトル、内積と外積、行列とその積を実用的に紹介する。あとがきでは、大域照明、物理ベースレンダリング、ボクセルレンダリング、詳細度（LOD）アルゴリズムなど、次に学ぶべき話題を挙げる。

主要概念

第1章：基本概念

• キャンバスと PutPixel：ピクセルの長方形の格子と、一つのピクセルの色を設定する唯一の操作。他のすべてはこれを土台に作られる。
• 加法混色：画面が光を発するのと同じように、色を足し合わされる赤・緑・青の強度として表すこと。

第2–5章：レイトレーシング

• レイと球の交差：レイの方程式を球の方程式に代入すると二次方程式が得られ、その解が交点となる。
• 拡散反射と鏡面反射：つや消しの表面は法線と光の方向のなす角に応じて光を散乱し、光沢のある表面は鏡面反射方向の周りにハイライトを加える。
• シャドウレイと再帰的反射：光源の方向や反射方向に追加のレイを追跡し、物体どうしの影響をモデル化する。

第6–8章：直線と三角形

• 線形補間（Interpolate）：一次関数の等間隔の値を計算すること。ラスタライザの主力となる道具である。
• スキャンラインによる三角形の塗りつぶし：補間で求めた辺の位置の間の水平線分として三角形を描く。
• 属性の補間：頂点ごとの任意の値（強度、深度、テクスチャ座標）を三角形全体に広げる。

第9–11章：投影、シーン、クリッピング

• 透視投影：深度で割ることで、遠くの点ほど視野の中心に近く見えるようにする。
• 同次座標：4 番目の座標を加え、回転や拡大縮小と同様に平行移動や投影も行列の積で表せるようにする。
• クリッピング領域：安全に投影できる、5 枚の平面で囲まれた領域。その外側の幾何は取り除かれるか切り取られる。

第12–15章：可視性、シェーディング、テクスチャ

• 深度バッファ：描画の順序に関係なく最も手前の面だけを残すための、ピクセルごとの記録（ここでは 1/Z）。
• グーローシェーディングとフォンシェーディング：頂点で計算した照明を補間するか、法線を補間してピクセルごとに照明を計算するか。
• 透視補正テクスチャマッピングとミップマッピング：投影のもとでテクスチャ座標を正しく補間し、事前にフィルタした縮小テクスチャを使ってアーティファクトを避ける。

批判的分析

長所

• 本当にゼロから始める。 PutPixel だけを出発点に、各技法を単純な幾何から導くので、読者はすべての方程式の出どころがわかる。虫取り網越しに絵を描くたとえは、レイトレーシングの設定を直感的にしている。
• 二つのレンダラの比較。 同じシーンに対してレイトレーサとラスタライザの両方を作ることで、それぞれの長所を対比できる。影と再帰的反射はレイトレーサでは自然に得られ、テクスチャと速度はラスタライザに有利である。第13章は第3章の照明モデルをそのまま再利用している。
• 言語に依存しない擬似コードとライブデモ。 ほとんどの章がブラウザで動く JavaScript の実装にリンクしており、読者は自分のコードを参照実装と照らし合わせ、各段階の見た目の効果を確かめられる。
• 短く焦点の定まった章と明快なまとめ。 各章は、何を作り、どんな制約が残っているかを述べるまとめで終わるので、流れを追いやすく復習もしやすい。

短所

• 演習がない。 本書には問題集がなく、練習はレンダラの実装そのものに限られるため、教員が課題を用意する必要がある。
• 単純化された照明モデル。 照明モデル（環境光、拡散反射、フォン型の鏡面反射）は経験的なものであり物理ベースではない。大域照明や物理ベースレンダリングはあとがきで名前が挙がるだけである。
• GPU や API を扱わない。 本書は意図的に OpenGL、Vulkan、DirectX、シェーダプログラミングを教えないので、実践的なリアルタイムグラフィックスの技能が必要な学生は別に学ぶ必要がある。
• 高度な話題は概略のみ。 第5章と第15章は加速構造、屈折、法線マッピング、影の技法を概観の形で紹介するだけで、完全なアルゴリズムや解析は示さない。

コースにおける位置づけ

このグラフィックスの書籍リストで、Gambetta はレンダリング学習の入口となる本である。同じく入門書である Rogers、Sharp、Preece の Interaction Design はレンダリングではなく、コースのヒューマンコンピュータインタラクションの側面を扱う。本書は、一般により完全な授業用教科書とされる Marschner と Shirley の Fundamentals of Computer Graphics や Angel と Shreiner の Interactive Computer Graphics の前に読むのに適している。後者は、本書が意図的に飛ばしている API の層である WebGL のプログラミングを教える。

上級の学習では、Real-Time Rendering（Akenine-Möller ほか）がラスタライズの側を現代の GPU 技術へと広げ、Physically Based Rendering（Pharr、Jakob、Humphreys）がレイトレーシングの側を物理ベースの光輸送へと進める。後者の話題は本書のあとがきで次の一歩として挙げられている。グラフィックスの基礎をすでに知っている学生は、Gambetta を手早く読み流すか、より高度な本に進んでよい。

本書の使い方

本書は、何らかの言語でプログラムが書け、高校の代数と少しの三角関数を覚えている人に向いている。必要な線形代数は付録で扱われており、ベクトルや行列に不慣れなら先に付録を読むとよい。

実際的な方法は、自分の選んだ言語で各レンダラを実際に実装し、ライブラリやブラウザのキャンバスはピクセルの設定にだけ使い、うまくいかないときはリンク先のデモと比べることである。第 I 部（第2–4章）は数回で終えられ、すぐに目に見える結果が得られる。第5章は任意の拡張の一覧である。第 II 部（第6–14章）はより長く、第6–8章は十分に理解しておく必要がある。Interpolate と属性の補間が以後のすべての土台になるからである。第9–12章はラスタライザの幾何の中核であり、第13–14章でようやく写実的に見えるようになる。第15章は読書リストとして扱える。

演習がないので、独学者は自分で課題を設定するとよい。たとえば第5章と第15章で概観された拡張、すなわちレイトレーサでの三角形の対応、動かせるカメラ、ラスタライザでのシャドウマッピングなどを実装してみる。

版と出典

本ガイドは、著者の公式サイト https://gabrielgambetta.com/computer-graphics-from-scratch/ にある Computer Graphics from Scratch の無料オンライン版に基づく。その内容は 2021 年に No Starch Press から刊行された本の本文である。目次、序章の全文、すべての章（すべての節見出し、各章の冒頭と章末のまとめ。レイと球の交差、投影方程式、1/Z を用いる深度バッファなどの中心的な導出は詳しく読んだ）、線形代数の付録、あとがきを参照している。