Editor: Add color space options for background textures. (#30794)

* Editor: Add color space options for background textures.

* Editor: Improve color space select.

Author: Mugen87

editor/js/Sidebar.Scene.js

@@ -181,7 +181,23 @@ function SidebarScene( editor ) {
 	backgroundEquirectangularTexture.setDisplay( 'none' );
 	backgroundRow.add( backgroundEquirectangularTexture );
 
+	const backgroundColorSpaceRow = new UIRow();
+	backgroundColorSpaceRow.setDisplay( 'none' );
+	backgroundColorSpaceRow.setMarginLeft( '120px' );
+
+	const backgroundColorSpace = new UISelect().setOptions( {
+
+		[ THREE.NoColorSpace ]: 'No Color Space',
+		[ THREE.LinearSRGBColorSpace ]: 'srgb-linear',
+		[ THREE.SRGBColorSpace ]: 'srgb',
+
+	} ).setWidth( '150px' );
+	backgroundColorSpace.setValue( THREE.NoColorSpace );
+	backgroundColorSpace.onChange( onBackgroundChanged );
+	backgroundColorSpaceRow.add( backgroundColorSpace );
+
 	container.add( backgroundRow );
+	container.add( backgroundColorSpaceRow );
 
 	const backgroundEquirectRow = new UIRow();
 	backgroundEquirectRow.setDisplay( 'none' );
@@ -205,6 +221,7 @@ function SidebarScene( editor ) {
 			backgroundColor.getHexValue(),
 			backgroundTexture.getValue(),
 			backgroundEquirectangularTexture.getValue(),
+			backgroundColorSpace.getValue(),
 			backgroundBlurriness.getValue(),
 			backgroundIntensity.getValue(),
 			backgroundRotation.getValue()
@@ -222,6 +239,16 @@ function SidebarScene( editor ) {
 		backgroundEquirectangularTexture.setDisplay( type === 'Equirectangular' ? '' : 'none' );
 		backgroundEquirectRow.setDisplay( type === 'Equirectangular' ? '' : 'none' );
 
+		if ( type === 'Texture' || type === 'Equirectangular' ) {
+
+			backgroundColorSpaceRow.setDisplay( '' );
+
+		} else {
+
+			backgroundColorSpaceRow.setDisplay( 'none' );
+
+		}
+
 	}
 
 	// environment
@@ -412,13 +439,16 @@ function SidebarScene( editor ) {
 
 				}
 
+				backgroundColorSpace.setValue( scene.background.colorSpace );
+
 			}
 
 		} else {
 
 			backgroundType.setValue( 'None' );
 			backgroundTexture.setValue( null );
 			backgroundEquirectangularTexture.setValue( null );
+			backgroundColorSpace.setValue( THREE.NoColorSpace );
 
 		}
 

editor/js/Viewport.js

@@ -495,7 +495,7 @@ function Viewport( editor ) {
 
 	// background
 
-	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture, backgroundBlurriness, backgroundIntensity, backgroundRotation ) {
+	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture, backgroundColorSpace, backgroundBlurriness, backgroundIntensity, backgroundRotation ) {
 
 		scene.background = null;
 
@@ -511,6 +511,9 @@ function Viewport( editor ) {
 
 				if ( backgroundTexture ) {
 
+					backgroundTexture.colorSpace = backgroundColorSpace;
+					backgroundTexture.needsUpdate = true;
+
 					scene.background = backgroundTexture;
 
 				}
@@ -522,6 +525,8 @@ function Viewport( editor ) {
 				if ( backgroundEquirectangularTexture ) {
 
 					backgroundEquirectangularTexture.mapping = THREE.EquirectangularReflectionMapping;
+					backgroundEquirectangularTexture.colorSpace = backgroundColorSpace;
+					backgroundEquirectangularTexture.needsUpdate = true;
 
 					scene.background = backgroundEquirectangularTexture;
 					scene.backgroundBlurriness = backgroundBlurriness;