WebGL でのオブジェクトのアニメーション
正方形を回転させる
この例では、実際にはカメラを回転させることで、正方形を回転させているように見せていきます。最初に、カメラの現在の回転を追跡する変数が必要です。
メモ: このコードを "webgl-demo.js" スクリプトの始めに追加してください。
js
let squareRotation = 0.0;
let deltaTime = 0;
ここで drawScene() 関数を更新して、カメラを描画するときに現在の回転を適用する必要があります。カメラを正方形の初期描画位置に移動させた後、回転を適用します。
メモ: "draw-scene.js" モジュールで、 drawScene() 関数の宣言を更新し、使用する回転を渡せるようにします。
js
function drawScene(gl, programInfo, buffers, squareRotation) {
メモ: drawScene() 関数の中で、 mat4.translate() の呼び出しの直後に次のコードを追加してください。
js
mat4.rotate(
modelViewMatrix, // 出力先の行列
modelViewMatrix, // 回転する行列
squareRotation, // ラジアンでの回転量
[0, 0, 1],
); // 回転軸
これは modelViewMatrix を現在の squareRotation の値だけ、Z 軸を中心に回転させます。
実際にアニメーションさせるには、 squareRotation の値を時間とともに変化させるコードを追加する必要があります。
メモ: このコードを main() 関数の終わりに追加し、既存の drawScene() の呼び出しを置き換えてください。
js
let then = 0;
// 繰り返しシーンを描画
function render(now) {
now *= 0.001; // 秒に変換
deltaTime = now - then;
then = now;
drawScene(gl, programInfo, buffers, squareRotation);
squareRotation += deltaTime;
requestAnimationFrame(render);
}
requestAnimationFrame(render);
このコードでは requestAnimationFrame を用いて、各フレームで関数 "render" を呼び出すようブラウザーに依頼します。 requestAnimationFrame はページが読み込まれてからの時刻をミリ秒単位で渡します。それを秒に変換し、そこから前回の時刻を引いて deltaTime を計算します。
最後に squareRotation を更新します。