Web関連

HTML5で3D表現!?

0

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

関連するサービス

ホームページ制作

0

One to Oneマーケティングへの道(1)~DMPとは?~前のページ

ソーシャルメディアをビジネスに活用するメリット次のページ

ピックアップ記事

  1. 新型コロナウイルスで日本の働き方改革が起こる
  2. 新しい販売形態であるDtoCについて考えてみる
  3. 大手企業も注目するMaaS(Mobility as a Service)とは何か…
  4. AIに求められているものは、実は意外な物だった

関連記事

  1. Web関連

    ただ面白いだけではない…ゲーミフィケーションを活用したアプリ

    2015年秋、千葉の幕張にて、「ITJapanWeek」というITを中…

  2. Web関連

    ちょっとした工夫で劇的に変わる!ユーザーにウケるブログの書き方

    どうも、今回のコラムを担当することになりましたデザイナーの尾崎です。前…

  3. Web関連

    仕事の取り組み方を変える!「ダイバーシティ」について

    昨今では「日本人の生産性は低い」とニュースなどで取り上げていることが多…

  4. Web関連

    和とパララックスデザインから生み出される魅力

    さてさて、以前スマホとパララックスデザインについてお話をさせていただ…

  5. Web関連

    Google CardboardでVR体験をしてみた

    皆さんこんにちは。最近屋内と屋外の寒暖差にやられている堀井です。PCを…

  6. Web関連

    吊り橋効果で認知度向上!口コミで話題の会社になる方法

    吊り橋効果・・・皆さん知っている心理現象だと思います。ゲームや漫画、ア…

おすすめ記事

最近の記事

  1. 人間拡張×AIで非接触なデジタル化を推進する
  2. ヘルスケアはAI先生にみてもらう時代
  3. withコロナは非接触技術で生活しよう!
  4. デジタル接客+AIで非接触を推進する
  5. 遠隔診療や遠隔医療普及のポイントはAIと5G

アーカイブ

  1. Web関連

    検索するなら「minions」で!「ミニオンズ」より幸せになれます♪
  2. Web関連

    今、メルマガが抱える問題点。開封率と到達率!?
  3. Web関連

    宴会で「デキる」自分をアピール!Webサービスを使った幹事マニュアル
  4. Web関連

    こんなのアリなの!?世界で話題のプロモーション!
  5. Web関連

    最近流行のゴーグルみたいなアイツ
PAGE TOP