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

関連記事

  1. Web関連

    ホームページ制作会社も注目するLINE公式アカウントがおもしろい!

    みなさんLINEは利用していますか?今や友人や家族とのコミュニケーショ…

  2. Web関連

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

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

  3. Web関連

    皆さんご存知?カスタマージャーニー

    皆さん「カスタマージャーニー」という言葉をご存知ですか?知っている人も…

  4. Web関連

    WordPressの管理画面を使いやすくカスタマイズ!

    どもっ!岸沢です。またまた、WordPressのプラグインを紹介し…

  5. Web関連

    目指せ印税生活!ミュージシャン気取りになれるWeb楽曲配信サービス

    最近のミュージックシーンは楽器を一切使わないEDMなどの楽曲が流行し、…

  6. Web関連

    WEB担当者必見!プライベートDMPとオープンDMPの違い

    企業のWEB担当者の方なら最近「DMP」という言葉を聞くようになったの…

おすすめ記事

最近の記事

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

アーカイブ

  1. Web関連

    休日はストリーミング配信サイトを利用してゆっくり過ごそう
  2. Web関連

    影響が大きい!IEのサポートポリシーの変更!
  3. AI関連

    人工知能が音楽を創る時代!?最新のAIクリエイティブテクノロジーに迫る!
  4. Web関連

    ホームページ制作会社が紹介するHTML5の動画のメリット
  5. Web関連

    初めてでもわかる! Photoshopの基礎
PAGE TOP