Editor: Refactored Background/Environment code

editor/js/Editor.js

@@ -44,6 +44,7 @@ function Editor() {
 		rendererUpdated: new Signal(),
 
 		sceneBackgroundChanged: new Signal(),
+		sceneEnvironmentChanged: new Signal(),
 		sceneFogChanged: new Signal(),
 		sceneGraphChanged: new Signal(),
 		sceneRendered: new Signal(),
@@ -94,7 +95,6 @@ function Editor() {
 
 	this.scene = new THREE.Scene();
 	this.scene.name = 'Scene';
-	this.scene.background = new THREE.Color( 0xaaaaaa );
 
 	this.sceneHelpers = new THREE.Scene();
 
@@ -612,9 +612,11 @@ Editor.prototype = {
 		this.storage.clear();
 
 		this.camera.copy( this.DEFAULT_CAMERA );
+
 		this.scene.name = "Scene";
 		this.scene.userData = {};
-		this.scene.background = new THREE.Color( 0xaaaaaa );
+		this.scene.background = null;
+		this.scene.environment = null;
 		this.scene.fog = null;
 
 		var objects = this.scene.children;

editor/js/Sidebar.Scene.js

@@ -3,7 +3,7 @@
  */
 
 import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber } from './libs/ui.js';
-import { UIOutliner, UITexture, UICubeTexture } from './libs/ui.three.js';
+import { UIOutliner, UITexture } from './libs/ui.three.js';
 
 function SidebarScene( editor ) {
 
@@ -160,29 +160,12 @@ function SidebarScene( editor ) {
 			backgroundType.getValue(),
 			backgroundColor.getHexValue(),
 			backgroundTexture.getValue(),
-			backgroundCubeTexture.getValue(),
-			backgroundEquirectTexture.getValue()
+			backgroundEquirectangularTexture.getValue(),
+			environmentType.getValue()
 		);
 
 	}
 
-	function onTextureChanged( texture ) {
-
-		texture.encoding = texture.isHDRTexture ? THREE.RGBEEncoding : THREE.sRGBEncoding;
-
-		if ( texture.isCubeTexture && texture.isHDRTexture ) {
-
-			texture.format = THREE.RGBAFormat;
-			texture.minFilter = THREE.NearestFilter;
-			texture.magFilter = THREE.NearestFilter;
-			texture.generateMipmaps = false;
-
-		}
-
-		onBackgroundChanged();
-
-	}
-
 	var backgroundRow = new UIRow();
 
 	var backgroundType = new UISelect().setOptions( {
@@ -190,8 +173,7 @@ function SidebarScene( editor ) {
 		'None': 'None',
 		'Color': 'Color',
 		'Texture': 'Texture',
-		'CubeTexture': 'CubeTexture',
-		'Equirect': 'Equirect (HDR)'
+		'Equirectangular': 'Equirectangular'
 
 	} ).setWidth( '150px' );
 	backgroundType.onChange( function () {
@@ -212,7 +194,7 @@ function SidebarScene( editor ) {
 	var colorRow = new UIRow();
 	colorRow.setMarginLeft( '90px' );
 
-	var backgroundColor = new UIColor().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
+	var backgroundColor = new UIColor().setValue( '#000000' ).onChange( onBackgroundChanged );
 	colorRow.add( backgroundColor );
 
 	container.add( colorRow );
@@ -223,32 +205,21 @@ function SidebarScene( editor ) {
 	textureRow.setDisplay( 'none' );
 	textureRow.setMarginLeft( '90px' );
 
-	var backgroundTexture = new UITexture().onChange( onTextureChanged );
+	var backgroundTexture = new UITexture().onChange( onBackgroundChanged );
 	textureRow.add( backgroundTexture );
 
 	container.add( textureRow );
 
 	//
 
-	var cubeTextureRow = new UIRow();
-	cubeTextureRow.setDisplay( 'none' );
-	cubeTextureRow.setMarginLeft( '90px' );
+	var equirectangularRow = new UIRow();
+	equirectangularRow.setDisplay( 'none' );
+	equirectangularRow.setMarginLeft( '90px' );
 
-	var backgroundCubeTexture = new UICubeTexture().onChange( onTextureChanged );
-	cubeTextureRow.add( backgroundCubeTexture );
+	var backgroundEquirectangularTexture = new UITexture().onChange( onBackgroundChanged );
+	equirectangularRow.add( backgroundEquirectangularTexture );
 
-	container.add( cubeTextureRow );
-
-	//
-
-	var equirectRow = new UIRow();
-	equirectRow.setDisplay( 'none' );
-	equirectRow.setMarginLeft( '90px' );
-
-	var backgroundEquirectTexture = new UITexture().onChange( onTextureChanged );
-	equirectRow.add( backgroundEquirectTexture );
-
-	container.add( equirectRow );
+	container.add( equirectangularRow );
 
 	//
 
@@ -258,11 +229,32 @@ function SidebarScene( editor ) {
 
 		colorRow.setDisplay( type === 'Color' ? '' : 'none' );
 		textureRow.setDisplay( type === 'Texture' ? '' : 'none' );
-		cubeTextureRow.setDisplay( type === 'CubeTexture' ? '' : 'none' );
-		equirectRow.setDisplay( type === 'Equirect' ? '' : 'none' );
+		equirectangularRow.setDisplay( type === 'Equirectangular' ? '' : 'none' );
 
 	}
 
+	// environment
+
+	var environmentRow = new UIRow();
+
+	var environmentType = new UISelect().setOptions( {
+
+		'None': 'None',
+		'Background': 'Background'
+
+	} ).setWidth( '150px' );
+	environmentType.setValue( 'None' );
+	environmentType.onChange( function () {
+
+		signals.sceneEnvironmentChanged.dispatch( environmentType.getValue() );
+
+	} );
+
+	environmentRow.add( new UIText( strings.getKey( 'sidebar/scene/environment' ) ).setWidth( '90px' ) );
+	environmentRow.add( environmentType );
+
+	container.add( environmentRow );
+
 	// fog
 
 	function onFogChanged() {
@@ -376,22 +368,19 @@ function SidebarScene( editor ) {
 				backgroundType.setValue( "Color" );
 				backgroundColor.setHexValue( scene.background.getHex() );
 				backgroundTexture.setValue( null );
-				backgroundCubeTexture.setValue( null );
-				backgroundEquirectTexture.setValue( null );
+				backgroundEquirectangularTexture.setValue( null );
 
-			} else if ( scene.background.isTexture && ! scene.background.isPmremTexture ) {
+			} else if ( scene.background.isEquirectangularTexture ) {
 
-				backgroundType.setValue( "Texture" );
-				backgroundTexture.setValue( scene.background );
-				backgroundCubeTexture.setValue( null );
-				backgroundEquirectTexture.setValue( null );
+				backgroundType.setValue( "Equirectangular" );
+				backgroundTexture.setValue( null );
+				backgroundEquirectangularTexture.setValue( scene.background );
 
-			} else if ( scene.background.isCubeTexture ) {
+			} else if ( scene.background.isTexture ) {
 
-				backgroundType.setValue( "CubeTexture" );
-				backgroundCubeTexture.setValue( scene.background );
-				backgroundTexture.setValue( null );
-				backgroundEquirectTexture.setValue( null );
+				backgroundType.setValue( "Texture" );
+				backgroundTexture.setValue( scene.background );
+				backgroundEquirectangularTexture.setValue( null );
 
 			}
 
@@ -399,6 +388,17 @@ function SidebarScene( editor ) {
 
 			backgroundType.setValue( "None" );
 			backgroundTexture.setValue( null );
+			backgroundEquirectangularTexture.setValue( null );
+
+		}
+
+		if ( scene.environment ) {
+
+			// TODO
+
+		} else {
+
+			environmentType.setValue( "None" );
 
 		}
 

editor/js/Strings.js

@@ -81,6 +81,7 @@ function Strings( config ) {
 
 			'sidebar/scene': 'Scene',
 			'sidebar/scene/background': 'Background',
+			'sidebar/scene/environment': 'Environment',
 			'sidebar/scene/fog': 'Fog',
 
 			'sidebar/properties/object': 'Object',
@@ -398,6 +399,7 @@ function Strings( config ) {
 
 			'sidebar/scene': 'Scène',
 			'sidebar/scene/background': 'Arrière Plan',
+			'sidebar/scene/environment': 'Environment',
 			'sidebar/scene/fog': 'Brouillard',
 
 			'sidebar/properties/object': 'Objet',
@@ -715,6 +717,7 @@ function Strings( config ) {
 
 			'sidebar/scene': '场景',
 			'sidebar/scene/background': '背景',
+			'sidebar/scene/environment': 'Environment',
 			'sidebar/scene/fog': '雾',
 
 			'sidebar/properties/object': '属性',

editor/js/Viewport.js

@@ -32,6 +32,7 @@ function Viewport( editor ) {
 
 	var renderer = null;
 	var pmremGenerator = null;
+	var pmremTexture = null;
 
 	var camera = editor.camera;
 	var scene = editor.scene;
@@ -298,8 +299,6 @@ function Viewport( editor ) {
 	signals.editorCleared.add( function () {
 
 		controls.center.set( 0, 0, 0 );
-		currentBackgroundType = null;
-		currentFogType = null;
 		render();
 
 	} );
@@ -344,6 +343,7 @@ function Viewport( editor ) {
 
 			renderer.dispose();
 			pmremGenerator.dispose();
+			pmremTexture = null;
 
 			container.dom.removeChild( renderer.domElement );
 
@@ -351,13 +351,13 @@ function Viewport( editor ) {
 
 		renderer = newRenderer;
 
-		renderer.autoClear = false;
-		renderer.autoUpdateScene = false;
 		renderer.setPixelRatio( window.devicePixelRatio );
 		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
+		var isDarkMode = window.matchMedia && window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
+		renderer.setClearColor( isDarkMode ? 0x333333 : 0xaaaaaa );
+
 		pmremGenerator = new THREE.PMREMGenerator( renderer );
-		pmremGenerator.compileCubemapShader();
 		pmremGenerator.compileEquirectangularShader();
 
 		container.dom.appendChild( renderer.domElement );
@@ -503,68 +503,55 @@ function Viewport( editor ) {
 
 	// background
 
-	var currentBackgroundType = null;
+	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture, environmentType ) {
 
-	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundCubeTexture, backgroundEquirectTexture ) {
+		pmremTexture = null;
 
-		if ( currentBackgroundType !== backgroundType ) {
+		switch ( backgroundType ) {
 
-			switch ( backgroundType ) {
+			case 'None':
 
-				case 'None':
-					scene.background = null;
-					break;
-				case 'Color':
-					scene.background = new THREE.Color();
-					break;
+				scene.background = null;
 
-			}
+				break;
 
-		}
+			case 'Color':
 
-		if ( backgroundType === 'Color' ) {
+				scene.background = new THREE.Color( backgroundColor );
 
-			scene.background.set( backgroundColor );
-			scene.environment = null;
+				break;
 
-		} else if ( backgroundType === 'Texture' ) {
+			case 'Texture':
 
-			scene.background = backgroundTexture;
-			scene.environment = null;
+				if ( backgroundTexture ) {
 
-		} else if ( backgroundType === 'CubeTexture' ) {
+					scene.background = backgroundTexture;
 
-			if ( backgroundCubeTexture && backgroundCubeTexture.isHDRTexture ) {
+				}
 
-				var texture = pmremGenerator.fromCubemap( backgroundCubeTexture ).texture;
-				texture.isPmremTexture = true;
+				break;
 
-				scene.background = texture;
-				scene.environment = texture;
+			case 'Equirectangular':
 
-			} else {
+				if ( backgroundEquirectangularTexture ) {
 
-				scene.background = backgroundCubeTexture;
-				scene.environment = null;
+					pmremTexture = pmremGenerator.fromEquirectangular( backgroundEquirectangularTexture ).texture;
 
-			}
-
-		} else if ( backgroundType === 'Equirect' ) {
+					var renderTarget = new THREE.WebGLCubeRenderTarget( 512 );
+					renderTarget.fromEquirectangularTexture( renderer, backgroundEquirectangularTexture );
+					renderTarget.toJSON = function () { return null };
 
-			if ( backgroundEquirectTexture && backgroundEquirectTexture.isHDRTexture ) {
+					scene.background = renderTarget;
 
-				var texture = pmremGenerator.fromEquirectangular( backgroundEquirectTexture ).texture;
-				texture.isPmremTexture = true;
+				}
 
-				scene.background = texture;
-				scene.environment = texture;
+				break;
 
-			} else {
+		}
 
-				scene.background = null;
-				scene.environment = null;
+		if ( environmentType === 'Background' ) {
 
-			}
+			scene.environment = pmremTexture;
 
 		}
 
@@ -572,46 +559,40 @@ function Viewport( editor ) {
 
 	} );
 
-	// fog
-
-	var currentFogType = null;
-
-	signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
+	// environment
 
-		if ( currentFogType !== fogType ) {
-
-			switch ( fogType ) {
-
-				case 'None':
-					scene.fog = null;
-					break;
-				case 'Fog':
-					scene.fog = new THREE.Fog();
-					break;
-				case 'FogExp2':
-					scene.fog = new THREE.FogExp2();
-					break;
+	signals.sceneEnvironmentChanged.add( function ( environmentType ) {
 
-			}
+		switch ( environmentType ) {
 
-			currentFogType = fogType;
+			case 'None':
+				scene.environment = null;
+				break;
+			case 'Background':
+				scene.environment = pmremTexture;
+				break;
 
 		}
 
-		if ( scene.fog ) {
+		render();
 
-			if ( scene.fog.isFog ) {
+	} );
 
-				scene.fog.color.setHex( fogColor );
-				scene.fog.near = fogNear;
-				scene.fog.far = fogFar;
+	// fog
 
-			} else if ( scene.fog.isFogExp2 ) {
+	signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {
 
-				scene.fog.color.setHex( fogColor );
-				scene.fog.density = fogDensity;
+		switch ( fogType ) {
 
-			}
+			case 'None':
+				scene.fog = null;
+				break;
+			case 'Fog':
+				scene.fog = new THREE.Fog( fogColor, fogNear, fogFar );
+				break;
+			case 'FogExp2':
+				scene.fog = new THREE.FogExp2( fogColor, fogDensity );
+				break;
 
 		}
 
@@ -696,13 +677,13 @@ function Viewport( editor ) {
 
 		startTime = performance.now();
 
-		scene.updateMatrixWorld();
 		renderer.render( scene, camera );
 
 		if ( camera === editor.camera ) {
 
-			sceneHelpers.updateMatrixWorld();
+			renderer.autoClear = false;
 			renderer.render( sceneHelpers, camera );
+			renderer.autoClear = true;
 
 		}