为什么这个图像不是垂直镜像的？

Question

在webGl中使用的许多符号和域约定中，我发现自己有点迷失了。以这个regl示例为例(它显示狒狒测试图像)。以下是我对此的理解：

• 没有指定原语；它可能推断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}**!**相对应。
• 所显示的图像实际上是水平镜像的！(与此相比)，但它不是垂直镜像的。，在最终转换为/从屏幕上像素坐标的过程中，必须有，，其他的，它抵消了y.中的负面因素。
• 然而，谷歌搜索并没有提供任何证据表明，相对于屏幕，gl_Position在任何方面都得到了反映。我看到了关于它是左撇子的讨论，但这仅仅是通过否定z相对于世界坐标。(例如这里的这个问题)

简单地说，在我看来，这个图像也应该是垂直的。

，我错过了什么？

为了子孙后代，代码转载如下：(麻省理工学院获发牌照)

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放在左下角。

这是很难解释的，但如果您查看这个例子，您将看到在屏幕外呈现纹理时，不需要翻转。只有当呈现到画布/屏幕时才会出现这种情况。

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

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

要验证纹理是否翻转，这是原版

​

​

您可以在regl示例中看到呈现翻转

​

​

至于学习WebGL和剪辑空间我推荐这些教程