为什么这个图像没有垂直镜像？

Question

我发现自己在 webGl 中使用的许多符号和域约定中有点迷失了。看看this regl example（它显示了狒狒测试图像）。以下是我对它的理解：

• 未指定原语；它可能会推断出GL_TRIANGLE。
• 因此，它会在世界空间中创建一个具有顶点(-2, 0)、(0, -2)、(2, 2) 的三角形曲面。在纸上画出来，似乎是专门选择了这个，因为它包含了[0,1] x [0,1] 区域。
• uv 从世界空间获取它的值，包括这个[0,1] x [0,1] 区域（这是texture2d 的域）。如果我理解正确，约定是 +u 指向图像的右边缘，+v 指向顶部。
• gl_Position 设置为 1 - 2*uv，因此图像在“剪辑空间”中占据 [-1,1] x [-1,1], z=0。
• 更重要的是，这也意味着+{u,v}方向对应-{x,y}！
• 显示的图像，是，实际上是水平镜像的！！ (compare to this) 但它不是垂直镜像的。 在屏幕像素坐标的最终转换过程中必须有其他因素，以抵消 y 中的负因子。
• 但是，Google 搜索没有发现任何证据表明gl_Position 以任何方式相对于屏幕进行镜像。我看到讨论说它是左撇子，但这只是从相对于世界坐标否定z 开始。 (e.g. this question here)

简而言之，在我看来，这张图片也应该垂直镜像。

我错过了什么？

---

后人，代码转载如下：(MIT licensed)

const regl = require('regl')()
const baboon = require('baboon-image')

regl({
  frag: `
  precision mediump float;
  uniform sampler2D texture;
  varying vec2 uv;
  void main () {
    gl_FragColor = texture2D(texture, uv);
  }`,

  vert: `
  precision mediump float;
  attribute vec2 position;
  varying vec2 uv;
  void main () {
    uv = position;
    gl_Position = vec4(1.0 - 2.0 * position, 0, 1);
  }`,

  attributes: {
    position: [
      -2, 0,
      0, -2,
      2, 2]
  },

  uniforms: {
    texture: regl.texture(baboon)
  },

  count: 3
})()

Answer 1

在 WebGL 和上面的示例中都没有“世界空间”这样的东西。 WebGL 只关心剪辑空间或（标准化设备坐标）。世界空间是应用程序/框架/库处理并提供着色器以最终提供 WebGL 剪辑空间（或标准化设备坐标）的东西

正如 LJ 所指出的，上面的代码不是 webgl 它是 regl，一些库。所以它要做的是取决于那个库而不是 webgl。例如，它可能会翻转它加载的所有纹理，我们怎么知道？也就是说，很容易猜到它会做什么。

您的问题的简短答案是整个图像被翻转，因为

gl_Position = vec4(1.0 - 2.0 * position, 0, 1);

改成

gl_Position = vec4(position, 0, 1);

你会看到它是颠倒的

它正在绘制一个巨大的三角形。输入值为

  position: [
      -2, 0,
      0, -2,
      2, 2]
  },

还有这一行

gl_Position = vec4(1.0 - 2.0 * position, 0, 1);

表示写入gl_Position的值是

1 - 2 * -2, 1 - 2 *  0
1 - 2 *  0, 1 - 2 * -2
1 - 2 *  2, 1 - 2 *  2

这是

 5,  1
 1,  5
-3, -3

如果我们相对于画布/屏幕/帧缓冲区绘制它，我们得到

蓝色区域是屏幕/画布

至于翻转，重要的是要注意纹理没有“向上”概念。更重要的是要记住纹理坐标 0,0 引用纹理中的第一个像素，1,1 引用纹理中的最后一个像素。

这是应用于该三角形的纹理坐标

纹理中的红点代表纹理坐标中的 0,0。

将 0,0 视为纹理的开始（而不是底部）的原因是，当您渲染到纹理（通过帧缓冲区）时，您不需要进行任何翻转。翻转仅在您最终渲染到屏幕时才起作用，因为 WebGL 在绘制到屏幕时碰巧将 -1、-1 放在左下角。

这有点难以解释，但是如果您查看this example，您会发现在屏幕外渲染到/从纹理渲染时不需要翻转。仅在渲染到画布/屏幕时。

如果您想看到大三角形，请将着色器更改为此

gl_Position = vec4((1.0 - 2.0 * position) * 0.2, 0, 1);

验证纹理是否翻转here's the original

您可以在 regl 示例中看到它的渲染翻转

关于学习WebGL和剪辑空间I'd recommend these tutorials