Listen for display gamut changes.

donmccurdy · Aug 25, 2023 · 268a21b · 268a21b
1 parent 070b4ec
commit 268a21b
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/examples/webgl_test_wide_gamut.html b/examples/webgl_test_wide_gamut.html
@@ -88,10 +88,9 @@
 
 			};
 
-			const isP3Display = window.matchMedia( '( color-gamut: p3 )' ).matches;
 			const isP3Context = THREE.ColorManagement.isDrawingBufferColorSpaceSupported( THREE.DisplayP3ColorSpace );
 
-			if ( isP3Display && isP3Context ) {
+			if ( isP3Context ) {
 
 				THREE.ColorManagement.workingColorSpace = THREE.LinearDisplayP3ColorSpace;
 
@@ -121,7 +120,7 @@
 				renderer.setAnimationLoop( render );
 				container.appendChild( renderer.domElement );
 
-				if ( isP3Display && isP3Context ) {
+				if ( isP3Context && window.matchMedia( '( color-gamut: p3 )' ).matches ) {
 
 					renderer.outputColorSpace = THREE.DisplayP3ColorSpace;
 
@@ -132,6 +131,7 @@
 				gui.add( params, 'image', IMAGE_OPTIONS ).onChange( initTextures );
 
 				window.addEventListener( 'resize', onWindowResize );
+				window.matchMedia( '( color-gamut: p3 )' ).addEventListener( 'change', onGamutChange );
 
 			}
 
@@ -195,6 +195,15 @@
 
 			}
 
+			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,