如何获取webgl顶点的2d坐标？

Question

在本教程中： http ： //learningwebgl.com/blog/？p = 28我们在3d空间中绘制一个三角形和一个正方形，我想在画布上得到顶点的x，y坐标。

所以我想得到这些顶点的2d坐标： http ： //s11.postimage.org/ig6irk9lf/static.png

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

Answer 1

您必须执行与WebGL相同的计算。 它需要3d点[X,Y,Z]到均匀点[x,y,z,w] via

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

要获得剪辑空间坐标，请通过w除以：

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

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

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

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

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

Answer 2

你必须做数学计算才能手动计算它们。 WebGL仅为了自己的目的计算它们，即：渲染。

桌面GL有办法让这些位置恢复（转换反馈），但WebGL没有。