Merge pull request #18535 from Mugen87/dev19

Editor: Use PMREMGenerator and Scene.environment.

editor/js/Sidebar.Project.js

@@ -16,6 +16,7 @@ var SidebarProject = function ( editor ) {
 	var strings = editor.strings;
 
 	var currentRenderer = null;
+	var currentPmremGenerator = null;
 
 	var container = new UISpan();
 
@@ -151,7 +152,18 @@ var SidebarProject = function ( editor ) {
 	function createRenderer( antialias, shadows, toneMapping ) {
 
 		var parameters = { antialias: antialias };
+
+		if ( currentRenderer !== null ) {
+
+			currentRenderer.dispose();
+			currentPmremGenerator.dispose();
+
+		}
+
 		currentRenderer = new THREE.WebGLRenderer( parameters );
+		currentPmremGenerator = new THREE.PMREMGenerator( currentRenderer );
+		currentPmremGenerator.compileCubemapShader();
+		currentPmremGenerator.compileEquirectangularShader();
 
 		if ( shadows ) {
 
@@ -162,7 +174,7 @@ var SidebarProject = function ( editor ) {
 
 		currentRenderer.toneMapping = parseFloat( toneMapping );
 
-		signals.rendererChanged.dispatch( currentRenderer );
+		signals.rendererChanged.dispatch( currentRenderer, currentPmremGenerator );
 
 	}
 

editor/js/Sidebar.Scene.js

@@ -119,7 +119,8 @@ var SidebarScene = function ( editor ) {
 			backgroundType.getValue(),
 			backgroundColor.getHexValue(),
 			backgroundTexture.getValue(),
-			backgroundCubeTexture.getValue()
+			backgroundCubeTexture.getValue(),
+			backgroundEquirectTexture.getValue()
 		);
 
 	}
@@ -148,7 +149,8 @@ var SidebarScene = function ( editor ) {
 		'None': 'None',
 		'Color': 'Color',
 		'Texture': 'Texture',
-		'CubeTexture': 'CubeTexture'
+		'CubeTexture': 'CubeTexture',
+		'Equirect': 'Equirect (HDR)'
 
 	} ).setWidth( '150px' );
 	backgroundType.onChange( function () {
@@ -198,6 +200,17 @@ var SidebarScene = function ( editor ) {
 
 	//
 
+	var equirectRow = new UIRow();
+	equirectRow.setDisplay( 'none' );
+	equirectRow.setMarginLeft( '90px' );
+
+	var backgroundEquirectTexture = new UITexture().onChange( onTextureChanged );
+	equirectRow.add( backgroundEquirectTexture );
+
+	container.add( equirectRow );
+
+	//
+
 	function refreshBackgroundUI() {
 
 		var type = backgroundType.getValue();
@@ -205,6 +218,7 @@ var SidebarScene = function ( editor ) {
 		colorRow.setDisplay( type === 'Color' ? '' : 'none' );
 		textureRow.setDisplay( type === 'Texture' ? '' : 'none' );
 		cubeTextureRow.setDisplay( type === 'CubeTexture' ? '' : 'none' );
+		equirectRow.setDisplay( type === 'Equirect' ? '' : 'none' );
 
 	}
 
@@ -312,18 +326,21 @@ var SidebarScene = function ( editor ) {
 				backgroundColor.setHexValue( scene.background.getHex() );
 				backgroundTexture.setValue( null );
 				backgroundCubeTexture.setValue( null );
+				backgroundEquirectTexture.setValue( null );
 
-			} else if ( scene.background.isTexture ) {
+			} else if ( scene.background.isTexture && ! scene.background.isPmremTexture ) {
 
 				backgroundType.setValue( "Texture" );
 				backgroundTexture.setValue( scene.background );
 				backgroundCubeTexture.setValue( null );
+				backgroundEquirectTexture.setValue( null );
 
 			} else if ( scene.background.isCubeTexture ) {
 
 				backgroundType.setValue( "CubeTexture" );
 				backgroundCubeTexture.setValue( scene.background );
 				backgroundTexture.setValue( null );
+				backgroundEquirectTexture.setValue( null );
 
 			}
 

editor/js/Viewport.js

@@ -31,6 +31,7 @@ var Viewport = function ( editor ) {
 	//
 
 	var renderer = null;
+	var pmremGenerator = null;
 
 	var camera = editor.camera;
 	var scene = editor.scene;
@@ -324,7 +325,7 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	signals.rendererChanged.add( function ( newRenderer ) {
+	signals.rendererChanged.add( function ( newRenderer, newPmremGenerator ) {
 
 		if ( renderer !== null ) {
 
@@ -333,6 +334,7 @@ var Viewport = function ( editor ) {
 		}
 
 		renderer = newRenderer;
+		pmremGenerator = newPmremGenerator;
 
 		renderer.autoClear = false;
 		renderer.autoUpdateScene = false;
@@ -473,7 +475,7 @@ var Viewport = function ( editor ) {
 
 	var currentBackgroundType = null;
 
-	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundCubeTexture ) {
+	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundCubeTexture, backgroundEquirectTexture ) {
 
 		if ( currentBackgroundType !== backgroundType ) {
 
@@ -493,14 +495,46 @@ var Viewport = function ( editor ) {
 		if ( backgroundType === 'Color' ) {
 
 			scene.background.set( backgroundColor );
+			scene.environment = null;
 
 		} else if ( backgroundType === 'Texture' ) {
 
 			scene.background = backgroundTexture;
+			scene.environment = null;
 
 		} else if ( backgroundType === 'CubeTexture' ) {
 
-			scene.background = backgroundCubeTexture;
+			if ( backgroundCubeTexture && backgroundCubeTexture.isHDRTexture ) {
+
+				var texture = pmremGenerator.fromCubemap( backgroundCubeTexture ).texture;
+				texture.isPmremTexture = true;
+
+				scene.background = texture;
+				scene.environment = texture;
+
+			} else {
+
+				scene.background = backgroundCubeTexture;
+				scene.environment = null;
+
+			}
+
+		} else if ( backgroundType === 'Equirect' ) {
+
+			if ( backgroundEquirectTexture && backgroundEquirectTexture.isHDRTexture ) {
+
+				var texture = pmremGenerator.fromEquirectangular( backgroundEquirectTexture ).texture;
+				texture.isPmremTexture = true;
+
+				scene.background = texture;
+				scene.environment = texture;
+
+			} else {
+
+				scene.background = null;
+				scene.environment = null;
+
+			}
 
 		}