Editor: Add support for equirect HDR textures.

editor/js/Sidebar.Project.js

@@ -163,6 +163,7 @@ var SidebarProject = function ( editor ) {
 		currentRenderer = new THREE.WebGLRenderer( parameters );
 		currentPmremGenerator = new THREE.PMREMGenerator( currentRenderer );
 		currentPmremGenerator.compileCubemapShader();
+		currentPmremGenerator.compileEquirectangularShader();
 
 		if ( shadows ) {
 

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

@@ -475,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 ) {
 
@@ -506,8 +506,11 @@ var Viewport = function ( editor ) {
 
 			if ( backgroundCubeTexture && backgroundCubeTexture.isHDRTexture ) {
 
-				scene.background = pmremGenerator.fromCubemap( backgroundCubeTexture ).texture;
-				scene.environment = scene.background;
+				var texture = pmremGenerator.fromCubemap( backgroundCubeTexture ).texture;
+				texture.isPmremTexture = true;
+
+				scene.background = texture;
+				scene.environment = texture;
 
 			} else {
 
@@ -516,6 +519,23 @@ var Viewport = function ( editor ) {
 
 			}
 
+		} 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;
+
+			}
+
 		}
 
 		render();