I am trying to write a simple WebGL script to display a pyramid with a brick texture and Phong lighting. The lighting works fine but when I incorporate the texture, the pyramid turns black. I've checked and set my parameters to use with power-of-two textures since my texture is 512x512. This scene should be straight out of the the Mozilla WebGL examples but some reason it is not working. I am now desperate and cannot figure out why adding textures objects black. Below is my code.    <html>    <head>    <title>WebGL Simple Pyramid</    CanvasMatrix class    (c) Apple Inc    -->    <script src=CanvasMatrix.js type=text/javascript></script>    <!--      Vertex shader    -->    <script id=shader-vs type=x-shader/x-vertex>        precision highp float;       attribute vec3 XYZ;       attribute vec3 RGB;       attribute vec3 NOR;       attribute vec2 TEX;       uniform mat4 ProjectionMatrix;       uniform mat4 ModelviewMatrix;       varying vec3 col;       varying vec2 tex;       vec3 ambient = vec3(0.3, 0.3, 0.3);       vec3 diffuse = vec3(1.0, 1.0, 1.0);       vec3 specular = vec3(1.0, 1.0, 1.0);       vec4 position = vec4(-2.0, 1.0, -2.0, 1.0);       void main(void)       {           //  P is the vertex coordinate on body           vec3 P = vec3(ModelviewMatrix * vec4(XYZ, 1));           //  N is the object normal at P           vec4 norm = normalize(ModelviewMatrix * vec4(NOR, 1));           vec3 N = vec3(norm.xyz);           //  L is the light vector           vec3 L = normalize(vec3(ModelviewMatrix*position) - P);           //  Emission and ambient color           vec3 color = ambient;           //  Diffuse light intensity is cosine of light and normal vectors           float Id = dot(L,N);           if (Id>0.0)           {              //  Add diffuse              color += Id*diffuse;              //  R is the reflected light vector R = 2(L.N)N - L              vec3 R = reflect(-L, N);              //  V is the view vector (eye at the origin)              vec3 V = normalize(-P);              //  Specular is cosine of reflected and view vectors              float Is = dot(R,V);              if (Is>0.0) color += pow(Is,32.0)*specular;           }           //  Pass color to fragment shader           col = color*RGB;           //  Pass texture coordinates to fragment shader (will be interpolated)           tex = TEX;           //  Set transformed vertex location           gl_Position = ProjectionMatrix * ModelviewMatrix *            vec4(XYZ,1);       }    </script>     <!--      Fragment shader      -->    <script id=shader-fs type=x-shader/x-fragment>        precision highp float;       varying vec3 col;       varying vec2 tex;       uniform sampler2D uSampler;       void main(void)       {          gl_FragColor = vec4(col,1) * texture2D(uSampler, tex);       }    </script>     <!--      WebGL program      -->    <script type=text/javascript>     //    //  Compile a shader    //    function CompileShader(gl,id)    {       //  Get shader by id       var src = document.getElementById(id);       //  Create shader based on type setting       var shader;       if (src.type == x-shader/x-fragment)          shader = gl.createShader(gl.FRAGMENT_SHADER);       else if (src.type == x-shader/x-vertex)          shader = gl.createShader(gl.VERTEX_SHADER);       else          return null;       //  Read source into str       var str = ;       var k = src.firstChild;       while (k)       {          if (k.nodeType == 3) str += k.textContent;          k = k.nextSibling;       }       gl.shaderSource(shader, str);       //  Compile the shader       gl.compileShader(shader);       //  Check for errors       if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) == 0)          alert(gl.getShaderInfoLog(shader));       //  Return shader       return shader;    }    //    //  Compile shader program    //    function CompileShaderProg(gl,vert,frag)    {       //  Compile the program       var prog  = gl.createProgram();       gl.attachShader(prog , CompileShader(gl,vert));       gl.attachShader(prog , CompileShader(gl,frag));       gl.linkProgram(prog);       //  Check for errors       if (gl.getProgramParameter(prog, gl.LINK_STATUS) == 0)          alert(gl.getProgramInfoLog(prog));       //  Return program       return prog;    }    var text;    var image;    function initTexture()     {       text = gl.createTexture();       image = new Image();       image.onload = function() {handleTextureLoaded(text, image)}       image.src = wall.png;    }    function handleTextureLoaded(txt, img)     {       gl.bindTexture(gl.TEXTURE_2D, txt);       gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);       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);    }    var gl,canvas;    function webGLStart()    {       //  Set canvas       canvas = document.getElementById(canvas);       //  Select canvas size       var size = Math.min(window.innerWidth,window.innerHeight)-10;       canvas.width  = size;       canvas.height = size;       //  Start WebGL       if (!window.WebGLRenderingContext)       {          alert(Your browser does not support WebGL. See http://get.webgl.org);          return;       }       try       {          gl = canvas.getContext(experimental-webgl);       }       catch(e)       {}       if (!gl)       {          alert(Can't get WebGL);          return;       }       //  Set viewport to entire canvas       gl.viewport(0,0,size,size);       //  Initialize textures       initTexture();       //  Load Shader       var prog = CompileShaderProg(gl,shader-vs,shader-fs);       //  Set program       gl.useProgram(prog);       //  Set projection       var ProjectionMatrix = new CanvasMatrix4();       ProjectionMatrix.ortho(-2.5,+2.5,-2.5,+2.5,-2.5,+2.5);       //  Vertex array count       var n = 18;       //  Pyramid vertex coordinates       var xyz =        [        -1,-1,-1,   1,-1,-1,    -1,-1,1,        1,-1,-1,    -1,-1,1,    1,-1,1,        0,1,0,      -1,-1,1,    1,-1,1,        0,1,0,      1,-1,-1,    -1,-1,-1,        0,1,0,      1,-1,1,     1,-1,-1,        0,1,0,      -1,-1,-1,   -1,-1,1,       ];       var verts = gl.createBuffer();       gl.bindBuffer(gl.ARRAY_BUFFER,verts);       gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(xyz),gl.STATIC_DRAW);       //  Pyramid colors       var rgb =        [        0.84,0.62,0.32, 0.84,0.62,0.32, 0.84,0.62,0.32,        0.84,0.62,0.32, 0.84,0.62,0.32, 0.84,0.62,0.32,            0.84,0.62,0.32, 0.84,0.62,0.32, 0.84,0.62,0.32,        0.84,0.62,0.32, 0.84,0.62,0.32, 0.84,0.62,0.32,        0.84,0.62,0.32, 0.84,0.62,0.32, 0.84,0.62,0.32,        0.84,0.62,0.32, 0.84,0.62,0.32, 0.84,0.62,0.32,       ];       var color = gl.createBuffer();       gl.bindBuffer(gl.ARRAY_BUFFER,color);       gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(rgb),gl.STATIC_DRAW);       //  Pyramid texture coordinates       var tex =       [        0,0,    4,0,    0,4,        4,0,    0,4,    4,4,        2,4,    0,0,    4,0,        2,4,    0,0,    4,0,        2,4,    0,0,    4,0,        2,4,    0,0,    4,0,       ];       var texture = gl.createBuffer();       gl.bindBuffer(gl.ARRAY_BUFFER,texture);       gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(tex),gl.STATIC_DRAW);        //  Cube normals       var nor =       [        0,-1, 0,                    0,-1, 0,                    0,-1, 0,        0,-1, 0,                    0,-1, 0,                    0,-1, 0,        0,0.4472136,0.89442719,     0,0.4472136,0.89442719,     0,0.4472136,0.89442719,        0,0.4472136,-0.89442719,    0,0.4472136,-0.89442719,    0,0.4472136,-0.89442719,        0.89442719,0.4472136,0,     0.89442719,0.4472136,0,     0.89442719,0.4472136,0,        -0.89442719,0.4472136,0,    -0.89442719,0.4472136,0,    -0.89442719,0.4472136,0,       ];       var normals = gl.createBuffer();       gl.bindBuffer(gl.ARRAY_BUFFER,normals);       gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(nor),gl.STATIC_DRAW);       //  Set state to draw scene       gl.enable(gl.DEPTH_TEST);       gl.clearColor(0.8,0.8,0.8,1);       //  Mouse control variables       var x0 = y0 = move  = 0;       //  Rotation angles       var th = ph = 15;       //  Draw scene the first time       Display();       //       //  Display the scene       //       function Display()       {          //  Clear the screen and Z buffer          gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);          // Compute modelview matrix          var ModelviewMatrix = new CanvasMatrix4();          ModelviewMatrix.makeIdentity();          ModelviewMatrix.rotate(ph,0,1,0);          ModelviewMatrix.rotate(th,1,0,0);          // Set shader          gl.useProgram(prog);          //  Set projection and modelview matrixes                 gl.uniformMatrix4fv(gl.getUniformLocation(prog,ProjectionMatrix) , false , new Float32Array(ProjectionMatrix.getAsArray()));  gl.uniformMatrix4fv(gl.getUniformLocation(prog,ModelviewMatrix)  , false , new Float32Array(ModelviewMatrix.getAsArray()));  //  Set up 3D vertex array  gl.bindBuffer(gl.ARRAY_BUFFER,verts);  var XYZ = gl.getAttribLocation(prog,XYZ);  gl.enableVertexAttribArray(XYZ);  gl.vertexAttribPointer(XYZ,3,gl.FLOAT,false,0,0);  //  Set up 3D color array  gl.bindBuffer(gl.ARRAY_BUFFER,color);  var RGB = gl.getAttribLocation(prog,RGB);  gl.enableVertexAttribArray(RGB);  gl.vertexAttribPointer(RGB,3,gl.FLOAT,false,0,0);  //  Set up 3D normal array  gl.bindBuffer(gl.ARRAY_BUFFER,normals);  var NOR = gl.getAttribLocation(prog,NOR);  gl.enableVertexAttribArray(NOR);  gl.vertexAttribPointer(NOR,3,gl.FLOAT,false,0,0);  //  Set up 2D texture array  gl.bindBuffer(gl.ARRAY_BUFFER,texture);  var TEX = gl.getAttribLocation(prog,TEX);  gl.enableVertexAttribArray(TEX);  gl.vertexAttribPointer(TEX,2,gl.FLOAT,false,0,0);  gl.activeTexture(gl.TEXTURE0);  gl.bindTexture(gl.TEXTURE_2D, text);  gl.uniform1i(gl.getUniformLocation(prog, uSampler), 0);  //  Draw all vertexes  gl.drawArrays(gl.TRIANGLES,0,n);  //  Disable vertex arrays  gl.disableVertexAttribArray(XYZ);  gl.disableVertexAttribArray(RGB);  gl.disableVertexAttribArray(NOR);  gl.disableVertexAttribArray(TEX);  //  Flush  gl.flush();       }       //       //  Resize canvas       //       canvas.resize = function ()       {          var size = Math.min(window.innerWidth, window.innerHeight)-10;          canvas.width  = size;          canvas.height = size;          gl.viewport(0,0,size,size);          Display();       }       //       //  Mouse button pressed       //       canvas.onmousedown = function (ev)       {          move  = 1;          x0 = ev.clientX;          y0 = ev.clientY;       }       //       //  Mouse button released       //       canvas.onmouseup = function (ev)       {          move  = 0;       }       //       //  Mouse movement       //       canvas.onmousemove = function (ev)       {          if (move==0) return;          //  Update angles          ph -= ev.clientX-x0;          th += ev.clientY-y0;          //  Store location          x0 = ev.clientX;          y0 = ev.clientY;          //  Redisplay          Display();       }    }    </script>     <!--      Web page      -->    </head>    <body onload=webGLStart(); onresize=canvas.resize();>     <H1>WebGL Simple Pyramid</H1>    <canvas id=canvas width=500 height=500></canvas>     </body>    </html>
WebGL: Why are my textures black?
opengl;texture;webgl;javascript