[과제] 웹트랙 2주차) 테스트 프로그램 구동 채다희

💡 ThorVG Web에는 대표적으로 두가지의 테스트 프로그램이 존재합니다.

• Perf Test : 다수의 로티 애니메이션을 기준으로 실 앱 환경에서의 성능 벤치마크 분석 툴을 제공
• Playground : WebCanvas로 구동되는 ThorVG의 다양한 예제를 제공

이번 과제에서는 두 앱을 로컬에서 빌드하여 구동해보시고, 어떻게 구성되어있는지 앱의 목적과 WebCanvas와의 연동 관계를 중심으로 자율 형식의 글을 남겨주세요. 마지막으로 Playground에서 WebCanvas 기반의 커스텀 예제를 작성하여 공유해주세요.

1. ThorVG Perf Test 코드, 프로그램 분석

여러 Lottie 애니메이션을 WebCanvas로 렌더링하고 브라우저 환경의 성능을 측정하는 Next.js 애플리케이션

구성요소

WebCanvas 연동 구조

WebCanvas 모듈과 WASM 파일을 불러온 뒤 TVG.Canvas를 생성하여 HTML Canvas와 ThorVG 렌더러를 연결한다.

각 Lottie 파일은 TVG.Animation으로 로드되며, Animation의 picture 객체가 Canvas에 추가한다.

렌더링은 requestAnimationFrame 기반으로 동작하며, 여러 벡터 객체를 하나의 Canvas에서 합성하고 관리하는 렌더링 계층으로 사용된다.

const anim = new TVG.Animation();
anim.load(lottieData);
tvgCanvas.add(anim.picture);

animation.frame(currentFrame);
canvas.update().render();

그리드 가상화

화면에 보이는 Lottie만 Canvas에 추가하고, 화면 밖으로 벗어난 Picture는 Canvas에서 제거한다.

if (shouldShow) {
  tvgCanvas.add(entry.picture);
} else {
  tvgCanvas.remove(entry.picture);
}

따라서 count=100은 100개를 매 프레임 렌더링한다가 아니라, 많은 Animation 객체를 유지하면서도 실제 렌더링 부하는 화면에 표시되는 객체 수로 제한한다는 의미이다.

• count는 로드하고 보관하는 Animation 객체 수를 나타낸다.
• 실제 렌더링 수는 현재 화면에 보이는 Picture 수에 가깝다.

화면 밖 Picture를 제거하는 것은 의도적인 가상화 최적화라고 생각된다.

🤔 다만, 테스트 과정에서 간헐적으로 창 크기 확대 후, 그리드의 일부 애니메이션이 표시되지 않는 문제가 발생했다. set 동작에서 작은 높이를 기준으 로 Canvas를 다시 생성하기 때문에 문제가 발생하는 것으로 파악했다. issue 를 생성해서 해결할 수 있는 문제인지 파악해도 좋을 것 같다!

1. 브라우저 창 높이를 줄여 스크롤 생성
2. 100 animations 선택 (set)
3. 브라우저 창 높이를 다시 늘린다.
4. 기존의 작은 Canvas 높이가 유지되고 아래쪽 애니메이션이 표시되지 않는 문제

성능 측정 방식

☑️ 벤치마크 단계

1. 워밍업
2. 일정 시간 동안 프레임과 메모리 정보 수집
3. FPS, 프레임 시간, p95, 메모리 사용량 계산

Viewer에서는 최근 프레임 데이터를 기준으로 FPS와 프레임 시간을 실시간으로 표시하고, 프레임 지연이 발생한 구간을 구분한다.

☑️ 테스트 조건 재현

선택된 Lottie 목록은 seed 값으로 URL에 저장된다.

동일한 seed를 사용하면 같은 Lottie 조합으로 렌더러와 WebCanvas 버전별 성능을 비교할 수 있다.

자동 벤치마크

scripts/bench.mjs는 Next.js 서버를 실행하고 Playwright Chromium으로 테스트 페이지에 접근하여 벤치마크 결과를 수집한다. yarn bench

헤드리스 환경에서는 GPU 설정이 실제 브라우저 실행 환경과 다를 수 있으므로 WebGL/WebGPU 성능은 일반 브라우저에서도 별도로 확인할 필요가 있다.

2. ThorVG Playground 코드, 프로그램 분석

WebCanvas의 다양한 기능을 예제 코드로 확인하고, 수정 결과를 Canvas에서 바로 실행할 수 있는 Next.js 애플리케이션

구성요소

화면 구성

메인 화면은 showcaseExamples에 등록된 예제를 카드 목록으로 표시한다.

예제를 선택하면 코드 편집기와 Canvas Preview로 구성된 상세 화면이 열린다. 코드를 수정하면 변경된 결과를 Canvas에서 확인할 수 있다.

WebCanvas 초기화, 코드 실행 흐름

각 예제에는 WebCanvas 초기화와 Canvas 생성 코드가 포함되어 있다.

Playground 내부에서는 CanvasPreview가 WebCanvas와 Canvas를 미리 초기화한다. 이후 code-transformer.ts가 예제 코드의 import, init(), new Canvas() 부분을 제거한다. renderer만 추출해 공용 초기화에 반영하고 나머지는 버린다

const executableCode = transformCodeForExecution(code);

const executeFunction = new Function(
  'TVG',
  'canvas',
  'requestAnimationFrame',
  'performance',
  'console',
  'fetch',
  executableCode
);

await executeFunction(TVG, canvas, ...);

전체 실행 흐름: 예제 선택/수정 → 초기화 코드 제거 → TVG와 Canvas 주입 → 예제 코드 실행 → Canvas Preview 출력

화면에 표시되는 예제 코드를 그대로 실행하지 않고, Playground가 관리하는 공통 WebCanvas 실행 환경에서 핵심 코드만 실행하는 구조이다.

예제

렌더링

예제는 Shape, Scene, Text, Picture, Animation 등의 Paint 객체를 생성하고 Canvas에 추가한다.

const shape = new TVG.Shape();
shape.appendRect(100, 100, 200, 200);
shape.fill(255, 100, 100, 255);

canvas.add(shape);
canvas.render();

정적 예제는 객체를 추가한 뒤 한 번 렌더링한다. 애니메이션과 Lottie 예제는 프레임마다 상태를 갱신하고 canvas.update().render()를 호출한다.

Perf Test, Playground 빌드

Perf Test/Playground 디렉터리에서 의존성을 설치하고 프로덕션 빌드를 실행한다. yarn install yarn build

프로덕션 빌드 결과를 실행한다. yarn start

기본 접속 주소 http://localhost:3000

개발 서버 실행 yarn dev

Playground 예제

commits

커스텀 예제를 작성 후 등록방법은 lib/examples에 추가한 뒤 lib/examples/index.ts의 showcaseExamples 배열에 추가해야한다.