local, world, screen 좌표계

이제 좌표계가 세 겹으로 늘어납니다.

처음에는 client와 local만 알아도 되는 것 같았습니다. 그런데 에디터가 커지면 오브젝트 내부 좌표, 문서 전체 좌표, 화면 좌표가 계속 섞입니다. 이걸 한 좌표계로 밀어붙이면 어느 순간 selection handle이 엉뚱한 곳에 서 있습니다.

그래서 local, world, screen을 분리합니다. 이름표가 다시 중요해졌습니다.

local 좌표는 오브젝트 내부, world 좌표는 문서 전체, screen 좌표는 camera와 zoom이 적용된 결과입니다.

local은 오브젝트 내부 좌표다

local 좌표는 오브젝트 자기 자신을 기준으로 합니다. 사각형 왼쪽 위를 (0, 0)으로 두면 오른쪽 아래는 (width, height)입니다.

회전하거나 이동해도 local bounds는 단순합니다.

local rect = 0..width, 0..height

그래서 hit testing을 local에서 하면 편합니다.

world 좌표는 무한 캔버스 위의 좌표입니다. 오브젝트가 어디에 놓였는지, 그룹이 어디에 있는지, 프레임이 어디에 있는지를 표현합니다.

부모가 있으면 local transform이 부모의 world transform과 합쳐집니다.

world = parentWorld * local

그룹 안에 들어간 자식은 자기 local 좌표를 유지하면서, 부모 transform을 따라 world 위치가 바뀝니다. 이 구조가 없으면 그룹 편집이 금방 꼬입니다.

screen 좌표는 viewport와 zoom이 적용된 결과입니다.

screen = viewportMatrix * world

화면에 그리는 overlay, pointer position, ruler label 위치는 screen 좌표와 연결됩니다. 하지만 저장 포맷은 보통 world나 local 값을 저장합니다. 화면은 사용자의 camera 상태에 따라 바뀌니까요.

CSS 기반 infinite canvas에서는 보통 content layer에 viewport transform을 적용하고, 각 오브젝트에는 local/world transform을 적용합니다.

canvas viewport layer: pan/zoom
object layer: object transform
overlay layer: selection and guides

overlay는 screen 좌표로 직접 그리거나, content와 같은 viewport matrix를 공유해야 합니다. 둘 중 하나로 통일해야 합니다. 중간에 섞으면 핸들이 슬금슬금 어긋납니다.

데모에서는 같은 점이 local, world, screen에서 어떤 숫자로 표시되는지 추적합니다.

오늘의 핵심은 좌표계를 많이 만드는 것이 복잡해 보이지만, 사실은 복잡함을 나누는 방법이라는 점입니다. 이름을 붙이면 문제가 얌전해집니다.