【レポート】

Canvas 3D Renderer & 3D WalkerでHTML Canvasの実力を知る

    後藤大地  [2007/03/06]

    ColorJackなどもそうだが、最近、Flashや特別なプラグインをインストールしなくても3D描画をサポートするWebサービスが出始めている。今のところFirefox、Opera、Safariなどでは動作するが、IEでは動作しない。これは「HTML Canvas Element」を使っているからだが、ここでは同機能を紹介しておきたい。

    HTML Canvas Elementは2Dのビットマップサーフェス。JavaScriptから直接描画できるキャンパスのことで、同機能を活用すると特別なプラグインをインストールすることなく、同様の機能を実現できる。HTML Canvas Elementは現在策定が進んでいる「Web Applications 1.0 - Working Draft」において規定されている要素のひとつで、現在のところ2Dコンテキストを規定しているが、将来的には3Dコンテキストに関するAPIも規定されるとみられる。

    なにはともあれ使ってみるのがいいだろう。まず先日、微調整が実施された「Canvas 3D Renderer」を紹介しておきたい。スポーツカーが宇宙空間に展開されたコースを走るようなデモだが、似非3D描画(モデリング描画)、背景画像の表示、動的な操作などがおもしろい。矢印キーがスポーツカーの進戻と方向展開に対応し、PageUp/PageDownがコース外における飛行操作になっている。Firefoxでアクセスして動かしてみるといいだろう。

    Canvas 3D Rendererは調整されたとはいえ若干動きが不自然なので、もうひとつサンプルを紹介しておきたい。「Canvascape - "3D Walker"」だ。こちらはDoomのように動くデモで、その滑らかさは驚きに値する。

    現在実装されているHTML Canvas Elementは直接の3D描画命令はサポートされていないので、ここで紹介しているデモはそれぞれ工夫して同表示を実現しているわけだが、なかなかよくできている。将来3D命令が直接サポートされるようになれば、より多くの3Dデータのモデリングが可能になるだろう。Webアプリケーションの今後の展開を見据えていくうえで同機能は重要なポジションになると見ていい。今後の展開について目が離せないところだ。

    図1 Canvas 3D Rendererデモ – スポーツカーを操作する

    図2 Canvas 3D Rendererデモ – たとえば↑キーを押せば自動車がゆるゆると前進する

    図3 Canvascape – 3D Walker: Doomのような動きをするデモ。その滑らかさは驚愕もの

    関連記事

    関連サイト

    新着記事

    特設サイトの情報

      求人情報

      人気記事

      一覧

      イチオシ記事

      新着記事

      特別企画

      転職ノウハウ

      あなたの仕事適性診断

      4つの診断で、自分の適性を見つめなおそう!

      Heroes File ~挑戦者たち~

      働くこと・挑戦し続けることへの思いを綴ったインタビュー

      はじめての転職診断

      あなたにピッタリのアドバイスを読むことができます。

      転職Q&A

      転職に必要な情報が収集できます

      スカウト転職する

      企業からアプローチのメッセージが届きます。

      マイナビニュースマガジン