WebGL：顶点着色器变换和app / soft变换之间的区别

Question

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

gl_Position = uPMatrix * uMVMatrix * vec4（aVertexPosition，1.0）

我的画布是600x600px（但在这种情况下，画布大小无关紧要。）

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

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

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

Answer 1

如果你真的想要匹配顶点变换，你忽略了一些发生 AFTER 可编程顶点变换的操作。

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

1. 在顶点着色器之后和光栅化之前（pos.xyz / = pos.w）

   出现透视分割
   • 鉴于正交投影矩阵，这应该是无操作，pos.w始终为1.0 ...
     
     
2. 还有一个视口变换，它将从NDC空间和屏幕空间中取出坐标。
   
   
   • 视口变换与其他视图变换略有不同，因为视口不是使用矩阵定义的，它基本上只定义了缩放和偏移操作，对剪裁没有影响。




请花点时间查看此插图：

http://www.songho.ca/opengl/files/gl_transform02.png

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

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