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