Replace HDR with UltraHDR

examples/misc_controls_arcball.html

@@ -31,7 +31,7 @@
 			import { ArcballControls } from 'three/addons/controls/ArcballControls.js';
 
 			import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			const cameras = [ 'Orthographic', 'Perspective' ];
 			const cameraType = { type: 'Perspective' };
@@ -148,9 +148,9 @@
 						scene.add( group );
 						render();
 
-						new RGBELoader()
+						new UltraHDRLoader()
 							.setPath( 'textures/equirectangular/' )
-							.load( 'venice_sunset_1k.hdr', function ( hdrEquirect ) {
+							.load( 'venice_sunset_1k.hdr.jpg', function ( hdrEquirect ) {
 
 								hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
 

examples/misc_exporter_exr.html

@@ -26,7 +26,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { EXRExporter, ZIP_COMPRESSION, ZIPS_COMPRESSION, NO_COMPRESSION } from 'three/addons/exporters/EXRExporter.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			let scene, camera, renderer, exporter, mesh, controls, renderTarget, dataTexture;
@@ -56,14 +56,14 @@
 				scene = new THREE.Scene();
 
 				exporter = new EXRExporter();
-				const rgbeloader = new RGBELoader();
+				const uhdrloader = new UltraHDRLoader();
 
 				//
 
 				const pmremGenerator = new THREE.PMREMGenerator( renderer );
 				pmremGenerator.compileEquirectangularShader();
 
-				rgbeloader.load( 'textures/equirectangular/san_giuseppe_bridge_2k.hdr', function ( texture ) {
+				uhdrloader.load( 'textures/equirectangular/san_giuseppe_bridge_2k.hdr.jpg', function ( texture ) {
 
 					texture.mapping = THREE.EquirectangularReflectionMapping;
 

examples/webgl_loader_gltf_iridescence.html

@@ -11,7 +11,7 @@
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - GLTFLoader + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_iridescence" target="_blank" rel="noopener">KHR_materials_iridescence</a><br />
 			Iridescence Lamp from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/IridescenceLamp" target="_blank" rel="noopener">glTF-Sample-Models</a><br />
-			<a href="https://hdrihaven.com/hdri/?h=venice_sunset" target="_blank" rel="noopener">Venice Sunset</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
+			<a href="https://polyhaven.com/a/spruit_sunrise" target="_blank" rel="noopener">Spruit Sunrise</a> from <a href="https://polyhaven.com/" target="_blank" rel="noopener">Poly Haven</a>
 		</div>
 
 		<script type="importmap">
@@ -29,7 +29,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			let renderer, scene, camera, controls;
 
@@ -49,36 +49,48 @@
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
+				scene.backgroundBlurriness = 0.1;
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.05, 20 );
-				camera.position.set( 0.35, 0.05, 0.35 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.05, 20 );
+				camera.position.set( 0, 0.12, 1.2 );
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.autoRotate = true;
-				controls.autoRotateSpeed = - 0.5;
+				controls.autoRotateSpeed = 0.5;
 				controls.target.set( 0, 0.2, 0 );
 				controls.update();
 
-				const rgbeLoader = new RGBELoader()
+				const uhdrLoader = new UltraHDRLoader()
 					.setPath( 'textures/equirectangular/' );
 
 				const gltfLoader = new GLTFLoader().setPath( 'models/gltf/' );
 
 				const [ texture, gltf ] = await Promise.all( [
-					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
+					uhdrLoader.loadAsync( 'spruit_sunrise_2k.hdr.jpg' ),
 					gltfLoader.loadAsync( 'IridescenceLamp.glb' ),
 				] );
 
+				scene.add( gltf.scene );
+
 				// environment
 
 				texture.mapping = THREE.EquirectangularReflectionMapping;
 
 				scene.background = texture;
 				scene.environment = texture;
 
-				// model
+				// stand
 
-				scene.add( gltf.scene );
+				const geometry = new THREE.CylinderGeometry( 0.2, 0.2, 0.02, 64 );
+				const material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
+				const mesh = new THREE.Mesh( geometry, material );
+				mesh.position.y = - 0.01;
+				scene.add( mesh );
+
+				const geometry2 = new THREE.CylinderGeometry( 0.21, 0.21, 0.04, 64 );
+				const mesh2 = new THREE.Mesh( geometry2, material );
+				mesh2.position.y = - 0.04;
+				scene.add( mesh2 );
 
 				window.addEventListener( 'resize', onWindowResize );
 

examples/webgl_loader_gltf_variants.html

@@ -29,9 +29,9 @@
 			import * as THREE from 'three';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			let camera, scene, renderer;
 			let gui;
@@ -51,13 +51,15 @@
 
 				scene = new THREE.Scene();
 
-				new RGBELoader()
+				new UltraHDRLoader()
 					.setPath( 'textures/equirectangular/' )
-					.load( 'quarry_01_1k.hdr', function ( texture ) {
+					.load( 'quarry_01_1k.hdr.jpg', function ( texture ) {
 
 						texture.mapping = THREE.EquirectangularReflectionMapping;
 
 						scene.background = texture;
+						scene.backgroundBlurriness = 0.1;
+
 						scene.environment = texture;
 
 						render();

examples/webgl_loader_usdz.html

@@ -34,8 +34,8 @@
 			import * as THREE from 'three';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
 			import { USDZLoader } from 'three/addons/loaders/USDZLoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			let camera, scene, renderer;
 
@@ -48,14 +48,14 @@
 
 				scene = new THREE.Scene();
 
-				const rgbeLoader = new RGBELoader()
+				const uhdrLoader = new UltraHDRLoader()
 					.setPath( 'textures/equirectangular/' );
 
 				const usdzLoader = new USDZLoader()
 					.setPath( 'models/usdz/' );
 
 				const [ texture, model ] = await Promise.all( [
-					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
+					uhdrLoader.loadAsync( 'venice_sunset_1k.hdr.jpg' ),
 					usdzLoader.loadAsync( 'saeukkang.usdz' ),
 				] );
 

examples/webgl_materials_car.html

@@ -51,7 +51,7 @@
 
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 			import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			let camera, scene, renderer;
 			let stats;
@@ -69,8 +69,7 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 0.85;
+				renderer.toneMapping = THREE.NeutralToneMapping;
 				container.appendChild( renderer.domElement );
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -91,7 +90,7 @@
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x333333 );
-				scene.environment = new RGBELoader().load( 'textures/equirectangular/venice_sunset_1k.hdr' );
+				scene.environment = new UltraHDRLoader().load( 'textures/equirectangular/venice_sunset_1k.hdr.jpg' );
 				scene.environment.mapping = THREE.EquirectangularReflectionMapping;
 				scene.fog = new THREE.Fog( 0x333333, 10, 15 );
 

examples/webgl_materials_cubemap_dynamic.html

@@ -29,7 +29,7 @@
 			import * as THREE from 'three';
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import Stats from 'three/addons/libs/stats.module.js';
@@ -63,13 +63,17 @@
 				scene = new THREE.Scene();
 				scene.rotation.y = 0.5; // avoid flying objects occluding the sun
 
-				new RGBELoader()
+				new UltraHDRLoader()
 					.setPath( 'textures/equirectangular/' )
-					.load( 'quarry_01_1k.hdr', function ( texture ) {
+					.load( 'quarry_01_1k.hdr.jpg', function ( texture ) {
+
+						// 'quarry_01_2k.hdr.jpg doesn't work?
 
 						texture.mapping = THREE.EquirectangularReflectionMapping;
 
 						scene.background = texture;
+						scene.backgroundBlurriness = 0.1;
+
 						scene.environment = texture;
 
 					} );

examples/webgl_tonemapping.html

@@ -31,14 +31,14 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			let mesh, renderer, scene, camera, controls;
 			let gui, guiExposure = null;
 
 			const params = {
 				exposure: 1.0,
-				toneMapping: 'AgX',
+				toneMapping: 'Neutral',
 				blurriness: 0.3,
 				intensity: 1.0,
 			};
@@ -97,18 +97,17 @@
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.addEventListener( 'change', render ); // use if there is no animation loop
-				controls.enableZoom = false;
 				controls.enablePan = false;
-				controls.target.set( 0, 0, - 0.2 );
+				controls.target.set( 0, - 0.1, - 0.2 );
 				controls.update();
 
-				const rgbeLoader = new RGBELoader()
+				const uhdrLoader = new UltraHDRLoader()
 					.setPath( 'textures/equirectangular/' );
 
 				const gltfLoader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
 
 				const [ texture, gltf ] = await Promise.all( [
-					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
+					uhdrLoader.loadAsync( 'venice_sunset_1k.hdr.jpg' ),
 					gltfLoader.loadAsync( 'DamagedHelmet.gltf' ),
 				] );
 

examples/webgpu_loader_gltf_iridescence.html

@@ -11,7 +11,7 @@
 		<div id="info">
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - glTF + <a href="https://github.com/KhronosGroup/glTF/tree/master/extensions/2.0/Khronos/KHR_materials_iridescence" target="_blank" rel="noopener">KHR_materials_iridescence</a><br />
 			Iridescence Lamp from <a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/IridescenceLamp" target="_blank" rel="noopener">glTF-Sample-Models</a><br />
-			<a href="https://hdrihaven.com/hdri/?h=venice_sunset" target="_blank" rel="noopener">Venice Sunset</a> from <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
+			<a href="https://polyhaven.com/a/spruit_sunrise" target="_blank" rel="noopener">Spruit Sunrise</a> from <a href="https://polyhaven.com/" target="_blank" rel="noopener">Poly Haven</a>
 		</div>
 
 		<script type="importmap">
@@ -30,7 +30,7 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
-			import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			let renderer, scene, camera, controls;
 
@@ -50,36 +50,48 @@
 				document.body.appendChild( renderer.domElement );
 
 				scene = new THREE.Scene();
+				scene.backgroundBlurriness = 0.1;
 
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.05, 20 );
-				camera.position.set( 0.35, 0.05, 0.35 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.05, 20 );
+				camera.position.set( 0, 0.12, 1.2 );
 
 				controls = new OrbitControls( camera, renderer.domElement );
 				controls.autoRotate = true;
-				controls.autoRotateSpeed = - 0.5;
+				controls.autoRotateSpeed = 0.5;
 				controls.target.set( 0, 0.2, 0 );
 				controls.update();
 
-				const rgbeLoader = new RGBELoader()
+				const uhdrLoader = new UltraHDRLoader()
 					.setPath( 'textures/equirectangular/' );
 
 				const gltfLoader = new GLTFLoader().setPath( 'models/gltf/' );
 
 				const [ texture, gltf ] = await Promise.all( [
-					rgbeLoader.loadAsync( 'venice_sunset_1k.hdr' ),
+					uhdrLoader.loadAsync( 'spruit_sunrise_2k.hdr.jpg' ),
 					gltfLoader.loadAsync( 'IridescenceLamp.glb' ),
 				] );
 
+				scene.add( gltf.scene );
+
 				// environment
 
 				texture.mapping = THREE.EquirectangularReflectionMapping;
 
 				scene.background = texture;
 				scene.environment = texture;
 
-				// model
+				// stand
 
-				scene.add( gltf.scene );
+				const geometry = new THREE.CylinderGeometry( 0.2, 0.2, 0.02, 64 );
+				const material = new THREE.MeshStandardMaterial( { color: 0x606060 } );
+				const mesh = new THREE.Mesh( geometry, material );
+				mesh.position.y = - 0.01;
+				scene.add( mesh );
+
+				const geometry2 = new THREE.CylinderGeometry( 0.21, 0.21, 0.04, 64 );
+				const mesh2 = new THREE.Mesh( geometry2, material );
+				mesh2.position.y = - 0.04;
+				scene.add( mesh2 );
 
 				render();
 

examples/webgpu_loader_materialx.html

@@ -33,8 +33,8 @@
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 
-			import { RGBELoader } from './jsm/loaders/RGBELoader.js';
 			import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
+			import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
 
 			import { MaterialXLoader } from './jsm/loaders/MaterialXLoader.js';
 
@@ -95,9 +95,9 @@
 
 				//
 
-				new RGBELoader()
+				new UltraHDRLoader()
 					.setPath( 'textures/equirectangular/' )
-					.load( 'san_giuseppe_bridge_2k.hdr', async ( texture ) => {
+					.load( 'san_giuseppe_bridge_2k.hdr.jpg', async ( texture ) => {
 
 						texture.mapping = THREE.EquirectangularReflectionMapping;