title: How to use multiple textures on a cube in WebGL?
body: <p>This is my source code. It still doesnt work. I want to put 6 different pictures on the 6 sides of a cube, which is animated. Please help :)</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
  &lt;html&gt;&lt;head&gt;
  &lt;title&gt;WebGL&lt;/title&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"&gt;
  
  
  &lt;script type="text/javascript" src="glMatrix-0.9.5.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="webgl-utils.js"&gt;&lt;/script&gt;
  
  &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
  precision mediump float;
  
  varying vec2 vTextureCoord;
  
  uniform sampler2D uSampler;
  
  void main(void) {
      gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  }
  &lt;/script&gt;
  
  &lt;script id="shader-vs" type="x-shader/x-vertex"&gt;
  attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord;
  
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;
  
  varying vec2 vTextureCoord;
  
  
  void main(void) {
      gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      vTextureCoord = aTextureCoord;
  }
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  var gl;
  
  function initGL(canvas) {
      try {
          gl = canvas.getContext("experimental-webgl");
          gl.viewportWidth = canvas.width;
          gl.viewportHeight = canvas.height;
      } catch (e) {
      }
      if (!gl) {
          alert("Could not initialise WebGL, sorry :-(");
      }
  }
  
  
  function getShader(gl, id) {
      var shaderScript = document.getElementById(id);
      if (!shaderScript) {
          return null;
      }
  
      var str = "";
      var k = shaderScript.firstChild;
      while (k) {
          if (k.nodeType == 3) {
              str += k.textContent;
          }
          k = k.nextSibling;
      }
  
      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;
      }
  
      gl.shaderSource(shader, str);
      gl.compileShader(shader);
  
      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
          alert(gl.getShaderInfoLog(shader));
          return null;
      }
  
      return shader;
  }
  
  
  var shaderProgram;
  
  function initShaders() {
      var fragmentShader = getShader(gl, "shader-fs");
      var vertexShader = getShader(gl, "shader-vs");
  
      shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertexShader);
      gl.attachShader(shaderProgram, fragmentShader);
      gl.linkProgram(shaderProgram);
  
      if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
          alert("Could not initialise shaders");
      }
  
      gl.useProgram(shaderProgram);
  
      shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
      gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  
      shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
      gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);
  
      shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
      shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
      shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
  }
  
  
  var texturen = new Array();
  function initTexture(sFilename,texturen)  
  {
    var anz = texturen.length;
    texturen[anz] = gl.createTexture();
    texturen[anz].image = new Image();
    texturen[anz].image.onload = function()    
    {
    gl.bindTexture(gl.TEXTURE_2D, texturen[anz]);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
    gl.texImage2D
    (gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texturen[anz].image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
    }
    texturen[anz].image.src = sFilename;
  } 
  
  
  var mvMatrix = mat4.create();
  var mvMatrixStack = [];
  var pMatrix = mat4.create();
  
  function mvPushMatrix() {
      var copy = mat4.create();
      mat4.set(mvMatrix, copy);
      mvMatrixStack.push(copy);
  }
  
  function mvPopMatrix() {
      if (mvMatrixStack.length == 0) {
          throw "Invalid popMatrix!";
      }
      mvMatrix = mvMatrixStack.pop();
  }
  
  
  function setMatrixUniforms() {
      gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
      gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
  }
  
  
  function degToRad(degrees) {
      return degrees * Math.PI / 180;
  }
  
  function initBuffers() {
      var vertBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
      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,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
      vertBuffer.itemSize = 3;
      vertBuffer.numItems = 24;
  
  
      CoordBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER,CoordBuffer);
      var textureCoords = [
        // Front face
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0,
  
        // Back face
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0,
        0.0, 0.0,
  
        // Top face
        0.0, 1.0,
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
  
     // Bottom face
        1.0, 1.0,
        0.0, 1.0,
        0.0, 0.0,
        1.0, 0.0,
  
        // Right face
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0,
        0.0, 0.0,
  
        // Left face
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0,
      ];
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
      CoordBuffer.itemSize = 2;
      CoordBuffer.numItems = 24;
  
  var IndexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
      var Indices = [
          0, 1, 2,      0, 2, 3,    // Front face
          4, 5, 6,      4, 6, 7,    // Back face
          8, 9, 10,     8, 10, 11,  // Top face
          12, 13, 14,   12, 14, 15, // Bottom face
          16, 17, 18,   16, 18, 19, // Right face
          20, 21, 22,   20, 22, 23  // Left face
      ];
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Indices), gl.STATIC_DRAW);
      IndexBuffer.itemSize = 1;
      IndexBuffer.numItems = 36;
  
  
  
  }
  
  
  var xRot = 0;
  var yRot = 0;
  var zRot = 0;
  
  function drawScene() {
      gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  
      mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
  
      mat4.identity(mvMatrix);
  
      mat4.translate(mvMatrix, [0.0, 0.0, -5.0]);
  
      mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
      mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
      mat4.rotate(mvMatrix, degToRad(zRot), [0, 0, 0]);
      setMatrixUniforms();
  
  
  
  gl.bindBuffer(gl.ARRAY_BUFFER, vertBuffer);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IndexBuffer);
  gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,vertBuffer.itemSize, 
    gl.FLOAT, false, 0, 0);
  
  // Draw face 0
  gl.bindTexture(gl.TEXTURE_2D, texturen[0]);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  
  // Draw face 1
  gl.bindTexture(gl.TEXTURE_2D, texturen[1]);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 12);
  
  // Draw face 2
  gl.bindTexture(gl.TEXTURE_2D, texturen[2]);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 24);
  
  // Draw face 3
  gl.bindTexture(gl.TEXTURE_2D, texturen[3]);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 36);
  
  // Draw face 4
  gl.bindTexture(gl.TEXTURE_2D, texturen[4]);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 48);
  
  // Draw face 5
  gl.bindTexture(gl.TEXTURE_2D, texturen[5]);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 60);
  }
  
  
  var lastTime = 0;
  
  function animate() {
      var timeNow = new Date().getTime();
      if (lastTime != 0) {
          var elapsed = timeNow - lastTime;
  
          xRot += (90 * elapsed) / 1000.0;
          yRot += (90 * elapsed) / 1000.0;
          zRot += (90 * elapsed) / 1000.0;
      }
      lastTime = timeNow;
  }
  
  
  function tick() {
      requestAnimFrame(tick);
      drawScene();
      animate();
  }
  
  
  function webGLStart() {
      var canvas = document.getElementById("lesson05-canvas");
      initGL(canvas);
      initShaders();
      initBuffers();
      initTexture("Logo.png",texturen);
      initTexture("le.png",texturen);
  initTexture("Logo.png",texturen);
      initTexture("le.png",texturen);
  initTexture("Logo.png",texturen);
      initTexture("le.png",texturen);
  
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.enable(gl.DEPTH_TEST);
  
      tick();
  }
  
  
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body onload="webGLStart();"&gt;
  &lt;canvas id="lesson05-canvas" style="border: none;" width="500" height="500"&gt;    &lt;/canvas&gt;    &lt;canvas id="lesson05-canvas" style="border: none;" width="500" height="500"&gt;    &lt;/canvas&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>I hope the fact that these are just 2 different pictures doesn't matter.</p>