[과제] 3주차) ThorVG 활용사례 조사 이연석

[autlyr21]

Yetty의 ThorVG 사용례

Yetty는 WebGPU 기반으로 동작하는 GPU 가속 터미널 에뮬레이터다. 일반적인 터미널 텍스트뿐 아니라 이미지, 그래프, 문서, 벡터 그래픽 같은 rich content를 터미널 안에 직접 띄우기 위해 ydraw, ysdf, yfigure 같은 자체 렌더링 계층을 두고 있다. 여기서 ThorVG는 Yetty의 대안 SVG/Lottie 대안 엔진으로써 쓰인다.

Yetty에는 ysvg와 ylottie라는 자체 SVG/Lottie 엔진이 있다. 둘 다 외부 벡터 그래픽 라이브러리 없이 자체적으로 SVG/Lottie를 파싱하고 기하를 계산하는 독립 모듈이고, 터미널이 실제로 콘텐츠를 그릴 때 쓰는 ycat 경로는 이 둘을 거친다. ThorVG는 다른 모듈인 ythorvg 모듈에서 쓰인다. 이건 별도의 대안 경로로, 저장소의 ythorvg 모듈 README에는 이 관계가 다음과 같이 적혀 있다.

ycat does not route through ythorvg — its SVG and Lottie handlers use the independent ysvg and ylottie modules. ythorvg is the ThorVG-fidelity alternative path.

ThorVG는 Yetty 전체의 SVG/Lottie 엔진이 아니라 tools/ythorvg라는 독립 CLI 도구 하나가 쓰는 "더 충실한 렌더링이 필요할 때를 위한 대안 경로"에 가깝다.

---

SVG와 Lottie를 ThorVG를 통해 로드

ythorvg는 tvg::Animation 객체를 만들고, 거기서 tvg::Picture를 꺼내 SVG 또는 Lottie 데이터를 로드하는 식으로 시작한다.

r->animation.reset(tvg::Animation::gen());
r->picture = r->animation->picture();

load_result = r->picture->load(
    static_cast<const char*>(data),
    static_cast<uint32_t>(size),
    mimetype ? mimetype : "",
    nullptr,
    true
);

SVG든 Lottie든 결국 Picture에 로드되는 건 같지만, Lottie일 때는 전체 프레임 수와 재생 시간을 추가로 받아온다.

r->total_frames = r->animation->totalFrame();
r->duration = r->animation->duration();

Canvas 대신 커스텀 렌더러 사용

보통 ThorVG를 쓰는 애플리케이션은 SwCanvas나 GPU Canvas로 픽셀 버퍼나 GPU surface에 바로 결과를 그린다. ythorvg는 이 방식을 쓰지 않고 ThorVG의 RenderMethod 인터페이스를 구현한 YDrawRenderMethod를 끼워 넣는다.

r->render_method->preRender();

paintImpl->update(
    r->render_method,
    identity,
    clips,
    255,
    tvg::RenderUpdateFlag::All
);
paintImpl->render(r->render_method);

r->render_method->postRender();

Paint::update()가 transform, opacity, path, 스타일을 계산하고 Paint::render()가 그 결과를 YDrawRenderMethod로 넘긴다. 이 과정에서 ThorVG는 픽셀을 만들지 않는다. 각 도형의 path, 색상, stroke, transform 정보만 Yetty 쪽에 건네준다.

ThorVG 도형을 ydraw 명령으로 바꾸기

YDrawRenderMethod::prepare()는 ThorVG가 계산해준 RenderShape 정보를 YDrawRenderData라는 자체 구조체에 복사한다. path command, transform, opacity, fill/stroke 색상과 fill rule, line cap·join, dash pattern, bounding box까지 담는다. 실제로 path를 복사하는 부분은 이렇다.

for (uint32_t i = 0; i < rshape.path.cmds.count; ++i) {
    rd->cmds.push_back(rshape.path.cmds[i]);
}

for (uint32_t i = 0; i < rshape.path.pts.count; ++i) {
    rd->pts.push_back(rshape.path.pts[i]);
}

그다음 renderShape()가 이 path를 더 단순한 primitive로 축약할 수 있는지 순서대로 확인한다.

if (tryRenderAsEllipse(rd)) return true;
if (tryRenderAsBox(rd)) return true;
if (tryRenderAsPolygon(rd)) return true;

단순한 도형은 SDF 명령으로

SVG의 원이나 타원은 특정 cubic Bezier 패턴으로 표현되는데, 이 패턴을 인식하면 ellipse SDF 명령 하나로 변환한다.

yetty_ysdf_ellipse geom{cx, cy, rx, ry};

yetty_ydraw_drawable_list_add_cmd_add_ellipse(
    _buffer,
    0,
    0,
    fillColor,
    strokeColor,
    rd->strokeWidth,
    &geom
);

사각형도 마찬가지로 box SDF 명령 하나로 끝난다.

yetty_ysdf_box geom{cx, cy, hw, hh, cornerRadius};

yetty_ydraw_drawable_list_add_cmd_add_box(
    _buffer,
    0,
    0,
    fillColor,
    strokeColor,
    rd->strokeWidth,
    &geom
);

단순한 아이콘 같은 건 큰 RGBA 이미지가 아니라 중심 좌표, 반지름, 크기, 색상 몇 개로 표현된다.

복잡한 곡선은 직선으로 쪼갬

ydraw 계층에는 임의의 Bézier path를 그대로 표현하는 primitive가 없다. 그래서 일반적인 cubic Bézier는 adaptive subdivision으로 잘게 쪼개 여러 개의 직선 segment로 바꾼다.

Lottie 프레임은 ThorVG가 계산

Lottie 프레임을 바꿀 때 ythorvg 쪽이 하는 일은 두 줄뿐이다.

r->animation->frame(frame);
render_once(r);

animation->frame(frame) 안에서 키프레임 보간과 shape 상태 계산을 ThorVG가 처리하고, Yetty는 그 결과 장면을 다시 ydraw 명령으로 변환하기만 한다. CLI 도구도 같은 API를 그대로 쓴다.

yetty_ythorvg_renderer_render(
    renderer,
    file_res.value.data,
    file_res.value.size,
    mimetype,
    &content_w,
    &content_h
);

yetty_ythorvg_renderer_render_frame(renderer, frame);

이 경로를 쓰는 동안은 Lottie의 animation model을 직접 구현할 필요가 없다는 게 ythorvg의 존재 이유이기도 하다 — 앞서 본 ylottie가 이걸 자체 구현으로 처리하는 것과 대비된다.

결과를 터미널로 출력

tools/ythorvg는 변환된 drawable list를 직렬화한 뒤 Yetty 전용 DCS 메시지로 stdout에 출력한다.

size_t raw_size =
    yetty_ydraw_drawable_list_serialize(buf, &raw);

직렬화된 데이터는 YETTY_DCS_YDRAW_BIN 메시지로 LZ4F 압축을 적용해서 내보낸다.

yetty_yface_emit_to_fd(
    fileno(stdout),
    YETTY_DCS_YDRAW_BIN,
    1,
    &meta,
    sizeof(meta),
    raw,
    raw_size
);

tools/ythorvg는 SVG나 Lottie를 화면에 직접 그리지 않고, 입력 파일을 Yetty가 이해하는 ydraw 명령 스트림으로 변환해 터미널에 전달한다.