こんにちは、ICSの池田です。今月AdobeからFlash Player 11.8とAIR 3.8がリリースされましたが、その新機能を使ってリアルな3Dの地球の表現を試してみました。次のURLでどのPCブラウザでも再生できるので試してみてくださいませ。
今までのFlash PlayerはGPUに転送できるテクスチャの最大サイズが2048×2048pxだったのですが、新しいバージョンのFlashランタイムでは4096x4096pxの超巨大なテクスチャを扱えるようになりました。今回の記事ではその技術的なポイントを紹介します。
高精細な地球の表現
超巨大なテクスチャを使っているので拡大しても精細に美しく表示できます。
▲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でレンズフレアの加算合成をしています。
レンズフレア自体はAdobe After EffectsのKnoll Light Factoryで作成しました（上図）。デフォルトのレンズフレアのままなので、少しカスタマイズしたほうが良かったですね。このAfter Effectsのレンズフレアの要素を1つ一つのPNG画像に手作業で書き出して、それをFlashで合成しています。詳しくはソースコードを参照くださいませ。
※ちなみに地球のテクスチャは有償の素材ですので、ソースコード一式のなかにデータは含めていません。
