WebGL：顶点着色器变换和应用/软件变换的区别。

Question

WebGL：顶点着色器变换和应用/软件变换的区别。

opengl-es-2.0webgl

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的范围是如何确定的？

- pixelmike

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andon M. Coleman · Accepted Answer

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

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

1. 在顶点着色器之后且光栅化之前会发生透视除法（pos.xyz / = pos.w）。 - 对于正交投影矩阵，这应该是一个无操作，pos.w始终为1.0... 2. 还有一个视口变换，将坐标从NDC空间转换为屏幕空间。 - 视口变换与所有其他变换略有不同，因为视口不是使用矩阵定义的，它基本上只定义了一个比例和偏移操作，并且对剪裁没有影响。

请花一些时间查看这个插图：

_{(来源: songho.ca)}

在这张图中，你的顶点着色器的输出标记为剪裁坐标（剪裁空间），你应该知道，原始组装和光栅化是将其转换为窗口坐标（屏幕空间）的最终步骤。此外，上面列出的两个操作不是可编程管线的一部分。

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