javascript - How to get the 2d coordinates of webgl vertices? - Stack Overflow

admin管理员组

文章数量:1023230

In this tutorial: /?p=28 we draw a triangle and a square in the 3d space, and I want to get the vertices' x,y coordinates on the canvas.

So I want to get the 2d coordinates of these vertices: .png

Sorry for my bad english, I hope you understand it.

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

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

Sorry for my bad english, I hope you understand it.

• javascript
• html5-canvas
• webgl
• coordinates

Share Improve this question Follow edited May 27, 2014 at 20:38 brainjam 19k88 gold badges6060 silver badges8484 bronze badges asked Dec 11, 2011 at 20:13 Danny FoxDanny Fox 40.8k2929 gold badges7171 silver badges9696 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You have to do the same calculation that WebGL does. It takes a 3d point [X,Y,Z] to homogeneous point [x,y,z,w] via

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

To get clip space coordinates, divide through by w:

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

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

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

Note how the 'direction' of the y coordinate changes in the last transformation.

For a little more information, you can Google "graphics pipeline". E.g. http://en.wikipedia/wiki/Graphics_pipeline

You have to do the math to pute them manually. WebGL only putes them for its own purposes, ie: rendering.

Desktop GL has ways of getting those positions back (transform feedback), but WebGL does not.

In this tutorial: /?p=28 we draw a triangle and a square in the 3d space, and I want to get the vertices' x,y coordinates on the canvas.

So I want to get the 2d coordinates of these vertices: .png

Sorry for my bad english, I hope you understand it.

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

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

Sorry for my bad english, I hope you understand it.

• javascript
• html5-canvas
• webgl
• coordinates

Share Improve this question Follow edited May 27, 2014 at 20:38 brainjam 19k88 gold badges6060 silver badges8484 bronze badges asked Dec 11, 2011 at 20:13 Danny FoxDanny Fox 40.8k2929 gold badges7171 silver badges9696 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You have to do the same calculation that WebGL does. It takes a 3d point [X,Y,Z] to homogeneous point [x,y,z,w] via

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

To get clip space coordinates, divide through by w:

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

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

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

Note how the 'direction' of the y coordinate changes in the last transformation.

For a little more information, you can Google "graphics pipeline". E.g. http://en.wikipedia/wiki/Graphics_pipeline

You have to do the math to pute them manually. WebGL only putes them for its own purposes, ie: rendering.

Desktop GL has ways of getting those positions back (transform feedback), but WebGL does not.

本文标签： javascriptHow to get the 2d coordinates of webgl verticesStack Overflow