UltraHDR lighting support (#4578)

* UltraHDR working * update an HDR environment * add dispose * fixed texture name bug
google · Dec 8, 2023 · 99fa9a8 · 99fa9a8
1 parent 2b13bdd
commit 99fa9a8
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/model-viewer/package.json b/packages/model-viewer/package.json
@@ -83,7 +83,8 @@
     "3d"
   ],
   "dependencies": {
-    "lit": "^2.7.2"
+    "lit": "^2.7.2",
+    "@monogrid/gainmap-js": "^3.0.1"
   },
   "peerDependencies": {
     "three": "^0.159.0"

diff --git a/packages/model-viewer/src/features/scene-graph/image.ts b/packages/model-viewer/src/features/scene-graph/image.ts
@@ -46,7 +46,8 @@ export class Image extends ThreeDOMElement implements ImageInterface {
     super(onUpdate, new Set<ThreeTexture>(texture ? [texture] : []));
 
     if (!this[$threeTexture].image.src) {
-      this[$threeTexture].image.src = 'adhoc_image' + adhocNum++;
+      this[$threeTexture].image.src =
+          texture.name ? texture.name : 'adhoc_image' + adhocNum++;
     }
     if (!this[$threeTexture].image.name) {
       this[$threeTexture].image.name =

diff --git a/packages/model-viewer/src/three-components/TextureUtils.ts b/packages/model-viewer/src/three-components/TextureUtils.ts
@@ -13,7 +13,8 @@
  * limitations under the License.
  */
 
-import {BackSide, BoxGeometry, CubeCamera, CubeTexture, EquirectangularReflectionMapping, HalfFloatType, LinearSRGBColorSpace, Loader, Mesh, NoBlending, NoToneMapping, RGBAFormat, Scene, ShaderMaterial, SRGBColorSpace, Texture, TextureLoader, Vector3, WebGLCubeRenderTarget, WebGLRenderer} from 'three';
+import {GainMapDecoderMaterial, HDRJPGLoader, QuadRenderer} from '@monogrid/gainmap-js';
+import {BackSide, BoxGeometry, CubeCamera, CubeTexture, DataTexture, EquirectangularReflectionMapping, HalfFloatType, LinearSRGBColorSpace, Loader, Mesh, NoBlending, NoToneMapping, RGBAFormat, Scene, ShaderMaterial, SRGBColorSpace, Texture, Vector3, WebGLCubeRenderTarget, WebGLRenderer} from 'three';
 import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader.js';
 
 import {deserializeUrl, timePasses} from '../utilities.js';
@@ -37,7 +38,7 @@ export default class TextureUtils {
   public lottieLoaderUrl = '';
   public withCredentials = false;
 
-  private _ldrLoader: TextureLoader|null = null;
+  private _imageLoader: HDRJPGLoader|null = null;
   private _hdrLoader: RGBELoader|null = null;
   private _lottieLoader: Loader|null = null;
 
@@ -52,12 +53,12 @@ export default class TextureUtils {
   constructor(private threeRenderer: WebGLRenderer) {
   }
 
-  get ldrLoader(): TextureLoader {
-    if (this._ldrLoader == null) {
-      this._ldrLoader = new TextureLoader();
+  get imageLoader(): HDRJPGLoader {
+    if (this._imageLoader == null) {
+      this._imageLoader = new HDRJPGLoader(this.threeRenderer);
     }
-    this._ldrLoader.setWithCredentials(this.withCredentials);
-    return this._ldrLoader;
+    this._imageLoader.setWithCredentials(this.withCredentials);
+    return this._imageLoader;
   }
 
   get hdrLoader(): RGBELoader {
@@ -81,8 +82,11 @@ export default class TextureUtils {
 
   async loadImage(url: string): Promise<Texture> {
     const texture: Texture = await new Promise<Texture>(
-        (resolve, reject) =>
-            this.ldrLoader.load(url, resolve, () => {}, reject));
+        (resolve, reject) => this.imageLoader.load(url, (result) => {
+          const {texture} = result.renderTarget;
+          result.dispose(false);
+          resolve(texture)
+        }, () => {}, reject));
     texture.name = url;
     texture.flipY = false;
 
@@ -104,12 +108,25 @@ export default class TextureUtils {
       Promise<Texture> {
     try {
       const isHDR: boolean = HDR_FILE_RE.test(url);
-      const loader = isHDR ? this.hdrLoader : this.ldrLoader;
+      const loader = isHDR ? this.hdrLoader : this.imageLoader;
       const texture: Texture = await new Promise<Texture>(
           (resolve, reject) => loader.load(
-              url, resolve, (event: {loaded: number, total: number}) => {
+              url,
+              (result) => {
+                const {renderTarget} =
+                    result as QuadRenderer<1016, GainMapDecoderMaterial>;
+                if (renderTarget != null) {
+                  const {texture} = renderTarget;
+                  result.dispose(false);
+                  resolve(texture);
+                } else {
+                  resolve(result as DataTexture);
+                }
+              },
+              (event: {loaded: number, total: number}) => {
                 progressCallback(event.loaded / event.total * 0.9);
-              }, reject));
+              },
+              reject));
 
       progressCallback(1.0);
 

diff --git a/packages/modelviewer.dev/examples/lightingandenv/index.html b/packages/modelviewer.dev/examples/lightingandenv/index.html
@@ -63,7 +63,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="hdrSkyboxImage" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a damaged helmet" src="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/DamagedHelmet.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.jpg" alt="A 3D model of a damaged helmet" src="../../shared-assets/models/glTF-Sample-Assets/Models/DamagedHelmet/glTF/DamagedHelmet.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -168,7 +168,7 @@ <h4></h4>
         </div>
         <example-snippet stamp-to="renderExposure" highlight-as="html">
           <template>
-<model-viewer camera-controls touch-action="pan-y" id="exposure-demo" exposure="1" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a sphere reflecting a sunrise at varying exposure" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" id="exposure-demo" exposure="1" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.jpg" alt="A 3D model of a sphere reflecting a sunrise at varying exposure" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
 <script>
 (() => {
   const modelViewer = document.querySelector('#exposure-demo');
@@ -228,7 +228,7 @@ <h4></h4>
           </div>
           <example-snippet stamp-to="anotherHDRExample" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of metal spheres at varying degrees of roughness" src="../../shared-assets/models/glTF-Sample-Assets/Models/MetalRoughSpheresNoTextures/glTF/MetalRoughSpheresNoTextures.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.jpg" alt="A 3D model of metal spheres at varying degrees of roughness" src="../../shared-assets/models/glTF-Sample-Assets/Models/MetalRoughSpheresNoTextures/glTF/MetalRoughSpheresNoTextures.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>
@@ -278,7 +278,7 @@ <h4>Environment images should be no more than 1k (1024x512) as they
           </div>
           <example-snippet stamp-to="skyboxAndEnvironment" highlight-as="html">
             <template>
-<model-viewer camera-controls touch-action="pan-y" skybox-image="../../assets/spruit_sunrise_4k_LDR.jpg" environment-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.hdr" alt="A 3D model of a sphere reflecting a sunrise" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
+<model-viewer camera-controls touch-action="pan-y" skybox-image="../../assets/spruit_sunrise_4k_LDR.jpg" environment-image="../../shared-assets/environments/spruit_sunrise_1k_HDR.jpg" alt="A 3D model of a sphere reflecting a sunrise" src="../../shared-assets/models/reflective-sphere.gltf"></model-viewer>
             </template>
           </example-snippet>
         </div>

diff --git a/packages/shared-assets/environments/spruit_sunrise_1k_HDR.jpg b/packages/shared-assets/environments/spruit_sunrise_1k_HDR.jpg