webgltest.html

 
<!DOCTYPE html>
<meta charset="utf-8"><title>WebGL test</title>
<canvas id="c"></canvas>
<pre id="stats"></pre>
<pre id="info"></pre>
<pre id="log"></pre>
<script src="gl-matrix_2.2.1.js?app=data"></script>
<script id="simple-vs" type="x-shader/x-vertex">
attribute vec3 aVertPos;
attribute vec4 aVertColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
​
void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertPos, 1.0);
    vColor = aVertColor;
}
</script>
<script id="simple-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
​
void main(void) {
    gl_FragColor = vColor;
}
</script>
<script>
//(function(undefined) {'use strict';
var gl, program, meshes = [], tStart, tLast, stopped,
    camera = {}, mvMat = [mat4.create()], pMat = mat4.create(),
    el = {}, x = {}, pi180 = Math.PI/180, eps = 1e-4,
    key = {down:{}, on:{}, bind:{}};
​
function error(msg) {
    console.error(msg);
    //alert(msg);
}
​
function initGL(w, h) {
    var gl = document.getElementById('c');
    gl = gl.getContext('webgl') || gl.getContext('experimental-webgl');
    if (!gl) throw Error('Failed to initialize WebGL!');
    gl.canvas.width = w || 640;
    gl.canvas.height = h || 480;
    gl.viewport(0, 0, w, h);
    gl.clearColor(0, 0, 0, 1);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
    return gl;
}
​
function makeShaderProgram(name) {
    var fragmentShader, vertexShader, shaderProgram;
​
    function getShader (id) {
        var shader, e = document.getElementById(id);
​
        if (e.type === 'x-shader/x-fragment')
            shader = gl.createShader(gl.FRAGMENT_SHADER);
        else if (e.type === 'x-shader/x-vertex')
            shader = gl.createShader(gl.VERTEX_SHADER);
        else throw 'Unknown shader type "' + e.type + '"!';
​
        gl.shaderSource(shader, e.textContent);
        gl.compileShader(shader);
        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
            throw 'Failed to compile shader!';
        return shader;
    }
​
    fragmentShader = getShader(name + '-fs');
    vertexShader = getShader(name + '-vs');
    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, fragmentShader);
    gl.attachShader(shaderProgram, vertexShader);
    gl.linkProgram(shaderProgram);
​
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
        throw 'Failed to link shader program "' + name + '"!';
    return shaderProgram;
}
​
function setProgram(prog) {
    program = prog;
    gl.useProgram(prog);
    prog.vPosAtt = gl.getAttribLocation(prog, 'aVertPos');
    gl.enableVertexAttribArray(prog.vPosAtt);
    prog.vColAtt = gl.getAttribLocation(prog, 'aVertColor');
    gl.enableVertexAttribArray(prog.vColAtt);
    prog.mvMatUni = gl.getUniformLocation(prog, 'uMVMatrix');
    prog.pMatUni  = gl.getUniformLocation(prog, 'uPMatrix');
}
​
function mvMatPush() {
    mvMat.unshift(mat4.clone(mvMat[0]));
}
​
function mvMatPop() {
    if (mvMat.length <= 1) throw 'Invalid mvMatPop()!';
    return mvMat.shift();
}
​
function addMesh(d) {
    if (!d.vPos || d.vPos.length%3 !== 0)
        throw 'Missing or invalid vPos';
    d.vNum = d.vPos.length / 3;
​
    /* init color */
    if (!d.vCol) d.vCol = [1, 1, 1]; /* if no color given, use white */
    if (d.vCol.length === 3) while (d.vCol.length < d.vNum*3) /* if one color given, dup */
        d.vCol = d.vCol.concat(d.vCol.slice(0, 3));
    if (d.vCol.length === d.vPos.length) /* if no alpha, add it */
        while (d.vCol.length < d.vNum*4)
            d.vCol.splice((d.vCol.length-d.vPos.length)*4+3,0,1);
    if (d.vCol.length%4 !==0)  throw 'Invalid vCol';
​
    d.vPosBuf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, d.vPosBuf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(d.vPos), gl.STATIC_DRAW);
    d.vColBuf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, d.vColBuf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(d.vCol), gl.STATIC_DRAW);
    if (d.vInd) {
        d.vIndBuf = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, d.vIndBuf);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(d.vInd), gl.STATIC_DRAW);
    }
    if (d.pos === undefined) d.pos = [0,0,0];
    if (d.rot === undefined) d.rot = [0,0,0];
    if (d.v === undefined) d.v = [0,0,0];
    if (d.vRot === undefined) d.vRot = [0,0,0];
    if (d.center === undefined) d.center = [0,0,0];
    meshes.push(d);
    return d;
}
​
function initScene() {
    addMesh({name: 'triangle',
        vPos: [-1,-1,-1, 0,1,0, -1,-1,1, 1,-1,1,
            -1,-1,-1, 1,-1,-1, 0,1,0, 1,-1,1],
        vCol: [0,0,1, 1,0,0, 0,1,0, 0,0,1,
            0,0,1, 0,1,0, 1,0,0, 0,0,1],
        pos: [-1.5,0,0],
        vRot: [.04,.08,0]
    });
​
    addMesh({name: 'square',
        vPos: [-1,-1,-1, -1,-1, 1, //left bottom
            -1, 1,-1, -1, 1, 1, //left top
             1,-1,-1, 1,-1, 1,  //right bottom
             1, 1,-1, 1, 1, 1], //right top
        vInd: [0,1,2, 3,2,1, //left
            4,0,6, 2,6,0, //front
            5,4,7, 6,7,4, //right
            1,5,3, 7,3,5, //back
            0,4,1, 5,1,4, //bottom
            3,7,2, 6,2,7], //top
        vCol: [0,0,0, 0,0,1,
            0,1,0, 0,1,1,
            1,0,0, 1,0,1,
            1,1,0, 1,1,1],
        pos: [1.5,0,0],
        vRot: [.09,.045,0],
        x: [function(m){
            m.v[0] = Math.abs(m.v[0]) < eps ? 0 : m.v[0] * .95;
            m.v[1] = Math.abs(m.v[1]) < eps ? 0 : m.v[1] * .95;
            m.v[2] = Math.abs(m.v[2]) < eps ? 0 : m.v[2] * .95;
            m.vRot[0] = Math.abs(m.vRot[0]) < eps ? 0 : m.vRot[0] * .95;
            m.vRot[1] = Math.abs(m.vRot[1]) < eps ? 0 : m.vRot[1] * .95;
            m.vRot[2] = Math.abs(m.vRot[2]) < eps ? 0 : m.vRot[2] * .95;
        }]
    });
​
    camera = {
        pos: [0,0,-5],
        rot: [0,0,0],
        fov: 45,
        near: .1,
        far: 100
    };
}
​
function drawMesh(m) {
    mvMatPush();
    mat4.translate(mvMat[0], mvMat[0], m.pos);
    mat4.translate(mvMat[0], mvMat[0], [-m.center[0],-m.center[1],-m.center[2]]);
    mat4.rotate(mvMat[0], mvMat[0], m.rot[0] * pi180, [1, 0, 0]);
    mat4.rotate(mvMat[0], mvMat[0], m.rot[1] * pi180, [0, 1, 0]);
    mat4.rotate(mvMat[0], mvMat[0], m.rot[2] * pi180, [0, 0, 1]);
    mat4.translate(mvMat[0], mvMat[0], m.center);
    gl.uniformMatrix4fv(program.mvMatUni, false, mvMat[0]);
    gl.uniformMatrix4fv(program.pMatUni, false, pMat);
​
    gl.bindBuffer(gl.ARRAY_BUFFER, m.vPosBuf);
    gl.vertexAttribPointer(program.vPosAtt, 3, gl.FLOAT, false, 0, 0);
    gl.bindBuffer(gl.ARRAY_BUFFER, m.vColBuf);
    gl.vertexAttribPointer(program.vColAtt, 4, gl.FLOAT, false, 0, 0);
    if (m.vInd) {
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, m.vIndBuf);
        gl.drawElements(gl.TRIANGLES, m.vInd.length, gl.UNSIGNED_SHORT, 0);
    } else {
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, m.vNum);
    }
    mvMatPop();
}
​
function render() {
    var i, l;
    mat4.perspective(pMat, camera.fov, gl.canvas.width/gl.canvas.height, camera.near, camera.far);
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
    mat4.identity(mvMat[0]);
    mat4.translate(mvMat[0], mvMat[0], camera.pos);
    mat4.rotate(mvMat[0], mvMat[0], camera.rot[0] * pi180, [1, 0, 0]);
    mat4.rotate(mvMat[0], mvMat[0], camera.rot[1] * pi180, [0, 1, 0]);
    mat4.rotate(mvMat[0], mvMat[0], camera.rot[2] * pi180, [0, 0, 1]);
    for (i=0, l=meshes.length; i<l; i++) drawMesh(meshes[i]);
}
​
function animate(t) {
    var i, l, m;
    for (i=0, l=meshes.length; i<l; i++) {
        m = meshes[i];
        m.pos[0] += t * m.v[0];
        m.pos[1] += t * m.v[1];
        m.pos[2] += t * m.v[2];
        m.rot[0] = (m.rot[0] += t * m.vRot[0]) % 360;
        m.rot[1] = (m.rot[1] += t * m.vRot[1]) % 360;
        m.rot[2] = (m.rot[2] += t * m.vRot[2]) % 360;
        if (m.x) for (j=0; j<m.x.length; j++)
            if (typeof m.x[j] === 'function') m.x[j](m);
    }
}
​
function handleKeys() {
    if (key.down[33]) x.curMesh = (x.curMesh + 1) % meshes.length; //page up
    if (key.down[34]) x.curMesh = (x.curMesh + meshes.length - 1) % meshes.length; //page down
    if (key.down[37]) meshes[x.curMesh].vRot[1] -= .01; //left
    if (key.down[38]) meshes[x.curMesh].vRot[0] -= .01; //up
    if (key.down[39]) meshes[x.curMesh].vRot[1] += .01; //right
    if (key.down[40]) meshes[x.curMesh].vRot[0] += .01; //down
}
​
function tick(t) {
    var i, infoA = [];
    if (tStart === undefined) tStart = t;
    else {
        handleKeys();
        animate(t - tLast);
        render();
    }
    for (i in key.down) if (key.down[i]) infoA.push(i);
    el.stats.textContent = 'keys:['+infoA.join(',')+'] curMesh:'+x.curMesh+' vRot:['+meshes[x.curMesh].vRot.join(',')+']';
    tLast = t;
    if (!stopped) requestAnimationFrame(tick);
}
​
function main() {
    try{
        el.stats = document.getElementById('stats');
        el.info = document.getElementById('info');
        el.log = document.getElementById('log');
        x.curMesh = 1;
        gl = initGL(640, 480);
        setProgram(makeShaderProgram('simple'));
        initScene();
        document.addEventListener('keydown', function(e){key.down[e.keyCode]=true;});
        document.addEventListener('keyup', function(e){key.down[e.keyCode]=false;});
        requestAnimationFrame(tick);
    }catch(e){
        error(e);
    }
}
window.addEventListener('load', main);
//}());
</script>
​