WebGL を使ってみました
WebGLが気になると言いだして約１年の月日が経ちました. 当時は, Chromeでのみ, しかも起動オプションを指定しないと動かなかったWebGLでしたが, 今ではChromeはもちろんのことIE9やFireFoxでも動作するようになりました.
まったく使いこなせてはいないですが、とりあえず動作するサンプルを作ったので載せておきます.
SAMPLE
ここを下のリンクをクリックすると実際に動作するページに飛びます. 三角形を３つ表示するシンプルなプログラムです.
実際のソースは下のリンクからダウンロードできます
DownloadFLOW
- canvasを取得
- canvasからgl用コンテキストを取得
- シェーダ初期化
- 頂点初期化
- 描画
SOURCE
ソースです。解説は直接コードにコメントとして書いています。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL Sample</title>
<script id="shader-fs" type="x-shader/x-fragment">
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 pos;
void main() {
gl_Position = vec4(pos, 1.0);
}
</script>
<script type="text/javascript">
"use strict";
var $id = function(id)
{
return document.getElementById(id);
};
</script>
<script type="text/javascript" src="webgl-util.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body onload="init();">
<canvas id="c" style="border:none" width="640" height="480">
</body>
</html>
JavaScript
/**
* @author phi
*/
(function(np){
var triangleVertexPositionBuffer = null;
/**
* 初期化
*/
np.init = function()
{
// canvasを取得
var canvas = $id("c");
// canvasからgl用コンテキストを取得
initGL(canvas);
// シェーダ初期化
var vertex_shader = $id("shader-vs").innerText;
var fragment_shader = $id("shader-fs").innerText;
initShaders(vertex_shader, fragment_shader);
// 頂点初期化
initBuffers();
// 描画
setInterval(
function() { drawScene(); }, 1000/30
);
}
/**
* 頂点バッファ初期化
*/
var initBuffers = function()
{
// バッファを生成
triangleVertexPositionBuffer = createBuffer();
// バッファに頂点をセット
initBuffer(triangleVertexPositionBuffer, [
0.0, 0.25, 0.0,
-0.25, -0.25, 0.0,
0.25, -0.25, 0.0,
-0.5, 0.25, 0.0,
-0.75, -0.25, 0.0,
-0.25, -0.25, 0.0,
0.5, 0.25, 0.0,
0.25, -0.25, 0.0,
0.75, -0.25, 0.0
]);
}
/**
* 描画
*/
function drawScene(gl)
{
// 画面クリア
clearDisplay(gl);
// 描画
drawArrays(triangleVertexPositionBuffer);
}
})(this);
[…] 以前作ったサンプルに関数を追加するだけで確認できます. […]