How to get 2d coordinates of webgl vertices?

Question

In this tutorial: http://learningwebgl.com/blog/?p=28 we draw a triangle and a square in three-dimensional space, and I want to get the vertices x, y on the canvas.

So, I want to get 2d coordinates of these vertices: http://s11.postimage.org/ig6irk9lf/static.png

Sorry for my bad english, hope you can understand that.

Answer 1

You have to do the same calculation as WebGL. It takes a three-dimensional point [X,Y,Z] to a homogeneous point [x,y,z,w] through

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

To get the clip space coordinates, divide it by w :

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

x/w and y/w are in the range [-1,1]. To convert them to viewing coordinates, scale them according to the size of the canvas.

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

Notice how the "direction" of the y coordinate changes in the last transformation.

For more information, you can use the Google graphics pipeline. For instance. http://en.wikipedia.org/wiki/Graphics_pipeline

Answer 2

You must do the math in order to calculate them manually. WebGL only calculates them for its own purposes, that is: rendering.

Desktop GL has ways to return these positions (convert feedback), but WebGL does not.