1
\$\begingroup\$

I'd like to build a simple framework which rendering combines web page DOM elements with WebGL, such that they're manipulable in the same coordinate space.

How does the plain CSS coordinate system relate to the one used by WebGL? How can I make sure the two line up (e.g. have a div and a WebGL quad transformed the same way)? Can I expect CSS3D transform coordinates to correspond to WebGL?

|improve this question
\$\endgroup\$
  • \$\begingroup\$ What exactly do you mean by 'DOM coordinates' vs 'GL Coordinates'? \$\endgroup\$ – Brendan Annable Mar 18 '15 at 10:57
  • \$\begingroup\$ I can't find enough information about their different coordinates, so I was hoping to get some insight about what it takes to have an element in DOM mapped out to coordinates in WebGL. For example, if you use the CSS3D Matrix transform, what info/math would you need to have a GL quad and a div in the same coordinate, being transformed together...? \$\endgroup\$ – John Heroic Mar 18 '15 at 20:12
  • \$\begingroup\$ I edited the question based on your comment, which should hopefully make it clear. Edit more if there's something more to add. (By the way, have you tried this already? What happened?) \$\endgroup\$ – Anko Mar 19 '15 at 11:29
  • 1
    \$\begingroup\$ Your WebGL coordinate system depends on how you set up your projection matrix. You might be able to set it up in a way that it corresponds to the pixel coordinates of the browser window, but my knowledge about WebGL is only superficial so I don't feel qualified to write an answer. \$\endgroup\$ – Philipp Mar 19 '15 at 11:40
2
\$\begingroup\$

They are not. Webgl coordinates refers to the positions of pixels in a canvas element and CSS describes the position of any HTML element in a page. You have to do math to apply the correct transformation if you wish align them. The default coordinate space for webgl is -1 being on one side of canvas and +1 on the other side (assuming viewport is same as whole canvas), with -1,-1 being the bottom left corner of canvas and +1,+1 being the top right.

You just need to find a transformation that maps the left side of canvas (x-position) to -1 in webgl and right side of canvas (x+width) to +1 in webgl and same for Y. Also in webgl the Y coordinate goes upwards from bottom of screen where as in HTML its 0 at top of screen.

|improve this answer
\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.