r163 (#4738)

* r163 * switch to built-in neutral tone mapping
google · Apr 4, 2024 · 99b50ff · 99b50ff
1 parent 501f4e2
commit 99b50ff
Show file tree

Hide file tree

Showing 9 changed files with 1,012 additions and 854 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/model-viewer-effects/README.md b/packages/model-viewer-effects/README.md
@@ -52,7 +52,7 @@ npm install three @google/model-viewer @google/model-viewer-effects
 <script type="importmap">
  {
  "imports": {
- "three": "https://cdn.jsdelivr.net/npm/three@^0.160.0/build/three.module.min.js"
+ "three": "https://cdn.jsdelivr.net/npm/three@^0.163.0/build/three.module.min.js"
  }
  }
 </script>

diff --git a/packages/model-viewer-effects/package.json b/packages/model-viewer-effects/package.json
@@ -85,7 +85,7 @@
  "@types/chai": "^4.3.1",
  "@types/mocha": "^9.1.1",
  "@types/pngjs": "^6.0.1",
- "@types/three": "^0.160.0",
+ "@types/three": "^0.163.0",
  "@ungap/event-target": "^0.2.3",
  "@web/test-runner": "^0.16.1",
  "@web/test-runner-playwright": "^0.10.0",
@@ -100,10 +100,10 @@
  "rollup-plugin-dts": "^4.2.2",
  "rollup-plugin-polyfill": "^3.0.0",
  "rollup-plugin-terser": "^7.0.2",
- "three": "^0.160.0",
+ "three": "^0.163.0",
  "typescript": "4.8.4"
  },
  "publishConfig": {
  "access": "public"
  }
-}
+}
diff --git a/packages/model-viewer/package.json b/packages/model-viewer/package.json
@@ -87,7 +87,7 @@
  "@monogrid/gainmap-js": "^3.0.1"
  },
  "peerDependencies": {
- "three": "^0.160.0"
+ "three": "^0.163.0"
  },
  "devDependencies": {
  "@rollup/plugin-commonjs": "^22.0.1",
@@ -96,7 +96,7 @@
  "@types/chai": "^4.3.1",
  "@types/mocha": "^9.1.1",
  "@types/pngjs": "^6.0.1",
- "@types/three": "^0.160.0",
+ "@types/three": "^0.163.0",
  "@ungap/event-target": "^0.2.3",
  "@web/test-runner": "^0.16.1",
  "@web/test-runner-playwright": "^0.10.0",
@@ -110,9 +110,9 @@
  "rollup-plugin-polyfill": "^3.0.0",
  "rollup-plugin-terser": "^7.0.2",
  "typescript": "4.8.4",
- "three": "^0.160.0"
+ "three": "^0.163.0"
  },
  "publishConfig": {
  "access": "public"
  }
-}
+}
diff --git a/packages/model-viewer/src/features/environment.ts b/packages/model-viewer/src/features/environment.ts
@@ -14,7 +14,7 @@
  */
 
 import {property} from 'lit/decorators.js';
-import {ACESFilmicToneMapping, AgXToneMapping, CustomToneMapping, Texture} from 'three';
+import {ACESFilmicToneMapping, AgXToneMapping, NeutralToneMapping, Texture} from 'three';
 
 import ModelViewerElementBase, {$needsRender, $progressTracker, $renderer, $scene, $shouldAttemptPreload} from '../model-viewer-base.js';
 import {clamp, Constructor, deserializeUrl} from '../utilities.js';
@@ -24,7 +24,7 @@ const DEFAULT_SHADOW_INTENSITY = 0.0;
 const DEFAULT_SHADOW_SOFTNESS = 1.0;
 const DEFAULT_EXPOSURE = 1.0;
 
-export type ToneMappingValue = 'auto'|'aces'|'agx'|'commerce';
+export type ToneMappingValue = 'auto'|'aces'|'agx'|'commerce'|'neutral';
 
 export const $currentEnvironmentMap = Symbol('currentEnvironmentMap');
 export const $currentBackground = Symbol('currentBackground');
@@ -88,8 +88,9 @@ export const EnvironmentMixin = <T extends Constructor<ModelViewerElementBase>>(
  }
 
  if (changedProperties.has('toneMapping')) {
- this[$scene].toneMapping = this.toneMapping === 'commerce' ?
- CustomToneMapping :
+ this[$scene].toneMapping = (this.toneMapping === 'commerce' ||
+ this.toneMapping === 'neutral') ?
+ NeutralToneMapping :
  this.toneMapping === 'agx' ? AgXToneMapping :
  ACESFilmicToneMapping;
  this[$needsRender]();
@@ -125,7 +126,8 @@ export const EnvironmentMixin = <T extends Constructor<ModelViewerElementBase>>(
  return;
  }
 
- const updateEnvProgress = this[$progressTracker].beginActivity('environment-update');
+ const updateEnvProgress =
+ this[$progressTracker].beginActivity('environment-update');
 
  try {
  const {environmentMap, skybox} =

diff --git a/packages/model-viewer/src/three-components/Renderer.ts b/packages/model-viewer/src/three-components/Renderer.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {ACESFilmicToneMapping, CustomToneMapping, Event, EventDispatcher, ShaderChunk, Vector2, WebGLRenderer} from 'three';
+import {ACESFilmicToneMapping, Event, EventDispatcher, NeutralToneMapping, Vector2, WebGLRenderer} from 'three';
 
 import {$updateEnvironment} from '../features/environment.js';
 import {ModelViewerGlobalConfig} from '../features/loading.js';
@@ -137,30 +137,6 @@ export class Renderer extends
  this.canvas3D.id = 'webgl-canvas';
  this.canvas3D.classList.add('show');
 
- // Emmett's new 3D Commerce tone mapping function
- ShaderChunk.tonemapping_pars_fragment =
- ShaderChunk.tonemapping_pars_fragment.replace(
- 'vec3 CustomToneMapping( vec3 color ) { return color; }', `
- float startCompression = 0.8 - 0.04;
- float desaturation = 0.15;
- vec3 CustomToneMapping( vec3 color ) {
- color *= toneMappingExposure;
-
- float x = min(color.r, min(color.g, color.b));
- float offset = x < 0.08 ? x - 6.25 * x * x : 0.04;
- color -= offset;
-
- float peak = max(color.r, max(color.g, color.b));
- if (peak < startCompression) return color;
-
- float d = 1. - startCompression;
- float newPeak = 1. - d * d / (peak + d - startCompression);
- color *= newPeak / peak;
-
- float g = 1. - 1. / (desaturation * (peak - newPeak) + 1.);
- return mix(color, newPeak * vec3(1, 1, 1), g);
- }`);
-
  try {
  this.threeRenderer = new WebGLRenderer({
  canvas: this.canvas3D,
@@ -436,7 +412,7 @@ export class Renderer extends
  typeof exposure === 'number' && !Number.isNaN(exposure);
  const env = element.environmentImage;
  const sky = element.skyboxImage;
- const compensateExposure = toneMapping === CustomToneMapping &&
+ const compensateExposure = toneMapping === NeutralToneMapping &&
  (env === 'neutral' || env === 'legacy' || (!env && !sky));
  this.threeRenderer.toneMappingExposure =
  (exposureIsNumber ? exposure : 1.0) *

diff --git a/packages/model-viewer/src/three-components/Shadow.ts b/packages/model-viewer/src/three-components/Shadow.ts
@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {BackSide, Box3, Material, Mesh, MeshBasicMaterial, MeshDepthMaterial, Object3D, OrthographicCamera, PlaneGeometry, RGBAFormat, Scene, ShaderMaterial, Vector3, WebGLRenderer, WebGLRenderTarget, WebGLRenderTargetOptions} from 'three';
+import {BackSide, Box3, Material, Mesh, MeshBasicMaterial, MeshDepthMaterial, Object3D, OrthographicCamera, PlaneGeometry, RenderTargetOptions, RGBAFormat, Scene, ShaderMaterial, Vector3, WebGLRenderer, WebGLRenderTarget} from 'three';
 import {HorizontalBlurShader} from 'three/examples/jsm/shaders/HorizontalBlurShader.js';
 import {VerticalBlurShader} from 'three/examples/jsm/shaders/VerticalBlurShader.js';
 import {lerp} from 'three/src/math/MathUtils.js';
@@ -220,7 +220,7 @@ export class Shadow extends Object3D {
  }
 
  if (this.renderTarget == null) {
- const params: WebGLRenderTargetOptions = {format: RGBAFormat};
+ const params: RenderTargetOptions = {format: RGBAFormat};
  this.renderTarget = new WebGLRenderTarget(width, height, params);
  this.renderTargetBlur = new WebGLRenderTarget(width, height, params);
 

diff --git a/packages/modelviewer.dev/examples/postprocessing/index.html b/packages/modelviewer.dev/examples/postprocessing/index.html
@@ -32,7 +32,7 @@
  <script type="importmap">
  {
  "imports": {
- "three": "https://cdn.jsdelivr.net/npm/three@^0.160.0/build/three.module.min.js"
+ "three": "https://cdn.jsdelivr.net/npm/three@^0.163.0/build/three.module.min.js"
  }
  }
  </script>
@@ -104,7 +104,7 @@ <h2 class="demo-title">Setup Post Processing</h2>
 <script type="importmap-noexecute">
 {
  "imports": {
- "three": "https://cdn.jsdelivr.net/npm/three@^0.160.0/build/three.module.min.js"
+ "three": "https://cdn.jsdelivr.net/npm/three@^0.163.0/build/three.module.min.js"
  }
 }
 </script>

diff --git a/packages/render-fidelity-tools/package.json b/packages/render-fidelity-tools/package.json
@@ -35,15 +35,15 @@
  "@types/pngjs": "^3.4.0",
  "@types/puppeteer": "^5.4.6",
  "@types/rimraf": "^3.0.1",
- "@types/three": "^0.160.0",
+ "@types/three": "^0.163.0",
  "filament": "1.44.0",
  "http-server": "^14.1.1",
  "lit": "^2.7.2",
  "mkdirp": "^1.0.4",
  "pngjs": "^6.0.0",
  "puppeteer": "^21.3.4",
  "rimraf": "^3.0.2",
- "three": "^0.160.0",
+ "three": "^0.163.0",
  "three-gpu-pathtracer": "^0.0.20",
  "three-mesh-bvh": "^0.7.3",
  "yargs": "^17.7.2"