CanvasタグとJavaScriptで3Dのデモを作ってみました

HTML5というわけではないですが、CavasタグとJavaScriptを使って3Dのデモを作ってみました。

こういうのを見れば「HTML5すごい、Flashいらない」と思う人もいるかもですが、冷静にファーストインプレッションを。同じものを以前Flashで実装したことがありますが(Papervision3D演出サンプルNo.01:羽ばたく蝶々)、両者のデモを比較することでメリット・デメリットが見えてきます。

<追記:2013年9月3日>

Three.jsの最新版rev 60にアップデートしてみました。3年前に作成したときはrev 17だったのですが、別物のライブラリと言わんばかりにほとんどAPIが変わってしまっています。ちなみにTypeScriptで書きなおしています。

Canvas+JSのブラウザ面についてのファーストインプレッション

  • ブラウザシェアの大半を占めるIE6〜8は動かない
  • PCではSafariとChromeは早い。Firefoxは遅い。
  • Flash Player 10.1はブラウザのタブをたくさん開いても現在表示しているFlashのパフォーマンスが保たれるように最適化されているが、Canvas+JavaScriptだと最適化されていないのでタブを開けば開くほどカクカクになる

JavaScriptは決して遅いわけではないと思いますが、ブラウザ間での処理速度のバラつきが大きいのが難点。Flashだとブラウザ間の処理速度のバラつきは小さく、Flash Playerがブラウザの差異を吸収している印象でした。

ちなみにcanvasタグをIEで動かしたデモもあるので、それは後日紹介します。

スマートフォン(iPhone/Android)での動作速度は

気になるスマートフォンの動作は次のような結果でした。

  • Flashの動かないiPhoneでも動作する
  • スマートフォン(Android)だとFlashのほうが数倍早い
  • 特にiPhoneのcanvasタグの処理は激重

ビデオでも撮影したので、どのくらい差があるか確認くださいませ。ビデオは60秒です。

ビデオの初め30秒間はCanvas版を、後半の30秒間はFlash版を再生したものです。Android 2.2のスマートフォンだとFlash Player 10.1がGPU最適化されている分、Flash版のほうが高速でありその差は歴然としています。

これだけ差があるからといってCanvas版にメリットがないわけではありません。Canvas版の最大のメリットと言えるのは、iPhoneでも動作することです。iPhone/iPadはAppleの方針でFlash Playerを搭載していませんが、その分HTML5/CSS3に対して積極的に実装が進んでいます。CanvasタグはHTML5の仕様とは別途進められているものですが、iPhoneではFlashの代用としてCanvasが利用できます。

※ 別の2Dのデモで試した場合も、Flash版とCanvas版では同じような結果が得られています。3Dだからこれだけの差が出るというわけでは特になさそうです。

※ ビデオのiOSの端末はiPhone 3GSですが、iPhone4やiPadでも同様にカクカクという報告もTwitterで頂きました。

※検証に用いたソースコードは次のURLで確認できます。

JavaScriptの3Dエンジン

少し前にJavaScriptの3Dエンジンを調査したことがあったのですが、2010年10月現在のライブラリは次のようなところ。

サンプルの数、APIの種類、アップデート状況、ライセンス形態を調べると「Three.js」が現時点では最も有望そうでした。つい先日、MOONGIFTさんのブログ記事でも紹介されていたことは記憶に新しいと思います。

Three.jsについてのファーストインプレッション

AS3のPapervision3Dと比べると、かなり基本的なところしかカバーしていない印象ですが、それでも工夫すれば色々な表現を作ることが出来ます。いくつかメモ的にまとめてみると・・・

  • Mr.doob先生のライブラリ
  • ライセンスはMITライセンス
  • ワイヤーフレーム、カラーマテリアル、テクスチャマッピング可能
  • カメラは移動可能
  • オブジェクトの親子構造はない(行列で代用するのが賢明!?)
  • canvasタグなので、ロールオーバーなどのマウスイベントの実装は自前でゴリゴリするしかない(かなり大変)
  • テクスチャマッピングの処理コストが高い

JavaScriptでの3Dは、演出として利用したり実験的なデモとして作る分にはいいかもですね。

関連記事

投稿者 : 池田 泰延

BookMark

いかがでしたでしょうか、ブックマークはこちらからどうぞ。

このエントリーをはてなブックマークに追加

Comment/Trackback 2件