Webgl Getting Started

webgl-getting-started.png

Getting Started

glMatrix-0.9.5.min.jsのダウンロード(行列計算用ライブラリ)

stand-aloneバージョン

htmlファイルとjavascriptファイル(gist)

dokuwikiバージョン

webgl-dokuwiki.js

WikidotでWebGLを表示させる場合

Javascriptをhtml埋め込みにして、全部htmlファイルの中に書き込むことになります。
そしてそれを[[html]]...[[/html]]の内側に埋め込むことにより、WikidotでWebGLが閲覧できます

実際にwikidot上でWebGLを表示させてみよう

ただの緑色の四角を表示させてみます。
下に見えるのがデモです。

ソースコード

フルソースコード(gist)
ただ四角形を出すだけのソースコードなの103行と、とっても長いです

Step2.ライブラリを使って短く書こう

このページに載せてもいいと思えるぐらい短く書いてみよう
使うライブラリはWebGLの緑本に載っている

  • cuon-matrix.js
  • cuon-utils.js
  • webgl-debug.js
  • webgl-utils.js

を使います。

まずはカンバスをglClearで塗りつぶすだけのコード

<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-utils.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-debug.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/cuon-utils.js" type="text/javascript"></script>
<script type='text/javascript' >
function main() {//onLoadで呼ばれる関数
  var canvas = document.getElementById('webgl');
 
  var gl = getWebGLContext(canvas);//cuon-utils.jsより
  if (!gl) {
    console.log('WebGLレンダリングコンテキストの取得に失敗');
    return;
  }
  gl.clearColor(83.0/255.0, 62.0/255.0, 37.0/255.0, 0.6);//半透明茶色
  gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
<body onload="main()">
</script><canvas id="webgl" style="border: none;" width="200" height="200"></canvas>

点を描画

<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-utils.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-debug.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/cuon-utils.js" type="text/javascript"></script>
<script type='text/javascript' >
//頂点シェーダ
var VSHADER_SOURCE = 
  'void main() {\n' +
  '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 頂点の位置
  '  gl_PointSize = 10.0;\n' +                    // 点のサイズをセット
  '}\n';
 
//フラグメントシェーダ
var FSHADER_SOURCE =
"precision mediump float;\n" +//これがないとno precision specified for floatのエラーになります
  'void main() {\n' +
           "vec4 color=vec4(157,217,221,200);\n"+//半透明グリーン
           "gl_FragColor =color/255.0;\n" + //点の色をセット
  '}\n';
function main() {//onLoadで呼ばれる関数
  var canvas = document.getElementById('webgl');
 
  var gl = getWebGLContext(canvas);//cuon-utils.jsより
  //シェーダの初期化
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {//cuon-utils.jsより
    console.log('シェーダの初期化に失敗.');
    return;
  }
  gl.clearColor(83.0/255.0, 62.0/255.0, 37.0/255.0, 0.6);//半透明茶色
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.POINTS, 0, 1);//点を描画
}
</script>
<body onload="main()">
</script><canvas id="webgl" style="border: none;" width="200" height="200"></canvas>

より短いコードで四角を描画する(アトリビュート変数あり)

<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-utils.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-debug.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/cuon-utils.js" type="text/javascript"></script>
<script type='text/javascript' >
function createShader(gl, str, type) {
    var shader;
    if (type == "fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (type == "vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }
 
    gl.shaderSource(shader, str);
    gl.compileShader(shader);
 
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }
 
    return shader;
}
var VSHADER_SOURCE =
         " attribute vec3 a_Position;\n" +
            " void main(void) {\n" +
            " gl_Position = vec4(a_Position, 1.0);\n" +
            " }\n";
 
var FSHADER_SOURCE =
         "precision mediump float;\n" +
            "void main(void) {\n" +
            "vec4 color=vec4(157,217,221,200);\n"+//半透明グリーン
           "gl_FragColor =color/255.0;\n" +
            "}\n";
var shaderProgram;
 
function initGeometry(gl) {
  var vertices = new Float32Array([
    -0.5, 0.5,   -0.5, -0.5,   0.5, 0.5, 0.5, -0.5
  ]);
  var n = 4; // 頂点の個数。4角形なので4個
  var vertexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//頂点データを送るためのIDを取得
 var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
 gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
 gl.enableVertexAttribArray(a_Position); 
return n;
}
var canvas;
//描画関数
function display(gl, n) {
    gl.clearColor(83.0/255.0, 62.0/255.0, 37.0/255.0, 0.6);//半透明茶色
    gl.clear(gl.COLOR_BUFFER_BIT);
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);//四角形を描画する
}
function main() {
     canvas = document.getElementById("webgl");
    var gl = getWebGLContext(canvas);//cuon-utils.jsより
     initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);
     var n =  initGeometry(gl);
    display(gl,n);
}
</script>
<body onload="main()">
</script><canvas id="webgl" style="border: none;" width="200" height="200"></canvas>

サポートサイト Wikidot.com