次世代 NPR の輪郭線表現に迫る！リアルタイムベクトルストローク生成手法 StrokeGen を徹底解剖

3줄 요약

1. 실리콘스튜디오 연구개발실의 카와구치 타츠키는 CEDEC 2024에서 StrokeGen의 GPU 윤곽선 생성 알고리즘과 Unity 확장 구현을 소개했다.
2. 윤곽선을 시작점과 끝점이 있는 점열로 만들면 브러시 질감, 선 끝의 굵기 변화, 다중선과 동작에 따른 변형을 직접 조절할 수 있다.
3. 캐릭터 애니메이션 실험에서 주요 GPU 처리 시간의 합계는 1.66ms였다. 게임에 적용하려면 깜빡임을 줄이고, 아티스트가 의도한 선 표현을 여러 프레임에 걸쳐 유지해야 한다.

어떤 선을 만드는가

StrokeGen은 2022년 논문 「GPU-Driven Real-Time Mesh Contour Vectorization」을 바탕으로 만든 Unity 프로토타입이다. 입력은 삼각형 메쉬이고, 출력은 연결 순서가 정해진 점열이다. 여기서 벡터 스트로크는 베지어 곡선 같은 매개변수 곡선을 뜻하지 않는다. 생성된 점열을 어떤 브러시와 색으로 그릴지는 별도로 구현할 수 있다.¹

게임에서 널리 쓰는 반전 메쉬 방식은 확대된 메쉬의 뒷면을 그려 윤곽선을 표현한다. Sobel 같은 화면 필터는 깊이와 법선 등의 차이로 선을 검출한다. 두 방식은 빠르고 구현이 간단하지만, 개별 선의 시작과 끝을 기준으로 굵기를 조절하거나 원래 형태와 다른 선을 그리기 어렵다.

StrokeGen은 두 면이 공유하는 변을 검사한다. 두 면 중 한 면이 시점을 향하고 다른 면이 반대 방향을 향할 때, 그 변을 메쉬 윤곽선으로 검출한다. 물체 내부의 접힌 부분이나 재질 경계까지 모두 포함하는 정의는 아니다. 발표자는 이를 추가하는 구현도 소개했다.

GPU에서 점열을 생성하는 과정

핵심은 윤곽선의 연결 관계를 GPU에서 계산하는 것이다. CPU로 데이터를 가져와 순서대로 추적하는 과정을 피하면서, 화면에 나타나는 윤곽선만 처리한다.

출처: CEDEC 2024 발표 자료, 슬라이드 17. © Silicon Studio Corp., all rights reserved.

래스터화 단계에서는 먼저 장면의 3×3 이웃 영역에 기록된 깊이와 비교해 후보를 정한다. 그다음 후보를 1픽셀 크기의 점으로 그린다. 하드웨어 깊이 검사로 가장 가까운 후보를 선택한다. 이 결과가 벡터화할 윤곽 픽셀이다.

연결 관계만으로는 GPU가 선을 순서대로 그릴 수 없으므로, 목록의 각 요소에 순번을 정해야 한다. StrokeGen은 Wyllie의 포인터 점핑을 사용한다. 각 요소가 더 먼 후속 요소를 참조하도록 갱신하고, 정보를 합산하는 병렬 알고리즘이다. 같은 방식으로 루프 내 최대 ID를 찾고, 그 ID를 가진 요소를 시작점으로 선택한다.²

이때 생기는 루프는 원래 선의 양쪽 경계다. 따라서 루프의 접선과 윤곽 변의 방향을 비교해 그릴 점을 선택해야 한다. 이 과정이 방향 기반 제거 처리(orientation culling)다. 가시성이 변하거나 루프가 끊기는 지점은 스트로크의 시작과 끝이 된다. 이 선택 과정은 프레임 사이의 깜빡임과도 관련된다.

Unity 구현을 어떻게 확장했는가

발표자가 조사한 공개 프로젝트는 단일 정적 메쉬를 대상으로 했다. 카와구치는 자식 메쉬들을 수집하고, 스키닝된 정점 버퍼에서 위치와 법선을 매 프레임 갱신하도록 확장했다. 메쉬의 연결 구조가 변하지 않는 애니메이션에서는 연결 정보를 다시 계산할 필요가 없다.³

여러 메쉬에는 각기 다른 선 설정을 적용할 수 있도록 메쉬 ID를 기록했다. 내부의 접힌 변은 인접 면이 이루는 각도로 검출하고, 재질 경계도 윤곽 변과 함께 처리했다. 유료 도구인 Odin Inspector는 알고리즘에 꼭 필요한 도구가 아니어서 자체 인스펙터로 대체했다.

벡터 점열을 직접 그리면 선을 따라 텍스처를 늘이는 방식과, 사각형 브러시를 반복하는 스탬프 방식을 모두 구현할 수 있다. 스탬프의 크기, 늘어나는 비율과 선 방향을 따라 회전하는 정도도 조절한다.

출처: CEDEC 2024 발표 자료, 슬라이드 63. © Silicon Studio Corp., all rights reserved.

발표의 표현 실험은 다음과 같다.

• 2픽셀과 10픽셀처럼 화면 픽셀 단위로 선폭을 지정한다.
• 텍스처, 정점 색이나 곡률을 이용해 선의 굵기를 변화시킨다.
• 점열을 변형하거나 여러 선을 그려 러프 스케치의 모습을 만든다.
• 광원에 따라 선의 색과 굵기를 바꾸고, 림라이트를 스트로크로 표현한다.
• 모션 벡터로 선을 변형해 스미어 프레임처럼 동작을 강조한다.

굵은 선에서는 깊이 판정이 충분히 정교하지 않아 자기 메쉬와의 간섭이 나타났다. 러프 스케치와 모션 변형도 복잡한 형태나 애니메이션에서 조절이 어려웠다. 발표자는 표현의 가능성과 함께 각 실험의 한계를 보여 줬다.

처리 시간

발표자의 캐릭터 애니메이션 실험에는 Ryzen 7 4800H 프로세서와 16GB 메모리를 사용했다. 그래픽카드는 노트북용 RTX 2060이었다. 발표 슬라이드가 합산한 주요 GPU 처리 시간은 1.66ms다.⁴

논문에 제시된 성능을 소개한 부분에서는 벡터화와 스트로크 생성이 래스터화보다 오래 걸렸다. 그러나 모든 삼각형과 모든 화면 픽셀에 같은 후속 처리를 수행하지는 않는다. 윤곽 픽셀은 렌더링 픽셀의 약 4%에 불과하다. 처리할 픽셀이 적고, 간접 명령으로 실제 필요한 작업량에 맞춰 처리하는 점이 속도에 기여한다.

공개 구현은 실행을 시작할 때 사전 처리를 수행하므로, 동작하기까지 몇 초를 기다려야 했다. 발표자는 고정된 사전 처리 결과를 저장해 재사용하고, 여러 캐릭터와 배경을 포함하는 큰 장면에 맞게 버퍼 관리를 개선할 필요가 있다고 설명했다.

프레임 사이에서 생기는 문제

실용화의 큰 과제는 시간적 안정성이다. 발표는 이를 두 문제로 구분한다.

첫째, 입력 형태가 조금만 변해도 생성된 스트로크가 달라진다. Potrace에서 착안한 방식은 선의 양쪽 경계를 먼저 만들고, 방향 기반 제거 처리로 하나를 선택한다. 이 선택이 불안정해 선이 나타나거나 사라진다. 발표자는 선 자체를 벡터화하거나 두 경계를 통합하는 방법을 개선 후보로 제시했다.

둘째, 선이 비교적 안정적이어도 브러시 표현이 깜빡일 수 있다. 카메라가 바뀌면 화면상의 선이 끊기거나 연결되고 시작점도 바뀐다. 브러시 텍스처와 선 끝의 굵기 변화는 시작점에 의존하므로, 프레임마다 달라진다. 선의 변화를 프레임 사이에서 추적하는 처리가 필요하다.

화면 공간에서 벡터화하는 특성 때문에, 서로 다른 작은 선이 같은 픽셀 영역에서 연결되기도 한다. 반대로 3D에서는 연결된 선이 가려진 부분 때문에 끊길 수 있다. 게임에서는 카메라를 자유롭게 움직여도 아티스트가 의도한 선 표현을 안정적으로 유지해야 한다. 이를 위해 프레임마다 수작업을 하는 대신, 각도 기준이나 가이드로 표현을 조절하는 도구가 필요하다.

선을 조절하는 방식

저는 스트로크를 생성한 뒤에도 선폭과 질감을 직접 조절할 수 있다는 설명이 흥미로웠다. 연결된 점열과 그 매개변수를 이용하면 선의 끝을 가늘게 만들거나, 움직임에 따라 선만 변형할 수 있다. 발표자는 생성 속도뿐 아니라 어떤 표현을 만들 수 있는지, 아티스트가 그 표현을 어떻게 조절할 수 있는지도 중요하다고 했다.

발표 시점에는 대규모 장면에 아직 적용하지 못했다. 프레임 사이의 선 표현도 안정적이지 않았다. 카와구치는 주요 캐릭터와 배경에 서로 다른 기법을 적용하는 등 기존 윤곽선 기법과의 병용을 제안했다.

출처

카와구치 타츠키(川口龍樹), 실리콘스튜디오 연구개발실. CEDEC 2024, 2024년 8월 21일 발표.

• SlideShare 원문
• 실리콘스튜디오 공식 발표 자료와 다운로드
• 공식 PDF
• StrokeGen 공개 구현