[INFO] GLCanvas Coordinate note
prepare opened this issue · 2 comments
GLCanvas
This note is about coordinate of our GLCanvas implementation.
- I use GLES2 or GLES3. (Angle on Windows)
- Original GL, (0,0) is left-bottom
- Html5 Canvas/ SVG Canvas, (0,0) is left-top
on GLRenderSurface
we have orthoView (transformation) matrix and orthoFlipYandPullDown matrix
pic 1: orthoView and orthoFlipYandPullDown transformation matrix
Before FlipY
I draw red rects from (0,0)-> (5,5) -> (10,10)....
pic 2: Before FlipY, original GL, small red rectangles run from left-bottom to right-top
After FlipY and Pull-down
pic 3: after FlipY and Pull down , mimic Html5/SVG/UI canvas, small red rects run from left-top to right-bottom
Before FlipY
pic 4: Before FlipY, lion.svg
After FlipY and Pull-down
pic 5: After FlipY and pull-down, lion.svg
What happened if FlipY but not pull-down?
This is the result.
pic 6: Where is my lion?
The lion is out-of-screen (Y axis) after FlipY
pic 7: FlipY only
so we need to pull it down into the viewport
pic 8: FlipY and PullDown
When we render with (x,y) on the canvas, we can use the transformation matrix
to convert (x,y) to match with the canvas'origin kind
(Left,Top) is not always x,y
Render with named position
In my view, left-top position of both images should be left-top in my sense (see pic 8).
so => we need to map them to different coordinate values.
pic 8: Left-Top and Right-Top of both images
If I draw a rectangle (with texture) at left-top = (0,0) it should be rendered like this ...
pic 9: draw rectangle at left-top= (0,0)
from pic 9 left, if we draw rect at left-top= (0,0) then
do FlipY-and-pull down like pic7 we will get blank screen.
like pic 10
pic 10: blank screen after FlipYandPullDown
so left,top is not always x,y
if Origin = left-bottom
pic 11: draw at image at (left,top) on left-bottom-origin canvas
pic 12: from 11, this is the result, 8 rects
if Origin = left-top
pic 13: draw at image at (left,top) on left-top-origin canvas
pic 14: from 13, this is the result, 8 rects