Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Clear "canvas"</title>
    </head>
    <body onload="main()">
        <canvas id="webglCanvas" width="400" height="400">
            Please use a browser that supports "canvas"
        </canvas>
        <div>
            Texture: <select id="textureSelector">
                <option value="sky.jpg">Sky</option>
                <option value="lion.png">Lion</option>
                <option value="pattern.jpg">Pattern</option>
            </select>
        </div>
        <script src="sylvester.js"></script>
        <script src="glUtils.js"></script>
        <script src="webgl-utils.js"></script>
        <script src="webgl-debug.js"></script>
        <script src="cuon-utils.js"></script>
        <script>
            // Vertex shader program
            var VSHADER_SOURCE =
                'attribute vec3 a_Position;\n' +
                'attribute vec2 a_TexCoord;\n' +
                'varying vec2 v_TexCoord;\n' +
                'void main() {\n' +
                ' gl_Position = vec4(a_Position, 1.0);\n' +
                ' v_TexCoord = a_TexCoord;\n' +
                '}\n';

            // Fragment shader program
            var FSHADER_SOURCE =
                'precision highp float;\n' +
                'uniform sampler2D u_Sampler;\n' +
                'varying vec2 v_TexCoord;\n' +
                'void main() {\n' +
                ' gl_FragColor = texture2D(u_Sampler, vec2(v_TexCoord.s, v_TexCoord.t));\n' +
                '}\n';

            // Global gl variable
            var gl;

            // Global shader variables
            var a_Position;
            var a_TexCoord;

            // Global buffers
            var verticesBuffer;
            var triangleFacesBuffer;
            var textureCoordBuffer;

            // Global texture
            var texture;


            function main() {
                // Get the rendering context for WebGL

                initializeWebGL();
                initializeShaders();
                initializeBuffers();

                //   Initialize html elements and set all events

                // Image selector
                var imageSel = document.getElementById("textureSelector");
                imageSel.onchange = function(){loadImage(imageSel)};
            }

            function initializeWebGL() {
                // Get the rendering context for WebGL
                var canvas = document.getElementById("webglCanvas");
                gl = canvas.getContext("webgl");
                if (!gl) {
                    console.log('Failed to get the rendering context for WebGL');
                    return;
                }

                // Clear and init canvas
                gl.clearColor(0.0, 0.0, 0.0, 1.0);
                gl.enable(gl.DEPTH_TEST);
                gl.depthFunc(gl.LEQUAL);
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
            }

            function initializeShaders() {
                // Initialize shaders through cuon-utils.js
                if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
                    console.log("Failed to initialize shaders.");
                    return null;
                }

                // Fetch and enable shader attributes
                a_Position = gl.getAttribLocation(gl.program, "a_Position");
                gl.enableVertexAttribArray(a_Position);

                a_TexCoord = gl.getAttribLocation(gl.program, "a_TexCoord");
                gl.enableVertexAttribArray(a_TexCoord);
            }

            function initializeBuffers() {
                // Vertex positional data
                var vertices = [
                    1.0,  1.0,  //Top right corner
                    -1.0, 1.0,  //Top left corner
                    1.0,  -1.0, //Bottom right corner
                    -1.0, -1.0  //Bottom left corner
                ];

                verticesBuffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);


                // Texture positional data
                var textureCoords = [
                    0.0,  0.0,  //Bottom left corner
                    1.0,  0.0,  //Bottom right corner
                    1.0,  1.0,  //Top right corner
                    0.0,  1.0   //Top left corner
                ];

                textureCoordBuffer  = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer );
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);

                var triangleFaces = [0, 1, 2];

                triangleFacesBuffer  = gl.createBuffer();
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleFacesBuffer );
                gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(triangleFaces), gl.STATIC_DRAW);
            }

            function render() {
                // Clear canvas
                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

                // Activate and bind texture
                gl.activeTexture(gl.TEXTURE0);
                gl.bindTexture(gl.TEXTURE_2D, texture);
                gl.uniform1i(gl.getUniformLocation(gl.program, "u_Sampler"), 0);

                // Bind and point vertex data buffer to a_Position
                gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
                gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

                // Bind triangle faces data
                gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleFacesBuffer);

                // Draw elements
                gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
            }


            // Texture functions

            function loadImage(imageSelector) {
                texture = gl.createTexture();
                var image = new Image();
                image.onload = loadTexture(gl, image);
                image.src = imageSelector.value;
            }

            function loadTexture(gl, image) {
                gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
                gl.activeTexture(gl.TEXTURE0);
                gl.bindTexture(gl.TEXTURE_2D, texture);
                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
                gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
                gl.bindTexture(gl.TEXTURE_2D, null);

                render();
            }
        </script>
    </body>
</html>