インターネット上で物体や情報を 3D 表現できる技術の一つに WebGL があります。特殊なプラグインがなくても Google Chrome や Safari、Internet Explorer などのブラウザがグラフィック処理をしてくれて、高い汎用性があります。2次元では表現しがたい複雑な形状や社会的問題を 3次元で分かり易く情報発信できる WebGL の技術は、Web デザインに携わる者としては見逃せません。
WebGL（Web Graphics Library）とは、ブラウザ機能によって表現できる 3D もしくは 2D のグラフィック系 API になります。特別プラグインを用意しなくてもブラウザ内でグラフィック処理が行われて、HTML と WebGL の組み合わせによる多彩なグラフィックをデザインすることができます。 開発は Mozilla によって2006 年から行われて、2011年に WebGL がリリースされています。現在は主要なブラウザほぼすべてに対応しており、PC、モバイルでも WebGL を楽しむことができます。
Internet Explorer 11 が WebGL をサポートしてから 1年以上が経過し、Web デザインに WebGL を利用したサイトも増えてきました。以下に基本的な WebGL からインパクトのある WebGL 技術を使ったものまで、参考になりそうなサイトをピックアップしてみました。
紹介先の web サイトを閲覧する場合は、端末の GPU に負荷がかかる場合がほとんどです。モバイルでは読み込みに時間がかかったり、うまく表示されないケースもありますので PC からの閲覧をお勧めします。
フリーランス・webデザイナーのコーディさんが、岩手の思い出をWebデザインに落とし込んだサイトにWebGLが活用されています。SVGアニメーションや動画など動きのあるWebデザインとWebGLがうまく融合しています。WebGLは森が流れるページ「LIVE」で使われています。
スイス最大のスーパーマーケットMIGROSが仕掛けているキャンペーンサイトにWebGLの技術が利用されています。最初のページ読み込みに1分程度時間がかかりますが、スイス国内を気球船で旅できる感覚はなかなかのものです。
WebGLのプラグイン「TDL」の使用例のページになります。単調になりがちなフォト・ライブラリーのデザインを一変してくれます。
フランス出身のハーバード大学生が手がけた世界のマネー・バランスを視覚化したWebサイトになります。GlobeView以外にもMapViewやCountryStocksなど6種類の3Dグラフィックが用意されています。全体把握が難しい世界経済を一目で分かるようにデザインされていて、なかなか見ごたえがあると思います。
The GLOBE of ECONOMIC COMPLEXITY
WebGLを使ったゲ―ミングサイトのサンプルになります。こちらのピンボール・ゲームには、WebGLの制作を手助けしてくれるThree.jsとPhysi.jsなどのプラグインが利用されています。
3Dの画像処理をオンライン上でサポートしてくれる3Dtin。こちらの画像処理にもWebGLが活用されています。
理解が難しい化学式もWebGLで表現してくれるとイメージがわきやすいモノです。左クリックしたままマウスを動かすと様々な角度から化学式を確認することができます。専門職のプレゼンにも使えそうですね。
WebGLの作成をサポートしてくれる playcanvas の作成事例になります。飛行時間を競うゲームで、滑らかな動きはさすがWebGLといったとことろですね。
2000年から2010年までの世界で起きた地震を、WebGLを使って視覚化しているサイトになります。世界中だれでも、世界で起きていた地震の傾向を一目で理解することができます。
家やマンションのインテリア・デザインを可視化してくれるサービスの「shapespark」でWebGLが使われています。画像や動画とも違うWebGLらしい機能で、インテリア・イメージの可視化を手伝ってくれます。またこちらのフリーソフト「WebGL House Planner」でも WebGL が使われています。
＼一流デザイナーのスキルが身に付く／
いかがでしたでしょうか？WebGL を試してみたくなったでしょうか？実際 WebGL を使ってグラフィックを作成する方法は大きく分けて 2 通りあります。一つは WebGL の作成マニュアルに沿ってグラフィックを作り上げていく方法です。こちらの WebGL レッスン・サイトが参考になります。もう一つの方法は、WebGL 作成サービスを利用する方法です。例えば、Goo Create や PLAYCANVAS などが有名です。 2次元では表現しにくい問題や情報を、WebGL を使ってコンパクトに情報発信してみませんか？
