1.2 カメラのアニメーション

動的にカメラの姿勢を変更するアニメーションを作成する方法を説明します。

1. サンプルコード

動的にカメラの姿勢を変更するアニメーションを作成する CameraAnimation.html のサンプルコードです。このサンプルコードでは、富士山を中心にカメラが360度回転します。

1.1. CameraAnimation.html

  1: <!DOCTYPE html>
  2: <html>
  3:     <head>
  4:         <meta charset="utf-8">
  5:         <title>CameraAnimationSample</title>
  6:         <script src="https://resource.mapray.com/mapray-js/v0.9.4/mapray.min.js"></script>
  7:         <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
  8:         <style>
  9:             html, body {
 10:                 height: 100%;
 11:                 margin: 0;
 12:             }
 13: 
 14:             div#mapray-container {
 15:                 display: flex;
 16:                 position: relative;
 17:                 height: 100%;
 18:             }
 19:         </style>
 20:     </head>
 21: 
 22:     <body>
 23:         <div id="mapray-container"></div>
 24:     </body>
 25: </html>
 26: 
 27: <script>
 28:     // サブクラスのコンストラクタ定義
 29:     function CameraAnimation() {
 30:         mapray.RenderCallback.call(this);
 31: 
 32:         // Access Tokenを設定
 33:         var accessToken = "<your access token here>";
 34: 
 35:         // Viewerを作成する
 36:         new mapray.Viewer("mapray-container", {
 37:             render_callback: this,
 38:             image_provider: new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18),
 39:             dem_provider: new mapray.CloudDemProvider(accessToken)
 40:         });
 41: 
 42:         this.longitude = 138.730647;    // 富士山の経度
 43:         this.latitude = 35.362773;      // 富士山の緯度
 44:         this.height = 3776.24;          // 富士山の高度
 45:         this.distance = 10000.0;        // 富士山からの距離
 46:         this.pitch_angle = -30.0;       // 仰俯角
 47:         this.angular_velocity = 5.0;    // 毎フレームの回転角度
 48:         this.turn_angle = 0;            // ターン角
 49:     }
 50: 
 51:     // CameraAnimationにmapray.RenderCallbackを継承させる
 52:     CameraAnimation.prototype = Object.create(mapray.RenderCallback.prototype);
 53: 
 54:     // 毎フレームの処理を定義
 55:     CameraAnimation.prototype.onUpdateFrame = function(delta_time) {
 56:         // 毎フレームの処理
 57:         var camera = this.viewer.camera;
 58: 
 59:         // 基準座標系から GOCS への変換行列を生成
 60:         var base_geoPoint = new mapray.GeoPoint( this.longitude, this.latitude, this.height );
 61:         var base_to_gocs = base_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
 62: 
 63:         // カメラの相対位置を計算し、姿勢を決める
 64:         var d = this.distance;
 65: 
 66:         var camera_Mat = mapray.GeoMath.createMatrix();
 67: 
 68:         var camera_pos_mat = mapray.GeoMath.createMatrix();
 69:         mapray.GeoMath.setIdentity(camera_pos_mat);
 70: 
 71:         // カメラの位置をY軸方向に距離分移動させる
 72:         camera_pos_mat[13] = -d;
 73: 
 74:         // z軸でturn_angle分回転させる回転行列を求める
 75:         var turn_Mat = mapray.GeoMath.rotation_matrix([0, 0, 1], this.turn_angle, mapray.GeoMath.createMatrix());
 76: 
 77:         // x軸でpitch_angle分回転させる回転行列を求める
 78:         var pitch_Mat = mapray.GeoMath.rotation_matrix([1, 0, 0], this.pitch_angle, mapray.GeoMath.createMatrix());
 79: 
 80:         // カメラの位置にX軸の回転行列をかける
 81:         mapray.GeoMath.mul_AA(pitch_Mat, camera_pos_mat, camera_pos_mat);
 82: 
 83:         // カメラの位置にZ軸の回転行列をかける
 84:         mapray.GeoMath.mul_AA(turn_Mat, camera_pos_mat, camera_pos_mat);
 85: 
 86:         // 視線方向を定義
 87:         var cam_pos = mapray.GeoMath.createVector3([camera_pos_mat[12], camera_pos_mat[13], camera_pos_mat[14]]);
 88:         var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
 89:         var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
 90: 
 91:         // ビュー変換行列を作成
 92:         mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, camera_Mat);
 93: 
 94:         // カメラに変換行列を設定
 95:         mapray.GeoMath.mul_AA(base_to_gocs, camera_Mat, camera.view_to_gocs);
 96: 
 97:         // カメラに近接遠方平面を設定
 98:         camera.near = this.distance / 2;
 99:         camera.far = camera.near * 1000;
100: 
101:         // 次のターン角度
102:         this.turn_angle += this.angular_velocity * delta_time;
103:     }
104: 
105:     // CameraAnimationのインスタンス作成
106:     var cam_Animation = new CameraAnimation();
107: </script>

このサンプルコードの詳細を以下で解説します。

1.2. htmlの記述

1～25行目でhtmlを記述しています。ヘルプページ『緯度経度によるカメラ位置の指定』で示したhtmlファイルからタイトルのみを変更します。詳細はヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。

 1: <!DOCTYPE html>
 2: <html>
 3:     <head>
 4:         <meta charset="utf-8">
 5:         <title>CameraAnimationSample</title>
 6:         <script src="https://resource.mapray.com/mapray-js/v0.9.4/mapray.min.js"></script>
 7:         <link rel="stylesheet" href="https://resource.mapray.com/styles/v1/mapray.css">
 8:         <style>
 9:             html, body {
10:                 height: 100%;
11:                 margin: 0;
12:             }
13: 
14:             div#mapray-container {
15:                 display: flex;
16:                 position: relative;
17:                 height: 100%;
18:             }
19:         </style>
20:     </head>
21:     <body>
22:         <div id="mapray-container"></div>
23:     </body>
24: </html>

1.3. カメラアニメーションクラスの定義

アニメーション処理を実現させるために、maprayにおけるレンダリング関連のコールバック関数（mapray.RenderCallback）を継承するカメラアニメーションクラスを作成します。29～49行目がその定義となり、コールバック関数の設定、アクセストークンの設定、Viewerの作成、カメラ姿勢に関する初期値の設定を行います。まず、30行目でコールバック関数の設定を行い、33行目でアクセストークンを設定します。取得したアクセストークンを＜your access token here＞部分に設定します。次に、地図を表示するために、maprayの表示を管理するクラス（mapray.Viewer）を生成します。このサンプルコードでは、レンダリング関連のコールバック関数を変更してアニメーションを実現させる必要があるため、コールバック関数を指定してViewerを作成します。その他、mapray.Viewerの生成処理の詳細は、ヘルプページ『緯度経度によるカメラ位置の指定』を参照してください。最後に、カメラ姿勢に関する初期値を下記のように設定します。

注視点（回転中心）の緯度・経度・高度　⇒　富士山山頂付近
注視点（回転中心）からカメラまでの距離　⇒　10,000m
カメラの仰俯角　⇒　-30度
1秒当たりの回転角度　⇒　5度
現在の回転角度　⇒　0度

28: // サブクラスのコンストラクタ定義
29: function CameraAnimation() {
30:     mapray.RenderCallback.call(this);
31: 
32:     // Access Tokenを設定
33:     var accessToken = "<your access token here>";
34: 
35:     // Viewerを作成する
36:     new mapray.Viewer("mapray-container", {
37:         render_callback: this,
38:         image_provider: new mapray.StandardImageProvider("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/", ".jpg", 256, 2, 18),
39:         dem_provider: new mapray.CloudDemProvider(accessToken)
40:     });
41: 
42:     this.longitude = 138.730647;    // 富士山の経度
43:     this.latitude = 35.362773;      // 富士山の緯度
44:     this.height = 3776.24;          // 富士山の高度
45:     this.distance = 10000.0;        // 富士山からの距離
46:     this.pitch_angle = -30.0;       // 仰俯角
47:     this.angular_velocity = 5.0;    // 毎フレームの回転角度
48:     this.turn_angle = 0;            // ターン角
49: }

1.4. RenderCallbackの継承

52行目で、カメラのアニメーションクラスのプロトタイプに、Object.create関数で作成したRenderCallbackクラスのプロトタイプ設定することで、RenderCallbackクラスを継承します。

51: // CameraAnimationにmapray.RenderCallbackを継承させる
52: CameraAnimation.prototype = Object.create(mapray.RenderCallback.prototype);

1.5. フレームレンダリング前のコールバックメソッド（カメラ姿勢の変更処理）

55～103行目がフレームレンダリング前のコールバックメソッドです。このサンプルコードでは、動的にカメラの姿勢を変更し、アニメーションを表現します。まず、60～61行目のgetMlocsToGocsMatrix関数で、注視点（回転中心）の緯度・経度・高度を地心直交座標系で表現したカメラ位置を表す変換行列を計算します。次に、ビュー変換行列を作成します。まず、64～72行目で相対視点位置を表す変換行列を単位行列に初期化し、注視点からの距離を設定した値になるように、相対視点位置をY軸方向に移動します。その後、75～78行目で、現在の回転角度に対応する回転行列（Z軸回りの回転行列）、カメラの仰俯角に対応する回転行列（X軸回りの回転行列）を生成し、81～84行目で、相対視点位置を表す変換行列にそれぞれの回転行列を掛け合わせることで、相対視点位置を表す変換行列を作成します。最後に、87～92行目で、求めた相対視点位置、注視点、カメラの上方向ベクトルを利用して、最終的なビュー変換行列を作成します。そして、95行目で、これまでに求めたカメラ位置を表す変換行列と、ビュー変換行列を掛け合わせることで、最終的なカメラ姿勢を計算します。最後に、98～102行目でカメラの投影範囲を設定し、現在の回転角度を最新の状態に更新します。

 54: // 毎フレームの処理を定義
 55: CameraAnimation.prototype.onUpdateFrame = function(delta_time) {
 56:     // 毎フレームの処理
 57:     var camera = this.viewer.camera;
 58: 
 59:     // 基準座標系から GOCS への変換行列を生成
 60:     var base_geoPoint = new mapray.GeoPoint( this.longitude, this.latitude, this.height );
 61:     var base_to_gocs = base_geoPoint.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
 62: 
 63:     // カメラの相対位置を計算し、姿勢を決める
 64:     var d = this.distance;
 65: 
 66:     var camera_Mat = mapray.GeoMath.createMatrix();
 67: 
 68:     var camera_pos_mat = mapray.GeoMath.createMatrix();
 69:     mapray.GeoMath.setIdentity(camera_pos_mat);
 70: 
 71:     // カメラの位置をY軸方向に距離分移動させる
 72:     camera_pos_mat[13] = -d;
 73: 
 74:     // z軸でturn_angle分回転させる回転行列を求める
 75:     var turn_Mat = mapray.GeoMath.rotation_matrix([0, 0, 1], this.turn_angle, mapray.GeoMath.createMatrix());
 76: 
 77:     // x軸でpitch_angle分回転させる回転行列を求める
 78:     var pitch_Mat = mapray.GeoMath.rotation_matrix([1, 0, 0], this.pitch_angle, mapray.GeoMath.createMatrix());
 79: 
 80:     // カメラの位置にX軸の回転行列をかける
 81:     mapray.GeoMath.mul_AA(pitch_Mat, camera_pos_mat, camera_pos_mat);
 82: 
 83:     // カメラの位置にZ軸の回転行列をかける
 84:     mapray.GeoMath.mul_AA(turn_Mat, camera_pos_mat, camera_pos_mat);
 85: 
 86:     // 視線方向を定義
 87:     var cam_pos = mapray.GeoMath.createVector3([camera_pos_mat[12], camera_pos_mat[13], camera_pos_mat[14]]);
 88:     var cam_end_pos = mapray.GeoMath.createVector3([0, 0, 0]);
 89:     var cam_up = mapray.GeoMath.createVector3([0, 0, 1]);
 90: 
 91:     // ビュー変換行列を作成
 92:     mapray.GeoMath.lookat_matrix(cam_pos, cam_end_pos, cam_up, camera_Mat);
 93: 
 94:     // カメラに変換行列を設定
 95:     mapray.GeoMath.mul_AA(base_to_gocs, camera_Mat, camera.view_to_gocs);
 96: 
 97:     // カメラに近接遠方平面を設定
 98:     camera.near = this.distance / 2;
 99:     camera.far = camera.near * 1000;
100: 
101:     // 次のターン角度
102:     this.turn_angle += this.angular_velocity * delta_time;
103: }

1.6. クラスのインスタンス生成

106行目で、カメラアニメーションクラスのインスタンスを生成し、カメラのアニメーションが動作するようにします。

105: // CameraAnimationのインスタンス作成
106: var cam_Animation = new CameraAnimation();

2. 出力イメージ

このサンプルコードの出力イメージは下図のようになります。

3. カメラのアニメーションの改修

このサンプルコードを改修して、下記のアニメーションを表現できるようにします。

見る場所を富士山山頂から大阪城にする
カメラの画角も動的に変更する

サンプルコードの修正部分は2つあり、以下で解説します。

3.1. カメラアニメーションクラスの定義の変更

カメラアニメーションクラスのカメラ姿勢の初期値の設定を下記のように変更します。

注視点（回転中心）の緯度・経度・高度　⇒　大阪城
注視点（回転中心）からカメラまでの距離　⇒　5,000m
カメラの仰俯角　⇒　-30度 - 1秒当たりの回転角度　⇒　5度
現在の回転角度　⇒　0度 - 動的に変更する画角の最小値　⇒　30度
動的に変更する画角の最大値　⇒　70度 - 現在の画角　⇒　0度

// サブクラスのコンストラクタ定義
function CameraAnimation() {
    // 前半部分は省略

    this.longitude = 135.526202;    // 大阪城の経度
    this.latitude = 34.686502;      // 大阪城の緯度
    this.height = 1000;             // 大阪城の高度
    this.distance = 5000.0;         // 大阪城からの距離
    this.pitch_angle = -30.0;       // 仰俯角
    this.angular_velocity = 5.0;    // 毎フレームの回転角度
    this.turn_angle = 0;            // ターン角
    this.angle_Of_View_min = 30     // 最小画角
    this.angle_Of_View_max = 70     // 最大画角
    this.angle_Of_View = 0          // 画角
}

3.2. フレームレンダリング前のコールバックメソッド（カメラ姿勢の変更処理）の変更

ここでは、画角を動的に変更するために下記の2つの改修を行います。

カメラの画角に現在の画角を設定する（コード内コメント『画角を設定』部分）
現在の画角を最新の状態に更新する（コード内コメント『次の画角』部分）

現在の画角は、現在の回転角度が、0～180度の間は最小画角から最大画角に遷移するように、180～360度の間は最大画角から最小画角に遷移するように設定します。

// 毎フレームの処理を定義
CameraAnimation.prototype.onUpdateFrame = function(delta_time) {
    // 前半部分は省略

    // 画角を設定
    camera.fov = this.angle_Of_View;

    // 次のターン角度
    this.turn_angle += this.angular_velocity * delta_time;

    // 次の画角
    if (this.turn_angle % 360 > 180)
    {
        this.angle_Of_View = this.angle_Of_View_min * (this.turn_angle % 180 / 180) + this.angle_Of_View_max * (1 - (this.turn_angle % 180 / 180));
    }
    else
    {
        this.angle_Of_View = this.angle_Of_View_min * (1 - (this.turn_angle % 180 / 180)) + this.angle_Of_View_max * (this.turn_angle % 180 / 180);
    }
}

4. 出力イメージ

修正したサンプルコードの出力イメージは下図のようになります。