昨今HTML5が主流になってきており、HTML5の勉強をされている方も少なくないはずです。
今回は、そんなHTML5のAPIの1つである、WebGLの紹介をしたいと思います！
HTML5のAPI、WebGLとは
皆さんはWebGLをご存知ですか？
”
WebGL（ウェブジーエル）は、ウェブブラウザで3次元コンピュータグラフィックスを表示させるための標準仕様。 OpenGL 2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた三次元グラフィックスを表示可能にする。
※上記参照…wikipedia(www.camp-outdoor.com/bouldering/)
”
言葉で説明されてもいまいちピンとこないですよね。
一言で言えば、WebGLを使用することでブラウザ上で3D表現が出来るということです。
実際に、WebGLを使用したサイトをご紹介したいと思います！
WebGLを使用したサイト
http://webglsamples.org/aquarium/aquarium.html
水族館が表現されています。
水の中にはいっているような、感覚になります。
魚の数や動き、光の効果も自在に変更することが可能です。
http://madebyevan.com/webgl-water/
水の中のボールを自在に動かすことが可能です。
ボールを動かした時の水の動きがリアルに表現されています。
http://alteredqualia.com/three/examples/webgl_materials_skin.html
人の顔がリアルに表現されています。
アングルの移動ができるので、様々な角度から見ることが出来ます。
普段、まじまじと人の顔を見る機会はありませんが、これならいくらでも見ることができますね！
日産自動車のサイトです。
人の目線で動いたり、タイヤ、ボディカラーなど自由にカスタマイズできます。
車内も見ることができ、運転もゲーム感覚ですることができます。
WebGLの特徴
WebGLの特徴をまとめてみました。
・HTML5 の canvas タグを利用する
・設定などを特に行なわなくとも GPU を利用
・GPU を使えるので高速に動作する
・javascript で記述できる
・プラグインは不要
・業界団体のKhronos Groupが標準を策定しており、Google ChromeやFirefox、Internet Explorer 11以降などで利用できる。
WebGLの利点は、GPUを使用することが可能な点です。
また、Javascriptで記述できますのでだれでもチャレンジすることができます。
※GPU
GPUとはGraphics Processing Unit の略称で、PCやワークステーションにおいて画像処理を担当する主要な部品のこと。
まとめ
いかがでしたでしょうか。
HTML5の登場で、web上で表現可能な範囲が格段と広がりました。
こういった新しい技術を提案していくと良いかもしれないですね。
例えば、不動産屋の物件サイトで人の目線で自由に物件の部屋を歩けるなど、3D表現をすることでユーザーを飽きさせずにコンテンツを見せることが可能なのではないかと思います。
HTML5は3D技術だけではなく、動画やゲームといった、たくさんのおもしろい技術が実現可能ですので、これを期にHTML5を研究するのも良いかもしれません。
