UE Part 1에서 PBR 머티리얼 제작 가이드 - 색상 지식

🌐 원문 링크: UE制作PBR材质攻略Part 1 - 色彩知识 (cnblogs.com/timlly)
📅 원문 발행일: 2019-10-13 ｜ ✍️ 저자: Timlly (00 / )
💡 시리즈 분류: PBR & Shading ｜ 국내 업계 표준 용어 감수 및 수식/도해 복원 적용 완료

우선, 이 글은 기술, 예술, 미학, 사진 및 기타 지식을 다루는 기사임을 말씀드립니다. 이는 순전히 기술적인 기사가 아닙니다! ! 정확히 말하면 TA 중심의 글이다.

코더인 저자가 사진, 미술, TA 분야에 종사하는 이유가 무엇인지 궁금해하는 사람들도 있을 것이다.

사실 그것은 개인적인 관심과 취미와 관련이 있습니다. 저자는 오랫동안 코더로 일해 기술 공부에 집중했어야 했지만, 마음속의 아름다움을 추구하지 않을 수 없어 사진을 찍기 시작했습니다. 나는 몇 년 동안 계속 그렇게 했고 내가 사용할 수 있는 몇 가지 일을 했습니다.

'위인정·가을생각' 작품은 2019년 9월 위인산팡에서 촬영되었습니다. 주연: 바오어

'구미호선' 작품은 2019년 4월 허즈저우에서 촬영되었습니다. 주연: 빙빙

'핑크 메모리' 작품은 2019년 1월 중산영화도시에서 촬영되었으며 주연: 팅팅

2019년 1월 슈퍼카 동호회에서 촬영한 작품 '슈퍼카 앤 뷰티' 출연: 블러드 울프

지난 몇 년 동안 나는 사진 예술에 대해 어느 정도 이해하게 되었고, 예술은 서로 연결되어 있습니다. 사진 예술은 그래픽 렌더링 예술과 불가분의 관계가 있습니다. 실제 작업에서도 작가는 사진에 대한 예술적 지식을 살려 소개하려고 한다. 가장 직접적인 표현은 UE를 사용하여 PBR 자료를 만드는 것입니다. 시간이 지나면서 많은 경험을 쌓게 되어서 과감하게 이 글을 쓰게 되었습니다.

물론 이것은 입문 튜토리얼이 아닙니다. 독자는 UE를 이해하고 PBR 자료에 노출되어야 합니다. 독서에 더 적합한 사람들:

미술

-TA

프로그래머(소재 기반 및 예술에 관심이 있음)
사진가(게임 엔진 및 사진 기초에 관심이 있음)
기타 (UE 소재에 관심이 있는 분)

UE나 UE의 머티리얼 시스템에 대해 잘 모르시는 분들은 UE의 공식 문서와 머티리얼 시스템을 직접 읽어보시길 권장합니다.

2. 색상 지식

이 장에서는 PBR과 관련된 설명을 포함하지 않습니다. 먼저, 후속 PBR 제작을 위한 기초를 마련하기 위해 색상의 원리, 이론 및 작동에 대한 몇 가지 전제 지식을 자세히 설명합니다. 색채의 기본 이론과 운용을 확실히 이해해야만 실제적이고 아름다운 PBR 소재를 더 잘 제작할 수 있으며, 더 나은 제품을 제공할 수 있다고 해도 과언이 아닙니다.

2.1 색상 이론

색상은 색상이며 본질적으로 인간의 눈이 인식할 수 있는 가시광선입니다. 이 섹션에서는 색상 관련 지식과 이론에 중점을 둡니다.

2.1.1 이미징 원리

빛의 본질은 가시광선 주파수 대역(파장 380nm~780nm)의 단일 또는 복합 전자기파입니다.

실제 물리적 세계의 빛의 대부분은 연속적인 합성광이지만, 인간의 눈이 인지할 수 있는 빛의 파장은 빨간색(파장: 700nm), 녹색(파장: 546.1nm), 파란색(청색: 파장: 438.8nm)입니다. 이 세 가지 기본 색상에서 다른 색상이 혼합됩니다.

위 사진의 윗부분은 자연에 존재하는 연속적인 자연광이고, 아랫부분은 불연속적인 빨간색, 녹색, 파란색 빛으로 인간의 시각 이미지 원리와 꼭 일치하므로 인간은 그 차이를 감지할 수 없습니다. 즉, 인간의 시각은 손실이 많고, 무한차원의 합성광은 3차원 시각공간으로 단순화된다.

인간의 눈에 보이는 색상은 광원의 색상뿐만 아니라 색상 반사율, 러프니스, 전도성, 이방성 등과 같은 물체의 표면 특성에 따라 달라집니다. 가장 직관적인 것은 색상 반사율입니다.

잘 익은 사과의 표면에 백색광(복합광)이 비칩니다. 사과의 표면은 빨간색 이외의 빛을 흡수하기 때문에 빨간색 빛을 더 많이 반사하여 표면이 빨간색으로 보입니다.

**이러한 물체의 표면 특성은 PBR 재료 연구의 범위이며, 이 기사의 초점이기도 합니다. 다음 장에서는 PBR이 추상화한 속성과 특성에 중점을 둘 것입니다.

가장 간단하고 직접적인 조명 공식은 다음과 같습니다.

사 람 의 눈 이 인 지 하 는 물 체 색 = 광 원 색 * 물 체 표 면 색 반 사 계 수

그러나 위의 공식은 광원과 물체 표면 반사 계수만 고려합니다. 실제로 러프니스, 전도성, 이방성, 투명도 등과 같은 요소도 고려해야 합니다. 물체 표면 반사 계수에 대한 다른 요인의 영향을 포괄하기 위해 $감 쇠 계 수$ 를 포함하도록 확장할 수 있습니다.

사 람 의 눈 이 인 지 하 는 물 체 색 = 광 원 색 * (물 체 표 면 색 반 사 계 수 * 감 쇠 계 수)

$감 쇠 계 수$ 계산은 위 공식이 물리학에 기초한 것인지, 경험적 값이나 다른 모델에 기초한 것인지 결정하고, 렌더링 효과의 진정한 신뢰성도 결정합니다. 예를 들어 Cook-Torrance는 스페큘러 반사 감쇠 계수를 계산하는 PBR 조명 모델입니다.

사 람 의 눈 에 인 지 되 는 물 체 의 하 이 라 이 트 색 상 = 광 원 색 상 * (물 체 표 면 색 상 반 사 계 수 * 감 쇠 계 수_{C o o k - T o r r a n c e})

2.1.2 색상 모델 및 색상 공간

색상 모델은 특정 규칙을 사용하여 색상을 설명(배열)하는 방법입니다. 일반적인 색상 모델에는 RGB, HSV, HSL, LAB, CYMK 등이 포함됩니다.

그러나 색상 모델은 색상의 구체적인 정보와 의미를 정확하게 설명할 수 없습니다. 예를 들어 RGB 모델은 빨간색, 녹색, 파란색이라는 세 가지 지정된 구성 요소를 사용하여 색상을 설명합니다. 그러나 그것이 표현할 수 있는 범위는 물론, 빨간색, 녹색, 파란색 빛이 어떤 파장과 밝기인지는 결정하지 않습니다.

이를 위해서는 색상 모델의 특정 정보와 의미를 정확하게 설명하기 위해 색공간의 도입이 필요합니다. 예를 들어 RGB 색상 모델을 사용하는 sRGB 색상 공간의 최대 빨간색 정의는 CIE XYZ: 0.4360657, 0.2224884, 0.013916입니다. 그 중 CIE XYZ는 인간의 눈 삼자극값에 대한 실험 테스트 결과를 기반으로 구축된 특수 색 공간입니다.

하나의 색상 모델 아래에는 여러 가지 색상 공간이 있을 수 있습니다. 배열 조건에 따라 색역(표현할 수 있는 색상의 범위)과 의미가 달라집니다. 색상 모델은 하나의 색상 공간에 특정한 경우에만 실용적입니다. 예를 들어 RGB 색상 모델에는 sRGB, Adobe RGB, ProPhoto RGB와 같은 색상 공간이 있습니다.

2.1.2.1 CIE 1931 XYZ

CIE 1931 XYZ 색 공간(CIE 1931 색 공간이라고도 함)은 수학적으로 정의된 최초의 색 공간 중 하나입니다. 1931년 국제조명위원회(CIE)에 의해 설립되었습니다.

CIE XYZ 색상 공간은 1920년대 후반 W. David Wright와 John Guild가 수행한 일련의 실험에서 파생되었습니다. 그들의 실험 결과는 CIE XYZ 색 공간이 파생된 CIE RGB 색 공간 사양에 통합되었습니다.

이 색 공간은 RGB의 세 가지 기본 색상을 기반으로 측정되었으며 인간이 볼 수 있는 전체 색상 범위를 포괄합니다(아래 그림).

2.1.2.2 실습

Lab 색 공간(Lab 색 공간)은 CIE XYZ 색 공간 좌표의 비선형 압축을 기반으로 밝기를 나타내는 L 차원, 색 반대 차원을 나타내는 a 및 b 차원을 갖는 색 반대 공간입니다.

RGB 및 CMYK 색상 공간과 달리 Lab 색상은 인간의 시각에 가깝도록 설계되었습니다. 이는 지각의 균일성을 위해 노력하며 L 구성 요소는 인간의 밝기 인식과 거의 일치합니다. 따라서 a 및 b 구성 요소의 출력 레벨을 수정하여 정확한 색상 균형을 유지하거나 L 구성 요소를 사용하여 밝기 대비를 조정하는 데 사용할 수 있습니다. RGB 또는 CMYK에서는 이러한 변환이 어렵거나 불가능합니다. 인간의 시각적 인식이 아닌 물리적 장치의 출력을 모델링합니다.

밝기 값 L이 다르면 표시되는 2차원 이미지가 상당히 달라집니다.

2.1.2.3 RGB

RGB 색상 모델은 인간의 눈의 이미징 원리와 유사한 R, G, B 구성 요소를 사용하여 색상을 표현합니다. 검정색 미디어에 원색을 겹쳐 놓은 모델입니다.

RGB로 표현되는 입체적 입체색상표는 다음과 같다. 장치의 색상 모델입니다. 오늘날 대부분의 디스플레이 장치는 RGB 색상 모델을 사용합니다.

RGB 색상 모델에는 많은 색공간이 있는데, 일반적인 것은 sRGB, AdobeRGB, ProPhotoRGB 등이며, 이들이 표현할 수 있는 색역 범위는 순서대로 늘어납니다(아래 그림).

sRGB 색 공간은 1996년에 HP와 Microsoft가 모니터, 프린터 및 인터넷용으로 개발한 표준 RGB 색 공간입니다. 이 표준은 W3C, Exif, Intel, Pantone, Corel 및 기타 여러 업계 공급업체에서 지원됩니다. 또한 현재 가장 널리 사용되고 지원되는 색 공간이기도 합니다.

sRGB는 이 경우 CRT 모니터의 평균 선형 전압 응답인 감마 보정 계수 2.2의 색 공간을 사용합니다.

sRGB에서 정의된 R, G, B, 흰색은 각각 CIE xy 색좌표계에서 [0.6400, 0.3300], [0.3000, 0.6000], [0.1500, 0.0600], [0.3127, 0.3290]의 D65에 위치한다. (아래 사진)

Adobe RGB Color Space는 Adobe Systems가 1998년에 개발한 색공간입니다. 개발 목적은 CMYK 컬러 인쇄에 컴퓨터 모니터 등 장비의 RGB 색상 모드에 최대한 많은 색상을 포함시키는 것입니다. Adobe RGB 색상 공간에는 Lab 색상 공간에서 눈에 보이는 색상의 약 50%가 포함되어 있으며 주로 청록색-녹색 색상 시스템이 향상되었습니다.

Adobe RGB에서 정의된 R, G, B, 흰색은 CIE xy 색좌표계에서 각각 [0.6400, 0.3300], [0.2100, 0.7100], [0.1500, 0.0600], [0.3127, 0.3290]의 D65에 위치한다. (아래 사진)

2.1.2.4 HSV

RGB는 디스플레이 장치의 색상 모델이므로 인간의 눈은 각 구성 요소에서 합성된 색상을 구별하기 어렵습니다. 예를 들어, 빨간색 50%와 녹색 80%가 혼합된 색상은 인간이 빠르게 인지할 수 없습니다.

따라서 인간이 색상을 더 쉽게 설명하고 인식할 수 있도록 HSV 색상 모델이 도입되었습니다.

HSV는 각각 Hue(색조), Saturation(채도), Value(밝기)를 나타냅니다. 인간을 위한 컬러 모델입니다. 색상 3차원 다이어그램은 다음과 같습니다.

HSV 값은 RGB의 3원색으로부터 계산할 수 있습니다. 구체적인 과정은 다음과 같습니다.

$(r, g, b)$ 를 각각 색상의 빨간색, 녹색 및 파란색 좌표라고 하고 해당 값은 $0.0$ 과 $1.0$ 사이의 실수입니다. $m a x$ 는 $r$ , $g$ , $b$ 중 최대값과 동일하고, $m i n$ 은 이들 값 중 최소값과 동일하다고 가정합니다. HSV 공간에서 $(h, s, v)$ 값을 찾으려면 $h$ ∈ $[0, 360)$ 은 각도의 색조 각도이고 $s, l \in [0.0, 1.0]$ 은 채도와 밝기이며 계산 공식은 다음과 같습니다.

v = 최 대

마찬가지로 HSV 좌표 공간의 색상을 RGB 좌표 공간으로 변환할 수도 있습니다.

HSV는 HSL(색조, 채도, 밝기)과 유사하게 HSB라고도 알려져 있습니다. 둘 다 인간 중심의 색상 모델입니다. 유일한 차이점은 채도와 밝기의 정의가 약간 다르다는 것입니다(아래 그림).

HSV는 DDC 소프트웨어의 색상 선택, 색상 변경 및 기타 색상 작업에 널리 사용됩니다. UE 및 UE 머티리얼 에디터에서 가장 일반적으로 사용되는 색상 모델이기도 합니다.

UE의 색상 선택기, 위쪽 절반은 HSV 그래픽 선택 인터페이스, 아래쪽 왼쪽은 RGB 색상 모델 값, 오른쪽 절반은 HSV 색상 모델 값입니다.

2.1.2.5 CMYK

CMYK는 각각 Cyan(청록색), Magenta(자홍색, 자홍색), Yellow(노란색) 및 Black(검정색)을 나타냅니다. 백색매체에 원색을 흡수하는 모델로 인쇄용으로 많이 사용되는 모델입니다.

2.1.2.6 YUV

YUV는 TV 등 디지털 분야에서 흔히 사용되는 색공간입니다. "Y"는 밝기(휘도, 루마)를 나타내고, "U"와 "V"는 채도 및 농도(색도, 채도)를 나타냅니다. Y'UV, YUV, YCbCr, YPbPr 및 기타 고유명사는 모두 YUV라고 부를 수 있습니다.

다음은 YUV 색 공간의 UV 분포 다이어그램입니다.

Y'UV, YUV, YCbCr 및 YPbPr이 참조하는 범위에는 종종 혼동이나 중복이 있습니다. 역사적 진화에서 YUV 및 Y'UV는 일반적으로 텔레비전의 아날로그 신호를 인코딩하는 데 사용되는 반면 YCbCr은 MPEG 및 JPEG와 같은 비디오 및 사진 압축 및 전송에 적합한 디지털 이미지 신호를 설명하는 데 사용됩니다. 그러나 요즘 YUV는 일반적으로 컴퓨터 시스템에서 널리 사용됩니다.

그림을 YUV 구성 요소로 분해하면 다음 그림을 얻을 수 있습니다.

위쪽이 일반 사진이고, 아래 3개 사진은 각각 Y, U, V 성분을 분해한 사진입니다.

위의 색상 모델 및 색상 공간 외에도 실제로는 다른 색상 모델 및 색상 공간이 많이 있지만 PBR과 밀접한 관련이 있는 유일한 색상 모델은 RGB 및 HSV 색상 모델입니다. 따라서 나머지 내용은 여기서 논의하지 않습니다. 관심이 있으시면 색상 모델(색상 모델)에 대한 심층적 이해 문서를 확인해 보세요.

2.1.3 색상 속성

2.1.3.1 색상환

색상환은 색상환이라고도 합니다. 이는 실제로 HSV 또는 HSL의 색조 구성 요소이며 2D 원으로 표시될 수 있습니다(아래 그림).

그 중 0도는 빨간색, 60도는 노란색, 120도는 녹색, 180도는 청록색, 240도는 파란색, 300도는 마젠타입니다.

색상환에서 60도 이내에 있는 색상을 인접 색상, 유사 색상이라고도 합니다. 100~179도 떨어져 있는 색상을 대비 색상이라고 합니다. 180도 서로 다른 색상을 보색이라고 합니다. 예를 들어, 빨간색의 경우 인접한 색상은 노란색과 자홍색이고, 대비되는 색상은 녹색과 파란색이며, 보색은 청록색입니다.

색상환에서 RGB와 CYM의 공통 인접 및 보색은 다음과 같습니다.

색상환에는 따뜻한 색과 차가운 색도 있는데, 이는 같은 물체가 다른 온도에서 발산하는 색을 나타내는 것 외에도 많은 의미(생동감, 긴장감, 감정, 강렬함, 과장, 식욕, 성숙함 등)를 나타냅니다. 그 중 따뜻한 색상은 물체 온도가 낮을 때 방출되는 색상을 나타내며 주황색을 중심으로 한 반원형입니다. 차가운 색상은 물체 온도가 높을 때 방출되는 색상을 나타내며 파란색을 중심으로 하는 반원입니다.

좋은 배색에서는 색상의 수가 너무 많지 않아야 하며 3가지 유형 내에서 조절되어야 합니다. 색상은 합리적이고 적절하게 조화되어야 하며 인접한 색상, 보색, 따뜻한 색조와 차가운 색조를 최대한 활용하여 그림의 통일성과 조화를 이루거나 대비와 효과를 높여야 합니다.

위 사진에서 차가운 색상의 넓은 영역은 산과 호수 환경의 고요함과 차가움을 보여주고, 따뜻한 색상의 작은 영역은 집 조명의 따뜻함을 강조합니다. 추위와 따뜻함의 강한 대비는 사람들에게 고대비의 시각적 인식을 제공합니다.

물론 실제 적용에서는 규칙이나 규정에 의해 제한되는 것은 바람직하지 않습니다. 테마가 목표가 되어야 하며, 컬러휠의 역할을 최대한 활용해야 합니다. 더 많은 색상 매칭 이론을 보려면 "색상 디자인의 원리"를 읽어보세요.

UE 머티리얼 에디터는 색조 수정 노드 HueShift를 제공합니다:

2.1.3.2 색상 수준

레벨은 HSV 색상 모델의 구성요소 V인 값을 반영하며, 이는 사람의 눈으로 느낄 수 있는 색상의 밝기 수준을 나타냅니다.

인간의 눈은 R, G, B의 세 가지 기본 색상의 밝기를 다르게 인식한다는 점을 언급할 가치가 있습니다. 녹색은 가장 큰 밝기 기여 값을 제공하고 빨간색과 파란색이 그 뒤를 따르며 이는 다음 공식으로 표현할 수 있습니다.

색 상 밝 기 = R * 0.3 + G * 0.6 + B * 0.1

위 공식을 잘 살펴보면 R, G, B 세 가지 밝기 기여값의 합이 정확히 $0.3 + 0.6 + 0.1 = 1.0$ 임을 알 수 있으며, 이는 에너지 절약도 보장합니다.

사진에서 색상의 밝기는 일반적으로 여러 개의 동일한 부분으로 나뉘며 각 부분의 범위는 동일하며 하나의 동일한 부분을 색상 스케일이라고 합니다.

그 중 검정에 가까운 밝기의 색상 레벨을 로우 톤(로우 톤, 섀도우, 블랙, 블랙 포인트라고도 함), 중간에 밝기가 있는 색상 레벨을 미드 톤(미드 톤, 노출이라고도 함), 흰색에 가까운 밝기의 색상 레벨을 하이 톤(하이 톤, 화이트, 하이라이트, 화이트 포인트라고도 함)이라고 합니다.

컬러 스케일 구분의 수와 명칭에 대한 통일된 규정은 없습니다. 예를 들어 Photoshop의 Camera Raw에서 색상 수준은 밝은 부분, 밝은 부분, 어두운 부분, 어두운 부분으로 나뉩니다.

Light Room에서는 색상 수준이 흰색, 하이라이트, 노출, 그림자, 검정색으로 구분됩니다.

구분과 명칭은 다르지만 검은색에 가까운 부분이 로우키, 가운데 부분이 중간톤, 흰색에 가까운 부분이 하이키라는 점만 기억하시면 됩니다.

컬러 스케일 톤을 이해하고 마스터하는 것은 PBR 머티리얼 운영, 포스트 프로세스, 톤매핑, 컬러 작업 등에 도움이 됩니다. 예를 들어 PBR의 디퓨즈 맵을 조정하고 각 컬러 레벨을 정밀하게 제어해야 하는 경우 UE의 머티리얼 노드 3PointLevels를 사용할 수 있습니다.

위 그림의 Black Value, Middle Value, White Value는 각각 Dark, Mid, Bright를 나타냅니다.

2.1.3.3 순수 색상

색순도는 색채도라고도 하며, 색순도의 생생함을 표현합니다. 순도가 높을수록 색상이 더 밝고 진해지며, 순도가 낮을수록 색상이 더 회색이고 연해집니다.

위 그림에서는 채도가 왼쪽에서 오른쪽으로 감소합니다. 채도가 높을수록 색이 더 어둡고 선명해지고, 채도가 낮을수록 회백색을 띠는 경향이 있는 것을 알 수 있습니다.

이러한 채도의 특성을 이용하여 그림은 채도가 높은 그림, 채도가 중간인 그림, 채도가 낮은 그림으로 구분할 수 있으며, 이는 서로 다른 스타일과 의미를 나타냅니다. 예를 들어, 채도가 높은 이미지는 열정과 열정으로 가득 차 있지만 참을 수 없고 시각적 피로를 느끼기 쉽습니다. 채도가 낮은 이미지는 차갑고 차분한 느낌을 나타내기도 하지만 우울한 느낌을 주기도 합니다.

같은 사진은 왼쪽이 채도가 낮아서 우울함과 감동을 줍니다. 오른쪽은 채도가 높아 산뜻하고 밝은 느낌을 줍니다. 이미지 출처

따라서 색상 순도를 최대한 활용하면 색상의 역할과 그림의 스타일을 강조할 수 있습니다.

UE 머티리얼 에디터는 채도를 쉽게 조정할 수 있는 해당 노드도 제공합니다.

2.1.3.4 색온도

색온도는 사진, 비디오, 출판, 그래픽 렌더링 및 기타 분야에서 중요한 응용 분야를 갖는 가시광선의 특성입니다. 광원의 색온도는 해당 색상을 이론적 열 흑체 방사체와 비교하여 결정됩니다. 사진에서는 화이트 밸런스라고도 합니다.

다음은 온도가 천천히 증가함에 따라 흑체 물질의 색상 변화를 보여주는 다이어그램입니다.

그러나 위의 그림은 대략적인 변화도일 뿐입니다. 실제로 발광체의 색온도는 다양한 요인과 관련이 있습니다. 계산 공식은 플랑크의 방사선 법칙으로 설명할 수 있습니다.

U(λ,T) = \frac{8\pi hcλ^{-5} { e^{\frac{hc}{λkT}-1 }

수식에 사용된 각 기호의 의미는 다음과 같습니다.

$U$ - 복사 에너지
$λ$ - 전자파 파장, 단위: 미터
$T$ - 온도, 단위 켈빈(Kelvin)
$h$ - 플랑크 상수, 값은 $6.626 \times 10^{- 34} J \cdot s$
$k$ - 볼츠만 상수, 값은 $1.381 \times 10^{- 23} J \cdot K^{- 1}$
$c$ - 진공에서 빛의 속도, 값은 $3.0 \times 10^{8} m \cdot s^{- 1}$ 입니다.

생활 속에서 일반적인 발광 물체에 해당하는 색온도는 다음과 같습니다.

색온도 발광체

1700K 매치 라이트

1850K 양초

2800K 텅스텐 램프(백열등)의 일반적인 색온도

3000K 할로겐 램프와 황색 형광등의 일반적인 색온도

3350K 스튜디오 "CP" 조명

3400K 스튜디오 램프, 사진 투광 조명(손전등 아님) 등...

4100K 달빛, 밝은 노란색 형광등

5000K 일광

5500K 평균 일광, 전자 플래시(제조사에 따라 다름)

5770K 유효 태양 온도

6420K 크세논 아크 램프

6500K 백색광 형광등의 가장 일반적인 색온도

9300K TV 화면(아날로그)

5000K 및 6500K 흑체의 색상은 각각 일반 D50 및 D65 광원의 색상과 유사하며 일반적으로 색 재현 상황(사진, 출판 등)에 사용됩니다. 사진에서 5000K는 태양에서 방출되는 백색광의 색온도로 가장 일반적으로 사용됩니다.

동일한 사진, 다른 색온도는 다른 효과를 나타냅니다.

왼쪽 사진은 일반 색온도 사진, 오른쪽 사진은 따뜻한 색온도로 강한 햇빛이 주는 따뜻한 느낌을 줍니다.

UE에서는 속성 패널을 통해 빛의 색온도를 조정하여 다양한 유형의 광원을 시뮬레이션할 수 있습니다.

2.1.3.5 대비

대비는 색상의 밝기(밝기) 사이의 관계를 반영하여 이미지 전체에서 밝은 부분과 어두운 부분의 대비를 나타냅니다.

대비가 높을수록 밝은 부분과 어두운 부분의 대비가 더욱 뚜렷해지며, 어두운 부분은 더 어두워지고 밝은 부분은 더 밝아집니다(아래 그림).

왼쪽 이미지의 대비를 강화한 후 오른쪽 이미지의 밝은 부분과 어두운 부분의 대비가 더 강해졌습니다.

대비를 적절하게 높이면 사진의 임팩트가 증가하고 사진의 투명도가 향상될 수 있지만, 동시에 너무 과하게 사용하지 않도록 주의하세요. 대비가 너무 높으면 데드 블랙과 데드 화이트가 나타나 사진이 이상하거나 불합리해집니다.

UE 머티리얼 에디터는 대비 조정 노드 CheapContrast도 제공합니다:

2.1.3.6 명확성

선명도는 이미지의 인식 가능성과 구별 가능성을 반영합니다. 정의가 높을수록 사진에 더 많은 세부 정보를 표시할 수 있습니다. 그렇지 않으면 사진이 흐려질 것입니다.

왼쪽 사진은 일반 화질의 사진입니다. 오른쪽 그림은 정의를 줄였습니다. 사진이 많이 흐려지는 것은 당연합니다.

마찬가지로 UE 머티리얼 에디터에도 색상 선명도를 조정하는 해당 노드가 있습니다.

2.1.3.7 선명도

선명도는 선명도와 유사하지만 차이점이 있습니다. 선명도는 그림 픽셀 간의 대비를 반영하고 선명도는 그림의 윤곽선이나 가장자리의 대비를 반영합니다. 보다 일반적으로 말하면 선명도는 모든 픽셀을 나타내는 반면, 선명도는 대비가 더 큰 윤곽선, 가장자리 또는 로컬 픽셀만 나타냅니다.

오른쪽 이미지를 선명하게 하면 얼굴, 머리카락, 옷, 잔디 등의 가장자리와 윤곽이 더 선명해집니다.

어떤 사람들은 다음과 같이 궁금해할 수도 있습니다. 색상에는 선명도가 있는데 왜 선명도가 필요한가요? **

사진의 관점에서 이 질문에 대답하는 것이 더 좋습니다. 사람(특히 아름다운 여성)이 포함된 사진의 경우 사진을 더 아름답게 만들기 위해 피부의 선명도를 높일 필요가 없고 얼굴과 얼굴 특징에서만 선명도를 높일 필요가 있는 경우가 많습니다. 선명도는 이 기능과 정확히 일치하므로 사진가나 디자이너는 아름답고 선명한 사진을 빠르게 얻을 수 있습니다.

Photoshop에는 선명도를 높이는 방법이 많이 있습니다. 일반적인 것에는 USM 선명화, 가장자리 선명화, 스마트 선명화, 고대비 보존 등이 포함됩니다.

UE 머티리얼 에디터에는 선명도를 높이는 머티리얼 노드도 있습니다:

위 그림의 HighPass는 PS의 고대비 보존 선명도입니다.

UE가 렌더링한 이미지의 경우 사후 처리 노드에서 선명화를 수행하는 것이 매우 필요합니다. UE는 기본적으로 deferred shading 모드를 채택하고 TAA(temporal anti-aliasing)를 활성화하며, TAA 알고리즘의 특성상 영상이 흐려지기 때문에 최종 단계에서 선명도를 높이면 TAA로 인한 영상 흐림을 어느 정도 상쇄하고 영상의 투명도와 심미성을 향상시킬 수 있습니다.

2.1.4 히스토그램

히스토그램은 각 밝기 수준에서 이미지 내 모든 픽셀의 수량 분포를 반영합니다.

일반적으로 히스토그램의 왼쪽은 어두운 톤을 나타내고, 가운데는 중간 톤, 오른쪽은 밝은 톤을 나타냅니다. 예를 들어 아래 사진의 왼쪽은 일반적으로 후처리된 사진이고 해당 히스토그램은 오른쪽 상단에 있습니다.

히스토그램을 통해 위 사진의 많은 픽셀의 밝기가 하이키 스타일의 필름인 하이키 부분에 집중되어 있음을 명확하게 관찰할 수 있습니다. 또한 실시간으로 색상 레벨을 조정하고 이미지의 히스토그램을 확인하여 전체 이미지의 밝기 변화를 관찰할 수도 있습니다.

2.1.5 톤 곡선

톤 곡선(톤 곡선)은 색상 값의 입력 값을 출력 값에 하나씩 매핑하는 곡선 기능으로, 다양한 색상 레벨에서 픽셀의 밝기를 정확하게 제어할 수 있습니다. 톤 곡선이 $f_{t o n e}$ 로 설정된 경우 색상 조정 공식은 다음과 같습니다.

x^{'} = f_{톤} (x)

여기서 $x^{'}$ 는 조정된 색상 값이고, $x$ 는 RGB의 모든 구성 요소일 수 있는 원래 색상 값입니다.

다음은 몇 가지 특별한 톤 곡선 조정 및 해당 렌더링입니다.

일반적인 영상과 톤커브, 이때의 톤커브는 45도의 직선입니다.

사진과 톤 곡선의 밝은 부분과 어두운 부분의 대비를 강화합니다. 이때, 톤 곡선의 어두운 부분은 직선 아래에 있고, 중간 톤은 직선 위에 있으며, 밝은 부분은 직선 위에 있습니다.

맞춤형 톤 곡선, 곡선이 넓은 범위에서 직선의 아래쪽 부분으로 벗어나므로 전체 사진 밝기가 더 어두워지고 대비가 더 작아집니다.

톤 커브는 매우 정확하고 자유롭고 유연한 색상 조정 기능을 제공하며 사진, 디지털 하드웨어, DDC, 이미지 처리, 컴퓨터 그래픽, 컴퓨터 비전, 심지어 PBR 제작에서도 결정적인 역할을 한다는 것을 알 수 있습니다.

2.1.6 선형 공간과 감마 공간

본질적으로 감마 곡선은 특수 톤 곡선이고 선형 곡선은 특수 감마 곡선입니다.

리니어 스페이스(Linear Space)는 RGB 색상이 톤 커브의 대각선 직선 상태(아래 그림)인 상태입니다. 선형 공간의 색상 값은 비선형 변경 없이 선형적으로 변경됩니다. 공식은 $x^{'} = f (x) = x$ 로 표현됩니다.

선형 공간의 반대는 감마 공간이며 지수형 톤 곡선을 갖는 변환 공간입니다. 감마 곡선 계산 공식은 다음과 같습니다.

x^{'} = f (x) = x^{n} = p o w (x, n)

그 중 $x$ 는 색상 $r, g, b$ 의 모든 구성 요소 값이고, 값 범위는 $[0.0, 1.0]$ 이며, $n$ 은 감마 보정 지수입니다. 아래 그림에서 $n$ 의 감마 공간 톤 곡선은 각각 $0.45$ , $1.0$ 및 $2.2$ 를 취합니다.

1.0은 입력 및 출력 값이 동일한 선형 공간입니다. 0.45와 2.2는 감마 곡선이며 이 공간의 색상은 밝아지거나 어두워지며 $0.45 \cdot 2.2 \about 1.0$ 는 두 번의 감마 보정 후에 선형 공간이 복원될 수 있도록 합니다.

x' = f_{gamma2.2}(f_{gamma0.45}(x)) = ({x^{0.45})^{2.2} = x^{0.45 \cdot 2.2} = x^{0.99} \대략 x

왼쪽에서 오른쪽으로: 0.45의 감마 보정 이미지, 1.0의 선형 공간의 원본 이미지, 2.2의 감마 보정 이미지.

위 왼쪽 그림에서 2.2의 감마 보정을 수행하면 중간 이미지를 얻을 수 있습니다. 마찬가지로 위 사진의 오른쪽에 0.45의 감마 보정을 수행한 후 중간 이미지도 얻을 수 있습니다.

선형 공간은 컴퓨터 그래픽에서 중요한 역할을 합니다. GPU 셰이더에서 여러 번 복잡한 계산을 수행한 후에도 올바른 색상 값을 얻을 수 있음을 보장할 수 있습니다. 반대로, 감마 공간에서 셰이더 계산을 수행하면 오차가 큰 그림 효과를 얻을 수 있습니다.

상단 부분은 선형 공간으로, 다양한 광도 반응에서 정확한 결과를 얻을 수 있습니다. 아래 부분은 감마 공간 계산이며 빛 강도에 대한 반응이 너무 강하면 노출 과다 사진이 얻어집니다.

선형 공간은 보다 정확한 렌더링 결과를 생성할 수 있기 때문에 주류 상용 엔진(UE, Unity, CryEngine, Frostbite 등)은 모두 선형 공간 렌더링 파이프라인을 지원합니다.

선형 공간 렌더링 파이프라인(하단)은 셰이더 초기 단계에서 감마 보정을 제거하고 셰이더 후기 단계에서 감마 보정을 복원합니다.

그렇다면 선형 공간 렌더링 파이프라인을 제거하고 초기 및 후기 단계에서 감마 보정에 다시 추가하는 이유는 무엇입니까?

사실 이는 역사 속에 남겨진 문제이다.

초기 텔레비전은 CRT 브라운관을 사용했습니다. 전압의 세기는 사람의 눈이 인지하는 밝기와 정비례하지 않기 때문에 지수가 0.45인 지수 곡선을 이룬다. 이 문제를 해결하기 위해 인덱스 2.2의 감마 보정을 도입하여 전압이 사람의 눈이 인지하는 밝기에 선형적으로 비례하도록 표시되는 이미지의 데이터를 강제로 늘립니다. 시간이 지남에 따라 많은 후속 하드웨어 장치, 색 공간(예: sRGB), 파일 형식(예: jpeg, png 등) 및 DDC 소프트웨어(예: ps)에서 기본적으로 감마 보정을 수행했으며 현재까지 사용되고 있습니다.

오늘날의 LCD 모니터에는 더 이상 감마 보정이 필요하지 않지만, 이미 널리 퍼져 있는 색 공간 및 감마 보정 표준과 호환되기 위해서는 감마 보정을 유지해야 합니다. 따라서 영상이 디스플레이 장치에서 정상적으로 표시될 수 있도록 쉐이더 후반부에 감마 보정을 복원해야 합니다.

선형 공간과 감마 공간에 대한 자세한 내용은 감마 및 선형 색상 공간을 참조하세요.

2.1.7 HDR 및 톤매핑

**HDR(High Dynamic Range)**은 높은 명암비와 더 넓은 색 영역을 갖춘 하이 다이나믹 레인지를 말합니다. 소프트웨어 기반 포스트 프로세스 HDR과 하드웨어 기반 디스플레이 장치 HDR로 나눌 수 있습니다. HDR의 반대는 LDR(Low Dynamic Range, 낮은 동적 범위)입니다.

소프트웨어 기반 포스트 프로세스 HDR은 사진 및 그래픽 렌더링 포스트 프로세스 단계에서 밝은 영역에 꽃 같은 효과를 추가하는 것을 말하지만 실제로는 여전히 LDR(낮은 동적 범위)일 수 있습니다.

UE 포스트 프로세스 단계에서 블룸 효과가 추가되었습니다.

하드웨어 기반 HDR 디스플레이 장치에는 두 가지 중요한 매개변수가 있습니다.

종이 백지: 직역하면 백지의 백지로서 백색의 밝기를 나타내며, 단위는 니트입니다.
최대 휘도: 디스플레이 장치가 달성할 수 있는 최대 밝기를 나타내며 단위도 니트입니다.

LDR 장치에서 Paper White와 Max Luminance는 동일하며 일반적으로 100니트입니다. HDR 디스플레이 장치에서 Paper White는 여전히 약 100이고 최대 휘도는 400~1000니트에 도달할 수 있습니다.

따라서 하드웨어 기반 HDR 디스플레이 장치는 표준 백색보다 몇 배나 밝은 밝기를 표시할 수 있다는 점에서 진정한 의미의 HDR입니다.

물론 HDR 디스플레이 장치를 갖는 것만으로는 충분하지 않습니다. 애플리케이션은 렌더링 단계에서 HDR 데이터를 지원해야 합니다. 가장 직관적인 점은 셰이더의 데이터가 색상 값이 255(또는 정규화된 1.0)를 초과할 수 있다는 것입니다.

현재 주류 상용 엔진은 HDR 렌더링 프로세스를 지원합니다. 다음 그림은 UE의 LDR과 HDR의 비교 차트입니다.

UE의 LDR(상단)과 HDR(하단) 비교 사진을 보면 HDR 색상이 더 생생하고 밝기 대비가 더 뚜렷하다는 것을 확실히 알 수 있습니다.

HDR 지원 애플리케이션은 문제에 직면합니다. 애플리케이션 단계의 HDR 데이터 형식이 디스플레이 장치에서 요구하는 HDR 형식과 일치하지 않거나 디스플레이 장치가 HDR을 전혀 지원하지 않고 LDR 형식만 지원합니다.

위의 문제를 해결하기 위해서는 HDR 색상을 LDR 형식이나 다른 HDR 형식(VDR)으로 변환할 수 있는 Tone Mapping의 도입이 필요합니다.

일반적인 톤매핑 방법은 다음과 같습니다.

라인하르트 톤매핑

이 방법은 Reinhard가 2002년에 Photographic Tone Reproduction for Digital Images 논문을 통해 제안한 톤매핑 방법이다.

하이라이트와 섀도우의 저장공간을 압축해 중간톤 디테일과 대비를 강화한 것이 특징이다. 곡선은 아래와 같습니다.

Reinhard를 사용하여 하이라이트와 그림자의 세부 사항을 더 잘 보존하십시오.

위 이미지는 톤매핑을 사용하지 않았으나, 아래 이미지는 라인하르트 톤매핑 방식을 사용했습니다. 하이라이트 디테일이 잘 보존되어 있는 것을 확실히 볼 수 있습니다.

Reinhard의 구현은 매우 간단하며, 성능 요구사항이 엄격한 초기 실시간 렌더링 분야에 매우 적합합니다. 셰이더 구현 코드:

cpp

// color는 선형(Linear)의 HDR컬러 ，adapted_lum는 에 따라 개 의 휘도(Luminance/Brightness)
float3 ReinhardToneMapping(float3 color, float adapted_lum) 
{
    const float MIDDLE_GREY = 1; // 내에서 ，
    color *= MIDDLE_GREY / adapted_lum;
    return color / (1.0f + color);
}

크라이엔진 톤매핑

2007년에 출시된 Crysis는 CryEngine 렌더링 엔진을 사용합니다. CryEngine은 더 간단하고 더 폭력적인 톤매핑을 사용합니다. 그 곡선은 다음과 같습니다.

이 방법은 하이라이트와 밝기의 대비를 더 많이 압축하기 때문에 Reinhard보다 높은 대비와 색상의 사진을 얻을 수 있습니다.

CE 톤매핑이 활성화된 Crysis 게임 영상입니다.

영화 톤매핑

2010년에 어드벤처 액션 콘솔 게임 Uncharted 2는 Filmic Tone Mapping(영화 수준 톤매핑)이라는 톤매핑 방법을 발표했습니다.

이 방법은 전문 디지털 장비를 사용하여 아티스트 또는 TA가 시뮬레이션한 필름 느낌과 DDC 소프트웨어를 사용한 수동 톤매핑 결과를 결합한 다음 피팅 소프트웨어를 사용하여 톤매핑 곡선을 얻는 것에서 파생됩니다. 렌더링 분야에 적용하면 수동으로 조정한 결과를 얻을 수 있어 고품질의 필름감을 얻을 수 있습니다.

위 그림에서 볼 수 있듯이 Filmic Tone Mapping 곡선은 어두운 부분에서 매우 길고 완만한 경사를 가지고 있는데, 이는 어두운 부분의 표시 영역이 크게 압축되어 중간 부분과 밝은 부분을 위한 공간이 생기는 것을 보여줍니다. 아래 사진은 언차티드 2의 게임 화면입니다.

구현 코드가 약간 더 깁니다.

cpp

float3 F(float3 x)
{
	// 의 계수
	const float A = 0.22f;
	const float B = 0.30f;
	const float C = 0.10f;
	const float D = 0.20f;
	const float E = 0.01f;
	const float F = 0.30f;
 
	return ((x * (A * x + C * B) + D * E) / (x * (A * x + B) + D * F)) - E / F;
}

float3 Uncharted2ToneMapping(float3 color, float adapted_lum)
{
	const float WHITE = 11.2f; // 위치 ，
	return F(1.6f * adapted_lum * color) / F(WHITE);
}

감마 보정은 Filmic 톤매핑과 결합하여 렌더링 성능을 향상시킬 수도 있습니다.

ACES 톤매핑

ACES(Academy Color Encoding System)는 색상을 전문적으로 관리하고 인코딩 및 디코딩하는 시스템입니다. 설립자인 영화예술과학아카데미(Academy of Motion Picture Arts and Sciences)는 할리우드 오스카상을 수여하는 공식 기관입니다.

ACES는 LDR 및 다양한 HDR 색상 데이터 형식과 호환되는 범용 형식 세트를 제공합니다. 실시간 렌더링의 경우 선형 공간 색상을 HDR 형식으로 변환하려면 다음 톤 곡선만 사용하면 됩니다.

코드로 구현하면 다음과 같습니다.

cpp

float3 ACESToneMapping(float3 color, float adapted_lum)
{
	const float A = 2.51f;
	const float B = 0.03f;
	const float C = 2.43f;
	const float D = 0.59f;
	const float E = 0.14f;

	color *= adapted_lum;
	return (color * (A * color + B)) / (color * (C * color + D) + E);
}

UE4에서 사용하는 필름 톤 매퍼 역시 ACES 표준을 따르며, 사용되는 곡선은 다음과 같습니다.

이전 톤 매퍼와 비교할 때 새로운 렌더링 결과는 물리적 현실에 더 가깝습니다.

위 사진은 UE의 Old Tone Mapping이고, 아래 사진은 ACES의 Tone Mapping을 사용한 것입니다. 새로운 톤매핑의 자체 조명 비율이 충분히 크면 색상이 흰색으로 변하기 시작하여 물리적 현실과 더 일치하는 것을 볼 수 있습니다.

톤매핑과 함께 자주 등장하는 개념으로는 컬러 그레이딩(Color Grading)과 LUT(Color Lookup Table)가 있습니다. 모두 포스트 프로세스 카테고리에 속합니다. 자세한 내용은 Unreal의 공식 문서인 Color Grading and Film Tone Mapper and High Dynamic Range Display Output을 참조하세요.

2.2 색상 작업

이 섹션에서는 후속 PBR 제작을 위한 보다 견고한 기반을 마련하기 위해 색상에 대한 다양한 일반적인 작업과 결과의 변화 추세에 대한 심층 분석을 제공합니다.

2.2.1 기본 작동

이 섹션에서는 색상, 덧셈, 뺄셈, 곱셈 및 나눗셈의 기본 연산을 분석합니다. 덧셈과 뺄셈, 곱셈과 나눗셈은 본질적으로 동일하므로 덧셈과 곱셈만 분석하면 됩니다.

2.2.1.1 색상 추가

색상 추가는 가장 일반적으로 사용되는 작업으로, 일반적으로 여러 광원을 중첩하거나 여러 색상 구성 요소를 중첩하는 데 사용됩니다. 물론 PBR 제작에서는 색상 결과를 조정하기 위해 색상 추가가 자주 사용됩니다. 색상 추가 작업은 본질적으로 색상의 선형 곡선 변환이며 함수로 추상화됩니다.

f (x) = x + c

그 중 $c$ 는 덧셈 피연산자이다.

색상 추가 연산 분석은 주로 두 가지 상황으로 나눌 수 있습니다. 하나는 피연산자가 회백색인 경우입니다. 다른 하나는 피연산자가 색상이라는 것입니다.

아래 사진처럼 첫 번째 경우입니다. 황백색 $(0.25, 0.25, 0.25)$ 에 색상 $(0.75, 0.5, 0.25)$ 이 추가되고 오른쪽의 새로운 색상 $(1.0, 0.75, 0.5)$ 이 얻어지는 것을 볼 수 있습니다.

색상 피연산자의 HSV는 $(30, 0.67, 0.75)$ 이고 새 색상 HSV는 $(30, 0.51, 1.0)$ 입니다. 이를 통해 회색에 색상을 추가하면 새로운 색상의 색상은 변하지 않고 채도는 감소하며 밝기는 증가한다는 결론을 내릴 수 있습니다.

이제 두 번째 경우를 살펴보겠습니다. 회색을 색상으로 변경합니다.

색상 피연산자 1의 HSV는 $(30, 0.67, 0.75)$ 이고, 색상 피연산자 2의 HSV는 $(216, 0.82, 0.59)$ 이며, 결과 색상의 HSV는 $(300, 0.07, 0.84)$ 입니다. 결론적으로 색상이 색상에 추가되면 새로운 색상의 색조가 변경되고 채도도 변경되며 밝기가 증가합니다.

실제로 검정색과 같은 색상의 색상을 추가하는 등 다른 특수한 추가 사례도 있습니다. 결과적인 색상 변경은 아래 표에 나와 있습니다.

덧셈 피연산자 색조 변화 채도 변화 밝기 변화 대비 변화

회색 변하지 않은 더 낮은 증가하다 더 낮은

색깔 변화 변경하거나 동일하게 유지 증가하거나 변하지 않음 감소 또는 변경되지 않음

검정색 변하지 않은 변하지 않은 변하지 않은 변하지 않은

같은 색상 색상 변하지 않은 변경하거나 동일하게 유지 증가하거나 변하지 않음 감소 또는 변경되지 않음

흰색 0이 된다 0이 된다 1보다 크거나 같음 0이 된다

위의 표는 덧셈 연산에 대한 것입니다. 뺄셈의 결과는 정기적으로 덧셈과 비교됩니다. 줄어든 것은 늘어나고, 늘어난 것은 줄어들고, 변하지 않은 것은 변하지 않고 남는다.

2.2.1.2 색상 곱셈

색상 곱셈은 가장 일반적으로 사용되는 기본 작업이기도 합니다. 즉, 특정 계수에 따라 색상이 약화되거나 향상됩니다. 색상 곱셈 작업은 본질적으로 색상의 선형 곡선 스케일링이며 함수로 추상화됩니다.

f (x) = c \cdot x

여기서 $c$ 는 곱셈 피연산자입니다.

색상 곱셈 연산은 회색 요소와 색상 요소라는 두 가지 범주로 나눌 수도 있습니다. 회색 요인은 두 가지 상황으로 나뉩니다. 요인이 1보다 크거나 1보다 크지 않습니다. 먼저 아래와 같이 회색 요인을 분석합니다.

위 그림은 1보다 작은 요소이며 새로운 색상의 색조와 채도는 변경되지 않고 밝기는 감소합니다. 아래쪽 그림은 1보다 큰 요소이며 새 색상의 색조와 채도는 변경되지 않고 밝기가 증가합니다.

위 사진에서는 두 가지 색상을 곱해 보니 색상, 채도, 명도가 모두 바뀌었습니다.

일부 특수한 상황과 결합하여 다음 표를 얻을 수 있습니다.

곱셈 피연산자 색조 변화 채도 변화 밝기 변화 대비 변화

회색(1보다 큼) 변하지 않은 변하지 않은 증가하다 증가하다

회색(1 미만) 변하지 않은 변하지 않은 더 낮은 더 낮은

흰색 변하지 않은 변하지 않은 변하지 않은 변하지 않은

검정색 0이 된다 0이 된다 0이 된다 0이 된다

색깔 변화 변화 변화 변화

나눗셈은 회색(1보다 큼)과 회색(1보다 작음)이 반전되고 검은색으로 나눈 결과가 정의되지 않는다는 점을 제외하면 곱셈과 유사한 규칙을 갖습니다.

2.2.2 색상 보간

색상 보간은 일련의 보간 계수를 사용하여 여러 피연산자로부터 서로 다른 가중치를 갖는 값을 얻는 작업입니다. PBR 제작, 포스트 프로세스, 디지털 포스트 프로세스 및 기타 분야에서 널리 사용됩니다. 일반적인 보간 방법에는 선형, S자형, 삼각형 보간 등이 있습니다.

2.2.2.1 선형 보간

선형 보간에는 두 개의 피연산자 $a$ , $b$ 와 보간 계수 $x$ 가 필요하며 보간 공식은 다음과 같습니다.

f (x) = a + (b - a) * x

그 중 $x$ 의 값 범위는 $[0, 1]$ 이다. 위의 공식에 해당하는 곡선은 다음과 같습니다.

UE Material Editor는 선형 보간 노드도 제공합니다:

2.2.2.2 S 보간

선형 보간은 피연산자 근처에서 뻣뻣한 전환을 가지며 충분히 자연스럽지 않지만 S자 보간은 이 문제를 해결할 수 있습니다. S자형 보간은 $\sin$ , 톤매핑, 베지어 곡선 등 다양한 방법으로 시뮬레이션할 수 있습니다.

그 중 $\sin$ 으로 시뮬레이션한 S자 보간 공식은 다음과 같습니다.

f (x) = \sin (x \cdot π - \frac{π}{2}) \cdot 0.5 + 0.5

시뮬레이션된 곡선은 다음과 같습니다.

위 그림에서 볼 수 있듯이 곡선의 양쪽 끝에서 경사가 수평에서 점차적으로 전환되어 부드러운 보간 목적을 달성합니다.

UE는 기본적으로 위 곡선에 대한 보간 머티리얼 노드를 제공하지 않으며 수동으로 구현해야 합니다. 저자가 구현한 머티리얼 함수 SineLerp는 다음과 같습니다:

UE에 내장된 Sine 머티리얼 노드는 내부적으로 $π$ 와 오프셋을 곱하므로 위에서 언급한 공식과 구현이 약간 다릅니다. 더 간단해지겠지만, UE 머티리얼 에디터에 익숙하지 않은 사람들에게는 혼란을 야기할 수도 있습니다.

2.2.2.3 기타 보간법

노멀 융합, 삼각형 보간, 그리드 보간 및 높이 맵 보간과 같은 기타 보간은 다양한 애플리케이션 시나리오에 해당하며 PBR 재질에서는 거의 사용되지 않습니다. 관심 있는 학생들은 관련 정보를 직접 확인하거나 UE 자료 편집기로 이동하여 탐색할 수 있습니다.

UE 머티리얼 에디터에서 제공하는 다양한 보간 방법.

2.2.3 색상 혼합

색상 혼합이란 특정 색상과 대상 색상을 어떤 방식으로 혼합하는 작업을 말합니다. 이러한 작업을 **블렌드 모드(Blend Mode)**라고 합니다.

혼합 모드에 따라 혼합 결과가 달라지며 일반적으로 혼합 색상(혼합 색상, $a$ 로 표시) 및 기본 색상( $b$ 으로 표시)의 두 가지 색상이 포함됩니다. 일부 혼합 모드에는 혼합 계수 $알 파$ 도 포함됩니다.

또한 Photoshop의 레이어 블렌딩 모드이며 UE도 해당 블렌딩 머티리얼 노드를 제공합니다. 다양한 혼합 모드가 있으며 일반, 어둡게, 밝게, 채도, 차이, 색상 등과 같은 여러 범주로 나눌 수 있습니다. (아래 그림)

Photoshop의 레이어 블렌딩 모드는 미술, TA, 사진, 디자인 및 기타 분야의 학생들에게 친숙한 것으로 간주됩니다.

보통

일반 블렌딩 모드는 가장 일반적이고 일반적으로 사용되는 블렌딩 모드입니다. 실제로 두 레이어 사이에 선형 보간을 수행합니다. 그 공식은 다음과 같습니다.

f (a, b, 알 파) = a \cdot 알 파 + b \cdot (1 - 알 파)

UE를 통해 얻을 수 있는 효과는 다음과 같습니다.

곱하기

곱하면 혼합 색상과 기본 색상이 곱해지며 일반적으로 색상의 밝기와 채도가 낮아집니다. 공식은 다음과 같습니다.

f (a, b) = a \cdot b

UE를 통해 얻을 수 있는 효과는 다음과 같습니다.

색상 번

이 혼합 모드에서는 혼합 색상 $a$ 이 더 어두울수록 최종 결과에 해당 색상이 더 많이 사용됩니다. $a$ 색상이 흰색이면 변경 사항이 적용되지 않습니다. 공식:

f (a, b) = 1 - \frac{1 - b}{a}

UE의 머티리얼 노드 Blend_ColorBurn은 다음 블렌딩 모드를 구현합니다.

선형 번

기본 색상을 블렌드 색상에 추가하고 결과에서 1을 뺍니다. 공식:

f (a, b) = a + b - 1

UE 머티리얼 노드 Blend_LinearBurn의 내부 구현 및 효과:

컬러 닷지

기본 색상을 반전시키고 이를 블렌드 색상으로 나누어 결과를 밝게 합니다. 혼합 공식:

f (a, b) = \frac{b}{1 - a}

UE의 머티리얼 노드 Blend_ColorDodge는 다음 블렌딩 모드를 달성할 수 있습니다:

선형 회피

블렌드 색상에 기본 색상을 추가합니다. 혼합 공식:

f (a, b) = a + b

UE의 머티리얼 노드 Blend_LinearDodge는 다음 블렌딩 모드를 달성할 수 있습니다:

선형 조명

선형 조명은 오버레이의 선형 버전이며 더 대략적인 결과를 제공하는 데 사용됩니다. 이 기능은 혼합 색상이 50% 회색보다 밝을 때마다 화면 작업을 통해 기본 색상과 혼합 색상을 결합하여 혼합 색상 비교를 수행합니다. 블렌드 색상이 50% 회색보다 어두우면 곱하기 기능과 마찬가지로 기본 색상에 블렌드가 곱해집니다. 공식은 다음과 같습니다.

f(a,b)={ \begin{사례} ab, &{\mbox{if }a<0.5 \\2a+b-1,&{\mbox{else} \end{사례} }

UE 머티리얼 노드 Blend_LinearLight의 블렌딩 효과:

어둡게

기본 색상과 혼합 색상의 각 픽셀에 대해 더 어두운 값을 선택합니다. 블렌드 색상이 흰색이면 변화가 발생하지 않습니다. 공식:

f (a, b) = min (a, b)

UE 머티리얼 에디터의 Blend_Darken 구현 및 효과:

밝게

픽셀당 기본 색상과 혼합 색상을 비교하여 더 밝은 결과를 반환합니다. 공식:

f (a, b) = max (a, b)

UE 머티리얼 에디터의 Blend_Lighten 구현 및 효과:

차이점

블렌드에서 기본 색상을 뺀 다음 결과의 절대값을 취하여 반전된 스타일 효과를 만듭니다. 공식:

f (a, b) = | a - b |

UE 머티리얼 에디터의 Blend_Difference 구현 및 효과:

제외

기본 색상과 블렌드 텍스처를 반으로 나누고 결합한 후 결과의 부분 반전을 수행합니다. 공식:

f (a, b) = 0.5 - 2 (a - 0.5) (b - 0.5)

UE 머티리얼 에디터의 Blend_Exclusion 구현 및 효과:

하드 라이트

Hard Light는 기본 색상을 필터링하거나 곱하고 혼합한다는 점에서 Overlay의 대략적인 버전과 유사합니다. 이 기능은 혼합 색상이 50% 회색보다 밝을 때마다 화면 작업을 통해 기본 색상과 혼합을 결합하여 혼합 색상을 비교합니다. 블렌드가 50% 회색보다 어두우면 곱하기 기능과 마찬가지로 기본 색상에 블렌드가 곱해집니다. 그런 다음 최종 결과의 대비를 높여 대략적인 출력을 생성합니다. 공식은 다음과 같습니다.

f(a,b)={\begin{cases}2ab, &{\mbox{if }a<0.5 \\1 - (1-2(a-0.5))(1-b),&{\mbox{else}\end{cases}

UE 머티리얼 에디터의 Blend_HardLight로 얻은 효과:

오버레이

오버레이는 PS에서는 오버레이라고 하며 기본 색상을 필터링하거나 곱하여 혼합합니다. 이 기능은 혼합 색상이 50% 회색보다 밝을 때마다 화면 작업을 통해 기본 색상과 혼합을 결합하여 혼합 색상을 비교합니다. 블렌드가 50% 회색보다 어두우면 곱하기 기능과 마찬가지로 기본 색상에 블렌드가 곱해집니다. 공식:

f(a,b)={ \begin{사례} 2ab, &{\mbox{if }a<0.5 \\1-2(1-a)(1-b),&{\mbox{else} \end{사례} }

UE 머티리얼 노드 Blend_Overlay의 블렌딩 효과:

핀 라이트

포인트 라이트는 기본 색상을 밝게 하거나 어둡게 하고 함께 혼합한다는 점에서 오버레이와 유사합니다. 이 기능은 블렌드 색상을 비교하여 블렌드가 50% 회색보다 밝을 때마다 필터링 작업을 통해 기본 색상과 블렌드를 결합합니다. 블렌드가 50% 회색보다 어두우면 곱하기 기능과 마찬가지로 기본 색상에 블렌드가 곱해집니다. 대비가 부드러워져 이 기능이 오버레이보다 덜 거친 버전이 됩니다. 공식:

f(a,b)={ \begin{사례} \min(2a,b), &{\mbox{if }a<0.5 \\ \max(2(a-0.5),b),&{\mbox{else} \end{사례} }

UE 머티리얼 노드 Blend_PinLight의 블렌딩 효과:

화면

스크린(Screen)은 PS에서는 스크린이라고 합니다. 혼합색을 누르면 배경색이 더 밝아집니다. 작동 방식은 다음과 같습니다. 두 색상을 빼고 곱한 다음 결과를 뺍니다. 공식:

f (a, b) = 1 - (1 - a) (1 - b)

UE 머티리얼 에디터의 Blend_Screen 구현 및 효과:

소프트 라이트

소프트 라이트는 오버레이의 부드러운 버전입니다. 이 기능은 블렌드 색상을 비교하여 블렌드가 50% 회색보다 밝을 때마다 필터링 작업을 통해 기본 색상과 블렌드를 결합합니다. 블렌드가 50% 회색보다 어두우면 곱하기 기능과 마찬가지로 기본 색상에 블렌드가 곱해집니다. 대비가 부드러워져 이 기능이 오버레이보다 덜 거친 버전이 됩니다. 공식:

f(a,b)={ \begin{사례} (a+0.5)\cdot b, &{\mbox{if }a<0.5 \\ 1 - (1-(a-0.5))(1-b),&{\mbox{else} \end{사례} }

포토샵 후처리에서 흔히 사용되는 블렌딩 모드이기도 하며, 사진의 대비를 높여 투명감을 향상시킬 수 있습니다. UE 머티리얼 노드 Blend_SoftLight의 블렌딩 효과:

2.3 공통 곡선

이전 두 섹션에서 볼 수 있듯이 색상의 원리, 이론 및 작동에는 곡선 기능이 광범위하게 사용됩니다. 이 섹션에서는 PBR 제작에 일반적으로 사용되는 곡선을 요약하고 분석합니다.

2.3.1 선형 곡선

선형 곡선은 색상 보간, 톤매핑, 포스트 프로세스, 혼합 및 기타 작업에 자주 사용됩니다. 추상적인 공식은 다음과 같습니다.

f (x) = 도 끼 + b

여기서 $x$ 는 변수이고 $a$ 와 $b$ 는 실수입니다. $a = 0.6, b = - 0.1$ 일 때의 곡선은 다음과 같습니다.

2.3.2 지수 곡선

지수 곡선은 변수 $x$ 의 지수 $n$ 이 1보다 크다는 것을 의미하며, 이는 여러 다항식으로 추상화될 수 있습니다.

f (x) = \sum_{i = 1}^{n} a_{i} x^{i} + b

여기서 $a_{i}$ 는 각 항의 실수입니다. 물론 실제 응용에서는 다항식을 거의 사용하지 않습니다. 일반적으로 하나의 항, 즉 $a_{n} = 1, a_{i} = 0 (i < n), b = 0$ 만 필요하며 다음과 같이 단순화할 수 있습니다.

f (x) = x^{n}

또한 $n = 2$ 를 취하면 곡선 $f (x) = x^{2}$ 과 해당 곡선 그래프를 얻을 수 있습니다.

위 그림에서 알 수 있듯이, 지수 곡선에서는 밑이 1보다 작을 때 값이 원래 값보다 작아집니다.

일반적으로 다양한 지수를 갖는 곡선이 사용됩니다.

조심스러운 어린이 신발은 $n = 2.2$ 및 $n = 0.45$ 일 때 위에서 언급한 감마 보정 곡선이라는 것을 발견했어야 합니다.

2.3.3 삼각함수

삼각 함수에는 사인, 코사인, 탄젠트, 코탄젠트 등이 포함되지만 PBR 제작에는 사인과 코사인이 일반적으로 사용됩니다. 사인과 코사인은 본질적으로 동일하지만 오프셋이 다르므로 아래에는 사인 공식만 나열되어 있습니다.

f (x) = a \cdot \sin (x \cdot t + θ) + b

여기서 $a$ 는 진폭, $t$ 는 주기 스케일링 계수, $θ$ 는 위상 오프셋, $b$ 는 진폭 오프셋입니다. $a = 1, t = 1, θ = 0, b = 0$ 이 $f (x) = \sin (x)$ 일 때 해당 곡선은 다음과 같습니다.

$a = 0.5, t = π, θ = - \frac{π}{2}, b = 0.5$ 일 때 S자형 보간 곡선을 얻을 수 있습니다.

f (x) = 0.5 \cdot \sin (x \cdot π - \frac{π}{2}) + 0.5

2.3.4 베지어 곡선

베지어 곡선은 여러 제어점으로 제어되는 부드러운 곡선입니다. 제어점의 개수를 $n$ 이라고 가정하면, 제어점은 $P_{0}, P_{1}, . . ., P_{n - 1} (n \geq 2)$ 로 표현할 수 있습니다.

제어점 수가 2개인 경우 베지어 곡선 공식은 다음과 같습니다.

B (t) = P_{0} \cdot t + P_{1} \cdot (1 - t), t \in [0, 1]

실제로는 선형 보간 및 일반 혼합 공식입니다.

제어점 수가 3개인 경우 베지어 곡선 수식 및 곡선 다이어그램은 다음과 같습니다.

B (t) = P_{0} \cdot (1 - t)^{2} + P_{1} \cdot 2 t (1 - t) + P_{2} \cdot t^{2}, t \in [0, 1]

제어점 수가 4개인 경우 공식은 더 복잡해집니다.

B (t) = P_{0} \cdot (1 - t)^{3} + P_{1} \cdot 3 t (1 - t)^{2} + P_{2} \cdot 3 (1 - t) t^{2} + P_{3} \cdot t^{3}, t \in [0, 1]

해당 예제 다이어그램은 다음과 같습니다.

2.3.5 Catmull-Rom 곡선

Bezier 곡선의 특징은 시뮬레이션된 곡선이 제어점을 통과하지 않는다는 것이며 Catmull-Rom 곡선은 이 기능을 정확하게 보완합니다. 시뮬레이션된 곡선은 매끄러우며 제어점을 통과합니다. (아래 사진)

곡선 공식과 계산은 Centripetal Catmull-Rom 스플라인에서 찾을 수 있습니다.

이러한 장점으로 인해 Photoshop, LightRoom 및 UE의 곡선 조정과 같은 애니메이션 보간, 색상 혼합 및 곡선 조정에 널리 사용됩니다.

사진의 톤을 정확하게 조정하려면 Lightroom에서 톤 곡선의 여러 제어점을 사용하세요. 여기의 제어점은 Catmull-Rom 곡선을 사용합니다.

2.3.6 기타 곡선

사실 더 많고 더 많은 곡선이 있지만 지면의 제약으로 위에서 일반적으로 사용되는 곡선의 종류만 소개합니다. 다른 곡선에 대해서는 다음 링크를 참조하십시오.

유명한 곡선 목록
완화 기능 치트 시트

이징 기능 빠른 조회 테이블에는 수많은 실제 곡선이 나열되어 있으며 동적 그래프가 함께 제공되므로 곡선의 부드러움과 기울기를 직관적으로 확인할 수 있습니다.

특별 지침

모든 참고 문헌의 저자에게 감사드립니다!
이 기사 시리즈는 계속될 예정이며 나중에 더욱 흥미진진해질 것입니다! !

UE Part 1에서 PBR 머티리얼 제작 가이드 - 색상 지식 ​

2. 색상 지식 ​

2.1 색상 이론 ​

2.1.1 이미징 원리 ​

2.1.2 색상 모델 및 색상 공간 ​

2.1.2.1 CIE 1931 XYZ ​

2.1.2.2 실습 ​

2.1.2.3 RGB ​

2.1.2.4 HSV ​

2.1.2.5 CMYK ​

2.1.2.6 YUV ​

2.1.3 색상 속성 ​

2.1.3.1 색상환 ​

2.1.3.2 색상 수준 ​

2.1.3.3 순수 색상 ​

2.1.3.4 색온도 ​

2.1.3.5 대비 ​

2.1.3.6 명확성 ​

2.1.3.7 선명도 ​

2.1.4 히스토그램 ​

2.1.5 톤 곡선 ​

2.1.6 선형 공간과 감마 공간 ​

2.1.7 HDR 및 톤매핑 ​

2.2 색상 작업 ​

2.2.1 기본 작동 ​

2.2.1.1 색상 추가 ​

2.2.1.2 색상 곱셈 ​

2.2.2 색상 보간 ​

2.2.2.1 선형 보간 ​

2.2.2.2 S 보간 ​

2.2.2.3 기타 보간법 ​

2.2.3 색상 혼합 ​

2.3 공통 곡선 ​

2.3.1 선형 곡선 ​

2.3.2 지수 곡선 ​

2.3.3 삼각함수 ​

2.3.4 베지어 곡선 ​

2.3.5 Catmull-Rom 곡선 ​

2.3.6 기타 곡선 ​

특별 지침 ​

📚 참고 자료 및 공식 링크 (References) ​

🔗 연관 지식 베이스 (Wiki & Tools) ​