mrdoob · mrdoob · Sep 7, 2023 · Aug 24, 2023 · Aug 24, 2023 · Aug 24, 2023
diff --git a/examples/files.json b/examples/files.json
@@ -213,6 +213,7 @@
 		"webgl_sprites",
 		"webgl_test_memory",
 		"webgl_test_memory2",
+		"webgl_test_wide_gamut",
 		"webgl_tonemapping",
 		"webgl_video_kinect",
 		"webgl_video_panorama_equirectangular",

diff --git a/examples/jsm/capabilities/WebGL.js b/examples/jsm/capabilities/WebGL.js
@@ -30,6 +30,23 @@ class WebGL {
 
 	}
 
+	static isColorSpaceAvailable( colorSpace ) {
+
+		try {
+
+			const canvas = document.createElement( 'canvas' );
+			const ctx = window.WebGL2RenderingContext && canvas.getContext( 'webgl2' );
+			ctx.drawingBufferColorSpace = colorSpace;
+			return ctx.drawingBufferColorSpace === colorSpace; // deepscan-disable-line SAME_OPERAND_VALUE
+
+		} catch ( e ) {
+
+			return false;
+
+		}
+
+	}
+
 	static getWebGLErrorMessage() {
 
 		return this.getErrorMessage( 1 );

diff --git a/examples/jsm/postprocessing/OutputPass.js b/examples/jsm/postprocessing/OutputPass.js
@@ -1,11 +1,12 @@
 import {
+	ColorManagement,
 	RawShaderMaterial,
 	UniformsUtils,
 	LinearToneMapping,
 	ReinhardToneMapping,
 	CineonToneMapping,
 	ACESFilmicToneMapping,
-	SRGBColorSpace
+	SRGBTransfer
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
 import { OutputShader } from '../shaders/OutputShader.js';
@@ -51,7 +52,7 @@ class OutputPass extends Pass {
 
 			this.material.defines = {};
 
-			if ( this._outputColorSpace == SRGBColorSpace ) this.material.defines.SRGB_COLOR_SPACE = '';
+			if ( ColorManagement.getTransfer( this._outputColorSpace ) === SRGBTransfer ) this.material.defines.SRGB_TRANSFER = '';
 
 			if ( this._toneMapping === LinearToneMapping ) this.material.defines.LINEAR_TONE_MAPPING = '';
 			else if ( this._toneMapping === ReinhardToneMapping ) this.material.defines.REINHARD_TONE_MAPPING = '';

diff --git a/examples/jsm/shaders/GammaCorrectionShader.js b/examples/jsm/shaders/GammaCorrectionShader.js
@@ -34,7 +34,7 @@ const GammaCorrectionShader = {
 
 			vec4 tex = texture2D( tDiffuse, vUv );
 
-			gl_FragColor = LinearTosRGB( tex );
+			gl_FragColor = sRGBTransferOETF( tex );
 
 		}`
 

diff --git a/examples/jsm/shaders/OutputShader.js b/examples/jsm/shaders/OutputShader.js
@@ -65,9 +65,9 @@ const OutputShader = {
 
 			// color space
 
-			#ifdef SRGB_COLOR_SPACE
+			#ifdef SRGB_TRANSFER
 
-				gl_FragColor = LinearTosRGB( gl_FragColor );
+				gl_FragColor = sRGBTransferOETF( gl_FragColor );
 
 			#endif
 

diff --git a/examples/screenshots/webgl_test_wide_gamut.jpg b/examples/screenshots/webgl_test_wide_gamut.jpg
diff --git a/examples/textures/wide_gamut/logo_p3.png b/examples/textures/wide_gamut/logo_p3.png
diff --git a/examples/textures/wide_gamut/logo_srgb.png b/examples/textures/wide_gamut/logo_srgb.png
diff --git a/examples/webgl_test_wide_gamut.html b/examples/webgl_test_wide_gamut.html
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - test - wide gamut</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
+		<style>
+			.container {
+				position: absolute;
+				overflow: hidden;
+				width: 100%;
+				height: 100%;
+			}
+
+			.slider {
+				position: absolute;
+				cursor: ew-resize;
+
+				width: 40px;
+				height: 40px;
+				background-color: #F32196;
+				opacity: 0.7;
+				border-radius: 50%;
+
+				top: calc(50% - 20px);
+				left: calc(50% - 20px);
+			}
+
+			.label {
+				position: fixed;
+				top: calc(50% - 1em);
+				height: 2em;
+				line-height: 2em;
+				background: rgba(0, 0, 0, 0.5);
+				margin: 0;
+				padding: 0.2em 0.5em;
+				border-radius: 4px;
+				font-size: 14px;
+				user-select: none;
+				-webkit-user-select: none;
+			}
+		</style>
+	</head>
+
+	<body>
+
+		<div id="info">
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - wide gamut test<br />
+		</div>
+
+		<div class="container">
+			<div class="slider"></div>
+			<p class="label" style="left: 1em;">sRGB</p>
+			<p class="label" style="right: 1em;">Display P3</p>
+		</div>
+
+		<!-- Import maps polyfill -->
+		<!-- Remove this when import maps will be widely supported -->
+		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
+			let container, camera, renderer, loader;
+			let sceneL, sceneR, textureL, textureR;
+
+			let sliderPos = window.innerWidth / 2;
+
+			const isP3Context = WebGL.isColorSpaceAvailable( THREE.DisplayP3ColorSpace );
+
+			if ( isP3Context ) {
+
+				THREE.ColorManagement.workingColorSpace = THREE.LinearDisplayP3ColorSpace;
+
+			}
+
+			init();
+
+			function init() {
+
+				container = document.querySelector( '.container' );
+
+				sceneL = new THREE.Scene();
+				sceneR = new THREE.Scene();
+
+				camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100 );
+				camera.position.z = 6;
+
+				loader = new THREE.TextureLoader();
+
+				initTextures();
+				initSlider();
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setScissorTest( true );
+				renderer.setAnimationLoop( render );
+				container.appendChild( renderer.domElement );
+
+				if ( isP3Context && window.matchMedia( '( color-gamut: p3 )' ).matches ) {
+
+					renderer.outputColorSpace = THREE.DisplayP3ColorSpace;
+
+				}
+
+				window.addEventListener( 'resize', onWindowResize );
+				window.matchMedia( '( color-gamut: p3 )' ).addEventListener( 'change', onGamutChange );
+
+			}
+
+			async function initTextures() {
+
+				const path = 'textures/wide_gamut/logo_{colorSpace}.png';
+
+				textureL = await loader.loadAsync( path.replace( '{colorSpace}', 'srgb' ) );
+				textureR = await loader.loadAsync( path.replace( '{colorSpace}', 'p3' ) );
+
+				textureL.colorSpace = THREE.SRGBColorSpace;
+				textureR.colorSpace = THREE.DisplayP3ColorSpace;
+
+				sceneL.background = containTexture( window.innerWidth / window.innerHeight, textureL );
+				sceneR.background = containTexture( window.innerWidth / window.innerHeight, textureR );
+
+			}
+
+			function initSlider() {
+
+				const slider = document.querySelector( '.slider' );
+
+				function onPointerDown() {
+
+					if ( event.isPrimary === false ) return;
+
+					window.addEventListener( 'pointermove', onPointerMove );
+					window.addEventListener( 'pointerup', onPointerUp );
+
+				}
+
+				function onPointerUp() {
+
+					window.removeEventListener( 'pointermove', onPointerMove );
+					window.removeEventListener( 'pointerup', onPointerUp );
+
+				}
+
+				function onPointerMove( e ) {
+
+					if ( event.isPrimary === false ) return;
+
+					sliderPos = Math.max( 0, Math.min( window.innerWidth, e.pageX ) );
+
+					slider.style.left = sliderPos - ( slider.offsetWidth / 2 ) + 'px';
+
+				}
+
+				slider.style.touchAction = 'none'; // disable touch scroll
+				slider.addEventListener( 'pointerdown', onPointerDown );
+
+			}
+
+			function onWindowResize() {
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				containTexture( window.innerWidth / window.innerHeight, sceneL.background );
+				containTexture( window.innerWidth / window.innerHeight, sceneR.background );
+
+			}
+
+			function onGamutChange( { matches } ) {
+
+				renderer.outputColorSpace = isP3Context && matches ? THREE.DisplayP3ColorSpace : THREE.SRGBColorSpace;
+
+				textureL.needsUpdate = true;
+				textureR.needsUpdate = true;
+
+			}
+
+			function containTexture ( aspect, target ) {
+
+				// Sets the matrix uv transform so the texture image is contained in a region having the specified aspect ratio,
+				// and does so without distortion. Akin to CSS object-fit: contain.
+				// Source: https://github.com/mrdoob/three.js/pull/17199
+
+				var imageAspect = ( target.image && target.image.width ) ? target.image.width / target.image.height : 1;
+
+				if ( aspect > imageAspect ) {
+
+					target.matrix.setUvTransform( 0, 0, aspect / imageAspect, 1, 0, 0.5, 0.5 );
+
+				} else {
+
+					target.matrix.setUvTransform( 0, 0, 1, imageAspect / aspect, 0, 0.5, 0.5 );
+
+				}
+
+				target.matrixAutoUpdate = false;
+
+				return target;
+
+			}
+
+			function render() {
+
+				renderer.setScissor( 0, 0, sliderPos, window.innerHeight );
+				renderer.render( sceneL, camera );
+
+				renderer.setScissor( sliderPos, 0, window.innerWidth, window.innerHeight );
+				renderer.render( sceneR, camera );
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/src/constants.js b/src/constants.js
@@ -158,6 +158,12 @@ export const LinearSRGBColorSpace = 'srgb-linear';
 export const DisplayP3ColorSpace = 'display-p3';
 export const LinearDisplayP3ColorSpace = 'display-p3-linear';
 
+export const LinearTransfer = 'linear';
+export const SRGBTransfer = 'srgb';
+
+export const Rec709Primaries = 'rec709';
+export const P3Primaries = 'p3';
+
 export const ZeroStencilOp = 0;
 export const KeepStencilOp = 7680;
 export const ReplaceStencilOp = 7681;