[ThorVG Web] 1주차) 프로젝트 작업환경 구축 이효진

[jinlee0310]

개발 가이드 요약

Overview

thorVG web은 2개의 패키지가 있다.

• thorvg/lottie-player
• throvg/webcanvas

두 패키지는 같은 ThorVG WASM core을 공유하고 multiple render 백엔드를 지원한다.

Prerequisites

• nodejs20+, pnpm10+
• emscripten sdk
• meson & ninja

node와 pnpm은 이미 설치되어 있고 meson과 ninja도 1주차 과제를 하며 설치완료했다.
남은 것은 emscripten을 설치하는 것이다.
공식문서에서 나오는대로 emscripten을 설치한다. 버전은 6.0.0을 사용한다. 이전 오프라인 모임에서 6.0.0을 설치해야 한다고 얼핏? 들었던 것 같다.

Environment Setup

zsh를 사용하고 있으므로 .zshrc에 환경변수들을 등록한다.

export EMSDK={absolute path}/emsdk
export PATH=$EMSDK/upstream/emscripten:$PATH
source .zshrc

echo $EMSDK
emcc --version # 6.0.0

Packages

submodule인 thorvg를 먼저 받는다.

git submodule update —init —recursive

그리고 packages의 lottie-player과 webcanvas 폴더에 가서 각각 아래와 같이 실행한다.

pnpm install
pnpm build

루트 폴더에서 npx http-server . -p 8080 를 실행한다.

/examples/live-editor

/examples/lottie

/examples/scene