索引 / 001 JA
Interactive Computer Graphics: A Top-Down Approach with WebGL(インタラクティブ・コンピュータグラフィックス:WebGL によるトップダウン・アプローチ) cover

コンピュータサイエンス

コンピュータサイエンス

Interactive Computer Graphics: A Top-Down Approach with WebGL(インタラクティブ・コンピュータグラフィックス:WebGL によるトップダウン・アプローチ)

Edward Angel; Dave Shreiner

英語原題: Interactive Computer Graphics: A Top-Down Approach with WebGL

WebGL と JavaScript、GLSL で書くシェーダを使い、最初の数章から学生にインタラクティブなプログラムを書かせるコンピュータグラフィックス入門の教科書。アプリケーションのプログラミングから出発してその背後にある幾何、視点変換、照明、テクスチャマッピングへとトップダウンに進み、パイプライン内部のラスタライズやクリッピングのアルゴリズムは後半で扱う。

前提知識: C 系またはオブジェクト指向言語でのプログラミング経験、データ構造、ベクトルと行列の基礎的な線形代数。JavaScript の予備知識は前提としない。

難易度レベル
中級
学術レベル
学部
computer graphicswebglshadersrendering pipeline教科書

01 / 読書ガイド

読書ガイド

引用

Angel, E., & Shreiner, D. (2021). Interactive Computer Graphics: A Top-Down Approach with WebGL (8th ed.). Pearson.

章の要約

第8版(2020年9月刊行、著作権表示2021年)は13章と4つの付録からなる。Pearsonは本書を、WebGLを全面的に取り入れ、アプリケーションに基づくプログラミングを重視した学部生向けのコンピュータグラフィックス入門書と説明しており、すべての例にWebGLとJavaScriptが使われている。題名の「トップダウン」とは、学生がAPIを通じて早い段階から完全な三次元プログラムを書き、グラフィックスパイプライン内部のアルゴリズム(クリッピング、ラスタライズ、隠面消去)は終盤になってから開いて見せる、という意味である。各章は要約と注、読書案内、演習で終わり、プログラミングの章にはコード例の一覧もある。

第1章:Graphics Systems and Models(グラフィックスシステムとモデル)

分野の概観である。グラフィックスの応用、グラフィックスシステムの構成要素(ピクセルとフレームバッファ、CPUとGPU、入出力装置)、物理的な画像と合成画像、ピンホールカメラと人間の視覚、合成カメラモデルを扱う。続いてプログラマーのインターフェース、グラフィックスのアーキテクチャ、グラフィックスパイプラインの各段階(頂点処理、クリッピングとプリミティブ組み立て、ラスタライズ、フラグメント処理)、プログラマブルパイプライン、OpenGLの各バージョンとWebGLの関係を概説する。

第2章:Graphics Programming(グラフィックスプログラミング)

最初のプログラムはシェルピンスキーのガスケットを描く。それを軸に、この章はWebGL API、プリミティブと属性(ポリゴン、三角形分割、頂点属性)、RGBカラー、二次元のビューイング、HTMLのcanvasとビューポート、そしてWebGLプログラムの全体構造、すなわちGPUへのデータ送信、頂点シェーダーとフラグメントシェーダーの記述、シェーダーの初期化を導入する。最後は三次元のガスケットと、隠面消去の最初の紹介で終わる。

第3章:Interaction and Animation(インタラクションとアニメーション)

アニメーション(回転する正方形、ダブルバッファリング、タイマーとrequestAnimationFrame)とインタラクションを扱う。入力装置、イベントリスナーによるイベント駆動プログラミング、ボタン、メニュー、キーコード、スライダー、位置入力、ウィンドウイベント、ジェスチャーとタッチ、ピッキング、対話的なモデル構築である。

第4章:Geometric Objects and Transformations(幾何オブジェクトと変換)

本書の数学的な中心である。スカラー、点、ベクトルを数学的な見方(ベクトル空間とアフィン空間)と計算機科学的な見方の両方から展開し、座標系、フレーム、同次座標を扱い、色付きの立方体をモデル化する。アフィン変換(平行移動、回転、拡大縮小、せん断)、その合成とWebGLでの利用から、立方体の回転、滑らかな回転、四元数、仮想トラックボールへと進む。

第5章:Viewing(ビューイング)

古典的なビューイングとコンピュータによるビューイングを扱う。正投影、軸測投影、斜投影、透視投影、look-at関数によるカメラの配置、投影の正規化と投影行列、隠面消去とカリング、メッシュの表示とシーン内のウォークスルー、投影による影とシャドウマップである。

第6章:Lighting and Shading(ライティングとシェーディング)

光と物質、光源の種類、Phongのライティングモデルとその修正版、法線ベクトルと反射ベクトルの計算、ポリゴンのシェーディング、再帰的な細分による球の近似、シェーダーでのライティングの実装、フラグメント単位のライティング、非写実的シェーディング、大域照明についての短い節を扱う。

第7章:Texture Mapping(テクスチャマッピング)

バッファとデジタル画像、マッピングの方法、二次元テクスチャマッピングとそのWebGLでの実装、環境マップと反射マップ、バンプマッピングを扱う。

第8章:Working with Framebuffers(フレームバッファの活用)

フレームバッファを単なる出力先以上のものとして使う技法である。ブレンディング、画像処理、GPUによる汎用計算、フレームバッファオブジェクト、マルチパスレンダリングとバッファのピンポン、ピッキング、シャドウマップ、投影テクスチャを扱う。

第9章:Modeling and Hierarchy(モデリングと階層)

ジオメトリとインスタンス、ロボットアームを軸にした階層モデル、木構造とその走査、アニメーション、グラフィカルオブジェクト、シーングラフとその実装を扱う。

第10章:Procedural Methods(手続き的手法)

アルゴリズム的なモデルと物理ベースのモデルを扱う。ニュートン力学に従う粒子システム、その数値解法と拘束、エージェントベースモデル、ポイントスプライト、言語ベースのモデル、再帰的手法とフラクタル、手続き的ノイズである。

第11章:Curves and Surfaces(曲線と曲面)

パラメトリックな三次多項式曲線、補間、エルミート曲線・曲面、ベジェ曲線・曲面、Bスプライン曲線・曲面とそのレンダリング、ユタ・ティーポット、代数曲面、細分割曲線・曲面、データからのメッシュ生成を扱う。

第12章:From Geometry to Pixels(ジオメトリからピクセルへ)

トップダウンの最下層である。基本的なレンダリング戦略、レンダリングパイプライン、クリッピング、線とポリゴンのラスタライズ、隠面消去のアルゴリズム、ハードウェアによる実装、アンチエイリアシング、表示上の考慮事項を扱う。

第13章:Advanced Rendering(高度なレンダリング)

パイプラインの先へ進む。レイトレーシングと簡単なレイトレーサー、レンダリング方程式、大域照明とパストレーシング、RenderMan、並列レンダリング、ボリュームレンダリング(等値面、マーチングキューブとマーチングテトラヘドラ、直接ボリュームレンダリング)、メッシュの簡略化、イメージベースドレンダリング、そして仮想現実・拡張現実・複合現実を扱う。

付録は、シェーダーの初期化、ベクトル空間・アフィン空間・ユークリッド空間、行列、サンプリングとエイリアシングを扱う。

主要概念

第1〜3章:システム、プログラミング、インタラクション

  • 合成カメラモデル:カメラになぞらえて画像を形成し、物体・視点・光を分けて扱う考え方。
  • プログラマブルパイプライン:頂点とフラグメントの段階で、アプリケーションが書いたプログラム(シェーダー)を実行するパイプライン。
  • 頂点シェーダーとフラグメントシェーダー:各頂点と各フラグメントを処理するGLSLのプログラム。
  • イベント駆動の入力:リスナーを通じてユーザーのイベントに応答するプログラム。

第4〜6章:幾何、ビューイング、ライティング

  • 同次座標:平行移動・回転・拡大縮小を行列で表せるようにする4成分の表現。
  • 四元数:ジンバルロックを避ける、回転の代数的な表現。
  • 投影の正規化:あらゆる投影を標準的な正投影に変換すること。
  • Phongライティングモデル:環境光、拡散反射、鏡面反射を組み合わせるモデル。

第7〜11章:テクスチャ、フレームバッファ、モデリング

  • テクスチャマッピング、環境マッピング、バンプマッピング:画像を用いて、色、反射、見かけの表面形状を変化させること。
  • フレームバッファオブジェクトとマルチパスレンダリング:画面外のバッファに描画し、その結果を再利用すること。
  • シーングラフ:階層モデルを表す木構造。
  • 粒子システム:物理法則に従って動く粒子の集まり。
  • ベジェ曲線とBスプライン曲線:制御点によって定義される滑らかな曲線と曲面。

第12〜13章:実装と高度なレンダリング

  • クリッピングとラスタライズ:視野外のプリミティブを取り除き、残りをフラグメントに変換すること。
  • レンダリング方程式:光の輸送を記述する積分方程式で、大域照明の基礎。
  • ボリュームレンダリング:マーチングキューブによる等値面抽出を含む、三次元データセットの表示。

批判的分析

長所

  • 最初からプログラムを書く。 最初のプログラムは第2章に、インタラクションとアニメーションは第3章に登場するので、学生は最初の数週間で動作する対話的なグラフィックスを作れる。出版社は、この方法によって授業の早い段階から魅力的な三次元の題材を扱えると強調している。
  • 現代的なシェーダーベースのパイプライン。 本書は全体を通じてプログラマブルパイプラインを教え、最初のプログラムから頂点シェーダーとフラグメントシェーダーを使う。WebGLはインストール不要でブラウザ上で動くので、試行錯誤への敷居が低い。
  • 丁寧な幾何学。 第4章は点、ベクトル、フレームを使う前に数学とプログラミングの両面から展開し、四元数と仮想トラックボールも含む。付録が線形代数を補う。
  • 幅広い内容。 フレームバッファの技法、階層モデリング、手続き的手法、曲線と曲面、そしてパストレーシング、ボリュームレンダリング、VRまで及ぶ高度なレンダリングの章により、教員は最小限の授業をはるかに超える選択肢を持てる。

短所

  • 一つのAPIに結びついている。 すべての例がWebGLとJavaScriptを使う。別のAPIや新しいWebのAPIで作業する読者はコードを置き換える必要があり、本文のAPIの細部は原理よりも早く古びる。
  • アルゴリズムが後回しになる。 ラスタライズとクリッピングを第一原理から理解したい学生は第12章まで、レイトレーシングは第13章まで待たなければならない。アルゴリズムを先に教える授業では、この順序が不便かもしれない。
  • 高度な章は概観にとどまる。 第13章は(RenderManから複合現実まで)多くのトピックを一つの章に並べているので、それぞれは入門的な扱いにとどまる。

コースにおける位置づけ

本書とMarschnerとShirleyの Fundamentals of Computer Graphics は、このコースにおける二冊の幅広い入門書であり、順序が正反対である。MarschnerとShirleyはレイトレーシングと変換の数学から始め、パイプラインを二つの方法の一つとして示し、特定のAPIは教えない。AngelとShreinerはWebGLのプログラミングから始め、内部のアルゴリズムには最後に到達する。授業では一方を主教科書にし、もう一方を別の角度からの説明として使える。実践的なプログラミングにはAngelとShreiner、理論にはMarschnerとShirleyである。Gambettaの Computer Graphics from Scratch は、レイトレーサーとラスタライザを擬似コードで組み立てる、第一原理からの短い入門書で、本書の第12〜13章の良い相棒となる。

本書の後には、Akenine-Möllerらの Real-Time Rendering がGPUレンダリング技法の包括的な参考書として第6〜8章を引き継ぐ。Pharr、Jakob、Humphreysの Physically Based Rendering は、第13章で紹介されるレイトレーシングと大域照明を深く掘り下げる。Rogers、Sharp、Preeceの Interaction Design は対話的な製品の設計と評価を扱い、第3章のイベント処理のコードとはコースの別の側面にあたる。

本書の使い方

本書は、プログラミングができ、ベクトルと行列の基礎を知っている学部生に適している。WebGLとJavaScriptは例を通じて導入され、WebGLのプログラムはWebブラウザ上で動くので、別途グラフィックスライブラリをインストールする必要はない。

  • 中核(1学期): 第1〜6章、時間があれば第7章。第2章のガスケットのプログラムは読むだけでなく、実際に入力して書き換えてみるとよい。後のすべての例がその構造の上に成り立っている。
  • 数学: 第4章と並行して付録BとCを使う。第5章が依存するので、第4章のフレームと同次座標の扱いは飛ばさないこと。
  • 選択的な章: フレームバッファとマルチパスの技法には第8章、階層モデルとシーングラフには第9章、粒子と手続き的手法には第10章、曲線と曲面には第11章。
  • 実装とその先: パイプラインが内部でどう動くかを知るための第12章は、学生がそれを使ったあとに読むのが最もよい。第13章は概観として、またプロジェクトのアイデアの源として使う。

演習はコードで解くとよい。各例で一つだけ(変換の順序、ライティングのパラメータ、テクスチャのフィルタ)を変え、実行する前に結果を予測する習慣をつけると効果的である。