samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
							<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="utf-8">
	<base href="../../../" />
	<script src="page.js"></script>
	<link type="text/css" rel="stylesheet" href="page.css" />
	<style>
		blockquote {
			font-size: 0.8em;
			line-height: 1.5em;
			margin-left: 0;
			border-left: 4px solid #cccccc;
			padding: 1em 2em 1em 2em;
		}

		blockquote p:first-child {
			margin-top: 0;
		}

		blockquote p:last-child {
			margin-bottom: 0;
		}

		figure {
			width: 100%;
			margin: 1em 0;
			font-style: italic;
		}

		figure img {
			width: 100%;
		}

		figure.float {
			float: right;
			max-width: 30%;
			margin: 1em;
		}

		@media all and ( max-width: 640px ) {

			figure.float {
				float: none;
				max-width: 100%;
			}

		}
	</style>
</head>

<body>
	<h1>색상 관리[name]</h1>

	<h2>색상 공간이란 무엇입니까?</h2>

	<p>
		각 색상 공간은 정밀도 및 디스플레이 기술과 관련된 기술적 제한을 충족하는 동시에 다양한 색상을 지원하기 위해 선택된 여러 설계 결정의 집합입니다.3D 에셋을 만들거나 장면에 3D 에셋을 어셈블할 때 이러한 속성이 무엇인지, 한 색상 공간의 속성과 장면의 다른 색상 공간의 관계를 이해하는 것이 중요합니다.
	</p>

	<figure class="float">
		<img src="resources/srgb_gamut.png" alt="">
		<figcaption>
			CIE 1931 색상 차트에 표시된 sRGB 색상 및 흰색 점(D65)을 참조하십시오.색상 영역은 3D 볼륨인 sRGB 색재현율의 2D 투영을 나타냅니다.출처: <a href="https://en.wikipedia.org/wiki/SRGB" target="_blank" rel="noopener">Wikipedia</a>
		</figcaption>
	</figure>

	<ul>
		<li>
			<b>원색:</b>원색(예를 들어 빨간색, 녹색, 파란색)은 절대적인 것이 아니다.그들은
			제한된 정밀도 제약조건을 기반으로 가시 스펙트럼에서 선택
			사용 가능한 디스플레이 장치의 성능색상은 원색의 비율을 나타냅니다.
		</li>
		<li>
			<b> 흰색: </b> 대부분의 색상 공간은 다음과 같이 설계되었습니다.
			원색 <i>R=G=B</i>는 색상이 없거나 "무채색" 으로 표시됩니다.모양
			흰색이나 회색과 같은 소색 차이의 변화는 인간의 지각에 달려 있고 인간의 지각은
			어느 정도 관찰자의 배경에 달려 있다.색상 공간의 균형을 맞추려면 흰색 점을 지정합니다.
			이러한 요구 사항.sRGB 색상 공간에 정의된 흰색 점은
			[link:https://en.wikipedia.org/wiki/Illuminant_D65D65]。
		</li>
		<li>
			<b> 전송 함수: </b> 색재현율과 색상 모델을 선택한 후에도
			숫자와 색상 공간 사이의 매핑을 정의합니다 (전달 함수).<i>r=0.5</i> 여부
			물리적 조도가 <i>r=1.0</i>보다 50% 낮음을 나타냅니까?또는 인식에 따라 밝기 50% 감소
			보통 사람의 눈?이것들은 서로 다른 것이다. 이런 차이는
			수학 함수전송 함수는 <i> 선형 </i> 또는 <i> 비선형 </i> 일 수 있습니다.
			색상 공간에 대한 대상입니다.sRGB는 비선형 전송 함수를 정의합니다.그것들
			함수는 가끔 <i>gamma 함수 </i>와 비슷하지만 "gamma"는
			애매모호하니 이런 상황에서는 피해야 한다.
		</li>
	</ul>

		원색, 흰색 점 및 전송 함수라는 세 개의 매개변수는 각 매개변수가 특정 대상에 대해 선택된 색상 공간을 정의합니다.매개변수를 정의한 후에는 다음과 같은 추가 용어가 도움이 됩니다.

		<ul>
			<li>
			<b> 색상 모델: </b> 선택한 색재현율에서 숫자로 색상을 식별하는 구문 - 색상의 좌표계입니다.three.js에서는 주로 RGB 색상에 초점을 맞춥니다.세 개의 좌표 <i>r, g, b∈[0,1]</i>("닫힌 도메인") 또는<i> r, g, b∈[0, ></i>("개역"), 각 마스터 도메인의 일부를 나타냅니다.색상.기타 색상 모델(HSL, Lab, LCH)은 일반적으로 예술 제어에 사용됩니다.
			</li>
			<li>
			<b> 색재현율: </b> 원색과 흰색 점을 선택한 경우 가시 스펙트럼 내의 볼륨 (색재현율)이 볼륨에 포함되지 않는 색상 (색상 외부) 닫힌 도메인 [0,1] RGB 값으로는 표시할 수 없습니다.열린 도메인 [0, 에서 색재현율은 다음과 같습니다.기술적으로 무한하다.
			</li>
			</ul>

	<p>
		[page: SRGBColorSpace]("sRGB") 및 [page: LinearSRGBColorSpace]("Linear-sRGB") 두 가지 일반적인 색상 공간을 고려합니다.둘 다 같은 원색과 흰색 점을 사용하기 때문에 같은 색재현율을 가집니다.둘 다 RGB 색상 모델을 사용합니다.이들은 전송 함수에서만 다릅니다. 선형 sRGB는 물리적 빛 강도와 선형 관계입니다.sRGB는 비선형 sRGB 전달 함수를 사용하여 사람의 눈이 빛을 감지하는 방식과 일반적인 디스플레이 장치의 응답성에 더 가깝습니다.
	</p>

	<p>
		이런 차이는 매우 중요하다.조명 계산 및 기타 렌더링 작업은 일반적으로 선형 색상 공간에서 수행되어야 합니다.그러나 선형 색상은 이미지나 프레임 버퍼에서 저장 효율이 낮고 인간 관찰자가 볼 때 올바르게 보이지 않습니다.따라서 텍스쳐 입력 및 최종 렌더링 이미지에는 일반적으로 비선형 sRGB 색상 공간이 사용됩니다.
	</p>

	<blockquote>
		<p>
			ℹ️ <i><b>NOTICE:</b> 일부 현대 모니터는 Display-P3와 같은 더 넓은 색재현율을 지원하지만 네트워크 플랫폼의 그래픽 API는 sRGB에 크게 의존합니다.현재 three.js를 사용하는 응용 프로그램은 일반적으로 sRGB 및 Linear sRGB 색상 공간만 사용합니다.</i>
		</p>
	</blockquote>

	<h2>색채공간의 역할</h2>

	<p>
		현대 렌더링 방법에 필요한 선형 워크플로우는 일반적으로 여러 색상 공간과 관련되며 각 색상 공간은 특정 역할에 할당됩니다.선형 및 비선형 색상 공간은 다음과 같이 서로 다른 역할에 적용됩니다.
	</p>

	<h3>색상 공간 가져오기</h3>

	<p>
    three.js에 제공되는 색상 -- 색상 선택기, 텍스쳐, 3D 모델 및 다른 소스에서 가져온 각 색상 공간은 연관되어 있습니다.Linear sRGB 작업 색상 공간에 아직 없는 색상을 변환하고 텍스쳐에 올바른 <i>texture.colorSpace</i> 할당을 할당해야 합니다.세 가지 조건이 충족되면 특정 변환을 자동으로 수행할 수 있습니다 (sRGB의 16진수 및 CSS 색상).색상을 초기화하기 전에 ColorManagement API를 활성화합니다.
	</p>

	<code>
    THREE.ColorManagement.enabled = true;
	</code>

	<p>
		THREE.ColorManagement 기본적으로 활성화됩니다.
	</p>

	<ul>
		<li>
			<b>Materials, lights, and shaders:</b> 재료, 조명 및 셰이더의 색상은 RGB 컴포넌트를 Linear sRGB 작업 색상 공간에 저장합니다.
		</li>
		<li>
			<b>Vertex colors:</b> [page:BufferAttribute BufferAttributes] RGB 컴포넌트 저장 선형 sRGB 작업 색상 공간.
		</li>
		<li>
			<b> 색상 텍스처: </b>.map 또는.emissiveMap과 같은 색상 정보가 포함된 PNG 또는 JPEG[페이지: 텍스처 텍스처]는 닫힌 도메인 sRGB 색상 공간을 사용하며 <i>Texture.colorSpace=SRGBColorSpace</i>를 사용해야 합니다.OpenEXR(.envMap 또는.lightMap의 경우) 같은 형식은 <i>texture.colorSpace LinearSRGBColorSpace</i>로 표시된 선형 sRGB 색상 공간을 사용합니다.
			또한 개역 [0,]의 값을 포함할 수 있습니다.
			</li>
			<li>
			<b> 비컬러 텍스쳐: </b> 색상 정보를 저장하지 않는 텍스쳐(예:.normalMap 또는.rawnessMap)에는 연관된 색상 공간이 없으며, 일반적으로 (기본값) 텍스쳐 메모 <i> texture.colorSpace = NoColorSpace</i> 를 사용합니다.기술적인 이유로 비색상 데이터가 다른 비선형 인코딩으로 표시될 수 있는 경우는 극히 일부입니다.
		</li>
	</ul>

	<blockquote>
		<p>
			⚠️ <i><b> 경고: </b> 많은 3D 모델의 형식이 색상 공간 정보를 올바르거나 일관되게 정의하지 않습니다.three.js가 대부분의 상황을 처리하려고 시도하지만 이전 파일 형식의 문제는 흔합니다.최상의 결과를 얻으려면 glTF 2.0([page:GLTFLoader])을 사용하고 가능한 한 빨리 온라인 뷰어에서 3D 모델을 테스트하여 자산 자체가 정확한지 확인하십시오</i>
		</p>
	</blockquote>

	<h3>작업 색상 공간</h3>

	<p>
		렌더링, 보간 및 기타 많은 작업은 RGB 컴포넌트가 실제 조명에 비례하는 열린 도메인 선형 작업 색상 공간에서 수행되어야 합니다.three.js에서 작업 색상 공간은 Linear-sRGB입니다.
	</p>

	<h3>출력 색상 공간</h3>

	<p>
		디스플레이 장치, 이미지 또는 비디오로 출력하는 것은 열린 도메인의 Linear-sRGB 작업 색상 공간에서 다른 색상 공간으로 변환하는 것과 관련될 수 있습니다.이 변환은 기본 렌더링 프로세스([page:WebGLRender.outputColorSpace]) 또는 사후 처리 프로세스에서 수행할 수 있습니다.
	</p>

	<code>
    renderer.outputColorSpace = THREE.SRGBColorSpace; // optional with post-processing
	</code>

	<ul>
		<li>
			<b> 표시: </b> WebGL 캔버스에 기록된 색상은 sRGB 색상 공간에 있어야 합니다.
		</li>
		<li>
			<b>Image:</b>이미지를 쓰는 색상은 형식과 용도에 맞는 색상 공간을 사용해야 합니다.PNG 또는 JPEG 텍스쳐를 쓴 전체 렌더링 이미지는 일반적으로 sRGB 색상 공간을 사용합니다.송신, 조명 맵 또는 [0,1] 범위에 국한되지 않는 다른 데이터를 포함하는 이미지는 일반적으로 OpenEXR과 같은 Open 도메인 선형 sRGB 색상 공간과 호환되는 이미지 형식을 사용합니다.
		</li>
	</ul>

	<blockquote>
		<p>
			⚠️ <i><b> 경고: </b> 렌더링 대상은 sRGB 또는 선형 sRGB를 사용할 수 있습니다.sRGB는 제한된 정밀도를 더 잘 활용합니다.닫힌 도메인에서 8 비트는 일반적으로 sRGB에 충분하지만 선형 sRGB는 ≥ 12 비트 (반 부동 소수점) 가 필요할 수 있습니다.후속 라인 단계에서 선형 sRGB 입력이 필요한 경우 추가 변환으로 인해 적은 성능 비용이 발생할 수 있습니다</i>
		</p>
	</blockquote>

	<p>
    [page:ShaderMaterial] 및 [page:RawShaderMaterial] 기반 사용자 지정 재료는 자체 출력 색상 공간 변환을 수행해야 합니다."ShaderMaterial" 인스턴스의 경우 "colorspace_fragment" 셰이더 블록을 세그먼트 셰이더의 "main()" 함수에 추가하면 충분합니다.
	</p>

	<h2>과 협력 THREE.Color 인스턴스</h2>

	<p>
		[page:Color] 인스턴스를 읽거나 수정하는 방법은 데이터가 three.js 작업 색상 공간인 Linear sRGB에 이미 있다고 가정합니다.RGB 및 HSL 구성 요소는 Color 인스턴스에 저장된 데이터의 직접 표현으로 암시적으로 변환되지 않습니다.색상 데이터는 <i>를 사용하여 명시적으로 변환할 수 있습니다 <i>.convertLinearToSRGB()</i>
		or <i>.convertSRGBToLinear()</i>.
	</p>

	<code>
		// RGB components (no change).
		color.r = color.g = color.b = 0.5;
		console.log( color.r ); // → 0.5

		// Manual conversion.
		color.r = 0.5;
		color.convertSRGBToLinear();
		console.log( color.r ); // → 0.214041140
	</code>

	<p>
		<i>ColorManagement.enabled=true</i>(권장)를 설정하면 일부 변환이 자동으로 수행됩니다.16진수와 CSS 색상은 일반적으로 sRGB이기 때문에 [page:Color] 메서드는 setter에서 이러한 입력을 sRGB에서 Linear sRGB로 자동 변환하거나 getter에서 16진수 또는 CSS 출력을 반환할 때 Linear sRG에서 sRGB로 변환합니다.
	</p>

	<code>
		// Hexadecimal conversion.
		color.setHex( 0x808080 );
		console.log( color.r ); // → 0.214041140
		console.log( color.getHex() ); // → 0x808080

		// CSS conversion.
		color.setStyle( 'rgb( 0.5, 0.5, 0.5 )' );
		console.log( color.r ); // → 0.214041140

		// Override conversion with 'colorSpace' argument.
		color.setHex( 0x808080, LinearSRGBColorSpace );
		console.log( color.r ); // → 0.5
		console.log( color.getHex( LinearSRGBColorSpace ) ); // → 0x808080
		console.log( color.getHex( SRGBColorSpace ) ); // → 0xBCBCBC
	</code>

	<h2>일반적인 오류</h2>

	<p>
		단일 색상이나 텍스쳐 구성이 잘못되면 예상보다 더 어둡거나 밝게 표시됩니다.렌더기의 출력 색상 공간 구성이 잘못되면 전체 장면이 더 어둡게 보일 수 있습니다 (예: sRGB로 변환할 수 없음). 또는 더 밝게 보일 수 있습니다 (예: 사후 처리된 sRGB 이중 변환).각 상황에서 문제가 고르지 않을 수 있으며 조명을 단순히 증가 / 감소한다고 해서 문제가 해결되지는 않습니다.
	</p>

	<p>
		다음과 같은 상황이 발생하면 더욱 미묘한 문제가 나타난다<i> 둘 다 </i>색상 공간 입력과 출력 색상 공간이 올바르지 않습니다. 전체적인 밝기 수준은 좋을 수 있지만 다른 조명에서 색상이 예기치 않게 변경되거나 그림자가 예상보다 과장되고 부드러워 보일 수 있습니다.이 두 가지 잘못은 결코 하나의 정확성과 같지 않다. 중요한 것은 일이다 색상 공간은 선형 (장면 참조) 이고 출력 색상 공간은 비선형 (디스플레이 참조) 입니다.
	</p>

	<h2>추가 읽기</h2>

	<ul>
		<li>
			<a href="https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear" target="_blank" rel="noopener">GPU Gems 3: 선형의 중요성</a>,저자: Larry Gritz and Eugene d'Eon
		</li>
		<li>
			<a href="https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/" target="_blank" rel="noopener">모든 프로그래머는 gamma에 대해 알아야 합니다</a>, 저자:John Novak
		</li>
		<li>
			<a href="https://hg2dc.com/" target="_blank" rel="noopener">디지털 색상 보행시선 안내서</a>,저자: Troy Sobotka
		</li>
		<li>
			<a href="https://docs.blender.org/manual/en/latest/render/color_management.html" target="_blank" rel="noopener">색상 관리</a>,저자: Blender
		</li>
	</ul>

</body>

</html>