search

PaintLab / PixelFarm

From Vectors to (sub) Pixels, C# 2D Rendering Library
Other
156 stars 20 forks source link

[INFO] GLCanvas Coordinate note #43

Closed prepare closed 5 years ago

prepare commented 5 years ago

GLCanvas

This note is about coordinate of our GLCanvas implementation.

  1. I use GLES2 or GLES3. (Angle on Windows)
  2. Original GL, (0,0) is left-bottom
  3. Html5 Canvas/ SVG Canvas, (0,0) is left-top

on GLRenderSurface

we have orthoView (transformation) matrix and orthoFlipYandPullDown matrix

gl_rendersurface

pic 1: orthoView and orthoFlipYandPullDown transformation matrix

Before FlipY I draw red rects from (0,0)-> (5,5) -> (10,10)....

gl_canvas_before_flipy pic 2: Before FlipY, original GL, small red rectangles run from left-bottom to right-top

After FlipY and Pull-down

glcanvas_after_flipy pic 3: after FlipY and Pull down , mimic Html5/SVG/UI canvas, small red rects run from left-top to right-bottom

Before FlipY

glcanvas_before_flipy_lion

pic 4: Before FlipY, lion.svg

After FlipY and Pull-down

glcanvas_after_flipy_lion

pic 5: After FlipY and pull-down, lion.svg

prepare commented 5 years ago

What happened if FlipY but not pull-down?

This is the result.

gl_canvas_flipy_not_pulldown

pic 6: Where is my lion?

The lion is out-of-screen (Y axis) after FlipY

glcanvas_before_flipy_lion_not_pulldown

pic 7: FlipY only

so we need to pull it down into the viewport

glcanvas_before_flipy_lion2

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

prepare commented 5 years ago

(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.

gl_canvas_flip

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 ...

gl_canvas_flip2

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

gl_canvas_flip3

pic 10: blank screen after FlipYandPullDown

so left,top is not always x,y

if Origin = left-bottom

glcanvas_draw_from_left_bottom

pic 11: draw at image at (left,top) on left-bottom-origin canvas

glcanvas_draw_from_left_bottom_2

pic 12: from 11, this is the result, 8 rects

if Origin = left-top

glcanvas_draw_from_left_top

pic 13: draw at image at (left,top) on left-top-origin canvas

glcanvas_draw_on_left-top_origin_canvas pic 14: from 13, this is the result, 8 rects