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

3章光源

先ほどの章では、WebGLのレンダリングパイプライン、ジオメトリの定義、GPUへのデータ転送、AJAXを利用した非同期の外部アセット読み込みについて説明しました。また、WebGLアプリケーションを作成する中でシェーダーとその役割についても簡単に説明しました。本章ではシェーダーについてさらに詳細に説明し、頂点シェーダーとフラグメントシェーダーを利用してシーンのライティングモデルを作成します。

シェーダーを使用すると、シーンにどのように光を当てるかを規定する数学的なモデルを定義できます。これから、いくつかのアルゴリズムを紹介しその応用例を解説することで、シェーダーを実装する方法を説明します。線形代数の基本的な知識があれば本章の内容を理解する大きな助けになりますが、ほとんどのベクトル／行列操作はJavaScriptライブラリを通じて行うので、数学的な操作について心配する必要はありません。とはいえ、これから説明する線形代数操作の概念をしっかりと理解しておくことが結局は自分のためになります。

本章では以下のような内容を扱います。

• 光源、法線、マテリアル
• シェーディングとライティングの違い
• グーローシェーディングとフォンシェーディング
• ランバートライティングモデルとフォンライティングモデル
• ユニフォーム、アトリビュート、バリイングの定義と利用
• WebGLのシェーディング言語ESSLの利用
• シェーダーに関係するWebGL APIメソッド
• WebGLステートマシンで管理されるシェーダーに関する属性

3.1　光源、法線、マテリアル

現実世界で物体が目に見えるのは、光を反射するからです。オブジェクトがどのように照らされるかは、光源との相対的な位置、表面の向き、物質の組成などに依存します。本章では、WebGLでこれら3つの要素を組み合わせて、異なる照明スキームをモデリングする方法について学びます（ ...