WebGL Benchmark

by mortennobel

HTML

<script src="http://www.imm.dtu.dk/~mono/gl-matrix-min.js"></script>
<script src="http://www.imm.dtu.dk/~mono/webgl-debug.js"></script>
<span id="timeid">Time: </span><br>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script type="vertexShader" id="vertexShader">
    attribute vec3 position;
    attribute vec3 normal;
    attribute vec2 uv;

    uniform mat4 mvp;
    uniform mat3 n;

    varying vec3 vNormal;
    varying vec2 vUv;

    void main(void) {
        gl_Position = mvp * vec4(position, 1.0);
        vNormal = normalize(n * normal);
        vUv = uv;
    }
</script>
<script type="fragmentShader" id="fragmentShader">
    precision mediump float;

    uniform sampler2D tex;

    varying vec3 vNormal;
    varying vec2 vUv;

    void main(void)
    {
        vec3 lightDirEyeSpace = normalize(vec3(1.0,1.0,1.0));
        vec3 diffuseLight = vec3(max(0.0, dot(lightDirEyeSpace, vNormal)));
        vec3 ambientLight = vec3(0.2,0.2,0.2);
        vec3 light = max(diffuseLight, ambientLight);
        gl_FragColor = vec4( texture2D(tex, vUv).xyz *
            light,1.0);
    }
</script>
<script>
    // model data - converted using http://www.kickjs.org/tool/model_tool/model_tool.html
    var modelData = [{"vertex":[1,1,-1,1,-1,-1,-1,-0.9999998211860657,-1,-0.9999997019767761,1,-1,1,0.9999995231628418,1,-1,1,1,-1,-0.9999997019767761,1,0.9999994039535522,-1.0000009536743164,1,1,1,-1,1,0.9999995231628418,1,0.9999994039535522,-1.0000009536743164,1,1,-1,-1,1,-1,-1,0.9999994039535522,-1.0000009536743164,1,-1,-0.9999997019767761,1,-1,-0.9999998211860657,-1,-1,-0.9999998211860657,-1,-1,-0.9999997019767761,1,-1,1,1,-0.9999997019767761,1,-1,1,0.9999995231628418,1,1,1,-1,-0.9999997019767761,1,-1,-1,1,1],
        "name":"MeshData mesh",
        "indices0":[0,1,2,0,2,3,4,5,6,4,6,7,8,9,10,8,10,11,12,13,14,12,14,15,16,17,18,16,18,19,20,21,22,20,22,23],
       ...

JavaScript

"use strict"; // strict html5

var vertexBuffer;
var vertexElementArrayBuffer;
var shaderProgram;

function bindAttributes(){
    var sizeOfFloat = 4;
    var vertexLength = 8*sizeOfFloat;
    var vertexLocation = gl.getAttribLocation(shaderProgram, "position");
    gl.enableVertexAttribArray(vertexLocation);
    gl.vertexAttribPointer(vertexLocation, 3, gl.FLOAT, false, vertexLength, 0);
    var normalLocation = gl.getAttribLocation(shaderProgram, "normal");
    gl.enableVertexAttribArray(normalLocation);
    gl.vertexAttribPointer(normalLocation, 3, gl.FLOAT, false, vertexLength, 3*sizeOfFloat );
    var uvLocation = gl.getAttribLocation(shaderProgram, "uv");
    gl.enableVertexAttribArray(uvLocation);
    gl.vertexAttribPointer(uvLocation, 2, gl.FLOAT, false, vertexLength, 6*sizeOfFloat);
}

function createVertexBufferObject(data){
    // create interleaved data
    var vertexCount = data.vertex.length / 3;
    var vertexSize = 3 + 3 + 2;
    var vertices = new Float32Array(vertexCount * vertexSize); // position, normal, uv
    for (var i=0;i<vertexCount;i++){
        vertices[i*vertexSize] = data.vertex[i*3];
        vertices[i*vertexSize + 1] = data.vertex[i*3 + 1];
        vertices[i*vertexSize + 2] = data.vertex[i*3 + 2];
        vertices[i*vertexSize + 3] = data.normal[i*3];
        vertices[i*vertexSize + 4] = data.normal[i*3 + 1];
        vertices[i*vertexSize + 5] = data.normal[i*3 + 2];
        vertices[i*vertexSize + 6] = data.uv1[i*2];
        vertices[i*vertexSize + 7] = data.uv1[i*2 + 1];
    }
    
    vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    bindAttributes();
    vertexElementArrayBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, vertexElementArrayBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(data.indices0), gl.STATIC_DRAW);
}

function drawCube(position, scale){
    var DEGREE_TO_RADIAN =...