はじめに
今年も Advent Calendar の季節ですね。昨年に引き続きチームの Advent Calendar 用に書きたいと思います。前回は Three.js を使った 3D 入門的な記事でした。その続きでこういうミラー的なのがやってみたいなーと思ったのですが,標準機能では提供していなくて(シェーダーを自作しなくちゃいけないみたいで自分には難易度が高いので)断念しました。。他に 3D 関連のもっとライトなネタないかなーと思って探していたら Google Earth Studio っていうのが面白そうだったので,今回はそれにチャレンジしてみたいと思います。
こちらの記事を参考にさせて頂きました
Google Earth Studio とは
Earth Studio は、Google Earth の衛星画像と 3D 画像を使ったアニメーション ツールです
Earth Studio はパソコン版の Google Chrome でご利用いただけます。ご利用の際は、Google アカウントにログインしてアクセス権をリクエストしてください。
Google Chrome があればダウンロード不要(登録は必要)で,すぐにはじめられます。
「クイック スタート」で開始すれば,ひな形を利用してプロジェクトを開始することもできます。
ガイドラインによると Google Map や Google Earth の画像をそのまま転用しちゃうとダメ(クレジットを入れないといけない)みたいなのですが,Earth Studio で作成するといい感じで対応してくれるみたいです。
Google Earth プロまたは Earth Studio(パソコン用)を使用する場合は、必要な帰属表示が地図に取り込まれるため、その他のクレジットは必要ありません。
プロジェクト作成
まずは,プロジェクトを作成します。
(空のプロジェクトを選択)
- 名前 … プロジェクトファイル名
- 世界 … 地球,月,火星
- 画面サイズ … 幅×高さ
- 時間 … フレーム数 または タイムレコード
- フレームレート/秒 … 24 ~ 60 (default 30)
たとえば,フレーム数 = 450 で フレームレート/秒 = 30 であれば 15 秒の動画ということになります。最終的に出力されるのはフレームごとの画像の束なので,幅×高さの画像が 450 枚ほど出力されることになります。
プロジェクトは Google Drive に保存されますが,ローカルにエクスポートすることもできます。
編集
基本はカメラの位置と回転によって,対象のオブジェクトを描画して画像を作成します。これを連続して繰り返すことによってアニメーションを作成します。時間の経過とともに(フレームごとに)カメラの位置と回転を少しずつ変化させることでアニメーションの変化を表現することができます。
左上は地図上にカメラの位置と向き,右上は現在の見えている状態が表示されます。(上部の表示はメニューの「表示」→「マルチビュー」から切り替えられます)下の領域でカメラの状態などを指定します。任意の位置に「キーフレーム」を設定することで,キーフレームとキーフレームの間のカメラ制御を自動で算出してくれます。たとえば,フレーム 0 は "地点 A", フレーム 180 は "地点 B" と指定したとすると,180 フレーム分をつかって "地点 A" から "地点 B" までカメラを移動するということを指定することができます。
※ チュートリアル (https://earth.google.com/studio/docs/tutorials/) で基本の操作について確認することができます。
基本属性
カメラの位置
- 経度
- 緯度
- 標高
※ 虫眼鏡の検索ボックスから場所名や住所で位置を検索して指定することもできます。
カメラの回転
- パン … 左右の回転
- 傾斜 … 上下の回転
イージング
キーフレームからキーフレームへの変化の仕方を指定します。
画一的な変化,滑らかに変化,いきなり次の状態への変化が設定できます。
- 自動イージング … ポイントの前後連動で滑らかにする
- イーズイン … ポイントの前までを滑らかにする
- イーズアウト … ポイントの後からを滑らかにする
- 線形 … 変化量が一定
- ステップ … いきなり次のポイントの状態へ飛ぶ
追加属性
カメラ ターゲット
いわゆる「注視点」というやつですね。
カメラが向く先を座標で指示することができます。
あるオブジェクトの方を向いたまま,その周りを回るときなどに便利です。
また,ターゲット自体も時間の経過とともに移動させることができます。
カメラ レンズ
いわゆる「視野角」というやつですね。
カメラから見てどのくらいの範囲を描画対象とするかです。
広角レンズや魚眼レンズのような表現ができます。
その他
時刻(太陽の位置)や雲の表示といったオプションもあります。
レンダリング
それでは作成したものを出力してみます。
「レンダリング」ボタンをクリックすると出力画面に遷移します。
- 名前
- 出力先
- フレーム
- サイズ
- 権利帰属の表示位置
- 詳細
- 3D トラッキングデータ
- 座標空間
名前と出力先を選択して出力します。
出力先は "ダウンロード" などシステムが使ってそうなディレクトはダメだったので,c:\
の下などに適当なディレクトリを作成して指定しました。
結構時間が掛かります。(回線速度にもよるのかな?)自分の環境では 1920 * 1080 の 450 フレーム で 10 分くらいかかりました。
出力されると以下のようなディレクトリが出力されます。
$ tree
.
├── GettingStart.esp
├── ImagerySources.txt
└── footage
├── GettingStart_000.jpeg
├── GettingStart_001.jpeg
(略)
├── GettingStart_449.jpeg
└── GettingStart_450.jpeg
公式には以下のように書かれています。
全フレームのレンダリングが完了すると、一連の画像が zip にまとめられ、ユーザーが指定した Chrome のダウンロード ディレクトリにダウンロードされます。画像シーケンスを動画に変換したことがない場合は、Adobe Media Encoder または Adobe After Effects をお使いください。
上記の製品は評価版もありますが,基本的に有料のソフトウェアです。
こちらの記事によると ffmpeg
というツールを使えば mp4 に変換できるみたいです。
インストール
$ sudo apt install ffmpeg
mp4 の生成
レンダリング結果を出力したディレクトリにて以下のコマンドを実行します。
$ ffmpeg -r 30 -i ./footage/GettingStart_%03d.jpeg -vcodec libx264 -pix_fmt yuv420p -r 60 GettingStart.mp4
結果
👀 刺さりそう
イージングを設定すると滑らかな移動を表現できます。
あんまり速く動かすと目が疲れますね。
Getting Start 2 - Google Earth Studio pic.twitter.com/NKJrhUMxzO
— dsudo (@_dsudo) December 5, 2020
🌆 夕焼け感
太陽の位置をフレームごとに変化させて時刻感を表現しています。
ライトアップされないのが少し残念です。
Getting Start 4 - Google Earth Studio pic.twitter.com/IiZqK0CB9X
— dsudo (@_dsudo) December 5, 2020
🌏 地球の昼と夜
引きで撮れば地球全体を描写することもできます。
こちらは夜の部の明かりも表現されています。
最初は雲が表示されていますが,最後のアップの手前でフェードアウトしています。
Earth day and night pic.twitter.com/eCDHbaf3R0
— dsudo (@_dsudo) December 5, 2020