如何獲取webgl頂點的2d座標？

Question

在本教程中：http://learningwebgl.com/blog/?p=28我們在三維空間中繪製了一個三角形和一個正方形，並且我想要在畫布上獲取頂點的x，y座標。

所以我想這些頂點的二維座標：http://s11.postimage.org/ig6irk9lf/static.png

對不起我的英文不好，我希望你能理解。

Answer 1

你必須做數學手動計算它們。 WebGL僅爲自己的目的計算它們，即：渲染。

桌面GL有辦法讓這些職位回來（變換反饋），但WebGL沒有。

Answer 2

您必須執行與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]。要將它們轉換爲視口座標，請根據畫布大小對它們進行縮放。

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

注意在y「方向」如何協調在過去的轉型變化。

有關更多信息，您可以谷歌「圖形管道」。例如。 http://en.wikipedia.org/wiki/Graphics_pipeline