데브루키 2018.12.1 발표자료 알콜코더 박민근 유니티에서 Color Space - Linear Color Space 설명 Gamma Correction 설명 유니티 Linear Color Space에서 UI의 알파 문제 해결 방안

1. Unity Color Space
Gamma Correction
2018.12.1
데브루키
알콜코더
박민근

2. 이 PPT는 아래 KASA의 이민웅님 발표 자료를
기반으로 제작 되었음을 알려 드립니다.
Gamma and Linear Color Space 이민웅

4. Color Space in Unity

5. 광원 감쇠(Fall Off)

6. 광원 감쇠(Fall Off)

7. 리니어 강도 반응

8. 리니어 블렌딩과 감마 블렌딩
Linear Blend
Gamma Blend

9. 왜 이런 차이가 날까??

10. 리니어 및 감마 컬러 스페이스
리니어 그레디언트 사람의 눈이 인지하는
그레디언트
중간 회색의 경계가 어디 있는지 주목!

15. TITLE 1
SUB TITLE 1

19. sRGB
지금은 모니터가 디지털이지만, 여전히 감마로 인코딩된 입력 신호를 수신합니다.
이미지 파일과 비디오 파일은 감마 공간에 있게 명시적으로 인코딩됩니다. 따라서
리니어 강도가 아닌 감마 인코딩 값을 포함합니다. 이 방식이 표준이며, 모든 것은
감마 공간에 있습니다.
널리 인정되는 감마 공간 표준을 sRGB(위키피디아 참조)이라고 합니다. 이 표준은
사람의 눈이 채널당 8비트 정밀도를 최대한 이용할 수 있게 하는 리니어 공간으로
의 매핑을 정의합니다. 이 매핑은 아래 다이어그램에 나와 있습니다
(유니티 공식 문서)

21. 텍스쳐 Import
sRGB 체크 – 감마공간 텍스쳐 인지 유무, 리니어 컬러로 세팅된 경우에만 적용됨.
체크 – 리니어 공간에 맞게 감마 텍스쳐를 Gamma Correction 해준다
체크 해제 – 만약 텍스쳐가 리니어 컬러 공간(Gamma 1.0)에서 제작된 경우,
체크를 해제 하면, Gamma Correction을 적용 안함(Bypass)

29. 유니티 UI 문제
Color Space 변경 시, UI 문제 발생

30. Gamma UI Texture의 알파 문제 in Unity Linear Color
[문제 상황]
유니티에서 한창 작업중 Linear Color Space가 좋다고 해서
바꿨더니, 모든 UI의 알파가 변해버리는 문제가 발생!!

31. Linear
Gamma
선형(Linear) 렌더링에서의 UI 작업할때 요령 - 대마왕

35. Gamma UI Texture의 알파 문제 in Unity Linear Color
• 일반 UI Texture는 감마 스페이스 기준으로 제작됨
• 앞의 알파 블렌드 공식을 어떻게 적용해야 하나?!!
• 유니티에서 기본적인 해결 방법을 제공 안해줌!

36. Gamma UI Texture 해결 방법 #1
• 걍 모든 텍스쳐를 포토샵에서 Linear Color Space로 변환
• UI 아티스트만 고생하면됨(?)
• 프로젝트 변경 작업 불필요
• 하지만?
이미 너무 많이 만들었어?!!

37. Gamma UI Texture 해결 방법 #2
• 프로그래밍 사이드에서 해결 방법
• 언리얼 엔진의 해결 방법 차용
• 아래 방법의 정반대로 렌더링
• 텍스쳐는 sRGB 체크 해제 (감마 공간 그대로 사용)

38. Gamma UI Texture 해결 방법 #2
• 리니어 세팅에서 기본 렌더타겟은 리니어 스페이스
• 2대의 카메라 이용 (1 – 게임 렌더링 2 - UI만 렌더링)
UI를 제외한
게임 렌더링
Render Target
1번 카메라
게임 화면만을 렌더링, 이후 셰이더 코드를 통해서,
렌더 타겟을 Linear -> Gamma로 변환

39. Gamma UI Texture 해결 방법 #2 - Component

40. Gamma UI Texture 해결 방법 #2 - Script

41. Gamma UI Texture 해결 방법 #2 - LinearToGamma
LinearToGamma.shader

42. Gamma UI Texture 해결 방법 #2
• 리니어 세팅에서 기본 렌더타겟은 리니어 스페이스
• 2대의 카메라 이용 (1 – 게임 렌더링 2 - UI만 렌더링)
UI를 제외한
게임 렌더링
Render Target

43. Gamma UI Texture 해결 방법 #2
• 2번째 UI 카메라로 감마공간으로 변환된 렌더 타겟에 UI만
• 이때는, 렌더타겟과 텍스쳐 둘다 Gamma라서 알파 블렌딩이
제대로 수행됨
UI를 제외한
게임 렌더링
Render Target
UI Texture
UI만 렌더링UI 카메라
sRGB 체크 해제(bypass)
감마 그대로 사용

44. Gamma UI Texture 해결 방법 #2
• UI 렌더링 이후 렌더 타겟을 다시 리니어로 보간
• 유니티의 리니어 렌더링 최종 렌더 버퍼는 리니어 공간이어야 함
UI를 제외한
게임 렌더링
Render Target
UI Texture
UI만 렌더링UI 카메라

45. Gamma UI Texture 해결 방법 #2 - GammaToLinear
GammaToLinear.shader

46. Gamma UI Texture 해결 방법 #2 – Profit!!

48. Reference
• Gamma와 Linear Color Space – 이민웅
• 리니어 렌더링 개요 – 유니티 문서
• 선형(Linear) 렌더링에서의 UI 작업할때 요령 – 대마왕
• Bug with Bypass sRGB Sampling?