ウェブ開発/WebGL - パソコン忘備録

WebGL

概要
ブラウザ上で３Ｄを表現するためのＡＰＩ。
2010年以降のＰＣであることが望ましい。
ブラウザ、グラフィック能力に激しく依存するため、
古いＰＣでの実現は極めて難しい。

開発元
Mozilla Foundation
WebGL Working Group

リリース開始
2006年

要件

• ソフトウェア

HTML5.0（canvas）対応ブラウザ（ＩＥ10はWebGL非対応）

• ハードウェア

OpenGL 2.0/ES2.0以降　対応グラフィックカード
又はIntel CPU Core i 第二世代（SandyBridge）以上

開発環境
　OS：特になし
　IDE,RAD：テキストエディター以上

ライブラリ・フレームワーク
　WebGLU
　GLGE
　C3DL
　CopperLicht
　GLOW (WebGL wrapper)
　SpiderGL (JavaScript 3D Graphics library based on WebGL)
　PhiloGL (WebGL framework)
　gwt-g3d (WebGL wrapper) for GWT (Google Web Toolkit)
　SceneJS (3D engine for JavaScript based on WebGL)
　X3DOM
　Oak3D
　Processing.js
　Three.js

コード例（下記コード単体では動作しない）

function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0)
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
setInterval(drawScene, 15);
}

実践
　家をつくる
　3D文字をつくる
　無限増殖
　デジタルカタログWebGL版
　デジタルチラシWebGL版

備考
　IEにはWebGL未実装だが、アドイン（IEWebGL）を用いればIE６
　以上で対応可能となる。但し非公認のため自己責任となる。

　JSで開発できるが、ブラウザやPCスペック依存が高いのが難。
　簡易3D模型を作りたい、iPhoneやAndroidで表現したい場合に
　活用できる。

関連
　OpenGL2.0
　OpenGL ES 2.0（iPhone3D開発）
　OpenCV（AR開発・顔認識）

参考
WebGL - Wikipedia
<http://ja.wikipedia.org/wiki/WebGL>

WebGL Lesson 1 - 三角形と四角形 - Hack The WebGL (WebGL勉強会)
<https://sites.google.com/site/hackthewebgl/learning-webglhon-yaku/the-lessons/lesson-1>

IEWebGL
<http://en.wikipedia.org/wiki/WebGL>