gistfile1.html

<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;
uniform mat3 u_h;

varying vec2 v_texCoord;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   // Pass through position
   vec3 warped = u_h * vec3(a_position, 1);
   gl_Position = vec4(warped,1);

   // pass the texCoord to the fragment shader
   // The GPU will interpolate this value between points.
   v_texCoord = a_texCoord;
}
</script>

<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

// our texture
uniform sampler2D u_image;

// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;

void main() {
   // Look up a color from the texture.
   //gl_FragColor = texture2D(u_image, v_texCoord);
   gl_FragColor = vec4(1.0,1.0,0,1.0);
}
</script>
<script type="text/javascript">
    window.onload = function() {
        setup()
        var h = [1,0,0,  0,1,0, 0,0,1];
        var rot = 0.0;
        setInterval(function() {
            rot += 0.01;
            h[0] = Math.cos(rot); h[1] = -Math.sin(rot); h[2] = 0;
            h[3] = Math.sin(rot); h[4] = Math.cos(rot);  h[5] = 0;
            h[6] = 0; h[7] = 0; h[8] = 1;
            render(h);
        }, 10);
    }

    var gl;
    var program;

    var log = function(msg) {
    };
    var error = function(msg) {
    };
    var loggingOff = function() {
        log = function() {};
        error = function() {};
    };


    var loadShader = function(gl, shaderSource, shaderType, opt_errorCallback) {
        var errFn = opt_errorCallback || error;
        // Create the shader object
        var shader = gl.createShader(shaderType);
        
        // Load the shader source
        gl.shaderSource(shader, shaderSource);
        
        // Compile the shader
        gl.compileShader(shader);
        
        // Check the compile status
        var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (!compiled) {
            // Something went wrong during compilation; get the error
            lastError = gl.getShaderInfoLog(shader);
            errFn("*** Error compiling shader '" + shader + "':" + lastError);
            gl.deleteShader(shader);
            return null;
        }

        return shader;
    }

    var loadProgram = function(
        gl, shaders, opt_attribs, opt_locations, opt_errorCallback) {
        var errFn = opt_errorCallback || error;
        var program = gl.createProgram();
        for (var ii = 0; ii < shaders.length; ++ii) {
            gl.attachShader(program, shaders[ii]);
        }
        if (opt_attribs) {
            for (var ii = 0; ii < opt_attribs.length; ++ii) {
                gl.bindAttribLocation(
                    program,
                    opt_locations ? opt_locations[ii] : ii,
                    opt_attribs[ii]);
            }
        }
        gl.linkProgram(program);

        // Check the link status
        var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
        if (!linked) {
            // something went wrong with the link
            lastError = gl.getProgramInfoLog (program);
            errFn("Error in program linking:" + lastError);

            gl.deleteProgram(program);
            return null;
        }
        return program;
    };

    var createShaderFromScript = function(
        gl, scriptId, opt_shaderType, opt_errorCallback) {
        var shaderSource = "";
        var shaderType;
        var shaderScript = document.getElementById(scriptId);
        if (!shaderScript) {
            throw("*** Error: unknown script element" + scriptId);
        }
        shaderSource = shaderScript.text;

        if (!opt_shaderType) {
            if (shaderScript.type == "x-shader/x-vertex") {
                shaderType = gl.VERTEX_SHADER;
            } else if (shaderScript.type == "x-shader/x-fragment") {
                shaderType = gl.FRAGMENT_SHADER;
            } else if (shaderType != gl.VERTEX_SHADER && shaderType != gl.FRAGMENT_SHADER) {
                throw("*** Error: unknown shader type");
                return null;
            }
        }

        return loadShader(
            gl, shaderSource, opt_shaderType ? opt_shaderType : shaderType,
            opt_errorCallback);
    };

    function setup_gl(gl) {
        d = WS.glConstants();
        function make(name) { return function(a1,a2,a3,a4,a5,a6,a7,a8){ 
            if (a1 === undefined) return WS.gl(name)
            if (a2 === undefined) return WS.gl(name, a1);
            if (a3 === undefined) return WS.gl(name, a1,a2);
            if (a4 === undefined) return WS.gl(name, a1,a2,a3);
            if (a5 === undefined) return WS.gl(name, a1,a2,a3,a4);
            if (a6 === undefined) return WS.gl(name, a1,a2,a3,a4,a5);
            if (a7 === undefined) return WS.gl(name, a1,a2,a3,a4,a5,a6);
            if (a8 === undefined) return WS.gl(name, a1,a2,a3,a4,a5,a6,a7);
             return WS.gl(name, a1,a2,a3,a4,a5,a6,a7,a8);
        }; };
        gl.COMPILE_STATUS = d["COMPILE_STATUS"]
        gl.LINK_STATUS = d["LINK_STATUS"]
        gl.STATIC_DRAW = d["STATIC_DRAW"];
        gl.TRIANGLES = d["TRIANGLES"];
        gl.VERTEX_SHADER = d["VERTEX_SHADER"];
        gl.FRAGMENT_SHADER = d["FRAGMENT_SHADER"];
        gl.ARRAY_BUFFER = d["ARRAY_BUFFER"];
        gl.FLOAT = d["FLOAT"];

        gl.createShader = make("createShader");
        gl.compileShader = make("compileShader");
        gl.getShaderParameter = make("getShaderParameter");
        gl.getShaderInfoLog = make("getShaderInfoLog");
        gl.deleteShader = make("deleteShader");
        gl.createProgram = make("createProgram");
        gl.attachShader = make("attachShader");
        gl.bindAttribLocation = make("bindAttribLocation");
        gl.linkProgram = make("linkProgram");
        gl.getProgramParameter = make("getProgramParameter");
        gl.getProgramInfoLog = make("getProgramInfoLog");
        gl.deleteProgram = make("deleteProgram");
        gl.useProgram = make("useProgram");
        gl.createBuffer = make("createBuffer");
        gl.bindBuffer = make("bindBuffer");
        gl.getAttributeLocation = make("getAttributeLocation");
        gl.enableAttribArray = make("enableAttribArray");
        gl.vertexAttribPointer = make("vertexAttribPointer");
        gl.bufferData = make("bufferData");
        gl.getUniformLocation = make("getUniformLocation");
        gl.uniformMatrix3fv = make("uniformMatrix3fv");
        gl.drawArrays = make("drawArrays");
    }

    var initialized = false;

    function setup() {
        // Get A WebGL context
        gl = {}
        setup_gl(gl);
        initialized = true;

        // setup a GLSL program
        var vertexShader = createShaderFromScript(gl, "2d-vertex-shader");
        var fragmentShader = createShaderFromScript(gl, "2d-fragment-shader");
        program = createProgram(gl, [vertexShader, fragmentShader]);
        gl.useProgram(program);


        // Load the vertex data
        var buffer=gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
        var positionLocation = gl.getAttribLocation(program, "a_position");
        gl.enableVertexAttribArray(positionLocation);
        gl.vertexAttribPointer(positionLocation,2,gl.FLOAT,false,0,0);
        var triangle_vertices = [-1.0, 0.0,   1.0, 0.0,    0.0, 1.0];
        gl.bufferData(gl.ARRAY_BUFFER,triangle_vertices,gl.STATIC_DRAW);
    }    

    function drawFrame() {
        if (!initialized) setup();

        // Set the input matrix
        var hLocation=gl.getUniformLocation(program,"u_h");
        gl.uniformMatrix3fv(hLocation,false,new Float32Array(h));
        gl.drawArrays(gl.TRIANGLES,0,3);
    }
</script>