Javascript 精灵的拉伸与画布尺寸成反比

我有一个小程序，我正在工作与2D转换渲染精灵，链接。我的问题是，我试图渲染一个100px×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)

顶点着色器：

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

随意玩弄笔中的变量，尤其是画布尺寸；向下缩放尺寸时，精灵的尺寸将向上缩放，反之亦然

---

另外，我不关心纹理是如何倒转的。稍后我会将其搁置。

您的代码是正确的，但是您忘记了指定视口。 在进行任何绘图调用之前添加此选项（在您的情况下，最好在

gl.clear（）

之后）

WebGL API的WebGLRenderingContext.viewport（）方法设置 视口，指定x和y的仿射变换 将设备坐标归一化为窗口坐标

---

您的代码是正确的，但是您忘记指定视口。 在进行任何绘图调用之前添加此选项（在您的情况下，最好在

gl.clear（）

之后）

WebGL API的WebGLRenderingContext.viewport（）方法设置 视口，指定x和y的仿射变换 将设备坐标归一化为窗口坐标

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

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