HTML5とWebGLで実現するカバーフローの表現 （Three.jsとAway3Dのソースコード付き）

メンテナンス済み / 株式会社ICS 池田 泰延

macOSのようなカバーフローのデモをHTML5とWebGLを使って作ってみました。WebGLのJSライブラリとして有名なThree.jsとAway3D TypeScriptの両方のバージョンでデモを用意しています（どちらもコードはTypeScriptで記述して、JavaScriptに変換しています）。

Away3D TypeScript版

Three.js (rev 68)版

以下では2つのJSライブラリの違いを紹介します。

カバーフローの実装について

CoverFlowの実装方法は自著「Stage3D プログラミング」で詳しく説明しているので、コードのロジックを知りたい方はこの書籍を参考くださいませ。ActionScript (Flash)で説明していますが、JavaScriptのロジックとほとんど同じなので、WebGL+JavaScriptの方にも役立つかと思います。

[caption id=“attachment_1790” align=“aligncenter” width=“640”] 3D空間の配置方法などを図解にて説明しています。

Away3DとThree.jsの違い 〜 リフレクション編

ここからは技術的に深い話になります。

3D表現の機能としてはAway3DとThree.jsのどちらのJSライブラリもそれほど大差ないと思うのですが、Away3Dの利点としてFlash互換のAPIが充実しています(前回の記事「HTML5で色分解した写真をWebGLで3D表示するAway3Dデモ」を参考に）。

Away3DのBitmapDataクラスを利用し、次のような処理で床への反射のグラデーションを実現しました。

// 反射面の作成
var bmdReflection: BitmapData = new BitmapData(
  256,
  256,
  true,
  0x0
);
bmdReflection.draw(bmdBase);
bmdReflection.copyChannel(
  bmdGradation,
  bmdGradation.rect,
  ZERO,
  BitmapDataChannel.ALPHA,
  BitmapDataChannel.ALPHA
);

3Dにおいては結果的には次のようにAway3DとThree.jsでの見栄えに違いがでています。

Three.jsで床への反射のグラデーションを実装していないのは、それを実現する容易な方法がなかったためです。CanvasRenderingContext2Dを使って画像加工するか、シェーダーを書けばできるのですが、デモのコード量が増えてしまうのとコードの難易度が高まってしまうので、ブログ記事として実装は見送りました。

Away3DとThree.jsの違い 〜 画像読み込み編

Away3Dは画像を読み込み機能は away.library.AssetLibrary クラスとして、Three.js にはTHREE.ImageUtils クラスとして用意されています。それぞれのコードの使い方は下記に示します。

Away3Dでは事前に読み込みを完了させておく必要がありますが、Three.jsでは非同期で読み込み完了後に自動的にテクスチャが転送される作りになっています。

Away3D TypeScript

//読み込み
AssetLibrary.addEventListener(
  LoaderEvent.RESOURCE_COMPLETE,
  e => this.onResourceComplete(e)
);

AssetLibrary.load(new URLRequest(画像のURL));

// 読み込み後
var texture = AssetLibrary.getAsset(画像のURL);

Three.js

var texture = THREE.ImageUtils.loadTexture(画像のURL);

これに関しては Three.js のほうが手間がいらないので便利だと思いました。ただTHREE.ImageUtils.loadTexture() の作り方だとバラバラと読み込まれてしまい、読み込み順番制御や負荷分散制御に向かないので、コンテンツを作りこむ場合はどちらのJSライブラリでも自作プリローダーを作る必要があると思います。

最後に

WebGLといえばThree.jsばかりJSライブラリとして扱われますが、他の3Dライブラリと比較してみるとメリット/デメリットが見えてきます。

ちなみに余談ですが、Flash (Alternativa3DというAS3ライブラリ）を使って実装したこともあるので、Flash版のデモも紹介しておきます。Flash版だとIE6をはじめ幅広いブラウザで安定して動作しますし、アンチエイリアス周りが綺麗なので、まだまだFlashの技術は素敵だなぁと思いました。

今後もICS MEDIAではAway3D TypeScriptのデモを作成して紹介していこうと思います。ぜひFacebook公式ページをフォローするなどして、当サイトの更新をチェックくださいませ。

参考にしたサイト

※この記事が公開されたのは5年1ヶ月前ですが、 平成27年11月17日に内容をメンテナンスしています。

トップページに戻る