Viewport for pixelart (WebGL)

I'm trying to display 16x16 pixel art textures (all textures have 16x16), but they are not displayed how I expected (they are kind of blurry). I have seen this question before question, but this was not answering my question.

My approach:

I use the resize from this url webglfundamentals

Which means my canvas has the following properties :

• width:100vw
• height:100vh

Then I set my viewport to:

• gl.viewport(0,0,gl.canvas.width, gl.canvas.height)

For the sprite rendering I use a orthographic camera:

• function ortho(out, 0, gl.canvas.width, 0, gl.canvas.height, 0, 1) (from glmatrix)

The sprite I'am trying to display consists of this vertices :

• new Float32Array([-0.5, -0.5, 0.0, 0.5, -0.5, 0.0, -0.5, 0.5, 0.0, 0.5, 0.5, 0.0]);

which means it is very small, so I scaled them up. I understand that my original texture has only the size 16x16 and when I scale it up it gets stretched. So my question is how would you setup the viewport and why? (Also an explanation would be nice, since I have the feeling I did not quite understand the connection between viewport, orthographic camera and width and height of the canvas).

• If you don´t get the parts don´t try the combo. For starters skip ortho completely and render directly into NDC space where -1 is bottom/left and 1 is top/right. Resize canvas and see what happens. Then make an ortho so that ratio is preserved. – Andreas Sep 15 '17 at 18:58

gl.texParameterf(texture, gl.TEXTURE_MAG_FILTER, gl.NEAREST)