JavaScriptから直接描画できる2Dビットマップサーフェスに「HTML Canvas Element」がある。これは現在策定が進められている「Web Applications 1.0 - Working Draft」において規定されているHTML要素のひとつで、JavaScriptから直接2Dイメージを描画できるようにするもの。将来的には3Dイメージの描画に関するAPIも策定されるとみられている。

同機能を活用するとFlashやJavaといったプラグインをインストールすることなく、JavaScriptから各種イメージ描画を実現できる。たとえばColorJackやCanvas 3D Renderer、Canvascape - "3D Walker"などHTML Canvas Elementを活用して作成されたアプリケーションがある。

ここでは同様にHTML Canvas Elementを活用して作成されたデモアプリケーション「Flog.RayTracer Canvas Demo」を紹介したい。同デモはJavaScriptとHTML Canvas Elementを活用して開発されたレイトレーシングデモアプリケーション。作成者であるAdam Burmister氏はHTML Canvas Elementとレイトレーシングのテクニックを勉強するために同デモアプリケーションを開発したとしている。

実用的に動作するものではないのだが、JavaScriptとHTML Canvas Elementどこまで実現できるのか示す点で興味深いものだ。デモを動作させたようすを紹介したい。まず同デモにアクセスし「Render」ボタンを押すと図1が表示される。デフォルトの設定はかなり粗めだ。「Diffuse」「Shadows」「Highlights」「Reflections」のチェックボタンを選択することでレンダリング効果を変更できる。

図1 デフォルト設定でレイトレーシングを実行	図2 Reflections効果だけを有効にしてレイトレーシングを実行した場合

「Pixel size」を変更するとより細かく描画できる。「Faster (10x10)」を選択すれば図3といったところだ。なお描画にはかなり時間がかかるので、Firefox 1.5以降を使っている場合は図4のように警告ダイアログがポップアップしていくる。「Continue」を選択して処理を継続すればいい。

図3 ピクセルサイズをFaster (10×10)にした場合	図4 レイトレーシング処理に時間がかかるためFirefox 1.5以降では警告ダイアログがポップアップしてくる

「Ok quality (2x5)」を選択すると図5が、「Best quality (1x1)」を選択すると図6のように描画される。なお「Best quality (1x1)」の描画にはかなり時間がかかる。Firefoxを使う場合は、図7のようにabout:configでdom.max_script_run_timeの値を十分長い値に設定してから実行しよう。

図5 Ok quality (2×5)を選択した場合	図6 Best quality (1×1)を選択した場合	図7 JavaScriptの処理が長いので、警告が出る時間を長めに変更してから実行する – Firefox 1.5以降

同氏は同デモを実行するにあたってFirefoxよりもOperaを薦めている。Operaの方が高速に処理が実行されるそうだ。いますぐに実用云々というものではないが、JavaScriptとHTML Canvas Elementでレイトレーシング処理とその描画ができるという点で興味深い。