Examples: Add UltraHDRLoader (#1105)

* Examples: Add UltraHDRLoader * Update three.js * Update * Add examples * Update patch and delete examples
three-types · Jul 21, 2024 · 263c6a6 · 263c6a6
1 parent ad8996b
commit 263c6a6
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 2 deletions.
diff --git a/examples-testing/changes.patch b/examples-testing/changes.patch
@@ -7376,6 +7376,52 @@ index f097774a..bb5b9d9d 100644
 
  init();
 
+diff --git a/examples-testing/examples/webgl_loader_texture_ultrahdr.ts b/examples-testing/examples/webgl_loader_texture_ultrahdr.ts
+index c8bce4bf..a28a7f00 100644
+--- a/examples-testing/examples/webgl_loader_texture_ultrahdr.ts
++++ b/examples-testing/examples/webgl_loader_texture_ultrahdr.ts
+@@ -5,7 +5,14 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
+ import { UltraHDRLoader } from 'three/addons/loaders/UltraHDRLoader.js';
+ import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+-const params = {
++const params: {
++    autoRotate: boolean;
++    metalness: number;
++    roughness: number;
++    exposure: number;
++    resolution: '2k' | '4k';
++    type: 'HalfFloatType' | 'FloatType';
++} = {
+     autoRotate: true,
+     metalness: 1.0,
+     roughness: 0.0,
+@@ -14,7 +21,12 @@ const params = {
+     type: 'HalfFloatType',
+ };
+
+-let renderer, scene, camera, controls, torusMesh, loader;
++let renderer: THREE.WebGLRenderer,
++    scene: THREE.Scene,
++    camera: THREE.PerspectiveCamera,
++    controls: OrbitControls,
++    torusMesh: THREE.Mesh<THREE.TorusKnotGeometry, THREE.MeshStandardMaterial>,
++    loader: UltraHDRLoader;
+
+ init();
+
+@@ -45,7 +57,10 @@ function init() {
+     loader = new UltraHDRLoader();
+     loader.setDataType(THREE.FloatType);
+
+-    const loadEnvironment = function (resolution = '2k', type = 'HalfFloatType') {
++    const loadEnvironment = function (
++        resolution: '2k' | '4k' = '2k',
++        type: 'HalfFloatType' | 'FloatType' = 'HalfFloatType',
++    ) {
+         loader.setDataType(THREE[type]);
+
+         loader.load(`textures/equirectangular/spruit_sunrise_${resolution}.hdr.jpg`, function (texture) {
 diff --git a/examples-testing/examples/webgl_loader_tilt.ts b/examples-testing/examples/webgl_loader_tilt.ts
 index 2a583c2b..8e3e976b 100644
 --- a/examples-testing/examples/webgl_loader_tilt.ts

diff --git a/examples-testing/index.js b/examples-testing/index.js
@@ -25,7 +25,6 @@ const exceptionList = [
     'webgl_loader_stl',
     'webgl_loader_texture_exr',
     'webgl_loader_texture_hdr',
-    'webgl_loader_texture_hdrjpg',
     'webgl_loader_texture_ktx2',
     'webgl_loader_texture_lottie',
     'webgl_loader_texture_pvrtc',

diff --git a/three.js b/three.js
diff --git a/types/three/examples/jsm/Addons.d.ts b/types/three/examples/jsm/Addons.d.ts
@@ -124,6 +124,7 @@ export * from "./loaders/TGALoader.js";
 export * from "./loaders/TIFFLoader.js";
 export * from "./loaders/TiltLoader.js";
 export * from "./loaders/TTFLoader.js";
+export * from "./loaders/UltraHDRLoader.js";
 export * from "./loaders/USDZLoader.js";
 export * from "./loaders/VOXLoader.js";
 export * from "./loaders/VRMLLoader.js";

diff --git a/types/three/examples/jsm/loaders/UltraHDRLoader.d.ts b/types/three/examples/jsm/loaders/UltraHDRLoader.d.ts
@@ -0,0 +1,21 @@
+import { DataTexture, Loader, LoadingManager, RGBAFormat, TextureDataType } from "three";
+
+interface UltraHDRLoaderTextureData {
+    width: number;
+    height: number;
+    hdrBuffer: Uint16Array | Float32Array;
+    format: typeof RGBAFormat;
+    type: TextureDataType;
+}
+
+declare class UltraHDRLoader extends Loader<DataTexture> {
+    type: TextureDataType;
+
+    constructor(manager?: LoadingManager);
+
+    setDataType(value: TextureDataType): this;
+
+    parse(buffer: ArrayBuffer, onLoad: (texData: UltraHDRLoaderTextureData) => void): void;
+}
+
+export { UltraHDRLoader };