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