프래그먼트와 픽셀의 차이
프래그먼트와 픽셀을 혼용해서 쓰고 있었는데, 알파 블랜딩이라는 개념을 접하면서 이 둘의 차이를 명확히 알게 되어 정리하게 되었다.
각자의 개념을 정리하면 다음과 같다.
1. 픽셀 (Pixel)
- 정의: 이미지의 혹은 화면의 색상을 표현하는 가장 작은 단위.
- 특징: 2D 화면에서 각 픽셀은 위치를 가지고 있으며, 그 위치에서 어떤 색상을 표시할지 결정
2. 프래그먼트 (Fragment)
- 정의: 하나의 픽셀 색상을 결정하기 위해서 렌더링 과정에서 생기는 데이터들.
- 역할: 프래그먼트 셰이더(Fragment Shader)에서 각 프래그먼트는 색상, 깊이, 투명도 등의 정보를 포함한 데이터를 가지게 되고, 프래그먼트 처리 단계에서 하나의 픽셀을 구성하기 위해서 하나 이상의 프래그먼트가 필터링이나 블랜딩 될 수 있다.
차이점 요약
픽셀: 화면에 표시되는 최종 결과.
프래그먼트: 픽셀을 생성하기 위한 잠정적인 데이터. 픽셀로 최종 변환되기 전의 중간 단계.
알파 블랜딩과 깊이 테스트
프래그먼트와 픽셀의 차이를 명확히 이해할 수 있는 과정이다.
아래와 같이 불투명 배경에, 반투명 구름과, 불투명 캐릭터를 배치하는 과정을 통해서 픽셀과 프래그먼트의 차이를 살펴보자.
1. 프래그먼트 세이더 단계
서로 다른 물체가 같은 픽셀에 그려지게 되더라도 항상 각자 프래그먼트 세이더를 통해서 프래그먼트가 생성될 수 있다.
구름이 위치한 곳의 픽셀과 사과가 위치한 곳의 픽셀은 아래와 같이 각 두 개의 프래그먼트로 최종 계산하게 된다.
- 구름 위치픽셀: 배경 프래그먼트 + 구름 프래그먼트
- 사과 위치픽셀: 배경 프래그먼트 + 사과 프래그먼트
2. 프래그먼트처리 단계
프래그먼트 세이더 단계에서는 블랜딩이나 깊이 테스트를 할 수 없다.
- 각 프래그먼트는 자신과 경합하게 될 다른 프래그먼트의 정보(깊이, 알파, 색상)는 알 수 없기 때문.
깊이 테스트
사과 프래그먼트와 배경 프래그먼트는 먼저 백퍼에 저장된 프래그먼트와 깊이를 비교 후 깊이가 더 깊은 프래그먼트를 버리는 방식으로 동작한다. 이를 깊이 테스트(혹은 Depth Buffering)라고 한다.
알파 블랜딩
구름 위치의 픽셀은 반투명한 구름을 표현하기 위해서 알파 블랜딩 작업(아래의 공식 참고)을 거쳐서 최종 픽셀을 결정한다.
vec4 finalColor = src * src.a + (1.0 - src.a) * dst;
// dst: 기존 렌더링 결과를 거쳐 이미 해당 픽셀에 저장되어 있는 색상.(백 버퍼)
// src: 알파 블랜딩을 프래그먼트의 색상.그리기 순서
여기서 주의할 점은 반드시 반투명 한 대상이 나중에 그려야 한다.
알파 블랜딩을 한 뒤 깊이 테스트를 하게 되면 아래와 같이 반투명 물체의 투명부가 먼저 백버퍼에 저장되어 배경 프래그먼트가 깊이 테스트 과정에서 버려지는 현상이 발생하기 때문이다.
추가로 반투명 물체를 그릴때는 깊이테스트가 불필요하기 때문에 깊이 테스트 비활성화도 필요하다.
이미지 출처
- 과일 아이콘 : Vectors Market - Flaticon
- 배경, 구름: 셰이더 코딩 입문(에이콘 출판)
