Firefox web browser - Faster, more secure & customizable

Mozilla Hacksにおいて「Tilt」の最新の開発成果物が紹介されている。「Tilt」はFirefox向けに開発されたアドオン。WebGLの機能を活用してWebページを3D化して表示するという機能を提供する。対応しているバージョンはFirefox 6から10ナイトリーまで。7月にアルファ版の発表があった段階ではソースコードをダウンロードしてきて自らビルドする必要があったが、現在ではアドオンサイトからダウンロードできるようになっている。アルファ版と比較してより多くの機能が追加され、UIも洗練されたことを確認できる。

Tilt使用例 - Firefox 7.0.1 / FreeBSD 10-CURRENT	WebGLが利用できる環境で利用する必要がある。

階層を視覚的に把握できるという点が殊更特徴的。	ツリー構造やスタイルシートを読むだけではわかりにくい継承関係なども視覚的に各層をチェックできると一発で理解できる。

ページ全体の階層構造も把握できる。	こうした視覚化は構造解析のみならず閉じていないdivタグの発見などもに役立つ。

WebGLを使うことでWebページを3Dに階層化しており、視覚的に構造を把握できるというのが最大の特徴となる。その動作の模様は一昔前の映画のワンシーンのよう。対象とするノードが実際にどこに位置しているのか、上下関係や関連がどうなっているのを一瞥で判断できて役に立つ。さらにリアルタイムアップデートが実現されており、他の開発ツールやデバッグツールと併用して、変更を直にチェックできるという特徴もある。

Tiltを開発ツールではなく3Dイメージの作成というアートの観点から活用した例 - 紹介記事より抜粋	投入した画像が3Dに裁断化され表示される- 紹介記事より抜粋

もちろん実行にプラグインは必要なく、ブラウザでネイティブに動作している - 紹介記事より抜粋	WebGL技術の活用幅の広さを表現している - 紹介記事より抜粋

WebGLはブラウザにおいてネイティブに3Dレンダリングを可能にするが、これまでブラウザがネイティブには持っていなかった機能であるだけに、どういった活用ができるのか、どういった用途で利用できるのかなど、さまざまな取り組みが草創期という段階にある。Tiltはデバッグ向けの表現方法としてWebGLの機能を活用した例だが、これをデザインへ転用しようとする試みがあるなど、オリジナル開発者が考えもしなかった活用方法がさまざまな方向性から考えられる。今後、さらに多くの独創的で生産性を引き上げるアイディアがWebGLで実現可能であることを示唆する事例として参考になる。