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

  • \$\begingroup\$ 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. \$\endgroup\$ – Andreas Sep 15 '17 at 18:58

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.