ゼミ発表資料02

1. 3D 描画 API
大江ゼミ3年 中川武憲

2. Agenda
・3D 描画 API とは
・DirectX
・OpenGL
・WebGL
・OpenCV
・描画の仕組み
・WebGL 入門
・デモ

3. 3D 描画 API とは

4. 3D 描画 API
仮想 3 次元空間上に描画するためのグラフィックス
ハードウェア API (ライブラリ)である。
DirectX や OpenGL がある。
これらを利用することで、開発者は抽象化された API
を利用して、ハードウェアの差異を気にすること無く
プログラムを組むことに専念できる。

5. DirectX
米 Microsoft 社が開発しているマルチメディア処理
用のライブラリである。
3D グラフィックスだけでなく、オーディオやマウ
ス・キーボード・ゲームパッドからの入力など、
一通りのマルチメディア処理機能を備えている。
しかし、 Windows と Xbox でしか利用できない。

6. OpenGL
クロスプラットフォームに対応した 3D グラフィックス処理用の
API。
仕様が公開され、誰でも自由に利用することが出来る。
DirectX と違い、 3D グラフィックス処理の機能しか備えていない。
オーディオは OpenAL といった別のライブラリを使う必要がある。
OpenGL ES といった組み込みシステム向けのサブセットが存在して
おり、 Android や iOS、 ニンテンドー3DS などに採用されている。

7. WebGL
OpenGL 2.0 若しくは OpenGL ES 2.0 をサポート
するプラットフォーム上で利用できる 3D グラ
フィックスのための標準仕様。
Flash Player や Silverlight といった特別なプラグイ
ンを利用すること無くハードウェア・アクセラレー
トされた 3 D グラフィックスの描画を可能とする。

8. OpenCV
オープンソースの画像処理用のライブラリ。
動画処理も可能でクロスプラットフォーム対応。
行列演算、フィルター処理、特徴抽出、オブジェ
クト検出、オブジェクトトラッキング、カメラキャ
リブレーション、機械学習、パノラマ合成などの
機能を備える。

9. WebGL 入門

10. WebGL 入門
WebGL は JavaScript と OpenGL ES 2.0 のバ
インディングであり、 JavaScript で描画命令
を記述し、 HTML の canvas 要素に描画する
ことが出来る。

11. WebGL 入門
ちなみに、ブラウザ上でオーディオを扱う場合は
WebAudio API を用いる。
左右の音を自在に操作することや、複数の音のミッ
クス、任意のエフェクターの設定など高度な API
が用意されている。

12. WebGL 入門
canvas 要素の取得
↓
WebGL Context の取得
↓
初期化処理
↓
Shader の読み込み (GLSL ES 3.0 に準拠)
↓
Shader プログラムの生成
↓
attribute, uniform 変数のバインディング
↓
描画

13. シェーディング
3D グラフィックスにおいて、光源とオブ
ジェクトの形状をもとに陰影を付ける事を
シェーディングと言う。

14. シェーディング言語
シェーディングを行うことに特化し、抽象化さ
れた言語。
OpenGL では
GLSL (OpenGL Shading Language) を用いる。
WebGL では GLSL ES 3.0 が使える。

15. シェーダ
Fragment Shader: ピクセル情報の操作
- 色情報
Vertex Shader: 頂点情報の操作
- 頂点の位置情報

16. 進
http://www.amazon.co.jp/dp/4832244140

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 で始める、
はじめてのシェーダコーディング（１） - Qiita
http://qiita.com/doxas/items/b8221e92a2bfdc6fc211