Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

WebGL

ゼミ発表資料02

  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

WebGL

  1. 1. 3D 描画 API 大江ゼミ3年 中川武憲
  2. 2. Agenda ・3D 描画 API とは ・DirectX ・OpenGL ・WebGL ・OpenCV ・描画の仕組み ・WebGL 入門 ・デモ
  3. 3. 3D 描画 API とは
  4. 4. 3D 描画 API 仮想 3 次元空間上に描画するためのグラフィックス ハードウェア API (ライブラリ)である。 DirectX や OpenGL がある。 これらを利用することで、開発者は抽象化された API を利用して、ハードウェアの差異を気にすること無く プログラムを組むことに専念できる。
  5. 5. DirectX 米 Microsoft 社が開発しているマルチメディア処理 用のライブラリである。 3D グラフィックスだけでなく、オーディオやマウ ス・キーボード・ゲームパッドからの入力など、 一通りのマルチメディア処理機能を備えている。 しかし、 Windows と Xbox でしか利用できない。
  6. 6. OpenGL クロスプラットフォームに対応した 3D グラフィックス処理用の API。 仕様が公開され、誰でも自由に利用することが出来る。 DirectX と違い、 3D グラフィックス処理の機能しか備えていない。 オーディオは OpenAL といった別のライブラリを使う必要がある。 OpenGL ES といった組み込みシステム向けのサブセットが存在して おり、 Android や iOS、 ニンテンドー3DS などに採用されている。
  7. 7. WebGL OpenGL 2.0 若しくは OpenGL ES 2.0 をサポート するプラットフォーム上で利用できる 3D グラ フィックスのための標準仕様。 Flash Player や Silverlight といった特別なプラグイ ンを利用すること無くハードウェア・アクセラレー トされた 3 D グラフィックスの描画を可能とする。
  8. 8. OpenCV オープンソースの画像処理用のライブラリ。 動画処理も可能でクロスプラットフォーム対応。 行列演算、フィルター処理、特徴抽出、オブジェ クト検出、オブジェクトトラッキング、カメラキャ リブレーション、機械学習、パノラマ合成などの 機能を備える。
  9. 9. WebGL 入門
  10. 10. WebGL 入門 WebGL は JavaScript と OpenGL ES 2.0 のバ インディングであり、 JavaScript で描画命令 を記述し、 HTML の canvas 要素に描画する ことが出来る。
  11. 11. WebGL 入門 ちなみに、ブラウザ上でオーディオを扱う場合は WebAudio API を用いる。 左右の音を自在に操作することや、複数の音のミッ クス、任意のエフェクターの設定など高度な API が用意されている。
  12. 12. WebGL 入門 canvas 要素の取得 ↓ WebGL Context の取得 ↓ 初期化処理 ↓ Shader の読み込み (GLSL ES 3.0 に準拠) ↓ Shader プログラムの生成 ↓ attribute, uniform 変数のバインディング ↓ 描画
  13. 13. シェーディング 3D グラフィックスにおいて、光源とオブ ジェクトの形状をもとに陰影を付ける事を シェーディングと言う。
  14. 14. シェーディング言語 シェーディングを行うことに特化し、抽象化さ れた言語。 OpenGL では GLSL (OpenGL Shading Language) を用いる。 WebGL では GLSL ES 3.0 が使える。
  15. 15. シェーダ Fragment Shader: ピクセル情報の操作 - 色情報 Vertex Shader: 頂点情報の操作 - 頂点の位置情報
  16. 16. 進 http://www.amazon.co.jp/dp/4832244140
  17. 17. 参考資料 ・Getting started with WebGL - WebGL | MDN https://developer.mozilla.org/ja/docs/Web/WebGL/ Getting_started_with_WebGL ・Learning WebGLで学ぶWebGL入門 http://www.slideshare.net/nakamura001/learning-webgl- webgl ・[連載]やってみれば超簡単! WebGL と GLSL で始める、 はじめてのシェーダコーディング(1) - Qiita http://qiita.com/doxas/items/b8221e92a2bfdc6fc211

×