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

5章アニメーション

先ほどの章で行列、座標変換、カメラについて説明しましたが、そこには静的なシーンしか登場せず、表示の変更はすべてカメラの移動によって生じるものでした。カメラの移動による表示の変化は3Dシーンに存在するすべてのオブジェクトに適用されます。そのため、そのような変換をグローバル変換と呼びます。しかし、3Dシーンでは各オブジェクトが独自に動くこともあるはずです。例えば、レーシングゲームでは、それぞれの自動車は独自の速度、独自のラインでコースを走るでしょう。一人称視点シューティングゲームの敵キャラクターにはバリケードの後ろに隠れるものもいれば、攻撃を仕掛けるものや、そのまま逃げ出すものもいるでしょう。一般にこのような動作は、シーン内のアクターのそれぞれに対して個別に適用する行列変換として表現します。このような変換はローカル変換と呼ばれます。

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

• グローバル変換とローカル変換の違い
• 行列スタックを利用したアニメーション
• JavaScriptタイマーを使用した時間ベースのアニメーション
• パラメトリック曲線
• さまざまな補間テクニック

5.1　WebGL行列の命名規約

先に進む前に、まず行列の命名規約について簡単にまとめておきましょう。これまで見てきたとおりWebGLは単純なAPIで、gl_Positionのような事前定義されたいくつかの名前を除いて、ほぼすべてをプログラマーである皆さんが自分で定義しなければいけません。とはいえ、標準的な、もしくは準標準的な命名規約は存在します。これは特に行列の名前について当てはまります。すでに説明した行列やこのすぐ後に説明するいくつかの新しい行列など、重要な行列の一般的な名前は次のとおりです。

ワールド行列