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

时间:2011-12-11 20:13:19

标签: javascript html5-canvas webgl coordinates

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

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

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

2 个答案:

答案 0 :(得分:5)

您必须执行与WebGL相同的计算。通过

对均匀点[X,Y,Z]需要3d点[x,y,z,w]

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

要获取剪辑空间坐标,请按w

进行划分

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

x/wy/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

答案 1 :(得分:0)

您必须手动计算它们。 WebGL仅为了自己的目的计算它们,即:渲染。

桌面GL有办法让这些位置恢复(转换反馈),但WebGL没有。