3

我正在尝试在 javascript 中执行与在顶点着色器中相同的转换。我的顶点着色器正在像典型的 WebGL 示例一样转换顶点：

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0)

我的画布是 600x600 像素（但在这种情况下，画布大小变得无关紧要。）

结果 gl_Position.xy 不是我所期望的。它似乎不是在 0,600 或 -300,300 或 -1,1 范围内，而是大约为 -6,6。（我最终在着色器中编写了测试，例如：如果转换后的 gl_Position.x > 5.0 将其着色为红色。）

无论画布大小如何，该 -6,6（或 12x12）绘图区域都保持不变。

添加比例因子并通过眼睛调整后，我设法将我的 javascript 转换与着色器转换同步。但是如何从 WebGL 中获取转换后的顶点的绘图区域的大小？-6,6 范围是如何确定的？

4

1 回答 1

4

如果您真的想匹配顶点变换，那么您忽略了在可编程顶点变换之后发生的一些操作。

您忘记gl_Position.xyz了在获得您在问题中讨论的 NDC 或屏幕空间坐标之前仍然需要进行一些转换。

  1. 在顶点着色器之后pos.xyz和光栅化（ /= pos.w）之前发生了透视划分

    • 给定一个正交投影矩阵，这应该是一个空操作，pos.w将永远是1.0......

  2. 还有一个视口变换将坐标从 NDC 空间带入屏幕空间。

    • 视口变换与其他所有的有点不同，因为视口不是使用矩阵定义的，它基本上只是定义了缩放和偏置操作，对裁剪没有影响。


花点时间回顾一下这幅插图：


（来源：songho.ca）

顶点着色器的输出在此图中标记为Clip Coordinates（剪辑空间），您应该知道原始组装和光栅化Window Coordinates是最终完成转换为（屏幕空间）的地方。此外，上述要点中讨论的两个操作不是可编程流水线的一部分。

如果您想知道，图表来自 Song Ho Ahn (안성호) 的网站。这是一篇题为『OpenGL Transformation』的文章的一部分，它可能有助于强化我在这个答案中讨论的内容。

于 2013-10-13T03:37:39.960 回答