Webブラウザで飛行機の3Dアニメーション

 ↑Webブラウザ上で動く3D表現！　影もできる本格的な３Ｄの作成を容易にするThree.jsはすぐれもの

Three.jsを用いて3Dシーンをアニメーション化

　今回はThree.jsを用いた3Dアニメーションです。

　Three.jsはWebGLをより簡単に扱えるようにしてくれるJavaScriptライブラリだそうです。なんのことだかわかりませんよね。ややこしいのは嫌で、JavaSｃｒｉｐｔでさえ使わず、もっぱらCSSで済ませれるものばかり追求してきた私が、Webブラウザ上で、影まで落とす3D表現が簡単に実現できるの知って驚いたのは、"The Aviator"に出会ったのがきっかけです。

　偶然見つけた絵本テイストの飛行機の立体アニメーションは、FlightGearのリアルフライトシミュレーションとはまた違い、そのかわいらしさにすっかり惹かれてしまいました。飛行機つながりでぜひ紹介しようと思ったら、使うのは自由だが、何やらそのままでは公開は認められず、自分で手を加えたものでなければならないようなことが書かれています。

　仕方がないので、このThree.jsを使った飛行機の3Dアニメーションの加工にとりくむことにしました。

　サンプルでは、青い円筒を海に見立て背景の雲とともに回転させ、その一部を画面に表示することで、弧を描く水平線の上を横スクロールのシューティングゲームよろしく飛行機が飛んで行くように見せているものです。そこで試みたのは、飛行機本体を作り変えることと、雲と海しかない背景にヤシの生えた小島やヨットなどを賑やかしに配置すること。

　まだまだ知らないことだらけですが、改造は意外と簡単で、もっぱら苦労したのは3Dモデルのメッシュの頂点のナンバーリングがよくわからず、加工に試行錯誤したことでしょうか。例により何もわからぬままの闇雲流のプログラミングなので、理解の前進の跡がくっきりと残ったプログラムになっています。

　より悩ましかったのは造形のセンスの問題の方だったでしょう。絵本のようにデフォルメすることは手抜きではないですから、他人が見てわかる程度のそれらしさがないと困るわけです。ヨットの帆を薄くしたりすれば、飛行機の翼がただの板ではバランスがとれなくなります。翼のふくらみを強調するなどやりすぎれば、絵本らしいテイストがそこなわれてしまいます。

　画像のように、航空機は水上機と双発機、飛行船を作ってみましたが、イメージ通りにはいかないものです。あげくの果て冒頭のスクリーンショットのようなパクリまで。ホテルはまあまあのできになりましたが、さすがに重くなりすぎました。

　FlightGearとは関係のない3Dアニメーションですが、Galleryのトップに置いちゃいました。このブログではできることがあまりにも限られていて、悲しいかなThree.jsは扱えませんからね。暇がありましたらGalleryを見てやってください。本家の方の"The Aviator"では、パイロットの髪がなびいたり、ゲームもありますから、ダウンロードして楽しんでみてはいかがでしょう。

　無知な者が勝手なことを言いますが、Webブラウザ上の３D表現でもこれ程きれいな影ができるのですから、FlightGearでももう少しましな影ができるようにならないものでしょうか。

FlightGearの新バージョンがリリースされたが

↑カウアイ島の大渓谷。映画「ジュラシック・パーク」の景色がFlightGearの世界にも再現されています。
 

ハワイ旅行でもしてましょう

　FlightGear2018.1.1のリリースから5日遅れて、ようやくUbuntu用のパッケージが非公式リポジトリから手に入るようになりました。

　この間はしかたなく開発版のFlightGear2018.2.0の方をインストールしていました。とりあえず、片鱗はうかがえますからね。とはいえ、こちらはランチャーに不具合があって、ランチャーの新機能は確かめることはできませんでした（その後アップデートで解消されているかも）。

　おいおいアップデートするとして、ここではこの間に開発版を試していて得た最近の成果を紹介しましょう。Windows版のFlightGearを使用されている方は、先刻ご承知のことでしょう。

■ハワイ

　新バージョンのFlightGearのデフォルトの空港は、ハワイ・ホノルル空港です。
　噴火するキラウエア火山（開発版FlightGear2017.4.0の紹介でふれたことがあります）にとどまらず、植生や滝など、ハワイの充実は著しいようです。

　知らなかったのですが、ハワイ・カウアイ島にはグランド・キャニオンばりの大渓谷があるのですね。

　ハワイ諸島は、日本の方に移動していると言われます。マグマによりできた海底火山が島に生長し、プレート移動にともなって島が移動した後にまた新たな火山島ができ、順次古い火山島からまた海中に没して行く、を長年にわたり繰り返してきたというわけです。
　だから、一番北に位置するカウアイ島がハワイ諸島で一番古く、したがって長い時間をかけて他の島にはないような大渓谷をつくることができたのでしょう。

　そうした大渓谷が作り出す、幾筋もの滝が流れ落ちる壮大な景色が、FlightGearの世界でも再現されることになりました。映画「ジュラシック・パーク」のシーンを思い出すのは、ここがロケ地だったからというのも、知ったところです。　滝は、他の場所にも見られます。

■CVN-75 ハリー・S・トルーマン

　オアフ島近海に空母ハリー・S・トルーマンがいるというので、AIシナリオの緯度・経度をたよりに探してみました。

　居ました。タイコンデロガ級ミサイル巡洋艦レイク・シャンプレインはじめ、ミサイルフリゲート艦4隻、ドック型揚陸艦1隻からなる大艦隊です。フリゲート艦は5海里離れたところを航行していますからすぐには、見つけられません。

　いずれの艦の3Dモデルとも艤装が精緻なのにびっくりしました。フォルダ名にhigh-detail
と付いていますから、さもありなん。レイク・シャンプレインに至ってはスクリューもあります。
　加えて、truman.xmlの記述を見ると、航空機の編隊飛行を再現する<type>wingman</type>に似た記述があります。<type>escort</type>です。

　Ship-FDMで動く旗艦を中心に、大海原を大艦隊が航行する様をつい夢想してしまいます。

■Alouette-III

　FlightGearの新バージョンにとりこまれたAlouette-IIIには、レスキューなどいろいろな機能が含まれていますが、なかでもco-pirot機能が面白いです。

　メニューバーの[Alouette-III]をクリックして開いたドロップダウンメニューから[Configulation] を選び、これを開いたらCrew下の[Amelia]にチェックを入れます。Configulationwを閉じ、メニューバーから今一度[Alouette-III]のドロップダウンメニューを開き、最下段の［Amelia］を選ぶと、画面にダイアログボックスが現れます。
　ここで、女性パイロットのアメリアに操縦を託す(take controls?)ことにし、離陸（ｔａｋｅ ｏｆｆ?）などの言葉を入力して［Ask］をクリックすると、アメリアが答えて頼んだように操縦してくれます。
　楽できていいというか、レスキューに専念するためなのでしょう。これ以上のことは、まだよくわかりません。また、高度を上げたいのですが、うまくできずにいます。

画像をスライスして切り替えるスライドショー

 ↑2つ目は、言うほどにクールでも見栄えのするものでもない控え目なスライドショーですが・・・

 

クールなスライダーを真似たかった

　かなりクールなスライダーを見つけました。1枚の画像が４つのパネルにスライスされて切り替わっていくところが、すごく洒落てます。なんとかこれに似せたものを我がGalleryにほしいものだと思った結果が、冒頭のスクリーンショットです。

　画像は、元のクールなスライダーをまねて、個人的に音楽鑑賞のためにつくったスライダーのスクリーンショットです。白黒と赤を基調にしたので、オリジナルなものよりは地味ですが、比較のために載せておきます。

　両者で大違いですね。片鱗もありません。メニュー代わりにしようと思ったこともあり、９つもあるチャプターの表示のためにスライドショーにし、ページのタイトル表示も設け、クリックして当該ページに跳べるようにもしなければなりませんから、結果的には少々ありきたりな感じのスライドショーになってしまいました。

　それでも、サムネイルを表示させるようなことは、自身ではじめてのことでした。メニューがわりですから、スライドショーの順番を待てないせっかちな者には、あらかじめサムネイルで画像を確認の上、これをクリックすることで目的の画像を大きく表示させ、ついで目的のページへジャンプできるのは便利です。ただし、これ以上画像を増やす（ジャンプ先を増やす）となると、サムネイル画像が小さくなりすぎるため、サムネイル自体をスライドするとかしないとなりません。

　なお、元のサンプルにはスライド切り替え用のボタンもついていましたが、こちらはレスポンシブを想定して横幅を狭めていくと、惜しくも一定のところで片方が消えてしまうため、無効にしました。

　次回は、刮目すべき３Dアニメーションが話題です。