I am currently working on a small program to render sprites with 2D transformations. You can find the project here. The issue I am encountering is that when trying to render a 100px by 100px square, it ends up being stretched into a rectangle shape. I have tried to pinpoint the problem in my code but so far, I have been unsuccessful. Here are some relevant excerpts:
const position = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, position)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-w/2, h/2,
w/2, h/2,
-w/2, -h/2,
w/2, -h/2
]), gl.STATIC_DRAW)
gl.bindBuffer(gl.ARRAY_BUFFER, position)
gl.vertexAttribPointer(attrib.vertexPosition,
2, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(attrib.vertex)
gl.uniformMatrix2fv(uniform.transformMatrix, false, transform)
gl.uniform2f(uniform.translation, x+w/2, y+h/2)
gl.uniform2f(uniform.screenRes, gl.canvas.width, gl.canvas.height)
Vertex shader:
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat2 uTransformMatrix;
uniform vec2 uTranslation;
uniform vec2 uScreenRes;
varying vec2 vTextureCoord;
void main() {
gl_Position = vec4(2.0 * (uTransformMatrix * aVertexPosition + uTranslation) / uScreenRes - 1.0, 1.0, 1.0);
vTextureCoord = aTextureCoord;
}
Feel free to experiment with the variables in the pen, especially adjusting the canvas dimensions; changing one dimension affects the scaling of the sprite in the opposite dimension.
P.S. Please note that for now, I am not concerned about the texture inversion issue. I will address that at a later stage.