超高精細! 巨大テクスチャをサポートしたFlash Player 11.8で実現するリアルな地球の表現

超高精細! 巨大テクスチャをサポートしたFlash Player 11.8で実現するリアルな地球の表現

※この記事が公開されたのは3年1ヶ月前ですが、 2016年7月4日に内容をメンテナンスしています。

こんにちは、ICSの池田です。今月AdobeからFlash Player 11.8とAIR 3.8がリリースされましたが、その新機能を使ってリアルな3Dの地球の表現を試してみました。次のURLでどのPCブラウザでも再生できるので試してみてくださいませ。

今までのFlash PlayerはGPUに転送できるテクスチャの最大サイズが2048×2048pxだったのですが、新しいバージョンのFlashランタイムでは4096x4096pxの超巨大なテクスチャを扱えるようになりました。今回の記事ではその技術的なポイントを紹介します。

高精細な地球の表現

超巨大なテクスチャを使っているので拡大しても精細に美しく表示することができます。

away_earth_2

Away3Dと巨大なテクスチャを設定した地球

away_earth_1

アンビエントテクスチャを設定することで夜景の表現を

レンズフレアの表現をAway3Dで実現

レンズフレアの表現をAway3Dで実現

地球と月

地球と月

 

技術的なポイント

使用しているフレームワークですが、最新版の3Dフレームワーク「Away3D 4.1.4 GOLD」をベースにして、一部分(レンズフレアの箇所)は2Dフレームワーク「Starling 1.3」を使っています。

この超巨大なテクスチャを扱うには、Stage3Dの初期化時に新しいプロファイル「BASELINE_EXTENDED」を指定します。

proxy = manager.getFreeStage3DProxy(false, "baselineExtended");

このプロファイルは対応するグラフィックボードが少なくなる代わりに、Stage3Dで使える機能が増えるというものです。BASELINE_EXTENDEDプロファイルでは巨大なテクスチャサポートと、2の累乗以外のサイズのテクスチャ「RectangleTexture」が使用できるようになります。

ちなみにAway3D 4.1.4 GOLDでは残念ながらサポートするテクスチャのサイズは 2048x2048pxのままなので(ライブラリ側で制限がかかっているので)、away3d.tools.utils パッケージの TextureUtils クラスの定数部分を少し書き換える必要があります。

修正前

private static const MAX_SIZE : uint = 2048;

修正後

private static const MAX_SIZE : uint = 2048*2;

レンズフレアの実装方法

ちなみにレンズフレアの表現は、海外のADC (Adobe Developer Connection)のAway3Dの記事を参考にしました。

この記事ではレンズフレアの表現がDisplayListで構築されていて、グレースケールのレンズフレアしか再現しない設計だったので、私のほうのデモではStarling側でレンズフレアを再現するように設計を変えています。DIsplayList側からAway3Dの描画プレーン(Stage3D)に対して加算合成ができないので、Away3Dと同一の描画プレーンで処理できるStarlingでレンズフレアの加算合成をしています。

knolllight

レンズフレア自体はAdobe After EffectsのKnoll Light Factoryで作成しました(上図)。デフォルトのレンズフレアのままなので、少しカスタマイズしたほうが良かったですね。このAfter Effectsのレンズフレアの要素を一つ一つのPNG画像に手作業で書き出して、それをFlashで合成しています。詳しくはソースコードを参照くださいませ。

flare0 flare1 flare4

 

※ちなみに地球のテクスチャは有償の素材ですので、ソースコード一式のなかにデータは含めていません。

参考記事


     最新記事の一覧へ 
公開 / 更新
池田 泰延

池田 泰延

ICS代表。筑波大学 非常勤講師。ICS MEDIA編集長。個人実験サイト「ClockMaker Labs」やセミナー・書籍執筆などの活動を通して積極的にインタラクションデザインの情報共有に取り組んでいる。著書に「Flash for HTML5」「Stage3Dプログラミング」など多数。