javascript - 如何获取 webgl 顶点的二维坐标？

Question

在本教程中:http://learningwebgl.com/blog/?p=28我们在 3d 空间中绘制一个三 Angular 形和一个正方形，我想在 Canvas 上获取顶点的 x,y 坐标。

所以我想得到这些顶点的二维坐标:http://s11.postimage.org/ig6irk9lf/static.png

抱歉我的英语不好，我希望你能理解。

Answer 1

您必须执行与 WebGL 相同的计算。它需要一个 3d 点 [X,Y,Z] 到齐次点 [x,y,z,w] 通过

[x,y,z,w] = pMatrix * mvMatrix * [X,Y,Z,1]

要获取裁剪空间坐标，除以 w:

[x/w,y/w,z/w]

x/w 和 y/w 在 [-1,1] 范围内。要将它们转换为视口(viewport)坐标，请根据 Canvas 大小缩放它们。

[x/w,y/w] -> [(1 + x/w)*canvas.width/2, (1 - y/w)*canvas.height/2]

请注意在最后一次变换中 y 坐标的“方向”是如何变化的。

有关更多信息，您可以谷歌“图形管道”。例如。 http://en.wikipedia.org/wiki/Graphics_pipeline