title: WebGL image rendering bad quality
body: <p>I have a problem with image rendering in WebGL: I have a canva, with a quad that takes the whole canvas, and a texture which is supposed to be mapped onto the whole quad (I have set the correct texture coordinates).</p>
  
  <p>The image is a Uint8array containing RGB data (in this order) and the image is 1024*768 pixels. I have the correct buffer. Here is the link to the image.</p>
  
  <p><img src="https://i.stack.imgur.com/DrWGL.png" alt="Original Image"></p>
  
  <p>The problem is the following: when rendered into WebGL, my picture becomes blurry and fuzzy, even if I have a canva that is the size of the image. See the result below:</p>
  
  <p><img src="https://i.stack.imgur.com/k3rhr.png" alt="Rendered via WebGL"></p>
  
  <p>Now for the code: Here is the code I use to create the texture handle:</p>
  
  <pre><code>//texture
  that.Texture = that.gl.createTexture();         
  that.gl.bindTexture(that.gl.TEXTURE_2D, that.Texture);                          
  
  // Set the parameters so we can render any size image.
  that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_S, that.gl.CLAMP_TO_EDGE);
  that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_WRAP_T, that.gl.CLAMP_TO_EDGE);
  that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MIN_FILTER, that.gl.NEAREST);
  that.gl.texParameteri(that.gl.TEXTURE_2D, that.gl.TEXTURE_MAG_FILTER, that.gl.NEAREST);
  </code></pre>
  
  <p>The data is loaded onto the texture as follows:</p>
  
  <pre><code>this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGB, this.m_iImageWidth, this.m_iImageHeight,
  0, this.gl.RGB, this.gl.UNSIGNED_BYTE, this.m_aImage);
  </code></pre>
  
  <p>And finally, here is the fragment shader I use:</p>
  
  <pre><code>precision mediump float;
  uniform sampler2D u_image;
  varying vec2 v_texCoord;
  void main() 
  {
     gl_FragColor = texture2D(u_image, v_texCoord);
  }
  </code></pre>
  
  <p>I have tried a lot of options, from filtering to setting style option image-rendering pixelated, converting the image in RGBA and giving it RGBA values and the results is always the same crappy texture rendering. It looks like WebGL does not correctly interpolates the data even though the canvas is the exact same size as the texture. </p>
  
  <p>Does any one have a hint?</p>
  
  <p>Thanks in advance.</p>