강의 구성

각 레슨은 Markdown 문서와 독립 실행 데모로 구성합니다. ../css-matrix가 CSS/DOM/SVG 중심으로 Figma-like 에디터의 수학과 상태 모델을 설명했다면, 이 강의는 같은 편집기 문제를 Canvas, WebGL, WebGPU 중심으로 다시 구성합니다.

이 강의의 독자는 CSS position, transform, z-index, SVG, DOM 이벤트에는 익숙하지만 GPU 렌더링은 처음인 사람입니다. 따라서 shader나 pipeline을 먼저 설명하지 않습니다. 먼저 “DOM으로 공짜로 받던 것이 Canvas에서 왜 사라지는가”를 보여주고, 그 빈자리를 scene graph, matrix, hit testing, renderer abstraction으로 채웁니다.

최종 목표는 WebGL/WebGPU API를 외우는 것이 아니라 다음 구조를 직접 만드는 것입니다.

editor state
  -> scene graph
  -> camera / matrix
  -> WebGL renderer
  -> editor tools
  -> WebGPU renderer

Part 0. CSS에서 GPU로 사고 전환

Part 1. Canvas editor의 기본 뼈대

Part 2. WebGL 2D renderer

Part 3. Editor tool math

Part 4. Figma-like scene graph

Part 5. Image, text, vector

Part 6. WebGPU로 옮기기

Part 7. Capstone

Part 8. Three.js로 WebGL 개발하기

Appendix A. GPU editor debugging

Appendix B. Browser and GPU compatibility

Appendix C. Asset pipeline

Appendix D. Interaction polish and motion

Appendix E. Production architecture

Appendix F. 2D renderer engine patterns

Appendix G. Rendering editor production gaps

강의의 기준선

이 강의는 처음부터 WebGPU만 사용하지 않습니다. WebGL로 안정적인 2D renderer를 먼저 만들고, 같은 scene model 뒤에 WebGPU renderer를 붙입니다.

editor state
  -> scene model
    -> WebGL renderer
    -> WebGPU renderer

이 구조를 지키면 WebGPU를 배우는 동안에도 편집기 수학과 상태 모델은 흔들리지 않습니다. 렌더러는 바뀌지만 사용자가 도형을 선택하고, 움직이고, 저장하는 방식은 그대로 남습니다.