title: cannot ever figure out how to do texture jobs in twgl
body: <p>This is the code I have for vs/fs and a simple cube that I want to put on to my canvas. some of the part is omitted for the sake of lengthiness.</p>
  
  <pre><code>&lt;script id="cube-vs" type="notjs"&gt;
      precision highhp float;
      attribute vec3 vpos;
      attribute vec3 vnormal;
      attribute vec2 vtex;
      varying vec3 fColor;
      varying vec3 fNormal;
      varying vec2 fTexCoord;
  
      uniform mat4 view;
      uniform mat4 proj;
      uniform mat4 model;
      uniform vec3 lightdir;
      uniform vec3 cubecolor;
  
      void main(void) {
          gl_Position = proj * view * model * vec4(vpos, 1.0);
          vec4 normal = normalize(model * vec4(vnormal,0.0));
          float diffuse = .2 + abs(dot(normal, vec4(lightdir,0.0)));
          fColor = (cubecolor * diffuse);
          fTexCoord = vtex;
      }
  &lt;/script&gt;
  &lt;script id="cube-fs" type="notjs"&gt;
  
      precision highhp float;
  
      varying vec3 fColor;
      varying vec3 fNormal;
      varying vec2 fTexCoord;
  
      uniform sampler2D texSampler;
  
      void main(void) {
          vec4 texColor = texture2d(texSampler, fTexCoord);
          gl_FragColor = vec4(fColor*texColor.xyz,1.0);
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>the cube</p>
  
  <pre><code>...
  
      Cube.prototype.init = function(drawingState) {
          var gl=drawingState.gl;
          // create the shaders once - for all cubes
          if (!shaderProgram) {
              shaderProgram = twgl.createProgramInfo(gl, ["tree-vs", "tree-fs"]);
          }
          if (!buffers) {
              var arrays = {
                  vpos : { numComponents: 3, data: [...] },
                  vnormal : {numComponents:3, data: [...]},
                  vtex : {numComponents:2, data: [
                      1,0,0,0,0,1,1,1,
                      1,0,0,0,0,1,1,1,
                      1,0,0,0,0,1,1,1,
                      1,0,0,0,0,1,1,1,
                      1,0,0,0,0,1,1,1,
                      1,0,0,0,0,1,1,1,
                  ]},
                  indices : {[...]}
                  };
              buffers = twgl.createBufferInfoFromArrays(gl,arrays);
          }
          if (!texture) {
              texture = twgl.createTexture(gl, {src:textures/tree.jpg});
          }    
      };
      Cube.prototype.draw = function(drawingState) {
          var modelM = twgl.m4.scaling([this.size*1.4,this.size*1.4,this.size*1.4]);
          twgl.m4.setTranslation(modelM,this.position,modelM);
          var gl = drawingState.gl;
          gl.useProgram(shaderProgram.program);
          twgl.setBuffersAndAttributes(gl,shaderProgram,buffers);
          twgl.setUniforms(shaderProgram,{
              view:drawingState.view, proj:drawingState.proj, lightdir:drawingState.sunDirection,
              cubecolor:this.color, model: modelM, texSampler: texture);
          twgl.drawBufferInfo(gl, gl.TRIANGLES, buffers);
      };
  </code></pre>
  
  <p>the cube worked fine without texture
  but when I tried to put texture on, it never works
  I tried almost everything and I still can't figure out how to put texture on.
  so, how can i put texture on?</p>
  
  <p>any hints would be very much appreciated.</p>
  
  <p>*********edit
  I have managed to successfully upload the texture coordinates and uniforms
  but the image does not show up and the cube is colored light blue.
  any suggestions would be very much appreciated.</p>