짧은 퀴즈
만약 너가 이미지 프로세싱과 관련된 코드를 썼거나 쓸 예쩡이라면, 너는 완전히 아래의 퀴즈에 답해야 한다. 만약 너가 한 개 이상의 질문에 yes를 답한다면, 너의 코드가 잘못하고 있고 부정확한 결과를 낼 가능성이 높다. 이것은 즉시 너에게 명백하지 않을지도 모른다. 왜냐하면 이러한 문제들은 미묘할 수 있고, 다른 것들에서 보다 몇 가지 문제되는 영역에서 알아차리기에 더 쉽기 때문이다.
여기에서 그 퀴즈들이 있다:
- 나는 감마 보정이 무엇인지 모른다.
- 감마는 CRT 디스플레이 시대의 유물이다; 거의 모든 사람이 LCD를 사용하기 때문에, 그것을 무시하는 것이 안전하다.
- 감마는 오직 프린트 산업에서 일하는 그래픽스 전문가들과 관련있다. 거기에서 정확한 컬러 생산이 매우 중요하다. - 일반적인 이미지 프로세싱에 대해서는, 그것을 무시하는게 안전하다.
- 나는 게임 개발자이다, 나는 감마에 대해 알 필요가 없다.
- 내가 사용하는 인기있는 그래픽스 라이브러리 <여기에 이름을 넣어라> 는 gamma를 정확히 처리한다.
- (128, 128, 128)의 RGB 값을 가진 픽셀들은 (255, 25,, 255)의 RGB 값을 가진 픽셀들만큼의 빛의 절반을 방출한다.
- 인기있는 포맷(JPEG, PNG, GIF 등)에서 어떤 무작위 라이브러리를 사용하는 한 버퍼로 불러오고 raw data에 직접적으로 이미지 프로세싱 알고리즘들을 작동시키는것은 괜찮다.
너가 대부분에 yes라고 대답했어도 나쁘게 느끼지 말아라1 나는 일주일전만해도 스스로 대부분의 이러한 질문들에 대해 yes를주었었다. 어느정도, 그 gamma의 토픽은 대부분의 컴퓨터 사용자의 radar하에 있다. (상업 그래픽스 소프트웨어를 쓰는 프로그래머들을 포함하여), 대부분의 그래픽스 라이브러리, 이미지 뷰어, 포토 에디터 그리고 오늘날의 drawing software들은 gamma를 옳게 하지 않고 부정확한 결과를 내는 정도로 말이다.
그래서 계속해서 읽고, 이 자료의 끝에서, 너는 대다수의 프로그래머보다 gamma에 대해 더 많은 지식을 가질 것이다.
감마 보정의 신비한 예술
시각이 확실히 인간-컴퓨터 상호작용의 가장 중요한 감각 입력 채널임을 고려한다면, 감마 보정이 프로그래머들 사이에서 가장 적게 말해지는 주제들 중 하나라는 것은놀랍다. 오히려 기술적 글에서 빈번하게 언급된다. 컴퓨터 그래픽스 글을 포함하여. 대부분의 컴퓨터 그래픽스 교과서들이 명백히 옳은 감마 처리의 중요성을 언급하지 않고 또는 그것을 실제적인 용어로 토론한다는 사실은 중요하게 만드는데 전혀 도움되지 않는다 (나의 대학시절 CG 교과서는 이 카테고리를 빠뜨렸다, 내가 체크해보았다). 몇 가지 책들은 어느정도 애배하고 추상적인 용어들로 넘기면서 감마 보정을 언급하지만, 그러고나서 그것을 어떻게 적절히 하는지에 대해 구체적인 실세계 예시들을 제시하지 않고 또한 그것을 적절히 하지 않는 것의 의미가 무엇인지 또는 부정확한 감마 처리의 이미지 예시들을 보여주지 않는다.
나는 나의 ray tracer를 쓰는 동안 올바른 감마 보정에 대한 필요성을 우연히 만났고, 나는 그 주제에 대한 나의 이해가 오히려 피상적이고 불완전하다는 것을 인정해야만 했다. 그래서 나는 그것을 온라인으로 읽는데 며 칠을 썼지만, 감마에 대한 많은 자료들이 도움이 안되거나, 그것들 대부분이 추상적이거나 혼동스럽기 때문에, 몇 몇은 매우 흥미롭지만 관련없는 세부사항을 포함하고, 그러고 다른 것들은 이미지 예시가 부족하고 또는 간단하게 부정확하거나 또는 이해하기에 어렵다는 것이 밝혀졌다. 감마는 시작하기에 매우 어려운 개념이 아니지만, 몇 가지 신비스러운 이유 때문에, 정확하고, 명백한 언어로 그 주제에 대해 완료짓고 설명하는 감마에 대한 자료들을 찾는 것은 사소하지 않다.
감마가 무엇이고, 왜 우리는 그것을 필요로 하는가?
좋아, 그래서 이것이 감마에 대해 광범위한 설명을 제안하는 나의 시도이다, 나는 가장 중요한 측면에 집중을 하고, 그리고 그것에 대해 사전 지식이 없다고 가정하겠다.
이 자료에 있는 이미지 예시들은 너가 컴퓨터 모니터에서 (CRT or LCD 는 중요하지 않다) 현대 브라우저에서 이 웹페이지를 본다고 가정한다. 태블릿과 폰들을 모니터들에 비해 일반적으로 꽤 부정확하다. 그래서 그러한 것들을 피하려고 노력해라. 너는 어두침침하게 빛나는 방에서 그 이미지를 보고 있을 것이다. 그래서 너의 스크린에는 어떠한 직접적인 빛이나 불꽃이없도록 해라.
Light emission vs perceptual brightness (빛의 방사 대 인지적 밝기)
믿거나 말거나, 아래의 이미지에서 어떤 다른 이웃한 수직 바들 사이의 빛의 에너지 방출(light energy emission)의 차이는 상수이다. 다시 말해서, 너의 스크린에서 뿜어져 나오는 빛 에너지의 양은 bar에서 bar로, 왼쪽에서 오른쪽으로 한 상수의 양만큼 증가한다.
이제 다음의 이미지를 고려해보자.
어떤 이미지에서 그라데이션이 좀 더 고르게 나타나는가? 두 번째 것이다. 그러나 왜 그렇게 될까? 우리는 첫 번째 이미지에서 너의 모니터가 만들어낼 수 있는 가장 어두운 black과 가장 밝은 white사이의 방출되는 빛의 강도의 관점으로 그 바들이 균등하게(linearly) 공간을 차지하게 했다. 그러나 왜 우리는 그것을 검정색에서 하얀색으로 가는 좋고 균등한 그라에디션으로서 보지 않는가? 그리고 우리가 linear gradation으로 인식하는 두 번째 이미지에서 보여지고 있는 것이 무엇인가?
그 답은 빛의 강도에 대한 인간의 눈의 반응에 놓여있다. 그리고 그것은 비선형이다. 첫 번째 이미지에서, 어떤 두 인접한 바들의 명목상의 빛의 강도 사이의 차이는 상수이다:
linear = i_n - i_(n-1)
그러나, 두 번째 이미지에서, 이 차이는 상수는 아니지만, 바마다 변화한다; 그것은 자극의 크기와 그것의 인지된 강도의 관점에서 유사한 지수승 관계를 따른다.
이 때문에,우리는nominal physical light intensity와 perceptual brightness(인지적 밝기)사이에 지수승 관계가 있다고 말한다.
Physical vs perceptual linearity (물리적 vs 인지적 선형성)
우리가 다음의 실 세계 오브젝트의 표현을 컴퓨터에 한 이미지 파일로 저장하기를 원한다고 가정해보자 (잠시동안 실 세계에 완벽하 greyscale gradients가 있는 척하자) 여기에서 어떻게 그 "실 세계 오브젝트)가 보이는지가 있다:
이제, 우리가 오직이 특정한 컴퓨터 시스템에서 5-bit greyscale 이미지들을 저장할 수 있다고 해보자. 그리고 이것은 우리에게 완전히 검은색부터 완전한 하얀색 까지의 범위에 걸치는 grey의 32개의 다른 음영들을 준다. 또한, 이 컴퓨터에서, greyscale 값들은 그것들의 대응되는 physical light intensities에 비례한다. 이것은 32-element greyscale를 만들어낸다. 그림 1에서 보여지듯이. 우리는 이 그레이 스케일이 연속된 값 사이의 light emission의 관점에서 선형이라고 말할 수 있다.
만약 우리의 부드러운 gradient를 오직 이러한 32개의 grey values를 사용하여 인코딩 한다면, 우리는 이것과 같은 것을 얻을 것이다 (상황을 간단하게하기 위해 다른 것을 무시하자.)
음, 그 변화들을 다소 갑작스럽다 특히 왼쪽에서, 왜냐하면 우리는 오직 작업할 32개의 grey values만을 가졌기 때문이다. 만약 우리가 실눈 뜨고 본다면, 우리 스스로에게 이것은 smooth gradient의 다소 정확한 표현이라고 납득시키는 것은 쉽다. 우리의 제한된 bit-depth가 허락하는한. 그러나 그 단계들이 오른쪽보다 왼쪽에서 좀 더 얼마나 커지는지를 주목해라 - 이것은 왜나하면 emitted light intensity의 관점에서 선형인 greyscale을 사용하고 있기 때문이다. 그러나 우리가 이전에 언급했듯이, 우리의 눈은 빛의 세기를선형으로 인지하지 못한다!
이 관찰은 몇 가지 흥미로운 의미를 가지고 있다. 원본과 5-bit encoded version사이의 에러는 이미지에 걸쳐서 균등하지 않다; 밝은 것보다 어두운 값에 대해 더욱 크다. 다시 말해서, 우리는 어두운 값에 대해 표현 정확도를 잃고 있고, 상대적으로 더 밝은 음영에 대해 너무 많은 정확도를 사용하고 있다는 것이다. 명백히, 우리는 이 에러가 균등하게 전체 범위에 걸쳐 분산되도록 만드는 우리의 제한된 음영의 팔레트에 대해 32 greys의 다른 집합을 선택하는게 낫다. 그래서 두 어둡고 밝은 그림자들이 같은 정확도로 표현될 것이다. 만약 우리의 이미지를 인지적으로 선형이지만 결과적으로 emitted light intensity의 관점에서 비선형인 그러한 greyscale로 인코딩한다면, 그리고 그 비선형은 인간의 시각에 잘 부합된다, 우리는 우리가 그림2에서 이미 보았던 정확히 같은 greyscale의 이미지를 얻게된다:
우리가 여기에서 말하는 비 선형성은 우리가 이전에 언급한 power law relationship이다. 그리고 우리가 우리의 physically linear greyscalue values에 적용할 필요가 있는 비선형 변환은 (그것들을 인지적 선형 값으로 바꾸기위해) 감마 보정이라고 불려진다.
효율적인 이미지 인코딩
왜 위에 있는 것이 중요한가? 소위 true colour라고 불려지는 곳 또는 "24-bit" bitmap images에서, 컬러 데이터는 픽셀당 세 개의 8-bit integers로서 저장된다. 8 비트와 함께, 256개의 다른 세기의 levels들이 표현되어질 수 있고, 만약 이러한 값들의 공간이 물리적으로 선형이라고 한다면,우리는 어두운 음영에 대해서 많은 정확도를 잃을 것이다. 반면에 밝은 음영에 대해 불필요하게 정확하게 된다. (상대적으로 말하자면) 위에서 보여지듯이.
명백하게 이것은 이상적이지 않다. 한 가지 해결책은 간단히 그 물리적 linear scale를사용하고 채널 당 bit depth를 16으로 증가시키기는 것이다. (또는 더 많이) 이것은 저장 요구사항을 두 배 시킬 것이고 (또는 더 나쁘게), 그리고 이것은 대부분의 공통 이미지 포맷들이 만들어졌을 때의 오션이 아니다.
그러므로, 다른 접근법이 취해졌다. 그 아이디어는 256개의 다른 levels들이 인지적으로 선형 스케일로 세기 값을 나타내게 하는 것이였다. 그리고 그 경우에, 대다수의 이미지들은 적절히 컬러 채널당 8비트에서 표현되어질 수 있었다.
한 알고리즘에 의해 종합적으로 생성되거나 linear device에의해 포착된(디지털 카메라의 CMOS또는 스캐너 같은) physically linear intensity data를 perceptually linear scale의 discrete(이산) values로 나타내기 위해 사용된 변환은 gamma encoding이라고 불려진다.
가상으로 모든 소비자 수준의 전자 장치에서 사용되는 24-bit RGB colour model (RGB24)은 빛의 세기를 나타내기 위해 채널 당 8비트 gamma encoded values를 사용한다. 만약 너가 우리가 이전에 말한 것을 회상한다면, 이것은 RGB(128, 128, 128)을가진 픽셀들이 대략 RGB(255, 255, 255)를 가진 픽셀들의 빛의 에너지에 50%를 방출하지 않을 것을 의미한다. 오직 22%만을 방출한다. 그것은 완벽히 말이 된다! 인간 시각의 비선형성 특성 때문에, 광원은 인간에게 절반 정도로 밝게 하기 위해서 그것의 원래 빛의 강도에 22%만큼 감쇠되어질 필요가 있다. RGB(128, 128, 128)은 우리에게 RGB(255, 255) 반정도의 밝기로 나타난다! 만약 너가 이 것이 혼란스럽다면, 그것에 대해 조금 곰곰히 생각해보아라. 왜냐하면 지금까지 이야기된 것에 대해 튼튼한 이해를 갖는 것이 중요하기 때문이다. (나를 믿어라, 좀 더 혼란스러워 질 것이다.0
물론, gamma encoding은 항상 그 이미지가 궁극적으로 컴퓨터 스크린에서 사람에 의해 봐지도록 의도된다는 가정하에 처리된다. 어떤 방식에서, 너는 그것을 compression과 같은 손실된 MP3로 생각할 수 있다. 하지만 이미지에 대해서 생각해라. 다른 목적에 대해서 (예를들어, 나중의 후처리를 위해 의도된 과학적 분석 또는 이미지들) floats을사용하고 선형 scale을 고수하는 것은 좀 더 좋은 선택이다. 우리는 나중에 볼 ㅓㄳ이다.
The gamma transfer function
선형 공간에서 감마 공간으로 값을 변형하는 프로세스는 gamma encoding (또는 gamma compression)이라고 불려지고, 그 역은 gamma decoding (또는 gamma expansion)이라고 불려진다.
이러한 두 연산에 대한 공식은 매우 간단하다. 우리는 오직 앞에서 언급된 power law function을 사용할 필요가 있다:
컴퓨터 디스플레이 시스템에서 사용하는 표준 gamma (y) 값은 2.2이다. 이것에 대한 주요 이유는 2.2의 감마가 대략 인간 시각의 power law sensitivity와 부합한다. 사용되어야 할 정확한 값은 사라마다 다양하다. 그리고 또한 빛의 조건과 다른 요인들에 의존한다. 하지만 표준 값은 선택되어야만 하고, 2.2이가 충분히 좋았따. 이것에 너무 매달리지 말아라.
많은 글들이 언급하는데 실패한 한 가지 매우 중요한 점은 그 입력 값들이 0과 1의 범위여야만 하는 것이고 output은 결과적으로 같은 범위로 매핑 되어야 할 것이라는 것이다. 이것으로 부터, 0과 1사이의 감마 값이 encoding(compression)을 위해 사용되고 1보다 더 큰 것은 decoding (expansion)을 위해 사용된다는 다소 비생산적인 사실을 따른다. 아래의 차트들은 인코딩과 디코딩에 대한 감마 전환 함수를 보여준다. 더해서 자명한 선형 감마 케이스도 (y = 1.0):
우리는 오직 이제까지 greyscale examples만을 보아왔지만, RGB 이미지들에 대해 특별한 것은 없다 - 우리는 그냥 간단히 각 컬러 채널을 같은 방법을사용하여 개별적으로 인코딩 또는 디코딩할필요가 있다.
Gamma vs sRGB
sRGB는 요즘에 모니터, 디지털 카메라, 스캐너, 프린터, 손 크기의 장치들을 포함하는 소비자 전자장치의 사실상 표준인 colour space이다. 그것은 또한 인터넷에서 이미즏ㄹ에 대한 표준 color space에 대해 표준이다.
sRGB 명세는 sRGB 이미지들을 인코딩하고 디코딩을 위해 사용한 감마를 정의한다. (색 전체 영역 같은 다른 것들 중에서이다,=. 그러나 이러한 것들은 우리의 현재 토론과 관련 없다). sRGB gamma는 2.2의 표준 감마와 매우 가깝지만, 0에서 무한의 기울기를 피하기 위해 어두운 영역에서 짧은 선형의 세그먼트를 가진다 (이것은 수적 계산에 좀 더 편리하다). 선형에서 sRGB로 변환하는 공식들은 여기에서 볼 수 있다.
sRGB 명세는 sRGB 이미지들을 인코딩하고 디코딩을 위해 사용한 감마를 정의한다. (색 전체 영역 같은 다른 것들 중에서이다,=. 그러나 이러한 것들은 우리의 현재 토론과 관련 없다). sRGB gamma는 2.2의 표준 감마와 매우 가깝지만, 0에서 무한의 기울기를 피하기 위해 어두운 영역에서 짧은 선형의 세그먼트를 가진다 (이것은 수적 계산에 좀 더 편리하다). 선형에서 sRGB로 변환하는 공식들은 여기에서 볼 수 있다.
너느 실제로 모든 이러한 더욱 미세한 세부사항을 이해할 필요는 없다; 알아야 할 중요한 것은 그 경우들 99%에, 너는 평범한 감마 대신에 sRGB를 사용하길 원할 것이다. 이것에 대한 이유는 모든 그래픽 카드가 2005년 이후로 하드웨어 sRGB 지원을 가지고 있기 때문이다. 그래서 디코딩과 인코딩은 대부분 가상적으로 뮤료이다. 너의 모니터의 native color space은 가장 그럴듯한 sRGB이다 (만약 그래픽스, 사진 또는 비디오 작업에 전문적인 모니터가 아니라면) 그래서 만약 너가 한 sRGB 인코딩된 픽셀 데이터를 프레임버퍼에 던진다면, 그 최종 이미지는 스크린에 올바르게 보일 것이다 (모니터가 적절히 calibrated되었다고 고려하면). JPEG와 PNG같은 인기있는 이미지 포맷들은 컬러 스페이스 정보를 저장할 수 있지만, 종종 이미지들은 그러한 정보를 포함하지 않는다. 그리고 그 경우에 가상적으로 모든 이미지 뷰어들과 브라우져들은 그것들을 전통적으로 sRGB로 해석할 것이다.
Gamma calibration
우리는 이제까지 감마 인코딩과 디코딩에 대해 이야기해왔지만, gamma calibration은 무엇인가? 나는 이것이 다소 혼란스럽다고 알았다. 그래서 그것을 명백히 해보자.
언급했듯이, 모든 모니터들의 99%가 오늘날 sRGB color space를 선천적으로 사용하지만, 제조 부정확성으로 대부분의 모니터들은 최상의 결과를 얻기위해서 몇 가지 추가 gamma calibration으로 부터 이익을 얻을 것이다. 이제, 만약 너가 결코 너의 모니터를 calibrated 하지 않는다면, 그것은 그것이 감마를 사용하지 않을 것이라는 것을 의미하지 않는다. 그것은 간단히 불가능하다, 과거와 현재에 있는 대부분의 CRT와 LCD 디스플레이들은 sRGB에서 서 작동하도록 설계되고 제조되어왔다.
gamma calibration을 미세한 튜닝으로 생각해라. 너의 모니터는 항상 sRGB에서 작동할 것이지만, 그것을 calibrating해서 (비디오 카드 드라이버 또는 OS 레벨 둘 중 하나에서) 그 모니터의 gamma transfer curve 우리가 이전에 이야기 한 이상적인 gamma transfer function과 부합될 것이다. 또한 몇 년 전에, 다양한 감마 보정 단계를 그래픽스 파이프라인에 적용하여 다양하고 창의적인 방법으로 너 스스로 하는 것이 가능했다 (예를들어, 비디오카드, OS 그리고 어플리케이션 수준), 그러나 운좋게도, 이것은 요즘날 좀 더 똑똑하게 다뤄진다. 예를들어, 나의 윈도우즈 7 box에서, 만약 내가 NVIDIA Control Panel에서 gamma calibration을 킨다면, OS level calibration이 비활성화되고, 역으로도 된다.
Processing gamma-encoded images
그래서 만약 가상적으로 전체 세계가 sRGB가 디폴트라면, 정확히 무엇이 문제인가? 만약 우리의 카메라가 sRGB JPEG 파일들을 쓴다면, 우리는 그냥 JPEG data를 디코딩하고, 그것을 복사하여 그래픽스 카드의 프레임버퍼에 복사한다. 그리고 그 이미지는 정확히 우리의 sRGB LCD monitor에 보일 것이다 (거기에서 "correctly(정확히)"는 그것이 다소 사진 찍혀진 실세계 장면을 정확히 나타낼 거라는 것을 의미한다).
문제는 우리가 우리의 sRGB pixel buffer에 직접적으로 이미지 처리 알고리즘을 작동시킬 때 발생할 것이다. 기억해라, gamma encoding은 비선형 전화이고, sRGB encoding은 기본적으로 약 1/2.2의 gamma encoding을 하는 멋진 방식이다. 가상적으로, 너가 어떤 컴퓨터 그래픽스 교과서에서 발견할 모든 이미지 처리 알고리즘들은 선형으로 인코딩된 빛의 세기를 가진 픽셀 데이터를 가정할 것이다. 그리고 이것은 이러한 알고리즘에 sRGB encoded data를 주는 것은 그 결과를 미묘하게 틀리게 렌더링 할 것이다 - 또는 몇 몇 경우에, 꽤 명백히 틀리다! 이것은 픽셀 값 사이의 resizing, blurring, compositing, interpolating을 포함하고, antialiasing 등을 포함한다. 그냥 가장 흔한 연산들을 댄 것이다.
Effects of gamma-incorrectness
좋아, 충분한 이론적인 이야기였다, 나에게 어떻게 이러한 에러들이 실제로 보이는지 보여줘라. 그것이 정확히 우리가 이 섹션에서 할 것이다; 우리는 이미지 처리 알고리즘들 직접적으로 sRGB data대해 작동시키는 것이 올바르지 않은 결과들을 만들어 낼 것이라는 가장 흔한 시나리오들을 조사할 것이다. 보여주는 목적을 제외하고, 이러한 예들은 또한 drawing programs 그리고 이미지 처리 라이브러리에서 gamma-incorrect behavior 또는 버그를 포착하는데 유용하다.
내가 명백히 gamma-incorrectness를 가진 문제들을 보여주는 예시 들을 선택한 것이 주목되어져야 한다. 대부분의 경우에, 그 문제들은 생생하고, saturated colors들을 사용할 때 명백해진다. 좀 더 muted colors와 함께,그 차이는 덜 눈치챌만 하거나 또는 몇몇 경우에 심지어 무시할만 하다. 그러나, 그 에러들은 항상 존재하고, 이미지 처리 프로그램들은 정확히 모든 가능한 입력에 대해 작동하고, 모든 가능한 이미지들의 65.23%는 괜찮지 않다. 또한 physically based rendering의 영역에서, 감마 보정은 절대적으로 해야할 것이다. 우리는 이에 대해 볼 것이다.
Gradients
아래의 이미지는 선형으로 계산된 gradients (top gradient)와 sRGB space (bottom gradient)사이의 차이를 보여준다. sRGB 값에 대한 직접적인 보간이 얼마나 더 어둡고 가끔은 좀 더 saturated 하게 보이는 이미지들을 만ㄷ르어내는지 주목해라.
보게되면, 어떤 이는 sRGB-space versions의 외관을 선호할지도 모른다. 특히 마지막에서 두 번째 것. 그러나, 그것은 어떻게 빛이 실세계에서 작동하는 가가 아니다 (두 개의 컬러가 있는 하얀색 별을 빛는 광원을 생각해라; 그 컬러들은 선형 공간의 경우에 있는 것처럼 섞일 것이다).
거의 모든 사람들은 이것을 잘못된 방식으로 한다: CSS gradietns와 transitions는 틀리다 (세부적으로는 이 쓰레드를 보아라), 포토샵은 틀리고 (CS6 버전에서 그것을 고칠 옵션 조차도 없다.
이것을(일반적으로 감마 보정) 옳게 하는 두 개의 drawing program들은 Krita와 Pixelmator이다. SVG는 또한 사용자가 gradients, compositing그리고 애니메이션을 위해 선형 또는 sRGB 공간 보간중에 어떤 것을 사용할지를 명시하게 한다.
Colour Blending
gamma-incorrect drawing programs에서 soft brushes로 그리는 것은 어떤 vivid color 조합이 있는 이상하게 어두운 transition band를 만들어낸다. 이것은 일반적으로 gradient problem의 변형이다. 너가 그것에 대해 생각한다면 (soft brush의 transition band는 작은 gradient이외에 아무것도 아니다).
몇 가지 random 사람들은 어도비 포럼에서 이것을 하여, 포토샵이 정말로 페인트들이 실 세계에서 어떻게 작동하는지를 흉내내고 있다고 주장했다. 음 아니다, 그것과 관련이 없다. 그것은 sRGB pixel data에 직접적으로 작업하는 순진한 프로그래밍의 결과이다. 그리고 이제 우리는 기본 legacy behavior로서 그것에 막혔다.
Alpha blending / compositing
color blending에서 또 다른 변형으로서, 어떻게 알파 블렌딩이 유효한지 보자. 우리는 몇 가지 색이 있는 정사각형을 처음에 볼 것이다. 기대한대로, 왼쪽에 있는 gamma-correct image는 빛이 어떻게 실 세계에서 행동하는지를 흉내낸다. 반면에 오른쪽에서 sRGB 블렌딩은 몇 가지 이상한 색조와 밝기 변화를 보여준다.
두 개의 사진을 섞을 때 잘못된 컬러들의 외관은 또한 눈치 챌만 하다. 왼쪽에 있는 gamma-correct image에서 그 피부톤과 빨간색과 노란색은 보존되지만 자연스러운 방식으로 파랗게 되는 이미지로 된다. 반면에 오른쪽 이미지에서, 눈치챌만한 전반적으로 초록색같은 cast가 있다. 또 다시, 이것은 너가 좋아하는 효과일지도 모르지만, alpha compositing이 작동하는 방식이 아니다.
Image resizing
이러한 예시들은 만약 너의 브라우저가 아래의 이미지에 대해 resacling을 하지 않는다면 효과가 있을 것이다. 또한, 모바일 장치들의 스크린들이 일반적인 모니터보다 감마에 대해 좀 더 부정확하다는 것을 주목해라. 그래서 최상읙 ㅕㄹ과를 위해 이것을 데스크탑 컴퓨터에서 보려고해라.
아래의 이미지는 간단히 black and white checkerboard pixel pattern을 포함한다 (왼쪽에 100 zoom이고, 오른쪽에 400% zoom이다.) 그 검정색 픽셀들은 RGB(0,0,0)이고, 너의 모니터가 만들어낼 수 있는 최소 빛 강도이다. 하얀색은 RGB(255,255,255)이고 이것은 최대 강도이다. 이제, 만약 너가 실눈 뜨고 본다면, 너의 눈들은 (평균적으로) 이미지로부터 들어오는 빛을 흐리게할 것이고, 그래서 너는 완전히 검정색화 하얀색 사이의 강도의 절반인 회색을 볼 것이다. (그러므로 그것은 50% grey로 참조된다).
만약 우리가 그 이미지를 50%로 사이즈를 재조정한다면, 비슷한 평균화 프로세스가 발생할 것이고, 이제 알고리즘 적으로 픽셀 데이타에 한다. 우리는 같은 50% grey로 채워진 solid rectangle을 얻는 것을 기대한다. 우리가 실눈 뜨고 봤던 것.
시도해보자. 아래의 이미지에서, A는 체커보드 패턴이고, B는 그 패턴을 sRGB 공간에서 (bicubic interpolation을 사용하여) 50%로 패턴을 resizing한 결과이고, C는 그것을 선형 공간에서 resizing한 것이고, 그러고나서 sRGB로 변형되었다.
Gamma calibration
우리는 이제까지 감마 인코딩과 디코딩에 대해 이야기해왔지만, gamma calibration은 무엇인가? 나는 이것이 다소 혼란스럽다고 알았다. 그래서 그것을 명백히 해보자.
언급했듯이, 모든 모니터들의 99%가 오늘날 sRGB color space를 선천적으로 사용하지만, 제조 부정확성으로 대부분의 모니터들은 최상의 결과를 얻기위해서 몇 가지 추가 gamma calibration으로 부터 이익을 얻을 것이다. 이제, 만약 너가 결코 너의 모니터를 calibrated 하지 않는다면, 그것은 그것이 감마를 사용하지 않을 것이라는 것을 의미하지 않는다. 그것은 간단히 불가능하다, 과거와 현재에 있는 대부분의 CRT와 LCD 디스플레이들은 sRGB에서 서 작동하도록 설계되고 제조되어왔다.
gamma calibration을 미세한 튜닝으로 생각해라. 너의 모니터는 항상 sRGB에서 작동할 것이지만, 그것을 calibrating해서 (비디오 카드 드라이버 또는 OS 레벨 둘 중 하나에서) 그 모니터의 gamma transfer curve 우리가 이전에 이야기 한 이상적인 gamma transfer function과 부합될 것이다. 또한 몇 년 전에, 다양한 감마 보정 단계를 그래픽스 파이프라인에 적용하여 다양하고 창의적인 방법으로 너 스스로 하는 것이 가능했다 (예를들어, 비디오카드, OS 그리고 어플리케이션 수준), 그러나 운좋게도, 이것은 요즘날 좀 더 똑똑하게 다뤄진다. 예를들어, 나의 윈도우즈 7 box에서, 만약 내가 NVIDIA Control Panel에서 gamma calibration을 킨다면, OS level calibration이 비활성화되고, 역으로도 된다.
Processing gamma-encoded images
그래서 만약 가상적으로 전체 세계가 sRGB가 디폴트라면, 정확히 무엇이 문제인가? 만약 우리의 카메라가 sRGB JPEG 파일들을 쓴다면, 우리는 그냥 JPEG data를 디코딩하고, 그것을 복사하여 그래픽스 카드의 프레임버퍼에 복사한다. 그리고 그 이미지는 정확히 우리의 sRGB LCD monitor에 보일 것이다 (거기에서 "correctly(정확히)"는 그것이 다소 사진 찍혀진 실세계 장면을 정확히 나타낼 거라는 것을 의미한다).
문제는 우리가 우리의 sRGB pixel buffer에 직접적으로 이미지 처리 알고리즘을 작동시킬 때 발생할 것이다. 기억해라, gamma encoding은 비선형 전화이고, sRGB encoding은 기본적으로 약 1/2.2의 gamma encoding을 하는 멋진 방식이다. 가상적으로, 너가 어떤 컴퓨터 그래픽스 교과서에서 발견할 모든 이미지 처리 알고리즘들은 선형으로 인코딩된 빛의 세기를 가진 픽셀 데이터를 가정할 것이다. 그리고 이것은 이러한 알고리즘에 sRGB encoded data를 주는 것은 그 결과를 미묘하게 틀리게 렌더링 할 것이다 - 또는 몇 몇 경우에, 꽤 명백히 틀리다! 이것은 픽셀 값 사이의 resizing, blurring, compositing, interpolating을 포함하고, antialiasing 등을 포함한다. 그냥 가장 흔한 연산들을 댄 것이다.
Effects of gamma-incorrectness
좋아, 충분한 이론적인 이야기였다, 나에게 어떻게 이러한 에러들이 실제로 보이는지 보여줘라. 그것이 정확히 우리가 이 섹션에서 할 것이다; 우리는 이미지 처리 알고리즘들 직접적으로 sRGB data대해 작동시키는 것이 올바르지 않은 결과들을 만들어 낼 것이라는 가장 흔한 시나리오들을 조사할 것이다. 보여주는 목적을 제외하고, 이러한 예들은 또한 drawing programs 그리고 이미지 처리 라이브러리에서 gamma-incorrect behavior 또는 버그를 포착하는데 유용하다.
내가 명백히 gamma-incorrectness를 가진 문제들을 보여주는 예시 들을 선택한 것이 주목되어져야 한다. 대부분의 경우에, 그 문제들은 생생하고, saturated colors들을 사용할 때 명백해진다. 좀 더 muted colors와 함께,그 차이는 덜 눈치챌만 하거나 또는 몇몇 경우에 심지어 무시할만 하다. 그러나, 그 에러들은 항상 존재하고, 이미지 처리 프로그램들은 정확히 모든 가능한 입력에 대해 작동하고, 모든 가능한 이미지들의 65.23%는 괜찮지 않다. 또한 physically based rendering의 영역에서, 감마 보정은 절대적으로 해야할 것이다. 우리는 이에 대해 볼 것이다.
Gradients
아래의 이미지는 선형으로 계산된 gradients (top gradient)와 sRGB space (bottom gradient)사이의 차이를 보여준다. sRGB 값에 대한 직접적인 보간이 얼마나 더 어둡고 가끔은 좀 더 saturated 하게 보이는 이미지들을 만ㄷ르어내는지 주목해라.
보게되면, 어떤 이는 sRGB-space versions의 외관을 선호할지도 모른다. 특히 마지막에서 두 번째 것. 그러나, 그것은 어떻게 빛이 실세계에서 작동하는 가가 아니다 (두 개의 컬러가 있는 하얀색 별을 빛는 광원을 생각해라; 그 컬러들은 선형 공간의 경우에 있는 것처럼 섞일 것이다).
거의 모든 사람들은 이것을 잘못된 방식으로 한다: CSS gradietns와 transitions는 틀리다 (세부적으로는 이 쓰레드를 보아라), 포토샵은 틀리고 (CS6 버전에서 그것을 고칠 옵션 조차도 없다.
이것을(일반적으로 감마 보정) 옳게 하는 두 개의 drawing program들은 Krita와 Pixelmator이다. SVG는 또한 사용자가 gradients, compositing그리고 애니메이션을 위해 선형 또는 sRGB 공간 보간중에 어떤 것을 사용할지를 명시하게 한다.
Colour Blending
gamma-incorrect drawing programs에서 soft brushes로 그리는 것은 어떤 vivid color 조합이 있는 이상하게 어두운 transition band를 만들어낸다. 이것은 일반적으로 gradient problem의 변형이다. 너가 그것에 대해 생각한다면 (soft brush의 transition band는 작은 gradient이외에 아무것도 아니다).
몇 가지 random 사람들은 어도비 포럼에서 이것을 하여, 포토샵이 정말로 페인트들이 실 세계에서 어떻게 작동하는지를 흉내내고 있다고 주장했다. 음 아니다, 그것과 관련이 없다. 그것은 sRGB pixel data에 직접적으로 작업하는 순진한 프로그래밍의 결과이다. 그리고 이제 우리는 기본 legacy behavior로서 그것에 막혔다.
Alpha blending / compositing
color blending에서 또 다른 변형으로서, 어떻게 알파 블렌딩이 유효한지 보자. 우리는 몇 가지 색이 있는 정사각형을 처음에 볼 것이다. 기대한대로, 왼쪽에 있는 gamma-correct image는 빛이 어떻게 실 세계에서 행동하는지를 흉내낸다. 반면에 오른쪽에서 sRGB 블렌딩은 몇 가지 이상한 색조와 밝기 변화를 보여준다.
두 개의 사진을 섞을 때 잘못된 컬러들의 외관은 또한 눈치 챌만 하다. 왼쪽에 있는 gamma-correct image에서 그 피부톤과 빨간색과 노란색은 보존되지만 자연스러운 방식으로 파랗게 되는 이미지로 된다. 반면에 오른쪽 이미지에서, 눈치챌만한 전반적으로 초록색같은 cast가 있다. 또 다시, 이것은 너가 좋아하는 효과일지도 모르지만, alpha compositing이 작동하는 방식이 아니다.
Image resizing
이러한 예시들은 만약 너의 브라우저가 아래의 이미지에 대해 resacling을 하지 않는다면 효과가 있을 것이다. 또한, 모바일 장치들의 스크린들이 일반적인 모니터보다 감마에 대해 좀 더 부정확하다는 것을 주목해라. 그래서 최상읙 ㅕㄹ과를 위해 이것을 데스크탑 컴퓨터에서 보려고해라.
아래의 이미지는 간단히 black and white checkerboard pixel pattern을 포함한다 (왼쪽에 100 zoom이고, 오른쪽에 400% zoom이다.) 그 검정색 픽셀들은 RGB(0,0,0)이고, 너의 모니터가 만들어낼 수 있는 최소 빛 강도이다. 하얀색은 RGB(255,255,255)이고 이것은 최대 강도이다. 이제, 만약 너가 실눈 뜨고 본다면, 너의 눈들은 (평균적으로) 이미지로부터 들어오는 빛을 흐리게할 것이고, 그래서 너는 완전히 검정색화 하얀색 사이의 강도의 절반인 회색을 볼 것이다. (그러므로 그것은 50% grey로 참조된다).
만약 우리가 그 이미지를 50%로 사이즈를 재조정한다면, 비슷한 평균화 프로세스가 발생할 것이고, 이제 알고리즘 적으로 픽셀 데이타에 한다. 우리는 같은 50% grey로 채워진 solid rectangle을 얻는 것을 기대한다. 우리가 실눈 뜨고 봤던 것.
시도해보자. 아래의 이미지에서, A는 체커보드 패턴이고, B는 그 패턴을 sRGB 공간에서 (bicubic interpolation을 사용하여) 50%로 패턴을 resizing한 결과이고, C는 그것을 선형 공간에서 resizing한 것이고, 그러고나서 sRGB로 변형되었다.
댓글 없음:
댓글 쓰기