Implement HDR image support (fixes #65) and transitions to using

scene.background for skybox (#196), but blocked on three.js r101
before the background hack can be removed.

Author: jsantell

examples/assets/attributions.md

@@ -18,32 +18,32 @@ Damaged Helmet by <a href="https://sketchfab.com/theblueturtle_">theblueturtle_<
 licensed under Creative Commons Attribution-NonCommercial
 (<a href="https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/DamagedHelmet">source</a>)
 
-## equirectangular.png
-
-equirectangular.png by <a href="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/WestLangley">WestLangley</a>
-licensed under <a href="https://github.com/mrdoob/three.js/blob/dev/LICENSE">MIT</a>
-(<a href="https://github.com/mrdoob/three.js/blob/dev/examples/textures/equirectangular.png">source</a>)
-
 ## Shishkebab.*
 
 Shishkebab by <a href="https://poly.google.com/user/4aEd8rQgKu2">Poly</a>,
 licensed under <a href="https://creativecommons.org/licenses/by/2.0/">CC-BY</a>
 (<a href="https://poly.google.com/view/6uTsH2jqgVn">source</a>)
 
-# whipple_creek_regional_park_04
+## whipple_creek_regional_park_04
 
 whipple_creek_regional_park_04_1k.jpg by <a href="https://hdrihaven.com">HDRI Haven</a>
 licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>
 (<a href="https://hdrihaven.com/hdri/?h=whipple_creek_regional_park_04">source</a>)
 Originally in HDR format
 
-# small_hangar_01
+## small_hangar_01
 
 small_hangar_01_1k.jpg by <a href="https://hdrihaven.com">HDRI Haven</a>
 licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>
 (<a href="https://hdrihaven.com/hdri/?h=small_hangar_01">source</a>)
 Originally in HDR format
 
-## cube.gltf, offcenter-cube.gltf, pbr-spheres.glb, reflective-sphere.gltf
+## spruit_sunrise_2k
+
+spruit_sunrise_2k.hdr, spruit_sunrise_2k.jpg by <a href="https://hdrihaven.com">HDRI Haven</a>
+licensed under <a href="https://hdrihaven.com/p/license.php">CC0</a>
+(<a href="https://hdrihaven.com/hdri/?c=outdoor&h=spruit_sunrise">source</a>)
+
+## cube.gltf, offcenter-cube.gltf, pbr-spheres.glb, radiance.glb, reflective-sphere.gltf
 
 Contributed by <a href="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/jsantell">jsantell</a>

examples/assets/equirectangular.png

@@ -62,6 +62,22 @@ <h2>With Equirectangular background-image</h2>
             </template>
         </demo-snippet>
 
+        <demo-snippet>
+            <h2>JPG vs HDR</h2>
+            <template>
+                <model-viewer
+                    controls
+                    background-image="assets/spruit_sunrise_2k.jpg"
+                    src="assets/radiance.glb">
+                </model-viewer>
+                <model-viewer
+                    controls
+                    background-image="assets/spruit_sunrise_2k.hdr"
+                    src="assets/radiance.glb">
+                </model-viewer>
+            </template>
+        </demo-snippet>
+
         <demo-snippet>
             <h2>With very reflective model</h2>
             <template>
@@ -104,7 +120,7 @@ <h2>Cycling background image</h2>
             <template>
                 <model-viewer
                     id="toggle-image"
-                    backgroud-color="#ff0077"
+                    background-color="#ff0077"
                     src="assets/DamagedHelmet/DamagedHelmet.gltf"
                     alt="A 3D model of a damaged helmet depicted within changing environments"
                     controls auto-rotate>

examples/assets/radiance.glb

@@ -13,22 +13,27 @@
  * limitations under the License.
  */
 
-import {Color} from 'three';
+import {BackSide, BoxBufferGeometry, Color, Mesh, ShaderLib, ShaderMaterial, UniformsUtils} from 'three';
 
 import {$needsRender, $onModelLoad, $renderer, $scene, $tick} from '../model-viewer-base.js';
+
 const DEFAULT_BACKGROUND_COLOR = '#ffffff';
-const GAMMA_TO_LINEAR = 2.2;
 
 const WHITE = new Color('#ffffff');
 
-const $currentCubemap = Symbol('currentCubemap');
+const $currentEnvMap = Symbol('currentEnvMap');
 const $setEnvironmentImage = Symbol('setEnvironmentImage');
 const $setEnvironmentColor = Symbol('setEnvironmentColor');
 const $setShadowLightColor = Symbol('setShadowLightColor');
 const $hasBackgroundImage = Symbol('hasBackgroundImage');
 const $hasBackgroundColor = Symbol('hasBackgroundColor');
 const $deallocateTextures = Symbol('deallocateTextures');
 
+// TODO remove in #196
+const $setBackground = Symbol('setBackground');
+const $backgroundMesh = Symbol('backgroundMesh');
+const $activeBackground = Symbol('activeBackground');
+
 export const EnvironmentMixin = (ModelViewerElement) => {
   return class extends ModelViewerElement {
     static get properties() {
@@ -75,17 +80,11 @@ export const EnvironmentMixin = (ModelViewerElement) => {
       }
     }
 
-    [$tick](time, delta) {
-      super[$tick](time, delta);
-      const camera = this[$scene].getCamera();
-      this[$scene].skysphere.position.copy(camera.position);
-    }
-
     [$onModelLoad](e) {
       super[$onModelLoad](e);
 
-      if (this[$currentCubemap]) {
-        this[$scene].model.applyEnvironmentMap(this[$currentCubemap]);
+      if (this[$currentEnvMap]) {
+        this[$scene].model.applyEnvironmentMap(this[$currentEnvMap]);
         this[$needsRender]();
       }
     }
@@ -95,7 +94,7 @@ export const EnvironmentMixin = (ModelViewerElement) => {
      */
     async[$setEnvironmentImage](url) {
       const textureUtils = this[$renderer].textureUtils;
-      const textures = await textureUtils.toCubemapAndEquirect(url);
+      const textures = await textureUtils.generateEnvironmentTextures(url);
 
       // If the background image has changed
       // while fetching textures, abort and defer to that
@@ -113,13 +112,13 @@ export const EnvironmentMixin = (ModelViewerElement) => {
         return;
       }
 
-      const {cubemap, equirect} = textures;
+      const {skybox, envmap} = textures;
 
-      this[$scene].skysphere.material.color = new Color(0xffffff);
-      this[$scene].skysphere.material.map = equirect;
-      this[$scene].skysphere.material.needsUpdate = true;
-      this[$currentCubemap] = cubemap;
-      this[$scene].model.applyEnvironmentMap(cubemap);
+      // TODO #196
+      this[$setBackground](skybox);
+
+      this[$currentEnvMap] = envmap;
+      this[$scene].model.applyEnvironmentMap(envmap);
 
       this[$setShadowLightColor](WHITE);
 
@@ -134,35 +133,97 @@ export const EnvironmentMixin = (ModelViewerElement) => {
 
       this[$deallocateTextures]();
 
-      const skysphereColor = this[$scene].skysphere.material.color =
-          new Color(color);
-      skysphereColor.convertGammaToLinear(GAMMA_TO_LINEAR);
-      this[$setShadowLightColor](skysphereColor);
+      const parsedColor = new Color(color);
+
+      // TODO #196
+      this[$setBackground](parsedColor);
 
-      this[$scene].skysphere.material.map = null;
-      this[$scene].skysphere.material.needsUpdate = true;
+      this[$setShadowLightColor](parsedColor);
 
       // TODO can cache this per renderer and color
-      const cubemap = textureUtils.generateDefaultEnvMap();
-      this[$currentCubemap] = cubemap;
-      this[$scene].model.applyEnvironmentMap(this[$currentCubemap]);
+      const envmap = textureUtils.generateDefaultEnvMap();
+      this[$currentEnvMap] = envmap;
+      this[$scene].model.applyEnvironmentMap(this[$currentEnvMap]);
 
       this[$needsRender]();
     }
 
+    /**
+     * Work around for #196, can remove this function
+     * and set backgrounds on `scene.background` directly
+     * once upgraded to r100. Most of the logic from
+     * three's WebGLBackground for WebGLRenderTargetCubes.
+     */
+    [$setBackground](background) {
+      // We only support cube maps and colors for backgrounds
+      const isCube = !!(background && background.isWebGLRenderTargetCube);
+
+      if (isCube && !this[$backgroundMesh]) {
+        const mesh = this[$backgroundMesh] =
+            new Mesh(new BoxBufferGeometry(1, 1, 1), new ShaderMaterial({
+                       type: 'BackgroundCubeMaterial',
+                       uniforms: UniformsUtils.clone(ShaderLib.cube.uniforms),
+                       vertexShader: ShaderLib.cube.vertexShader,
+                       fragmentShader: ShaderLib.cube.fragmentShader,
+                       side: BackSide,
+                       depthTest: false,
+                       depthWrite: false,
+                       fog: false
+                     }));
+
+        mesh.name = 'SceneBackgroundHack';
+        mesh.geometry.removeAttribute('normal');
+        mesh.geometry.removeAttribute('uv');
+
+        mesh.onBeforeRender = function(renderer, scene, camera) {
+          this.matrixWorld.copyPosition(camera.matrixWorld);
+        };
+
+        // enable code injection for non-built-in material
+        Object.defineProperty(mesh.material, 'map', {
+          get: function() {
+            return this.uniforms.tCube.value;
+          }
+        });
+
+        // WebGLBackground can manually place the background to render
+        // first -- we don't have access to that here -- set the render order.
+        mesh.renderOrder = 1;
+      }
+
+      if (isCube) {
+        this[$backgroundMesh].material.uniforms.tCube.value =
+            background.texture;
+        this[$backgroundMesh].material.uniforms.tFlip.value = 1;
+        this[$backgroundMesh].material.needsUpdate = true;
+        this[$scene].add(this[$backgroundMesh]);
+        // Remove any color background
+        this[$scene].background = null;
+        // scene.background expects a WebGLRenderTargetCube
+        this[$activeBackground] = background;
+      } else {
+        // `scene.background` works for colors
+        this[$scene].background = background;
+        this[$scene].remove(this[$backgroundMesh]);
+        this[$activeBackground] = background;
+      }
+    }
+
     [$setShadowLightColor](color) {
       this[$scene].shadowLight.color.copy(color);
       this[$scene].shadowLight.color.lerpHSL(WHITE, 0.5);
     }
 
     [$deallocateTextures]() {
-      if (this[$scene].skysphere.material.map) {
-        this[$scene].skysphere.material.map.dispose();
-        this[$scene].skysphere.material.map = null;
+      // TODO Re-enable in #196
+      // const background = this[$scene].background;
+      const background = this[$activeBackground];
+      if (background && background.dispose) {
+        background.dispose();
       }
-      if (this[$currentCubemap]) {
-        this[$currentCubemap].dispose();
-        this[$currentCubemap] = null;
+      if (this[$currentEnvMap]) {
+        this[$currentEnvMap].dispose();
+        this[$currentEnvMap] = null;
       }
     }
   }