그래픽스

컴퓨터로 그림을 만드는 일이 벌어지는 구역입니다. 이 구역이 마지막에 내놓는 것은 사람 눈에 보이는 픽셀입니다. 그래서 계산이 맞았느냐만큼 보이기에 맞느냐와 정해진 시간 안에 끝나느냐가 판정 기준이 됩니다. 무엇을 하는 일이냐는 물음의 답이 한 문장이 아니라 목록으로 열립니다.

쉽고 빠른 이해

이 구역이 무엇을 다루나 — 컴퓨터로 그림을 만들어서 화면에 픽셀로 내놓기까지, 도형을 다루고 색을 매기고 빛을 셈하는 일 전부가 여기 있습니다.

왜 한 문장 정의가 안 서나 — 판정 기준부터가 계산이 맞았느냐 하나가 아니라, 사람 눈에 맞게 보이느냐와 정해진 시간 안에 끝나느냐 둘입니다. 이 구역이 없으면 계산은 맞아도 화면에 나오는 결과가 사람 눈에 안 맞거나 제때 안 나옵니다. 그 두 기준을 채우는 방법이 여러 단계로 나뉘어 있어서 답이 한 문장이 아니라 목록으로 열립니다.

어떻게 도나 — 그림 한 장을 만드는 계산은 한 번에 끝나지 않고 여러 단계를 거칩니다. 형상을 받아들이는 단계에서 시작해서, 빛과 색을 셈하는 단계를 지나, 화면에 낼 픽셀을 정하는 단계로 마무리됩니다.

안에서 무엇으로 갈리나 — 얼마나 빨리 끝내야 하느냐(게임처럼 바로 그려야 하나, 영화처럼 오래 걸려도 되나), 몇 차원을 다루느냐(평면이냐 입체냐), 그림 그리는 일만 하느냐 다른 계산까지 같이 하느냐로 갈립니다.

상세

이 구역이 없으면 계산은 맞아도 화면에 나오는 결과가 사람 눈에 안 맞거나 제때 안 나옵니다. 이 구역의 일은 대개 파이프라인(입력을 여러 단계에 차례로 통과시켜 처리하는 구조) 위 어딘가에 놓입니다. Direct3D 11 의 프로그래머블 파이프라인은 실시간 게임 애플리케이션용 그래픽을 만들도록 설계됐습니다. 프로그래머블은 셰이더(파이프라인 단계마다 GPU(Graphics Processing Unit, 그래픽 처리 장치)에서 도는 프로그램) 코어를 가진 단계마다 개발자가 셰이더 코드를 직접 짤 수 있다는 뜻입니다. 이 단계들은 전부 Direct3D 11 API(Application Programming Interface, 응용 프로그램 인터페이스)로 구성합니다.

이 파이프라인은 여덟 단계에 이름을 답니다 — 입력 어셈블러 · 정점 셰이더 · 테셀레이션 · 지오메트리 셰이더 · 스트림 출력 · 래스터화 · 픽셀 셰이더 · 출력 병합기. 테셀레이션은 이름 하나지만, 이를 구현하려고 새로 추가된 단계는 실은 셋입니다.

데이터가 이 여덟 단계를 어떻게 지나는지는 단계마다 다릅니다. 입력 어셈블러를 나온 정점(도형을 이루는 점 하나로, 위치·색 같은 값을 지닌 데이터 조각입니다)은 정점 셰이더로 들어갑니다.

스트림 출력 단계는 지오메트리 셰이더 단계(꺼져 있으면 정점 셰이더 단계)에서 나온 정점 데이터를 메모리의 버퍼 하나 이상으로 계속 내보냅니다. 다음 단계로 넘기는 자리가 아니라 메모리로 갈라져 나가는 자리입니다.

래스터화가 내놓은 픽셀마다 픽셀 셰이더가 한 번씩 불립니다. 출력 병합기는 그 값을 최종 픽셀 색으로 모읍니다. 각 단계가 정확히 어떻게 도는지는 그 이름을 단 항목이 더 자세히 다룹니다.

flowchart TD
    A[입력 어셈블러] --> B[정점 셰이더]
    B --> C["테셀레이션 · 3단계"]
    C --> D[지오메트리 셰이더]
    D --> E[스트림 출력]
    E --> M[("메모리 버퍼")]
    F[래스터화] --> G[픽셀 셰이더]
    G --> H[출력 병합기]

색을 적는 대목에서 이 구역이 다른 개발과 갈립니다. OpenGL 은 관례적으로 프레임버퍼(모니터에 낼 색을 픽셀마다 담아 두는 메모리 영역) 색 성분이 선형 색 공간(밝기와 저장된 값이 그대로 비례하는 색 표현 방식)에 저장된다고 가정합니다. sRGB(standard RGB, 표준 RGB) 색 공간은 어두운 사무실에서 예상되는 전형적인 비선형 모니터 특성에 기반하며, IEC(International Electrotechnical Commission, 국제전기기술위원회)가 IEC 61966-2-1 로 표준화했습니다. 계산이 서는 자리와 사람이 보는 자리가 갈리고, 이 구역의 일은 그 둘 사이를 오가는 변환까지 포함합니다. 색을 적는 법 쪽 이름들이 그 틈에서 나옵니다.

경계

이미 있는 영상을 다루는 일

사진에서 얼굴을 찾는 일도 이 구역인가. 아닙니다. OpenCV 는 수백 가지 컴퓨터 비전 알고리즘을 담은 오픈소스 라이브러리입니다. 이미지 처리 모듈이나 객체 검출 모듈처럼 전부 이미 있는 이미지나 비디오를 입력으로 받습니다. 이 구역은 반대 방향입니다. 형상과 정점 여럿을 묶은 프리미티브(그리기 명령의 단위로 삼은 것)를 받아 픽셀로 된 이미지를 만들어 내는 쪽입니다. 있는 그림을 읽는 쪽과 없는 그림을 만드는 쪽이 갈리는 자리입니다.

브라우저 안에서 그리는 일

웹페이지에 그림을 그리는 일도 이 구역인가. 그리는 절차 쪽은 이 구역입니다. Canvas API 는 자바스크립트와 HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어) canvas 요소로 그래픽을 그리는 수단입니다. 그 쓰임 몇 가지는 애니메이션과 게임 그래픽과 데이터 시각화와 사진 조작과 실시간 비디오 처리입니다. 같은 canvas 요소를 쓰는 WebGL API 는 하드웨어 가속 2D·3D 그래픽을 그립니다.

갈리는 것은 그려진 뒤에 남는 것입니다. canvas 요소는 그저 비트맵일 뿐입니다. 그려진 객체에 대한 어떤 정보도 주지 않습니다. 그려 넣은 도형 하나하나를 나중에 다시 짚어 낼 방법이 canvas 안에는 없다는 뜻입니다. canvas 요소를 문서 구조 안에서 다루는 일은 다릅니다. 페이지 안 자리 · 다른 요소와의 관계는 이 비트맵 정보와 별개입니다. 요소와 문서로 다루는 자리는 프론트엔드 쪽에 남습니다.

드라이버와 GPU 메모리

GPU 메모리를 관리하는 코드도 이 구역인가. 아닙니다. 리눅스 커널의 DRM(Direct Rendering Manager, 다이렉트 렌더링 매니저) 계층은 그래픽 드라이버에 vblank 이벤트 처리와 메모리 관리를 비롯한 여러 서비스를 제공합니다.

이 구역이 그 아래와 만나는 창구는 API 입니다. Vulkan 은 저수준 그래픽스와 컴퓨트(그림이 아니라 범용 계산을 돌리는 기능)의 명시적 제어를 위해 설계된 API 입니다. 그 창구 위에서 무엇을 그릴지 정하는 코드는 이 구역입니다. 그 아래에서 하드웨어에 명령을 밀어 넣는 코드는 시스템 프로그래밍 쪽입니다.

이견

이 구역을 무슨 축으로 나누느냐가 갈립니다.

시간 예산으로 가르는 축이 있습니다. Direct3D 11 파이프라인은 실시간 게임 애플리케이션용 그래픽을 만드는 물건이고, 래스터화 단계의 목적도 실시간 3D 그래픽을 표시하는 것입니다. RenderMan 은 반대쪽에 섭니다. 시각 효과와 애니메이션을 렌더링하기 위한 픽사 애니메이션 스튜디오의 기술로, 픽사 자사 장편 영화뿐 아니라 업계 전반의 시각 효과와 애니메이션 렌더링에도 쓰입니다. 물리 기반 셰이딩이 최소한의 설정만으로 매우 사실적인 조명을 내놓게 하고, 시간이 걸리더라도 품질을 끝까지 밀어붙이는 고급 기법인 다중 바운스 광선추적 전역 조명과 광선추적 표면하 산란까지 완전히 지원합니다. 한쪽은 실시간을 전제합니다. 다른 쪽은 그 전제가 없습니다.

차원으로 가르는 축도 있습니다. Canvas API 는 대체로 2D 그래픽에 초점을 둡니다. 같은 canvas 요소를 쓰는 WebGL API 는 하드웨어 가속 2D·3D 그래픽을 그립니다. 같은 요소 위에서 2D 와 3D 가 서로 다른 API 이름으로 갈립니다.

무엇까지 이 구역에 넣느냐도 갈립니다. Vulkan 은 그래픽스와 컴퓨트 기능을 함께 다루는 API 입니다. 파이프라인을 컴퓨트 파이프라인과 그래픽스 파이프라인과 레이 트레이싱 파이프라인 셋으로 나란히 놓습니다 — 이 그래픽스 파이프라인이 상세에서 본, 정점을 받아 픽셀을 내놓는 파이프라인과 같은 자리를 가리키는 Vulkan 쪽 이름입니다. 셰이더 목록에서도 컴퓨트 셰이더가 정점 셰이더나 프래그먼트 셰이더(앞서 나온 픽셀 셰이더를 Vulkan 이 부르는 이름입니다)와 같은 칸에 있습니다. 상세에서 본 Direct3D 11 프로그래머블 파이프라인이 세는 단계는 입력 어셈블러에서 출력 병합기까지이고, 그 목록에 컴퓨트는 없습니다. 그래서 컴퓨트를 이 구역 안에 넣을지는 API 마다 다르게 답합니다.

관련 항목

그리는 대상

메시 · 프리미티브 · 정점 · 정점 속성 · 인덱스 · 액세서 · 프리미티브 토폴로지 · 삼각형 세트 · 머티리얼 · 법선 · 탄젠트 · 접선 기저 · 텍스처 좌표 · 정점 색 · 스킨 조인트 · 스킨 가중치 · 서브디비전 표면 · 모핑 · 스키닝 · 텍스처

정점이 거치는 좌표 변환 단계

카메라 · 뷰 행렬 · 투영 행렬 · 원근 투영 · 직교 투영 · 뷰 공간 · 클립 공간 · 좌표 변환 · 프리미티브 클리핑 · 뷰포트 · 뷰포트 스위즐 · 트랜스폼 피드백 · 프리미티브 순서

픽셀로 바꾸는 단계

입력 어셈블러 · 래스터화 · 프래그먼트 · 프래그먼트 셰이딩 · 멀티샘플링 · 커스텀 샘플 위치 · 멀티샘플 커버리지 · 무게중심 보간 · 시저 테스트 · 깊이 테스트 · 스텐실 테스트 · 깊이 경계 테스트 · 깊이 버퍼 · 스텐실 버퍼 · 프레임버퍼 · 블렌딩 · 논리 연산 · 컬러 라이트 마스크 · 렌더 타깃 · 출력 병합기 · 스트림 출력

빛을 셈하는 법

셰이딩 · 플랫 셰이딩 · 정점 단위 조명 · 픽셀 단위 조명 · 물리 기반 셰이딩 · 광선추적 · 가속 구조 · 클러스터 레벨 가속 구조 · 광선 순회 · 광선 교차 판정 · 최근접 히트 · 셰이더 바인딩 테이블 · 전역 조명 · 표면하 산란

색을 적는 법

색 공간 · 선형 색 공간 · sRGB · 감마 보정 · IEC 61966-2-1 · sRGB 프레임버퍼 · HDR(High Dynamic Range, 하이 다이나믹 레인지) 메타데이터 · 포맷 · 포맷 속성

이 파이프라인을 이루는 구성 요소

GPU · 셰이더 · 정점 셰이더 · 테셀레이션 제어 셰이더 · 테셀레이션 평가 셰이더 · 지오메트리 셰이더 · 프래그먼트 셰이더(상세의 픽셀 셰이더) · 컴퓨트 셰이더 · 메시 셰이더 · 태스크 셰이더 · 클러스터 컬링 셰이더 · 레이 생성 셰이더 · 인터섹션 셰이더 · 애니 히트 셰이더 · 최근접 히트 셰이더 · 미스 셰이더 · 콜러블 셰이더 · HLSL(High-Level Shader Language, 고수준 셰이더 언어) · 그래픽스 파이프라인 · 컴퓨트 파이프라인 · 레이 트레이싱 파이프라인 · 파이프라인 캐시 · 파이프라인 라이브러리 · 특수화 상수 · 파이프라인 바인딩 · 동적 상태 · 파이프라인 레이아웃 · 렌더 패스 · 로드 연산 · 스토어 연산 · 타일 셰이딩 렌더 패스 · 디스크립터 · 디스크립터 타입 · 디스크립터 세트 · 디스크립터 세트 레이아웃 · 버퍼 · 버퍼 뷰 · 버퍼 디바이스 주소 · 이미지 · 이미지 뷰 · 이미지 레이아웃 · 샘플러 · 호스트 메모리 · 디바이스 메모리 · 스왑체인

이것을 실제로 구현·채택한 그래픽스 API

Vulkan · Direct3D 11 · OpenGL · WebGPU

이것에서 자주 나는 오류·장애

Z-파이팅 · 깊이 정밀도 · 깊이 비교 오류 · 렌더 패스 데이터 레이스 · 지연 제어 · 프레젠트 배리어

이것과 경계를 맞대는 이웃 분야

개발 · 게임 개발 · 프론트엔드 · 시스템 프로그래밍 · 컴퓨터 비전 · RenderMan · 시각 효과

이것과 만드는 방향이 반대인 컴퓨터 비전 갈래

OpenCV · 이미지 처리 · 객체 검출 · 카메라 캘리브레이션 · 3D 재현 · 배경 차분 · 특징 검출기

이것을 브라우저에서 그리는 API·형식

브라우저 · Canvas API · WebGL · 비트맵

이것 아래에서 하드웨어를 다루는 드라이버 계층

그래픽 드라이버 · 다이렉트 렌더링 매니저 · vblank · 커맨드 서브미션 · 펜싱 · 윈도우 시스템 통합