第10回 プラグインなしで3Dを実現する新技術「WebGL」
ハードウエアの機能を利用した3D描画
HTML5の仕様には、今後のWebサイト構築に大きく影響を与えるものが数多く存在するが、デザイナーとして注目しておきたいタグの中に「canvas」がある。canvasとは図形を描くためのHTML要素で、JavaScriptを使って画像を合成したり、アニメーションをつくることが可能だ。FlashやSilverlightの代替になる存在というよりは、プラグインなしでも情報をユーザーに提供したい場合に有効だ。このcanvasを利用して3D画像を描写する仕様が「WebGL」である。2D画像と同様、プラグインを必要とせず、JavaScriptを利用してインタラクティブな画像に仕上げることもできる。
3D画像は描画処理に負担がかかるが、WebGLは3D描画技術のOpenGL／OpenGL ES 2.0にアクセスでき、繊細で高速な3D描画が可能だ。OpenGLはデスクトップ上で動作するゲームでは長年利用されている技術で、WebGLが広くブラウザで採用されれば、高画質のゲームをWebブラウザ上で楽しめる。FlashでもOpenGLのサポートが進んでいる。従来の方法でゲームを開発すると、メモリの使用過多、プロセッサの発熱、場合によってはブラウザがクラッシュする可能性があるが、OpenGLならば問題が軽減され、快適に3D描画ができる。
Safariのオープンソースレンダリングエンジン「WebKit」が実装したことから始まったWeb GLだが、FirefoxのNightly Buildでも実装されており、今後WebGLをサポートするブラウザが増えてくるだろう。現在WebGLの実現のためにAMD社、Ericsson社、Google社、Mozilla Fou ndation、NVIDIA社、そしてOpera Software ASA社といったソフトウエア、ハードウエア関連の企業が賛同しており、ワーキンググループも発足している。
3D描画技術とブラウザの関係
WebKitの早期WebGL実装をはじめ、プロジェクトをサポートしているApple社が3D描画に力を入れている。遠近感や大きさの変化などを要素に継承させることを可能にするCSS 3D Transformsは、WebKitで利用できる（webkit.org/blog/386/3d-transforms/）。この技術は現在W3Cの標準化に向けてワーキングドラフトとして公開されている（www.w3.org/TR/css3-3d-transforms/）。また、CSS 3D Transformsだけでなくアニメーションを可能にするCSS 2D Transformsは、Snow LeopardにインストールされてるSafariとiPhoneで利用可能だ。メモリ領域が限られているモバイル環境であることから、FlashをはじめプラグインがインストールされていないiPhone。そこでCSSやWebGLのような技術がネイティブサポートされることによって、より幅広い表現が実現されるだろう。現在ゲームアプリが増え続けているiPhoneだが、今後Webブラウザで楽しめる3Dゲームも増えてくる可能性もある。
Webブラウザ上での3D描画は、Mozilla Foundationでも長年研究されている。OpenGLを利用した3D 画像をcanvasで表示させるためのアドオン「Canvas 3D」（https://addons.mozilla.org/ja/firefox/addon/7171）を2007年に公開。WebGLはCanvas 3Dの発展型として多数の企業を交えて標準化へ向けて動き始めている。現状、WebGLにはセキュリティの問題やOpenGLが実装されていない機器への対応などいくつか課題が残されているが、解決へ向けて模索が重ねられている。
混在するWeb3D技術と今後の課題
WebGLに賛同しているGoogle社だが、同社は独自の3Dグラフィックスプラグイン「O3D」を開発者に提供している（code.google.com/apis/o3d/）。Webブラウザ上でもデスクトップと同等の3D体験を提供するという意味ではWebGLと同じだが、現在もO3Dの開発は進められている。近年、WebブラウザのJavaScriptの処理速度は改善し続けており、多機能なWebアプリケーションの操作も軽快になってきている。しかし、3D描画を利用したアプリケーションやゲームの開発となると、さらに複雑になる可能性があり、OpenGLをJavaScriptで効率的かつ早く処理することは難しいとされている。こうした理由から現状はWebGLとO3D両方のサポートをしているのが同社の姿勢だ。
2010年前半まで仕様が発表されないのと、HTML5とWebGLをサポートしているWebブラウザがほとんどないため、本格的な実装は当分先になる。また、Google社の指摘のように、Webブラウザは今後JavaScriptの処理速度のさらなる改善が必要とされる。アニメーションや3D画像を描写するためにWebGLを利用せずとも、FlashやSilverlightで実装可能だ。しかし、HTMLとJavaScriptとの親和性を保ちつつ複雑で高画質な描画を提供したい場合、WebGLは有効な手段であり、FlashやSilverlightに代わる存在になるだろう。プラグインを必要としないWebブラウザの標準技術になりうるWebGLだが、すべての3D描画がWebGLになるとは考えにくい。それぞれの技術はすべてを解決する完璧なものではなく、それぞれ長所・短所がある。WebGL、Flash、Silverlightにはそれぞれ得意分野があるので、それらと開発案件を照らし合わせて採用していきたい。
WebGLのデモは「YouTube」でいくつか公開されている。
複雑な3D画像を描写している際も高いフレームレートを保っている
（www.youtube.com/watch?v=2rpKpj6ZO9w）
「OpenGL」、「OpenGL ES」などの仕様を策定をしているKhronos Groupが
多数の企業を招いて標準化に向けて動いている
（www.khronos.org/news/press/releases/khronos-webgl-initiative-hardware-accelerated-3d-graphics-internet/）
Firefox 向けのアドオンが必要だが、「Canvas 3d JS Library」を
利用すると、canvasに3D画像を作成しやすくなる
（www.c3dl.org/）
Profile 長谷川恭久
デザインやコンサルティングを通じてWeb関連の仕事に携わる活動家。ブログやポッドキャスト、雑誌などを通じて情報配信中。
URL： www.yasuhisa.com/
本記事は『web creators』2009年10月号（vol.96）からの転載です。
