Question

我正在开发一个小程序，用于通过2D转换渲染精灵，链接为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;
}

随意玩弄笔中的变量，尤其是画布尺寸；当您缩小尺寸时，子画面的尺寸会放大，反之亦然。

P.S。我不关心纹理如何反转。我将其搁置以备后用。

Answer 1

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

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

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

Sprite与画布尺寸成反比例拉伸

1 个答案: