WebGL

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

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

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

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

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

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

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

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

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

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

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

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

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

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

参考資料
・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

WebGL

More Related Content

Similar to WebGL (20)

More from Takenori Nakagawa (20)

WebGL