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

関連記事

  1. Web関連

    Webシステムを安く、早く、便利に使えるASPサービス

    こんにちは!IAの中條です!インターネットの普及により、世の中便利な技…

  2. Web関連

    あなたは分かってる?面接時に心がけておきたい3つのマナー

    こんにちは!今年はお目当ての福袋が購入できてご満悦の真野です。…

  3. SNS関連

    ソーシャルメディアをターゲットユーザーによって使い分けよう

    ソーシャルメディアにはFacebook, Twitter, Insta…

  4. Web関連

    Amazon をもっと利用しよう!子育てアイディア集

    こんにちは。育児に家事に大忙しのディレクター、望月です。今日は、私の重…

  5. AI関連

    WEB接客と親和性の高そうなサービスを考えてみた

    2015年は"WEB接客"サービス元年と呼ばれていますが、WEB接客と…

  6. Web関連

    webサイトにおけるアクセシビリティの考え方

    Webサイトでは「ユーザビリティ」という考え方が非常に重要視されていま…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    毎日見たくなるオウンドメディアサイトとは?
  2. Web関連

    人を惹き付けるキャッチコピーを作る3つのコツ
  3. AIさくらさん

    【人工知能(AI)×リクルート】海外からの採用志望者を人工知能サービスで集める!…
  4. Web関連

    あなたの日本語、間違ってる!実はおかしい文章表現
  5. AI関連

    エッジコンピューティングってなに?
PAGE TOP