Editor: Add HDR support for UITexture and UICubeTexture.

editor/js/Sidebar.Scene.js

@@ -124,6 +124,23 @@ var SidebarScene = function ( editor ) {
 
 	}
 
+	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( {
@@ -163,7 +180,7 @@ var SidebarScene = function ( editor ) {
 	textureRow.setDisplay( 'none' );
 	textureRow.setMarginLeft( '90px' );
 
-	var backgroundTexture = new UITexture().onChange( onBackgroundChanged );
+	var backgroundTexture = new UITexture().onChange( onTextureChanged );
 	textureRow.add( backgroundTexture );
 
 	container.add( textureRow );
@@ -174,7 +191,7 @@ var SidebarScene = function ( editor ) {
 	cubeTextureRow.setDisplay( 'none' );
 	cubeTextureRow.setMarginLeft( '90px' );
 
-	var backgroundCubeTexture = new UICubeTexture().onChange( onBackgroundChanged );
+	var backgroundCubeTexture = new UICubeTexture().onChange( onTextureChanged );
 	cubeTextureRow.add( backgroundCubeTexture );
 
 	container.add( cubeTextureRow );

editor/js/Viewport.js

@@ -498,12 +498,6 @@ var Viewport = function ( editor ) {
 
 		}
 
-		if ( scene.background !== null && ( scene.background.isTexture || scene.background.isCubeTexture ) ) {
-
-			scene.background.encoding = THREE.sRGBEncoding;
-
-		}
-
 		render();
 
 	} );

editor/js/libs/ui.three.js

@@ -4,6 +4,7 @@
 
 import * as THREE from '../../../build/three.module.js';
 
+import { RGBELoader } from '../../../examples/jsm/loaders/RGBELoader.js';
 import { TGALoader } from '../../../examples/jsm/loaders/TGALoader.js';
 
 import { UIElement, UISpan, UIDiv, UIRow, UIButton, UICheckbox, UIText, UINumber } from './ui.js';
@@ -101,6 +102,33 @@ var UITexture = function ( mapping ) {
 
 			}
 
+		} else {
+
+			var reader = new FileReader();
+			reader.addEventListener( 'load', function ( event ) {
+
+				if ( file.name.split( '.' ).pop() === 'hdr' ) {
+
+					// assuming RGBE/Radiance HDR iamge format
+
+					var loader = new RGBELoader().setDataType( THREE.UnsignedByteType );
+					loader.load( event.target.result, function ( hdrTexture ) {
+
+						hdrTexture.sourceFile = file.name;
+						hdrTexture.isHDRTexture = true;
+
+						scope.setValue( hdrTexture );
+
+						if ( scope.onChangeCallback ) scope.onChangeCallback( hdrTexture );
+
+					} );
+
+				}
+
+			} );
+
+			reader.readAsDataURL( file );
+
 		}
 
 		form.reset();
@@ -136,9 +164,18 @@ UITexture.prototype.setValue = function ( texture ) {
 		if ( image !== undefined && image.width > 0 ) {
 
 			canvas.title = texture.sourceFile;
-
 			var scale = canvas.width / image.width;
-			context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
+
+			if ( image.data === undefined ) {
+
+				context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
+
+			} else {
+
+				var canvas2 = renderToCanvas( texture );
+				context.drawImage( canvas2, 0, 0, image.width * scale, image.height * scale );
+
+			}
 
 		} else {
 
@@ -237,7 +274,7 @@ var UICubeTexture = function () {
 
 			if ( texture !== null ) {
 
-				images.push( texture.image );
+				images.push( texture.isHDRTexture ? texture : texture.image );
 
 			}
 
@@ -248,6 +285,8 @@ var UICubeTexture = function () {
 			var cubeTexture = new THREE.CubeTexture( images );
 			cubeTexture.needsUpdate = true;
 
+			if ( images[ 0 ].isHDRTexture ) cubeTexture.isHDRTexture = true;
+
 			scope.cubeTexture = cubeTexture;
 
 			if ( scope.onChangeCallback ) scope.onChangeCallback( cubeTexture );
@@ -883,4 +922,34 @@ UIBoolean.prototype.setValue = function ( value ) {
 
 };
 
+var renderer;
+
+function renderToCanvas( texture ) {
+
+	if ( renderer === undefined ) {
+
+		renderer = new THREE.WebGLRenderer( { canvas: new OffscreenCanvas( 1, 1 ) } );
+
+	}
+
+	var image = texture.image;
+
+	renderer.setSize( image.width, image.height, false );
+	renderer.toneMapping = THREE.ReinhardToneMapping;
+	renderer.outputEncoding = THREE.sRGBEncoding;
+
+	var scene = new THREE.Scene();
+	var camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+
+	var material = new THREE.MeshBasicMaterial( { map: texture } );
+	var quad = new THREE.PlaneBufferGeometry( 2, 2 );
+	var mesh = new THREE.Mesh( quad, material );
+	scene.add( mesh );
+
+	renderer.render( scene, camera );
+
+	return renderer.domElement;
+
+}
+
 export { UITexture, UICubeTexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };

editor/sw.js

@@ -27,6 +27,7 @@ const assets = [
 	'../examples/jsm/loaders/OBJLoader.js',
 	'../examples/jsm/loaders/MTLLoader.js',
 	'../examples/jsm/loaders/PLYLoader.js',
+	'../examples/jsm/loaders/RGBELoader.js',
 	'../examples/jsm/loaders/STLLoader.js',
 	'../examples/jsm/loaders/SVGLoader.js',
 	'../examples/jsm/loaders/TGALoader.js',