初めてのWebGL 2 第2版 ―JavaScriptで開発するリアルタイム3Dアプリケーション

2章レンダリング

先ほどの章ではWebGLの歴史をその進化とあわせて紹介しました。また3Dアプリケーションの基本要素とWebGLコンテキストを準備する方法についても説明しました。本章では幾何学的な物体をWebGLで定義する方法について説明します。

WebGLではオブジェクトを「分割統治」法を用いて描画します。つまり複雑なポリゴンはまずトライアングルやライン、ポイントなどの原始的な要素（プリミティブ）に分割されます。その後で幾何的なプリミティブがそれぞれGPU上で並列に処理され、最終的なシーンが構築されます。

本章では次のことを学びます。

• WebGLでの幾何的な情報の定義と処理
• ジオメトリ（幾何形状）の操作に関係する重要なAPI
• JavaScript Object Notation（JSON）を使用した複雑なジオメトリの定義、保存、読込の方法とその理由
• ジオメトリ操作に関係する属性を管理するステートマシンとしてのWebGLの詳細
• さまざまなジオメトリモデルの作成と読み込み

2.1　WebGLレンダリングパイプライン

WebGLはよく総合的な3D APIだと考えられていますが、実際のところは単なるラスタライゼーションエンジンにすぎません。入力されたコードに従ってポイントやライン、トライアングルを描画するだけです。それ以上のことをWebGLで実現したければ、ポイントとラインとトライアングルを使用して、目的とするタスクを実現するコードを自分で記述する必要があります。

WebGLは皆さんのマシンのGPU上で動作します。そのため、GPU上で実行されるコードを記述しなければいけません。コードは組となる2つの関数として与える必要があります。それらは頂点シェーダー（vertex shader）と ...