놀고 있는 텍스처 유닛에게 베지어 곡선 계산을 시키는 법

폰트부터 애니메이션까지, 어디에나 있는 그 곡선

베지어 곡선(Bézier curve)이 뭐냐면, 점 몇 개만으로 부드러운 곡선을 정의하는 수학적 방법이에요. 시작점과 끝점, 그리고 곡선을 잡아당기는 '제어점'을 두면 그 사이로 매끈한 곡선이 그려지죠. 지금 보고 계신 화면의 글자 윤곽선도, 피그마나 일러스트레이터의 펜 툴도, CSS 애니메이션의 ease-in-out도 전부 베지어예요. 그런데 이 곡선을 GPU에서 그리려면 곡선 위의 점을 프레임마다 엄청나게 많이 계산해야 하는데요, 컴퓨터 그래픽스 실무 기법을 다루는 무료 공개 저널인 JCGT에 이 계산을 GPU의 텍스처 유닛에 떠넘기는 재치 있는 방법을 다룬 논문이 실렸어요.

핵심 아이디어: 하드웨어가 공짜로 해주는 '섞기'를 빌려 쓰기

곡선 위의 점을 구하는 표준 방법은 드 카스텔조(de Casteljau) 알고리즘이에요. 원리는 의외로 단순한데, 제어점들 사이를 선형보간(lerp — 두 값의 중간값을 비율에 따라 구하는 것, 예를 들어 10과 20의 30% 지점은 13이죠)으로 반복해서 좁혀가는 거예요. 3차 베지어라면 점 4개에서 시작해 lerp를 여섯 번 하면 곡선 위의 한 점이 나와요. 셰이더에서 이걸 직접 계산하면 그만큼 산술 연산 유닛(ALU)의 자원을 쓰게 되죠.

그런데 GPU에는 이 lerp를 전용 회로로 초고속 처리하는 하드웨어가 이미 있어요. 바로 텍스처 유닛이에요. 텍스처 유닛이 뭐냐면, 3D 모델에 이미지를 입힐 때 픽셀과 픽셀 사이의 값을 자동으로 부드럽게 섞어주는(bilinear 필터링이라고 해요) 장치인데요, 이 '섞기'가 수학적으로 lerp와 정확히 같은 연산이거든요. 그래서 제어점 데이터를 텍스처에 영리하게 배치하고 샘플링 좌표를 잘 조작하면, 텍스처를 한 번 읽는 것만으로 여러 번의 lerp를 하드웨어가 대신 계산해 주는 거예요. 셰이더 코드는 짧아지고, ALU가 하던 일을 상대적으로 놀고 있는 텍스처 유닛이 가져가는 구조죠.

사실 이런 발상 자체는 GPU 프로그래밍의 유서 깊은 전통이에요. 복잡한 함수를 미리 계산해서 텍스처에 저장해 두고 룩업 테이블처럼 쓰는 기법이나, bilinear 샘플 한 번으로 2차 베지어를 평가하는 트릭이 예전부터 있었거든요. 이번 논문은 그 계보 위에서 베지어 곡선 평가를 체계적인 텍스처 조회 문제로 바꿔낸 작업이라고 보시면 돼요.

업계 맥락: GPU 벡터 렌더링이라는 오래된 숙제

벡터 그래픽을 GPU에서 예쁘고 빠르게 그리는 건 그래픽스 업계의 오랜 숙제예요. 2005년 Loop-Blinn 논문이 셰이더에서 베지어 곡선의 안팎을 판정하는 길을 열었고, 폰트 렌더링 쪽에서는 밸브의 SDF(부호 있는 거리 필드) 방식과 상용 라이브러리 Slug 같은 접근이 경쟁해 왔죠. 곡선 '평가' 자체의 비용을 낮추는 이번 기법은 이런 파이프라인들의 기초 체력을 올려주는 종류의 기여예요. 다만 한 가지 짚어둘 점은, 최신 GPU는 ALU 성능이 워낙 좋아져서 연산을 텍스처 조회로 바꾸는 게 항상 이득은 아니라는 거예요. 병목이 연산인지 메모리 대역폭인지에 따라 결과가 달라지니, 결국 실측이 필요하죠.

한국 개발자에게 주는 시사점

게임이나 그래픽스 개발자라면 이 논문에서 기법 자체보다 사고방식을 가져가면 좋겠어요. '이 연산을 어느 하드웨어 유닛에 태울 것인가'라는 관점인데요, 셰이더가 ALU 병목인지 메모리 병목인지 파악하고 부하를 다른 유닛으로 옮기는 건 GPU 최적화의 핵심 기술이거든요. 웹 개발자에게도 남 얘기가 아닌 게, WebGPU가 표준으로 자리 잡으면서 브라우저에서 직접 셰이더를 다룰 일이 점점 늘고 있어요. JCGT는 무료로 전문이 공개되는 저널이라 원문도 부담 없이 읽어볼 수 있고요.

정리하면, 텍스처 유닛의 보간 회로에 베지어 곡선 계산을 대신 시키는, 고전적이면서도 우아한 최적화 기법이에요. 여러분은 하드웨어를 원래 용도 밖으로 창의적으로 활용한 사례를 본 적 있으세요? 기억에 남는 트릭이 있다면 공유해 주세요.