Hackathon-FFV

ThorVG 엔진을 직접 확장해 만든 인터랙티브 데모 모음. Vite + TypeScript + @thorvg/webcanvas (WASM) 위에서 동작하며, 두 개의 페이지를 제공한다.

• Interactive Lottie — 오른쪽 그림판에 그린 스트로크가 왼쪽 Lottie 애니메이션의 이젤 캔버스 안으로 실시간 합성된다. JS 는 pointer 이벤트만 전달하고, 두 캔버스 사이의 데이터 흐름은 엔진(C++/WASM)이 처리한다.
• Wipe Typo — 텍스트 wipe 트랜지션 데모.

배포: https://osca-thorvg.github.io/Hackathon-FFV/

---

저장소 계층

Hackathon-FFV (이 리포)               ← Vite 앱, 배포 대상
    └─ file: dep ─→ thorvg.web         ← @thorvg/webcanvas (TS + WASM 빌드 스크립트)
                       └─ submodule ─→ thorvg fork  ← C++ core (inject/link API)

로컬에서는 vendor/webcanvas/ 로 vendored 된 dist 를 참조한다 (package.json 의 "@thorvg/webcanvas": "file:./vendor/webcanvas").

---

로컬 실행

pnpm install
pnpm dev              # http://localhost:5173/Hackathon-FFV/
pnpm build            # tsc + vite build → dist/
pnpm preview          # 빌드 결과 미리보기

WASM 재빌드 후 vendor 동기화

C++ 엔진이나 TS wrapper 를 수정했을 때:

# 1) 인접한 thorvg.web 에서 WASM 재빌드
cd ../thorvg.web/packages/webcanvas
source $EMSDK/emsdk_env.sh
pnpm build

# 2) 이 리포로 돌아와 vendor 동기화
cd -
pnpm sync:wasm        # vendor/webcanvas/dist ← thorvg.web/packages/webcanvas/dist
                      # public/thorvg.wasm 도 함께 갱신

pnpm sync:wasm 은 scripts/sync-webcanvas.sh 를 실행한다. 스토어 캐시가 문제되면 rm -rf node_modules/.pnpm/@thorvg+webcanvas@file+vendor+webcanvas node_modules/.vite && pnpm install.

---

프로젝트 구조

src/
  main.ts                     hash-based 라우팅 + ThorVG init
  lib/
    painter-live.ts           엔진 레벨 mirror + inject 로직
  pages/
    interactive-lottie/       그림판 → Lottie 이젤 합성 데모
    wipe-typo/                텍스트 wipe 트랜지션 데모
  assets/                     painter-dog.json (Lottie), 기타 이미지
public/
  thorvg.wasm                 sync:wasm 이 갱신하는 실행 아티팩트
vendor/
  webcanvas/                  thorvg.web 빌드 결과의 로컬 복사본
scripts/
  sync-webcanvas.sh           WASM + wrapper 동기화
docs/
  README.md                   Painter Live 초기 설계 (Phase 0)
  interactive-lottie.md       엔진 합성 접근 노트
  painter-live-plan.md        Phase 로드맵
  deploy.md                   GH Pages 배포 파이프라인
  retrospective.md            회고
thorvg-engine-changes.md      upstream 엔진 수정 전체 변경 목록

---

라우팅

Hash 기반 (#/interactive-lottie, #/wipe-typo) — GH Pages 정적 서빙에서 새로고침해도 index.html 로 fallback 하도록 설계.

vite.config.ts 의 base: "/Hackathon-FFV/" 가 프로덕션 URL 프리픽스. WASM 도 import.meta.env.BASE_URL 로 로드해 dev/prod 양쪽 대응.

---

배포

GitHub Actions 로 main 푸시마다 자동 배포. CI 는 thorvg.web 리포까지 함께 checkout → Emscripten/Meson/Ninja 설치 → WASM 빌드 → Vite 빌드 → Pages 업로드.

---