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

2010年10月04日 (月)
Tweet

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で書きなおしています。

デモを見る
ソースコード (TypeScript)

＜追記：2023年4月30日＞

Three.jsの最新版rev 151にアップデートしてみました。

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で確認できます。