3Dグラフィック技術WebGLを使ったサイト10選が近未来すぎる件



3Dグラフィック技術WebGLを使ったサイト10選が近未来すぎる件

インターネット上で物体や情報を 3D 表現できる技術の一つに WebGL があります。特殊なプラグインがなくても Google Chrome や Safari、Internet Explorer などのブラウザがグラフィック処理をしてくれて、高い汎用性があります。2次元では表現しがたい複雑な形状や社会的問題を 3次元で分かり易く情報発信できる WebGL の技術は、Web デザインに携わる者としては見逃せません。

目次
  1. Webデザイナー必見の3Dテクニック「WebGL」
  2. WebGLとは
  3. WebGLを使った参考になるサイト10選
  4. シンプル WebGL の「PROJECT IWATE」
  5. プチ・スイス観光ができる「Suisse Mania」
  6. 立体フォト・ライブラリー「Imagesphere」
  7. 世界のマネーを可視化した「The GLOBE of ECONOMIC COMPLEXITY」
  8. ピンボール × WebGL の「SIMPLE BALL」
  9. 3Dグラフィック・ツールの「3Dtin」
  10. 難解化学式×WebGLの「Chemdoodle」
  11. フライング・ゲームの「SWOOOP」
  12. 地震 × WebGL の「Nine Point Five」
  13. 住宅 × WebGL の「Shapespark」
  14. まとめ

Webデザイナー必見の3Dテクニック「WebGL」

WebGLとは

webgl-toha

khronos.org

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」

webgl-iwatePROJECT IWATE

フリーランス・webデザイナーのコーディさんが、岩手の思い出をWebデザインに落とし込んだサイトにWebGLが活用されています。SVGアニメーションや動画など動きのあるWebデザインとWebGLがうまく融合しています。WebGLは森が流れるページ「LIVE」で使われています。

プチ・スイス観光ができる「Suisse Mania」

suisse-maniaSuisse Mania

スイス最大のスーパーマーケットMIGROSが仕掛けているキャンペーンサイトにWebGLの技術が利用されています。最初のページ読み込みに1分程度時間がかかりますが、スイス国内を気球船で旅できる感覚はなかなかのものです。

立体フォト・ライブラリー「Imagesphere」

google-photo-webglImagesphere

WebGLのプラグイン「TDL」の使用例のページになります。単調になりがちなフォト・ライブラリーのデザインを一変してくれます。

世界のマネーを可視化した「The GLOBE of ECONOMIC COMPLEXITY」

フランス出身のハーバード大学生が手がけた世界のマネー・バランスを視覚化したWebサイトになります。GlobeView以外にもMapViewやCountryStocksなど6種類の3Dグラフィックが用意されています。全体把握が難しい世界経済を一目で分かるようにデザインされていて、なかなか見ごたえがあると思います。economic-webglThe GLOBE of ECONOMIC COMPLEXITY

ピンボール × WebGL の「SIMPLE BALL」

superball-webglSIMPLE BALL

WebGLを使ったゲ―ミングサイトのサンプルになります。こちらのピンボール・ゲームには、WebGLの制作を手助けしてくれるThree.jsとPhysi.jsなどのプラグインが利用されています。

3Dグラフィック・ツールの「3Dtin」

3dtin-webgl 3Dtin

3Dの画像処理をオンライン上でサポートしてくれる3Dtin。こちらの画像処理にもWebGLが活用されています。

難解化学式×WebGLの「Chemdoodle」

chemdoodle-webglChemdoodle

理解が難しい化学式もWebGLで表現してくれるとイメージがわきやすいモノです。左クリックしたままマウスを動かすと様々な角度から化学式を確認することができます。専門職のプレゼンにも使えそうですね。

フライング・ゲームの「SWOOOP」

swoop-webglSWOOOP

WebGLの作成をサポートしてくれる playcanvas の作成事例になります。飛行時間を競うゲームで、滑らかな動きはさすがWebGLといったとことろですね。

地震 × WebGL の「Nine Point Five」

earth-quake-webglNine Point Five

2000年から2010年までの世界で起きた地震を、WebGLを使って視覚化しているサイトになります。世界中だれでも、世界で起きていた地震の傾向を一目で理解することができます。

住宅 × WebGL の「Shapespark」

house-webglShapespark

家やマンションのインテリア・デザインを可視化してくれるサービスの「shapespark」でWebGLが使われています。画像や動画とも違うWebGLらしい機能で、インテリア・イメージの可視化を手伝ってくれます。またこちらのフリーソフト「WebGL House Planner」でも WebGL が使われています。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

いかがでしたでしょうか?WebGL を試してみたくなったでしょうか?実際 WebGL を使ってグラフィックを作成する方法は大きく分けて 2 通りあります。一つは WebGL の作成マニュアルに沿ってグラフィックを作り上げていく方法です。こちらの WebGL レッスン・サイトが参考になります。もう一つの方法は、WebGL 作成サービスを利用する方法です。例えば、Goo CreatePLAYCANVAS などが有名です。 2次元では表現しにくい問題や情報を、WebGL を使ってコンパクトに情報発信してみませんか?

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp