컴퓨터 그래픽: 1

컴퓨터 그래픽 관련 지식이 전무한 상태에서 여러 인터넷 자료를 토대로 학습한 내용을 정리한다.

모니터는 수백만 개의 작은 점(픽셀)로 이루어져 있고, 화면에 무언가를 보여주려면 각 점의 색상을 정해야 한다. 모니터를 통해 보여지는 디지털 이미지 또한 픽셀로 이루어진 행과 열로 구성된다. 이러한 이미지에서 픽셀은 해당 픽셀이 속한 행과 열을 지정하여 식별할 수 있다.

여기서 ‘점’은 수학적 좌표를 의미하며, ‘픽셀’은 화면을 이루는 아주 작은 네모 칸 한 칸을 의미한다. 그러므로 (3행 5열)은 ‘정확한 수학적 점’이 아니라 화면의 3행 5열에 있는 네모 칸 하나를 뜻한다. 픽셀은 그 안에 수많은 수학적 점들을 포함하는 셈이다. 여기서 이상적인 이미지와 컴퓨터 이미지의 차이가 드러난다. 이상적인 관점에서는 모든 수학적 점의 색상이 정해져 이미지가 완성되어야 한다. 픽셀은 그 근사치일 뿐이다.

수학적 선은 두께가 없다고 한다. 그러나 이를 모니터에 드러내기 위해 1px의 두께를 가진 선을 그린다고 생각해보자. 수직/수평선이 아니라 대각선을 그릴 때엔 선이 픽셀의 절반 정도 결치는 경우도 발생한다. 즉, 어떤 픽셀은 선이 완전히 덮지 않고 부분적으로만 지나간다. 픽셀은 보통 한 칸 전체를 한 색으로만 칠할 수 있으니 선은 계단처럼 꺾여 보이게 된다.

엘리어싱(aliasing)이란 연속적인 모양을 픽셀 격자에 억지로 맞추면서 생기는 깨짐 현상을 뜻한다. alias는 이명(異名)이란 뜻을 가진 단어라고 하며, aliasing은 원래 다른 위치들(이상적 이미지의 점들)이 픽셀 수준에서는 같은 것으로 취급되고 “여러 이름(aliases)이 같은 픽셀에 대응된다"는 식의 어원을 가지고 있다고 설명한다.

안티엘리어싱(antialiasing)은 선분이 얼마나 지나치는지에 따라 색의 정도를 달리 칠하여 aliasing 현상을 해결하는 시각 보정 방법이다. 픽셀이 도형에 부분적으로 가려졌을 때, 해당 픽셀의 색상을 도형과 배경의 혼합 색상으로 칠하는 것이다.

같은 점이라도 어떤 좌표계를 쓰느냐에 따라 숫자 표현이 달라진다. 따라서 내가 사용할 좌표계를 픽셀 좌표계로 변환해야 하며, 좌표값 비율을 이용해 좌표계 변환이 가능하다. 따라서 픽셀값에 의존하지 않는, 점과 좌표계 기준의 사고 전환이 요구된다.

종횡비(aspect ratio)는 이미지, 화면 등 대상의 가로 세로 비율, 정확히는 세로 대비 가로 비율을 의미한다. 픽셀로 이루어진 화면은 화면 가로/세로 폭에 따른 종횡비를 가진다. 예를 들어 800px*400px의 화면의 종횡비는 2/1(2:1, 2)이다.

좌표계 또한 종횡비를 가진다. (right - left) / (top - bottom). 화면의 종횡비와 좌표계의 종횡비가 어긋나면 왜곡이 생긴다. 예를 들어 화면에 수학적 원을 그려도 화면 종횡비가 2일 때, 좌표계 종횡비가 1이라면 가로로 긴 타원이 그려진다. 그렇기에 좌표계 종횡비를 화면 종횡비에 맞출 필요가 있다.

좌표계 종횡비를 화면 종횡비에 맞추는 방법은 간단하다. 좌표계의 가로폭이나 세로폭 중 하나를 조정하면 된다. 종횡비는 세로 대비 가로의 비율이기에 이를 좌표계 세로폭에 곱하여 화면과 맞는 좌표계 가로폭을 구할 수 있다. 그렇다면 좌표계 세로폭을 구하는 방법 또한 가능하다. 좌표계 가로폭을 화면비로 나누어 좌표계 세로폭을 구하면 된다. 예를 들어 3:1의 화면비에 1:1의 좌표계 종횡비라면, 화면비에 맞는 좌표계 세로폭은 가로폭의 1/3인 셈이기 때문이다.

모니터의 색상은 빨강, 초록, 파랑 ​​세 가지 빛의 조합으로 만들어지며, 각 빛의 강도를 조절하면 다양한 색상을 구현할 수 있다. 빛의 강도는 0부터 1 사이의 수로 지정하는데, 이를 “RGB 색상 모델(RGB color model)"이라고 하며, “색상 구성 요소(color components)"로 빨강, 초록, 파랑 값을 사용한다.

인간의 눈에는 원추세포(cone cells)라는 빨강, 초록, 파랑 ​​빛을 감지하는 세 종류의 색 센서가 있기 때문인데, 이는 근사치일 뿐이다. 그래서 현실 세계의 어떤 색들은 모니터의 RGB 조합만으로는 완벽하게 재현되지 않는다.

모니터 등의 출력 장치가 표현할 수 있는 색상의 범위를 해당 장치의 색 영역(color gamut)이라고 칭한다. 기기마다 표현할 수 있는 색의 범위가 다를 수 있다. 프린터는 더 다른데, 모니터에 비해 색 영역이 일반적으로 더 작고 빛이 아니라 잉크를 섞어서 색을 만들기 때문이다.

어쨌든 컴퓨터 그래픽에서 가장 일반적인 색상 모델은 RGB다. RGB 색상은 보통 색상 구성 요소당 8비트, 즉 총 24비트를 사용해 표현되며, 이를 “24비트 색상"이라 칭하기도 한다. 8비트 숫자는 2⁸, 즉 256개의 서로 다른 값을 나타낼 수 있으며, 이는 0부터 255까지의 양의 정수이다.

인간의 눈은 보통 256가지 색조의 구분이 한계이기에 이는 효율적인 방법이다. 메모리가 부족한 시절, 사람 눈이 빨강이나 파랑보다 초록에 더 민감하기 때문에 빨강 5비트, 초록 6비트, 파랑 5비트의 16비트 색상을 사용하기도 했다고 한다.

RGB 외에도 다양한 색상 모델이 있는데, HSV/HSL는 사람이 더 직관적으로 색을 이해할 수 있도록 만들어진 색상 모델이다. H(hue, 색조)는 0°에서 360°로 나타내며, S(saturation, 채도)는 색상의 선명한 정도이다. 그리고 V(value, 정도) 혹은 L(lightness, 밝기)는 색이 얼마나 밝거나 어두운가를 나타낸다.

색 모델에 네 번째 값이 붙는 경우가 있는데, 이를 알파(alpha, a)라고 한다. 알파는 색 자체가 아니라 투명도를 뜻한다. 값이 1일 때 완전 불투명하고, 0일 때 완전 투명하다.

알파 블렌딩(alpha blending)이란 앞색과 배경색을 비율로 섞는 규칙이며 다음과 같이 계산한다.

즉, 앞색을 alpha만큼 반영 + 배경색을 남은 비율만큼 반영하여 최종 색을 구하는 것이다.

각 구성 요소당 8비트를 사용하는 RGBA 색상 모델은 총 32비트를 사용하여 색상을 표현한다. 컴퓨터는 32비트 정수를 자주 쓰기 때문에 이는 편리하다. 다만, 메모리 안에서 구성 요소를 어떤 순서로 배치할지는 시스템이나 그래픽 API에 따라 다를 수 있으며, WebGPU 또한 이를 색상 포맷으로 명시적으로 구분한다.

예를 들어 rgba8unorm은 R, G, B, A를 각각 8비트씩 저장하는 형식이고, bgra8unorm은 B, G, R, A 순서를 사용한다. unorm은 unsigned normalized를 의미하며, 저장은 부호 없는 정수로 하고, 셰이더에서는 정규화된 실수로 해석한다는 뜻이다. 이러한 값은 메모리에는 8비트 정수로 저장되지만, 셰이더에서는 보통 0에서 1 사이의 정규화된 32비트 부동소수점 값으로 해석되어 사용된다.

HTML canvas는 8비트 SDR(Standard Dynamic Range, 색 채널 하나를 8비트로 저장하는 일반 색상 영역 표현 방식) 표시용 최적 포맷인 rgba8unorm 또는 bgra8unorm을 많이 사용하고, getPreferredCanvasFormat()도 그 둘 중 하나를 돌려주지만, 원한다면 rgba16float을 사용해 더욱 정밀한 색상표현을 할 수 있다.