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

Dan*_*Fox 4 javascript coordinates webgl html5-canvas

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

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

抱歉我的英语不好,我希望你能理解.

bra*_*jam 5

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

[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