[자료공유] rough.js에 thorvg web canvas 렌더러 추가

[nowgnuesLeee]

서론

이번에 thorvg.web에서 canvas를 하나 만들었다고 해서 공부도 할겸, 기존에 캔버스를 사용하던 오픈 소스 라이브러리에 thorvg web canvas를 추가하는 작업을 한번 해봤습니다.

기존 canvas를 thorvg web canvas로 교체만 하면 되는 작업인줄 알았는데, canvas의 렌더러 엔진으로 thorvg를 쓰는거라서 기존에 canvas 사용방식을 thorvg web canvas 사용방식에 맞추는 작업이 필요했습니다. 그래서 시험적으로 해당 작업이 단순한 라이브러리부터 해보기로 했고 rough.js를 선택했습니다.

canvas랑 thorvg web canvas의 차이

canvas는 그림을 그리고 잊지만 thorvg web canvas는 객체를 시스템에서 유지하고 있습니다. 이런걸 retained-mode라고 하는데 자세한 내용은 UI 시스템 블랙북을 참고해주세요. 이를 통해서 다음과 같이 특정 객체를 움직이는 것도 쉽게 가능합니다. (기존에 canvas에서는 update를 위해서는 이전에 그려진 화면을 지우고 다시 그려야함.)

import { init } from '@thorvg/webcanvas';

const TVG = await init({
  renderer: 'gl',
  locateFile: (path) => '/webcanvas/' + path.split('/').pop()
});

const canvas = new TVG.Canvas('#canvas', {
  width: 600,
  height: 600,
});

const ball = new TVG.Shape();
ball.appendCircle(120, 500, 35, 35);   // cx, cy, rx, ry
ball.fill(255, 192, 203, 255);
canvas.add(ball);

let t = 0;
(function loop() {
  ball.translate(Math.sin(t += 0.02) * 100, 0);  // 속성만 갱신
  canvas.update().render();                       // 씬 재평가 + 렌더
  requestAnimationFrame(loop);
})();

위코드는 플레이그라운드에서 직접 실행시켜보실 수 있습니다.

무튼 이러한 object-oriented interface를 사용해서 손쉽게 그림을 그릴 수 있고, thorvg에서 지원하는 gl, web gpu도 사용가능해서 더욱 성능 향상이 기대됐습니다. rough.js에도 webgl을 추가하려고 하는 거 같은데 아직까지 마스터에 들어가있진 않습니다. (브랜치로만 존재함)

결론

claude와 함께 작업했고 rough.js의 손그림을 똑같이 표현했습니다. 실제 코드는 제가 포크한 레포에서 확인가능합니다.

(벤치마크는 해보지 않아서 성능 향상이 있었는지 모릅니다.)