Implementación Final

<html><head>
    <title>Computación Gráfica LCC - Cubo Texturizado con "vertex shading"</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- External Mozilla Libraries to help with some matrix operations -->
    <script src="archivos/sylvester.js" type="text/javascript"></script>
    <script src="archivos/glUtils.js" type="text/javascript"></script>

    <!-- Canvas styler (in css) -->

    <style type='text/css'>
      canvas {
        border: 1px solid black;
        -moz-box-shadow: black 2px 2px 2px;
        background-color: black;
      }
    </style>

    <!-- WebGL functions to draw the animated cube -->

    <script type='text/javascript'>

      // global variables
      var canvas;
      var gl;

      var cubeVerticesBuffer;
      var cubeVerticesTextureCoordBuffer;
      var cubeVerticesIndexBuffer;
      var cubeVerticesIndexBuffer;
      var cubeRotation = 0.0;
      var lastCubeUpdateTime = 0;

      var cubeImage;
      var cubeTexture;

      var mvMatrix;
      var shaderProgram;
      var vertexPositionAttribute;
      var vertexNormalAttribute;
      var textureCoordAttribute;
      var perspectiveMatrix;

      //
      // start
      //
      // Called when the canvas is created
      //
      function start() {
        canvas = document.getElementById("glcanvas");

        initWebGL(canvas);      // Initialize the GL context

        // Only continue if WebGL is available and working

        if (gl) {
          gl.clearColor(1.0, 1.0, 1.0, 1.0);  // Clear to black, fully opaque
          gl.clearDepth(1.0);                 // Clear everything
          gl.enable(gl.DEPTH_TEST);           // Enable depth testing
          gl.depthFunc(gl.LEQUAL);            // Near things obscure far things

          // Initialize the shaders; this is where all the lighting for the
          // vertices and so forth is established.

          initShaders();

          // Here's where we call the routine that builds all the objects
          // we'll be drawing.

          initBuffers();

          // Next, load and set up the textures we'll be using.

          initTextures();

          // Set up to draw the scene periodically.

          setInterval(drawScene, 15);
        }
      }

      //
      // initWebGL
      //
      // Initialize WebGL, returning the GL context or null if
      // WebGL isn't available or could not be initialized.
      //
      function initWebGL() {
        gl = null;

        try {
          gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
          // if we can't start the "normal" webgl context, try the experimental-webgl context
        }
        catch(e) {
        }

        // If we don't have a GL context, give up now

        if (!gl) {
          alert("Unable to initialize WebGL. Your browser may not support it.");
        }
      }

      //
      // initBuffers
      //
      // Initialize the buffers we'll need. For instance, a simple cube.
      //
      function initBuffers() {

        // Create a buffer for the cube's vertices.

        cubeVerticesBuffer = gl.createBuffer();

        // Select the cubeVerticesBuffer as the one to apply vertex
        // operations to from here out.

        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);

        // Now create an array of vertices for the cube.

        var vertices = [
          // Front face
          -1.0, -1.0,  1.0,
          1.0, -1.0,  1.0,
          1.0,  1.0,  1.0,
          -1.0,  1.0,  1.0,

          // Back face
          -1.0, -1.0, -1.0,
          -1.0,  1.0, -1.0,
          1.0,  1.0, -1.0,
          1.0, -1.0, -1.0,

          // Top face
          -1.0,  1.0, -1.0,
          -1.0,  1.0,  1.0,
          1.0,  1.0,  1.0,
          1.0,  1.0, -1.0,

          // Bottom face
          -1.0, -1.0, -1.0,
          1.0, -1.0, -1.0,
          1.0, -1.0,  1.0,
          -1.0, -1.0,  1.0,

          // Right face
          1.0, -1.0, -1.0,
          1.0,  1.0, -1.0,
          1.0,  1.0,  1.0,
          1.0, -1.0,  1.0,

          // Left face
          -1.0, -1.0, -1.0,
          -1.0, -1.0,  1.0,
          -1.0,  1.0,  1.0,
          -1.0,  1.0, -1.0
        ];

        // Now pass the list of vertices into WebGL to build the shape. We
        // do this by creating a Float32Array from the JavaScript array,
        // then use it to fill the current vertex buffer.

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

        // Set up the normals for the vertices, so that we can compute lighting.

        cubeVerticesNormalBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);

        var vertexNormals = [
          // Front
          0.0,  0.0,  1.0,
          0.0,  0.0,  1.0,
          0.0,  0.0,  1.0,
          0.0,  0.0,  1.0,

          // Back
          0.0,  0.0, -1.0,
          0.0,  0.0, -1.0,
          0.0,  0.0, -1.0,
          0.0,  0.0, -1.0,

          // Top
          0.0,  1.0,  0.0,
          0.0,  1.0,  0.0,
          0.0,  1.0,  0.0,
          0.0,  1.0,  0.0,

          // Bottom
          0.0, -1.0,  0.0,
          0.0, -1.0,  0.0,
          0.0, -1.0,  0.0,
          0.0, -1.0,  0.0,

          // Right
          1.0,  0.0,  0.0,
          1.0,  0.0,  0.0,
          1.0,  0.0,  0.0,
          1.0,  0.0,  0.0,

          // Left
          -1.0,  0.0,  0.0,
          -1.0,  0.0,  0.0,
          -1.0,  0.0,  0.0,
          -1.0,  0.0,  0.0
        ];

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexNormals),
                      gl.STATIC_DRAW);

        // Map the texture onto the cube's faces.

        cubeVerticesTextureCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);

        var textureCoordinates = [
          // Front
          0.0,  0.0,
          1.0,  0.0,
          1.0,  1.0,
          0.0,  1.0,
          // Back
          0.0,  0.0,
          1.0,  0.0,
          1.0,  1.0,
          0.0,  1.0,
          // Top
          0.0,  0.0,
          1.0,  0.0,
          1.0,  1.0,
          0.0,  1.0,
          // Bottom
          0.0,  0.0,
          1.0,  0.0,
          1.0,  1.0,
          0.0,  1.0,
          // Right
          0.0,  0.0,
          1.0,  0.0,
          1.0,  1.0,
          0.0,  1.0,
          // Left
          0.0,  0.0,
          1.0,  0.0,
          1.0,  1.0,
          0.0,  1.0
        ];

        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordinates),
                      gl.STATIC_DRAW);

        // Build the element array buffer; this specifies the indices
        // into the vertex array for each face's vertices.

        cubeVerticesIndexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);

        // This array defines each face as two triangles, using the
        // indices into the vertex array to specify each triangle's
        // position.

        var cubeVertexIndices = [
          0,  1,  2,      0,  2,  3,    // front
          4,  5,  6,      4,  6,  7,    // back
          8,  9,  10,     8,  10, 11,   // top
          12, 13, 14,     12, 14, 15,   // bottom
          16, 17, 18,     16, 18, 19,   // right
          20, 21, 22,     20, 22, 23    // left
        ]

        // Now send the element array to GL

        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
            new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
      }

      //
      // initTextures
      //
      // Initialize the textures we'll be using, then initiate a load of
      // the texture images. The handleTextureLoaded() callback will finish
      // the job; it gets called each time a texture finishes loading.
      //
      // The texture image gets turned horizontally for some reason, so we
      // use an already mirrored image as texture.
      //
      function initTextures() {
        cubeTexture = gl.createTexture();
        cubeImage = new Image();
        cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
        cubeImage.src = "archivos/USACH_logo.png";
      }

      function handleTextureLoaded(image, texture) {
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
        gl.generateMipmap(gl.TEXTURE_2D);
        gl.bindTexture(gl.TEXTURE_2D, null);
      }

      //
      // drawScene
      //
      // Draw the scene.
      //
      function drawScene() {
        // Clear the canvas before we start drawing on it.

        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        // Establish the perspective with which we want to view the
        // scene. Our field of view is 45 degrees, with a width/height
        // ratio of 640:480, and we only want to see objects between 0.1 units
        // and 100 units away from the camera.

        perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);

        // Set the drawing position to the "identity" point, which is
        // the center of the scene.

        loadIdentity();

        // Now move the drawing position a bit to where we want to start
        // drawing the cube.

        mvTranslate([0.0, 0.0, -6.0]);

        // Save the current matrix, then rotate before we draw.

        mvPushMatrix();
        mvRotate(cubeRotation, [1, 0, 1]);

        // Draw the cube by binding the array buffer to the cube's vertices
        // array, setting attributes, and pushing it to GL.

        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
        gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

        // Set the texture coordinates attribute for the vertices.

        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
        gl.vertexAttribPointer(textureCoordAttribute, 2, gl.FLOAT, false, 0, 0);

        // Bind the normals buffer to the shader attribute.

        gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
        gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);

        // Specify the texture to map onto the faces.

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
        gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

        // Draw the cube.

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
        setMatrixUniforms();
        gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

        // Restore the original matrix

        mvPopMatrix();

        // Update the rotation for the next draw, if it's time to do so.

        var currentTime = (new Date).getTime();
        if (lastCubeUpdateTime) {
          var delta = currentTime - lastCubeUpdateTime;

          cubeRotation += (30 * delta) / 1000.0;
        }

        lastCubeUpdateTime = currentTime;
      }

      //
      // initShaders
      //
      // Initialize the shaders, so WebGL knows how to light our scene.
      //
      function initShaders() {
        var fragmentShader = getShader(gl, "shader-fs");
        var vertexShader = getShader(gl, "shader-vs");

        // Create the shader program

        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        // If creating the shader program failed, alert

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
          alert("Unable to initialize the shader program.");
        }

        gl.useProgram(shaderProgram);

        vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
        gl.enableVertexAttribArray(vertexPositionAttribute);

        textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
        gl.enableVertexAttribArray(textureCoordAttribute);

        vertexNormalAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
        gl.enableVertexAttribArray(vertexNormalAttribute);
      }

      //
      // getShader
      //
      // Loads a shader program by scouring the current document,
      // looking for a script with the specified ID.
      //
      function getShader(gl, id) {
        var shaderScript = document.getElementById(id);

        // Didn't find an element with the specified ID; abort.

        if (!shaderScript) {
          return null;
        }

        // Walk through the source element's children, building the
        // shader source string.

        var theSource = "";
        var currentChild = shaderScript.firstChild;

        while(currentChild) {
          if (currentChild.nodeType == 3) {
            theSource += currentChild.textContent;
          }

          currentChild = currentChild.nextSibling;
        }

        // Now figure out what type of shader script we have,
        // based on its MIME type.

        var shader;

        if (shaderScript.type == "x-shader/x-fragment") {
          shader = gl.createShader(gl.FRAGMENT_SHADER);
        } else if (shaderScript.type == "x-shader/x-vertex") {
          shader = gl.createShader(gl.VERTEX_SHADER);
        } else {
          return null;  // Unknown shader type
        }

        // Send the source to the shader object

        gl.shaderSource(shader, theSource);

        // Compile the shader program

        gl.compileShader(shader);

        // See if it compiled successfully

        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
          alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
          return null;
        }

        return shader;
      }

      //
      // Matrix utility functions
      //

      function loadIdentity() {
        mvMatrix = Matrix.I(4);
      }

      function multMatrix(m) {
        mvMatrix = mvMatrix.x(m);
      }

      function mvTranslate(v) {
        multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
      }

      function setMatrixUniforms() {
        var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
        gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));

        var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
        gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));

        var normalMatrix = mvMatrix.inverse();
        normalMatrix = normalMatrix.transpose();
        var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
        gl.uniformMatrix4fv(nUniform, false, new Float32Array(normalMatrix.flatten()));
      }

      var mvMatrixStack = [];

      function mvPushMatrix(m) {
        if (m) {
          mvMatrixStack.push(m.dup());
          mvMatrix = m.dup();
        } else {
          mvMatrixStack.push(mvMatrix.dup());
        }
      }

      function mvPopMatrix() {
        if (!mvMatrixStack.length) {
          throw("Can't pop from an empty matrix stack.");
        }

        mvMatrix = mvMatrixStack.pop();
        return mvMatrix;
      }

      function mvRotate(angle, v) {
        var inRadians = angle * Math.PI / 180.0;

        var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
        multMatrix(m);
      }

    </script>

    <!-- Fragment shader program -->

    <script id="shader-fs" type="x-shader/x-fragment">
      varying highp vec2 vTextureCoord;
      varying highp vec3 vLighting;

      uniform sampler2D uSampler;

      void main(void) {
        highp vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));

        gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
      }
    </script>

    <!-- Vertex shader program -->

    <script id="shader-vs" type="x-shader/x-vertex">
      attribute highp vec3 aVertexNormal;
      attribute highp vec3 aVertexPosition;
      attribute highp vec2 aTextureCoord;

      uniform highp mat4 uNormalMatrix;
      uniform highp mat4 uMVMatrix;
      uniform highp mat4 uPMatrix;

      varying highp vec2 vTextureCoord;
      varying highp vec3 vLighting;

      void main(void) {
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
        vTextureCoord = aTextureCoord;

        // Apply lighting effect

        highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);
        highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
        highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);

        highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);

        highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
        vLighting = ambientLight + (directionalLightColor * directional);
      }
    </script>
  </head>

  <body onload="start()">
    <canvas id="glcanvas" width="640" height="480">
      Your browser doesn't appear to support the HTML5 <code>&lt;canvas&gt;</code> element.
    </canvas>

    <br>
    <br>
    Alumno: Danilo I. J. Riffo Cerda <br>
    Profesora: Lorna Figueroa Morales<br>
    ComputaciÃ³n GrÃ¡fica <br>
    Licenciatura en Ciencia de la ComputaciÃ³n <br>
    Facultad de Ciencia - USACH <br>
    Enero de 2012

    <br>
    <br>
    Puede acceder a los archivos que utiliza este sitio mediante <a href='http://danriffo.net63.net/archivos/' target='_blank'>este link</a>.  <br>
    Dichos archivos son:
    <DL>
      <DT><STRONG>USACH_logo.png</STRONG>
        <DD>Is the texture used.
      <DT><STRONG>glUtils.js</STRONG>
        <DD>Mozilla's library to help with some Matrix operations (transpose, inverse, etc).
      <DT><STRONG>sylvester.js</STRONG>
        <DD>A useful JavaScript Engine to do some Matrix arithmetics such as addition, multiplication, etc.
    </DL>

  </body>


<!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=7571834;
var sc_invisible=0;
var sc_security="fd7f93df";
</script>
<script type="text/javascript" src="http://www.statcounter.com/counter/counter_xhtml.js"></script>
<noscript><div class="statcounter"><a title=" -> " href="http://statcounter.com/blogger/" class="statcounter"><img class="statcounter" src="http://c.statcounter.com/7571834/0/fd7f93df/0/" alt="counter" /></a></div></noscript>
<!-- End of StatCounter Code -->


</html>