HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ

2014年01月01日 (水)
Tweet

HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ

HTML5で3Dを実現するWebGL対応のフレームワークAway3D TypeScriptが10月に発表されました。WebGLで3Dを実現する類似ライブラリとしてMr.doob氏らが開発しているThree.jsが名前が知られていますが、Away3D TypeScriptは同等以上に高機能であり高いパフォーマンスを有しています。今回は公式サンプル(Githubでソースコードが公開されている)を通して、Away3Dでどのような表現が可能であるのか紹介していきます。

Away3Dとは

Away3DはFlash Stage3Dでもっとも使われているフレームワークの一つです。アドビが提供するAdobe Gaming SDK(フレームワークやツールのパッケージ群)にもAway3Dは採用されています。

TypeScript/JavaScriptとして利用

Away3D TypeScriptはFlashやUnityなどのプラグインをブラウザにインストールする必要がなく、WebGLベースですのでWeb標準技術として3Dを実現します。Away3DはTypeScript言語で開発されていますが、コンテンツ開発者はTypeScriptでもJavaScriptでもどちらを使ってでも利用できます。TypeScriptはActionScript 3.0ユーザーにとっても同じECMAScriptですので馴染みやすいのも特徴です。

※Away3Dはオープンソースであり、Apache License v2.0 のライセンスが適用されています。ライセンスの範囲内であれば商用・個人利用問わず無償で利用することができます。

公式デモ

さて前置きが長くなりましたが、以下にAway3Dの公式デモをまとめました。画像をクリックすると、デモが再生されます。

▲Intermediate_MD5Animation.ts

アニメーションを含むMD5形式のモデリングデータを再生したデモ。キーボードでキャラクターを動かすことができます。カーソルキー、WSAD、Shift、1-9のキーで操作できます。

▲Intermediate_Globe.ts

球体としての地球を再生したデモ。レンズフレアも表現されています。レンズフレアの実装方法はADC (Adobe Developer Connection)に投稿されているFlash版Away3Dの記事「Simulating the globe with Away3D」が参考になります。

▲Basic_Skybox.ts

360度のパノラマVRの表現。中央に環境光を適用したドーナツ形状の3Dオブジェクトが配置されています。

▲Basic_Fire.ts

パーティクルを駆使して炎を表現したデモ。

▲Intermediate_ParticleExplosions.ts

3Dパーティクルのデモ。

▲CubePrimitive.ts

キューブのデモ。メガデモっぽい感じです。

▲Intermediate_PerelithKnight.ts

大量のキャラクターを表示したデモ。パフォーマンスの高さが伺えます。※起動に少し時間がかかります。

公式デモ〜入門編〜

▲TorusPrimitive.ts

ドーナツ形状のオブジェクトの入門デモ。

▲Basic_Shading.ts

シェーディングを試したデモ。ディフューズマップに加えて、スペキュラマップ、ノーマルマップを適用しているため、シンプルな3Dの形状に、立体感のあるテクスチャが表現されてます。

▲Basic_LoadAWD.ts

Away3DではAWDファイルのモデリングデータを読み込んで表示することができます。GUIのツール「Away Builder」を使ってAWD形式に変換することで、その他の形式の3Dフォーマットも表示させることが可能です。

▲AWDSuzanne.ts

上記のデモと同じくAWD形式のモデリングデータを読み込んだデモ。多くの数のオブジェクトを表示してもパフォーマンスが良いのでスムーズに再生されています。

▲Basic_Load3DS.ts

Away3Dでは3DSファイルのモデリングデータを読み込んで表示することができます。

▲ObjLoaderMasterChief.ts

Away3DではOBJファイルのモデリングデータを読み込んで表示することができます。

感想

ここまで読み進めてもらった当ブログの読者ならお気づきだと思いますが、本記事は実は1年半前の記事「Flash Stage3D対応のAway3D 4.0がついに正式版に！」とほとんど同じ内容なのです。いくつかのデモは全く1年半前のFlash版とHTML5版で同じ表現が実現されています（さらに言うと、コードもほとんど同じようなロジックです）。これは何を意味しているかというと、「Flash(Stage3D)からHTML5(WebGL)へ、3Dコンテンツはほとんど同じコードで移植できる」ことを示しています。

今までFlashで3Dに関するノウハウを蓄積してきた開発者やプロダクションは、無駄な学習コストをかけることなく、それらを活かしてHTML5(WebGL)の開発に取り組むことができます。

※逆もしかりでHTML5(WebGL)ではじめて3Dを扱うという開発者も、Flashで完成度が高められた3DフレームワークをそのままHTML5(WebGL)を使えるメリットがあります。

Away3DはThree.jsと比べるとツールやデモが充実しています。

ぜひみなさんもAway3D TypeScriptを使って3D表現に挑戦してみてください。