[과제] 웹트랙 2주차) 테스트 프로그램 구동 이정민

[mungjin01]

1. Perf Test

Perf Test는 여러 개의 Lottie 애니메이션을 동시에 실행하면서 ThorVG 렌더러의 성능을 확인하는 프로그램이다.

렌더러는 다음 세 가지를 선택할 수 있다.

• Software
• WebGL
• WebGPU

애니메이션 개수와 크기를 바꾸면서 FPS, 프레임 시간, 메모리 사용량을 확인할 수 있다.

WebCanvas와의 연동

Perf Test는 애니메이션마다 HTML Canvas를 하나씩 만드는 방식이 아니라, 하나의 WebCanvas에 여러 Picture 객체를 배치한다.

스크롤할 때는 현재 화면에 보이는 애니메이션만 Canvas에 추가하고, 화면 밖으로 나간 객체는 제거한다. 따라서 많은 애니메이션을 설정하더라도 실제 렌더링은 현재 보이는 항목을 중심으로 진행된다.

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

entry.anim.frame((elapsed * entry.info.fps) % entry.info.totalFrames);
tvgCanvas.update().render();

버전 선택 기능을 사용하면 로컬 WebCanvas 빌드와 npm에 배포된 버전을 같은 앱에서 비교할 수 있다. URL에 애니메이션 목록을 seed 형태로 저장해 동일한 테스트 구성을 다시 실행할 수도 있다.

2.Playground

Playground는 WebCanvas API 예제를 실행하고 수정해 볼 수 있는 프로그램이다.

메인 화면에는 예제 목록이 표시되고, 예제를 선택하면 왼쪽에는 실행 결과, 오른쪽에는 Monaco Editor가 나타난다.

WebCanvas와의 연동

Playground는 이 문자열에서 import, init(), new TVG.Canvas() 부분을 제거한 뒤 이미 생성된 TVG와 canvas를 전달하여 실행한다.

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

await executeFunction(
  TVG,
  canvas,
  wrappedRAF,
  performance,
  console,
  cachedFetch
);

이 구조 덕분에 에디터에 표시되는 코드는 일반 프로젝트에서 사용할 수 있는 형태를 유지하면서, Playground 내부에서는 기존 Canvas를 재사용할 수 있다. 렌더러를 변경하면 URL의 renderer 값을 바꾸고 페이지를 다시 로드한다. 같은 예제를 Software, WebGL, WebGPU에서 각각 확인할 수 있다.

3. 커스텀 예제

클로드의 도움을 받아 세 개의 원형 경로가 서로 다른 방향과 속도로 회전하는 로딩 애니메이션을 구현해보았다.
사용한 WebCanvas 기능은 다음과 같다.

• trimPath()를 이용한 원형 호 생성
• LinearGradient를 이용한 스트로크 색상
• Scene과 gaussianBlur()를 이용한 글로우 효과
• BlendMethod.Add를 이용한 빛 합성
• requestAnimationFrame()을 이용한 실시간 애니메이션

각 프레임에서는 기존 Canvas를 비우고 현재 시간에 맞는 호의 위치를 다시 계산한다.

function animate(now) {
  const t = (now - startTime) / 1000;

  canvas.clear();
  canvas.add(buildGlowPass(t));
  canvas.add(buildSharpPass(t));
  canvas.add(buildCore(t));
  canvas.render();

  requestAnimationFrame(animate);
}

trimPath()에 계속 증가하는 값을 그대로 전달하면 일정 시간이 지난 뒤 범위를 벗어날 수 있어, 시작 위치를 0 이상 1 미만 범위로 정규화했다.