각 색상 공간은 정밀도 및 디스플레이 기술과 관련된 기술적 제한을 충족하는 동시에 다양한 색상을 지원하기 위해 선택된 여러 설계 결정의 집합입니다.3D 에셋을 만들거나 장면에 3D 에셋을 어셈블할 때 이러한 속성이 무엇인지, 한 색상 공간의 속성과 장면의 다른 색상 공간의 관계를 이해하는 것이 중요합니다.
[page: SRGBColorSpace]("sRGB") 및 [page: LinearSRGBColorSpace]("Linear-sRGB") 두 가지 일반적인 색상 공간을 고려합니다.둘 다 같은 원색과 흰색 점을 사용하기 때문에 같은 색재현율을 가집니다.둘 다 RGB 색상 모델을 사용합니다.이들은 전송 함수에서만 다릅니다. 선형 sRGB는 물리적 빛 강도와 선형 관계입니다.sRGB는 비선형 sRGB 전달 함수를 사용하여 사람의 눈이 빛을 감지하는 방식과 일반적인 디스플레이 장치의 응답성에 더 가깝습니다.
이런 차이는 매우 중요하다.조명 계산 및 기타 렌더링 작업은 일반적으로 선형 색상 공간에서 수행되어야 합니다.그러나 선형 색상은 이미지나 프레임 버퍼에서 저장 효율이 낮고 인간 관찰자가 볼 때 올바르게 보이지 않습니다.따라서 텍스쳐 입력 및 최종 렌더링 이미지에는 일반적으로 비선형 sRGB 색상 공간이 사용됩니다.
ℹ️ NOTICE: 일부 현대 모니터는 Display-P3와 같은 더 넓은 색재현율을 지원하지만 네트워크 플랫폼의 그래픽 API는 sRGB에 크게 의존합니다.현재 three.js를 사용하는 응용 프로그램은 일반적으로 sRGB 및 Linear sRGB 색상 공간만 사용합니다.
현대 렌더링 방법에 필요한 선형 워크플로우는 일반적으로 여러 색상 공간과 관련되며 각 색상 공간은 특정 역할에 할당됩니다.선형 및 비선형 색상 공간은 다음과 같이 서로 다른 역할에 적용됩니다.
three.js에 제공되는 색상 -- 색상 선택기, 텍스쳐, 3D 모델 및 다른 소스에서 가져온 각 색상 공간은 연관되어 있습니다.Linear sRGB 작업 색상 공간에 아직 없는 색상을 변환하고 텍스쳐에 올바른 texture.colorSpace 할당을 할당해야 합니다.세 가지 조건이 충족되면 특정 변환을 자동으로 수행할 수 있습니다 (sRGB의 16진수 및 CSS 색상).색상을 초기화하기 전에 ColorManagement API를 활성화합니다.
THREE.ColorManagement.enabled = true;
THREE.ColorManagement 기본적으로 활성화됩니다.
⚠️ 경고: 많은 3D 모델의 형식이 색상 공간 정보를 올바르거나 일관되게 정의하지 않습니다.three.js가 대부분의 상황을 처리하려고 시도하지만 이전 파일 형식의 문제는 흔합니다.최상의 결과를 얻으려면 glTF 2.0([page:GLTFLoader])을 사용하고 가능한 한 빨리 온라인 뷰어에서 3D 모델을 테스트하여 자산 자체가 정확한지 확인하십시오
렌더링, 보간 및 기타 많은 작업은 RGB 컴포넌트가 실제 조명에 비례하는 열린 도메인 선형 작업 색상 공간에서 수행되어야 합니다.three.js에서 작업 색상 공간은 Linear-sRGB입니다.
디스플레이 장치, 이미지 또는 비디오로 출력하는 것은 열린 도메인의 Linear-sRGB 작업 색상 공간에서 다른 색상 공간으로 변환하는 것과 관련될 수 있습니다.이 변환은 기본 렌더링 프로세스([page:WebGLRender.outputColorSpace]) 또는 사후 처리 프로세스에서 수행할 수 있습니다.
renderer.outputColorSpace = THREE.SRGBColorSpace; // optional with post-processing
⚠️ 경고: 렌더링 대상은 sRGB 또는 선형 sRGB를 사용할 수 있습니다.sRGB는 제한된 정밀도를 더 잘 활용합니다.닫힌 도메인에서 8 비트는 일반적으로 sRGB에 충분하지만 선형 sRGB는 ≥ 12 비트 (반 부동 소수점) 가 필요할 수 있습니다.후속 라인 단계에서 선형 sRGB 입력이 필요한 경우 추가 변환으로 인해 적은 성능 비용이 발생할 수 있습니다
[page:ShaderMaterial] 및 [page:RawShaderMaterial] 기반 사용자 지정 재료는 자체 출력 색상 공간 변환을 수행해야 합니다."ShaderMaterial" 인스턴스의 경우 "colorspace_fragment" 셰이더 블록을 세그먼트 셰이더의 "main()" 함수에 추가하면 충분합니다.
[page:Color] 인스턴스를 읽거나 수정하는 방법은 데이터가 three.js 작업 색상 공간인 Linear sRGB에 이미 있다고 가정합니다.RGB 및 HSL 구성 요소는 Color 인스턴스에 저장된 데이터의 직접 표현으로 암시적으로 변환되지 않습니다.색상 데이터는 를 사용하여 명시적으로 변환할 수 있습니다 .convertLinearToSRGB() or .convertSRGBToLinear().
// 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
ColorManagement.enabled=true(권장)를 설정하면 일부 변환이 자동으로 수행됩니다.16진수와 CSS 색상은 일반적으로 sRGB이기 때문에 [page:Color] 메서드는 setter에서 이러한 입력을 sRGB에서 Linear sRGB로 자동 변환하거나 getter에서 16진수 또는 CSS 출력을 반환할 때 Linear sRG에서 sRGB로 변환합니다.
// 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
단일 색상이나 텍스쳐 구성이 잘못되면 예상보다 더 어둡거나 밝게 표시됩니다.렌더기의 출력 색상 공간 구성이 잘못되면 전체 장면이 더 어둡게 보일 수 있습니다 (예: sRGB로 변환할 수 없음). 또는 더 밝게 보일 수 있습니다 (예: 사후 처리된 sRGB 이중 변환).각 상황에서 문제가 고르지 않을 수 있으며 조명을 단순히 증가 / 감소한다고 해서 문제가 해결되지는 않습니다.
다음과 같은 상황이 발생하면 더욱 미묘한 문제가 나타난다 둘 다 색상 공간 입력과 출력 색상 공간이 올바르지 않습니다. 전체적인 밝기 수준은 좋을 수 있지만 다른 조명에서 색상이 예기치 않게 변경되거나 그림자가 예상보다 과장되고 부드러워 보일 수 있습니다.이 두 가지 잘못은 결코 하나의 정확성과 같지 않다. 중요한 것은 일이다 색상 공간은 선형 (장면 참조) 이고 출력 색상 공간은 비선형 (디스플레이 참조) 입니다.