HTML5で3D表現!?│東京のWeb制作会社のHTML5関連コラム

Columnコラム

ITトレンド・最新技術

HTML5で3D表現!?

HTML5で3D表現!?

2015/09/16
このエントリーをはてなブックマークに追加

昨今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を使用したサイト

f-fujiwara_1509051.jpg

http://webglsamples.org/aquarium/aquarium.html

水族館が表現されています。
水の中にはいっているような、感覚になります。
魚の数や動き、光の効果も自在に変更することが可能です。

f-fujiwara_1509052.jpg

http://madebyevan.com/webgl-water/

水の中のボールを自在に動かすことが可能です。
ボールを動かした時の水の動きがリアルに表現されています。

f-fujiwara_1509053.jpg

http://alteredqualia.com/three/examples/webgl_materials_skin.html

人の顔がリアルに表現されています。
アングルの移動ができるので、様々な角度から見ることが出来ます。
普段、まじまじと人の顔を見る機会はありませんが、これならいくらでも見ることができますね!

f-fujiwara_1509054.jpg

日産自動車のサイトです。
人の目線で動いたり、タイヤ、ボディカラーなど自由にカスタマイズできます。
車内も見ることができ、運転もゲーム感覚ですることができます。

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を研究するのも良いかもしれません。

関連するサービス

ホームページ制作

text_totop