Sprite 的拉伸与 canvas 尺寸成反比

Sprite is being stretched inversely proportional to canvas dimensions

我正在开发一个小程序来渲染具有 2D 变换的精灵,link here。我的问题是我试图渲染一个 100px x 100px 的正方形,但它被拉伸成一个矩形。我完全不知道有问题的代码是什么,但这里有一些相关的部分。

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)

顶点着色器:

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;
}

随意摆弄笔中的变量,尤其是 canvas 维度;当你缩小一个尺寸时,精灵的那个尺寸会放大,反之亦然。

P.S。我不关心纹理是如何反转的。我暂时搁置了它。

您的代码是正确的,但是您忘记指定视口。 在您进行任何绘制调用之前添加此权利(在您的情况下,最好在 gl.clear() 之后)

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

The WebGLRenderingContext.viewport() method of the WebGL API sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.