Web関連

HTML5で3D表現!?

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

関連するサービス

ホームページ制作

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

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

ピックアップ記事

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

関連記事

  1. Web関連

    ティファナも使っているCMS、Movable Typeの特徴とは?

    CMSを使えば、Webサイトの運用・管理が簡単にできます。ただ、C…

  2. Web関連

    【SDGs】いつでもどこでも質の高い教育は受けられる

    1)SDGsとは?皆さん、こんにちは。SDGsというものをご存…

  3. Web関連

    通販サイトでプレゼントを買おうと思ったけど、プレゼントって何を贈ったら良いの?

    バレンタインやホワイトデー、誕生日にクリスマスなどのプレゼントを贈るイ…

  4. Web関連

    古くなったWebデザインを刷新したい

    サイトのデザインの印象で企業イメージが決まるイメージ戦略に合ったW…

  5. Web関連

    見ているだけでお腹が空く!?バレンタインにちなんだWebサイトまとめ

    こんにちは。先日またTwitterアカウントが1つ増えました、SNS大…

  6. Web関連

    音楽業界に定額制のWEBサービスを導入

    最近あるニュースが入りましたね。アップルが定額制の音楽配信サービスをス…

おすすめ記事

最近の記事

  1. 【3分で解説】これから始まる自動車教習所のオンライン学科教習…
  2. 約1年間のウィズコロナ生活で大きく変わったもの
  3. スマートストアにより、小売業は激変する
  4. 【化粧品業界×最新技術】AIが化粧品のアドバイザーに!?
  5. AI技術の普及により移動も安全に

アーカイブ

  1. Web関連

    花粉症の味方サイトとアプリを探してきました!
  2. Web関連

    正しい言葉遣い、出来ていますか?
  3. SEO関連

    Web制作・SEO対策に効果的なコンテンツは人工知能に聞け!
  4. Web関連

    楽にできる?!レスポンシブWEBデザイン
  5. Web関連

    オンライン学習はどこまで進んでいるのか?
PAGE TOP