Viewport for pixelart (WebGL)

Question

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).

Answer 1

It's not a problem with the canvas. The textures get blurry because of the max filter parameter. You can set it with the texParameterf function:

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

If you instead want to make the viewport smaller (the size of the display in pixels), then you need to use gl.viewport with the desired width and height of the canvas.