블렌딩

블렌딩은 방금 계산한 색을 화면에 이미 있던 색과 섞는 처리입니다. 섞는 비율은 색마다 딸려 오는 투명도 값이 정합니다. 유리창이나 연기처럼 뒤가 비치는 물체가 이 처리로 그려집니다.

쉽고 빠른 이해

블렌딩은 새로 그릴 색과 화면에 이미 있는 색을 정해진 비율로 섞어 하나로 만드는 처리입니다. 반투명한 유리창 뒤로 벽이 비쳐 보이는 장면이 이 처리로 만들어집니다. 불투명한 물체는 이 처리가 필요 없습니다 — 앞에 있는 것이 뒤에 있는 것을 그대로 가리면 됩니다.

이게 없으면 새 색이 옛 색을 덮어씁니다. 반투명한 물체를 그려도 뒤에 있던 것이 가려져 유리도 안개도 불투명한 벽처럼 보입니다.

어떻게 도나:

1. 화면에 이미 있는 색을 읽습니다
2. 새 색과 옛 색에 각각 정해진 비율을 곱합니다
3. 두 값을 더해 화면에 다시 씁니다

대가는 순서입니다. 반투명한 물체를 여럿 겹쳐 그리면 그리는 차례에 따라 결과 색이 달라집니다.

상세

이 절은 색을 하나만 남기는 것으로 왜 부족한지부터 봅니다. 그다음 섞는 비율을 정하는 값과 그 비율을 고르는 방법을 보고, 마지막으로 그리는 차례가 결과를 바꾸는 까닭과 이 처리가 도는 위치를 짚습니다.

색을 하나만 남기면 안 되는 경우

깊이 테스트는 화면의 한 칸을 두고 다투는 후보 중에서 카메라에 가장 가까운 것 하나만 남기고 나머지를 버립니다. 불투명한 물체끼리는 이것으로 충분합니다. 앞에 있는 벽이 뒤에 있는 기둥을 가리기 때문입니다.

유리창은 다릅니다. 유리창 뒤로 기둥이 비쳐 보여야 합니다. 깊이 테스트가 유리창만 남기고 기둥을 버리면 기둥이 화면에서 사라집니다.

이때 필요한 것은 버리는 대신 섞는 처리입니다. 유리창의 색과 기둥의 색을 둘 다 살려서 하나로 합쳐야 합니다. 블렌딩이 이 일을 맡습니다.

섞는 비율을 정하는 값

화면 칸마다 색을 담아 두는 메모리를 색 버퍼라고 부릅니다. 예를 들어 파란 배경이 그려진 색 버퍼 위에 반투명한 빨강을 새로 그린다고 하면, 블렌딩은 이미 있던 파란 색과 새로 그릴 빨강을 섞어 하나의 색으로 만듭니다.

색에는 밝기 값 셋 말고 투명도 값이 하나 더 딸려 옵니다. 이 값을 알파 채널이라고 부릅니다. 값이 크면 불투명하고 작으면 반투명합니다.

블렌딩이 새로 계산한 색을 소스 색이라고 부릅니다. 색 버퍼에 이미 있던 색은 목적 색이라고 부릅니다.

가장 흔한 섞기는 소스의 투명도만큼 소스 색을 쓰고, 남은 몫만큼 목적 색을 쓰는 것입니다. 아래 표는 앞서 든 예 — 파란 배경 위에 반투명한 빨강을 섞은 결과입니다. 소스의 투명도는 절반입니다.

결과는 두 색의 한가운데가 아니라 소스 쪽으로 반만큼 치우친 값입니다. 소스의 투명도가 늘수록 결과는 소스 색에 가까워지고, 줄수록 목적 색에 가까워집니다.

어느 정도씩 섞을지 고르는 계수

방금 본 섞기는 여러 방식 중 하나일 뿐입니다. 소스 색과 목적 색에 각각 어떤 계수를 곱해 더할지를 고르면 다른 효과가 나옵니다.

앞의 표에서 계산한 예는 첫째 줄의 방식입니다. 투명도를 계수로 쓰는 방식이라 이 이름이 붙었습니다. 계수를 무엇으로 고르느냐가 갈래를 가르는 축입니다.

그리는 차례가 결과를 바꾸는 까닭

깊이 테스트는 어느 차례로 그려도 결과가 같습니다. 칸에 남는 것은 언제나 가장 가까운 것 하나이기 때문입니다. 블렌딩은 다릅니다. 섞은 결과가 다음 섞기의 목적 색이 되므로, 먼저 섞은 색과 나중에 섞은 색이 같은 무게를 지지 않습니다.

흰 배경 위에 반투명한 빨강과 반투명한 초록을 겹쳐 그리는 예를 봅니다. 둘 다 투명도는 절반입니다.

나중에 그린 색이 더 많이 남습니다. 그래서 반투명한 물체가 여럿이면 그리는 차례를 정해야 화면이 매번 같게 나옵니다. 흔히 쓰는 차례는 카메라에서 먼 것부터 그려 가까운 것을 마지막에 얹는 것입니다.

파이프라인에서 도는 위치

블렌딩은 프래그먼트 셰이더가 색을 정하고 깊이 테스트가 가려진 후보를 거른 다음에 옵니다. 섞은 결과는 프레임버퍼 안의 색 버퍼에 다시 적히고, 그 값이 화면에 나갑니다. 프레임버퍼는 색 버퍼를 비롯해 화면 하나를 그리는 데 쓰는 버퍼들을 묶어 부르는 이름입니다.

flowchart TD
    A["프래그먼트 셰이더 · 칸마다 색을 정한다"] --> B["깊이 테스트 · 가려진 것을 버린다"]
    B --> C["블렌딩 · 남은 색과 화면 색을 섞는다"]
    C --> D["프레임버퍼 · 섞은 색을 써넣는다"]

이 순서를 묶어 출력 병합기라고 부릅니다. 셰이더와 달리 블렌딩은 코드를 직접 짜 넣는 자리가 아닙니다. 계수와 섞는 연산만 골라 켜고 끕니다.

이렇게 고정해 둔 데는 까닭이 있습니다. GPU(Graphics Processing Unit, 그래픽 처리 장치)는 여러 칸을 동시에 계산합니다. 같은 칸을 노리는 후보 여럿이 비슷한 때에 도착하면 색 버퍼를 읽고 쓰는 차례가 꼬일 수 있습니다. 이 차례를 지키는 일을 셰이더 대신 고정된 하드웨어가 맡습니다.

관련 항목

블렌딩이 거치는 앞뒤 단계

그래픽스 파이프라인 · 래스터화 · 프래그먼트 셰이더 · 깊이 테스트 · 출력 병합기

블렌딩이 읽고 쓰는 저장소

프레임버퍼 · 색 버퍼 · 알파 채널

블렌딩을 이루는 구체적인 방식

알파 블렌딩 · 가산 블렌딩 · 곱셈 블렌딩

블렌딩과 나란히 도는 다른 검사

알파 테스트 · 스텐실 테스트 · 시저 테스트

블렌딩으로도 못 푸는 투명 문제와 그 대안

순서 독립 투명 · 깊이 정렬 · 레이 트레이싱

블렌딩과 얽히는 색 공간 문제

감마 보정 · sRGB

블렌딩을 제공하는 그래픽 API

OpenGL · WebGL · Vulkan · Direct3D · Metal · WebGPU

블렌딩이 속하는 상위 분류

그래픽스 · 렌더링 · GPU