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

9章WebGLアプリケーション

先ほどの章ではフレームバッファとレンダーバッファを紹介し、それらを用いてピッキングを実現して、3Dアプリケーションを操作する手順について説明しました。本章ではこれまでに学んだすべての概念を統合し、3Dバーチャル自動車ショールームを作成します。このデモアプリケーション開発で使用する概念は、モデル、光源、カメラ、アニメーション、色、テクスチャなどです。また、単純ですが便利なグラフィカルユーザーインタフェースを使用して、それらの要素を統合する方法も学びます。

本章では、以下のことを学びます。

• 本書全体を通して開発してきたアーキテクチャの統合
• 3Dバーチャル自動車ショールームアプリケーションの作成
• Blenderからの自動車3Dモデルのインポート
• 複数光源の設定
• 複数のマテリアルを扱える安定したシェーダー
• OBJファイルフォーマットとMTLファイルフォーマット
• シーン内を自由に移動できるカメラの作成

9.1　WebGLアプリケーションの作成

ここまで、WebGLアプリケーションの作成に必要となる基本的なトピックスについて学びました。さらに、それらのトピックスの内容は、これまでの説明を通して少しずつ作成してきたフレームワークに実装されています。

「1章 イントロダクション」では、WebGLを紹介しブラウザで3Dを使用する方法を学びました。そこでWebGLコンテキストがステートマシンとして振る舞うことを知りました。WebGLのさまざまな状態はgl.getParameter関数を使用して問い合わせることができます。

それから「2章 レンダリング」では、WebGLシーン内で頂点を使用してオブジェクトを定義する方法を学びました。また、頂点にインデックスを通じてアクセスすることで、WebGLのレンダリングパイプラインがオブジェクトを高速にラスタライズして描画できることも知りました。バッファを操作する関数に加え、プリミティブを実際に描画する2つのメイン関数 ...