Added the ability to run and combine multiple animations simultaneous…

…ly (#4979) * Added the ability to run and combine multiple animations simultaneously, upgraded to threejs r171, and updated packages to the latest version. * fix build warnings and errors and replace rollup-plugin-polyfill with swc * fix fidelity-tests chrome error * fix chrome install error on fidelity-tests * fix fidelity-tests error on Fix dependencies step * add no-sandbox args to puppeteer.launch * cleanup github workflow * add example for appendAnimation, improve modelviewer.dev styles, improve appendAnimation method, format codes with clang-format style and fix other requested changes in #4979 pull request * Fix all requested changes in #4979 PR, improve the flexibility of appendAnimation function, improve modelviewer.dev styles and revert dependencies version * improve detachAnimation flexibility * update dependencies to latest version * fix #4960 issue * Fix animation skipping when updating with appendAnimation method and improve general performance * Upgrade to three.js r172 and update dependencies and fix peer dependency error when installing in postprocessing * add Cineon, Reinhard, Linear, none tone mapping options and update documention * revert peetDependencies change * fix package-lock error * fix repetitions and pingpong update bug * add time option to appendAnimation function * fix editor "js-beautify" invalid src * update dependencies * improve editor and modelviewer.dev styles, add mobile responsive to editor, improve modelviewer.dev hamburger menu * update dependencies * add ar-usdz-max-texture-size (related #4984 issue)
google · Feb 10, 2025 · 0637b91 · 0637b91
1 parent a43bb47
commit 0637b91
Show file tree

Hide file tree

Showing 58 changed files with 9,190 additions and 7,512 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,15 +39,15 @@
   },
   "homepage": "https://github.com/google/model-viewer#readme",
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.31.0",
-    "@typescript-eslint/parser": "^5.31.0",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
     "clang-format": "^1.8.0",
-    "eslint": "^8.20.0",
+    "eslint": "^9.19.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-plugin-mocha": "^10.1.0",
-    "eslint-plugin-wc": "^1.3.0",
+    "eslint-plugin-mocha": "^10.5.0",
+    "eslint-plugin-wc": "^2.2.0",
     "http-server": "^14.1.1",
-    "husky": "^7.0.1",
-    "typescript": "5.6.3"
+    "husky": "^9.1.7",
+    "typescript": "5.7.3"
   }
 }
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.170.0/build/three.module.min.js"
+      "three": "https://cdn.jsdelivr.net/npm/three@^0.172.0/build/three.module.min.js"
     }
   }
 </script>

diff --git a/packages/model-viewer-effects/package.json b/packages/model-viewer-effects/package.json
@@ -73,34 +73,36 @@
   ],
   "dependencies": {
     "lit": "^3.2.1",
-    "postprocessing": "^6.36.4"
+    "postprocessing": "^6.36.6"
   },
   "peerDependencies": {
     "@google/model-viewer": "^4.0.0"
   },
   "devDependencies": {
     "@google/model-viewer": "^4.0.0",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
-    "@types/mocha": "^10.0.9",
-    "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.169.0",
-    "@ungap/event-target": "^0.2.3",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@types/mocha": "^10.0.10",
+    "@types/pngjs": "^6.0.5",
+    "@types/three": "^0.172.0",
+    "@ungap/event-target": "^0.2.4",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-playwright": "^0.11.0",
     "chai": "^5.1.2",
-    "focus-visible": "^5.2.0",
+    "@rollup/plugin-swc": "^0.4.0",
+    "@swc/core": "^1.10.12", 
+    "focus-visible": "^5.2.1",
     "http-server": "^14.1.1",
-    "mocha": "^10.0.0",
+    "mocha": "^11.1.0",
     "npm-run-all": "^4.1.5",
-    "rollup": "^4.24.0",
+    "rollup": "^4.32.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-polyfill": "^3.0.0",
+    "rollup-plugin-polyfill": "^4.2.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "three": "^0.170.0",
-    "typescript": "5.6.3"
+    "three": "^0.172.0",
+    "typescript": "5.7.3"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/model-viewer-effects/rollup.config.js b/packages/model-viewer-effects/rollup.config.js
@@ -16,10 +16,10 @@
 import commonjs from '@rollup/plugin-commonjs';
 import {nodeResolve as resolve} from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
+import swc from '@rollup/plugin-swc';
 import terser from '@rollup/plugin-terser';
 import cleanup from 'rollup-plugin-cleanup';
 import dts from 'rollup-plugin-dts';
-import polyfill from 'rollup-plugin-polyfill';
 
 const {NODE_ENV} = process.env;
 
@@ -30,7 +30,10 @@ const onwarn = (warning, warn) => {
   }
 };
 
-let plugins = [resolve(), replace({'Reflect.decorate': 'undefined'})];
+let plugins = [
+  resolve(),
+  replace({'Reflect.decorate': 'undefined', preventAssignment: true})
+];
 
 const watchFiles = ['lib/**'];
 
@@ -59,7 +62,7 @@ if (NODE_ENV !== 'development') {
   const pluginsIE11 = [
     ...plugins,
     commonjs(),
-    polyfill(['object.values/auto']),
+    swc(),
     cleanup({
       // Ideally we'd also clean third_party/three, which saves
       // ~45kb in filesize alone... but takes 2 minutes to build

diff --git a/packages/model-viewer-effects/src/effect-composer.ts b/packages/model-viewer-effects/src/effect-composer.ts
@@ -18,7 +18,7 @@ import {ModelScene} from '@google/model-viewer/lib/three-components/ModelScene.j
 import {ReactiveElement} from 'lit';
 import {property} from 'lit/decorators.js';
 import {EffectComposer as PPEffectComposer, EffectPass, NormalPass, Pass, RenderPass, Selection} from 'postprocessing';
-import {ACESFilmicToneMapping, Camera, HalfFloatType, NeutralToneMapping, ToneMapping, UnsignedByteType, WebGLRenderer} from 'three';
+import {Camera, HalfFloatType, NeutralToneMapping, ToneMapping, UnsignedByteType, WebGLRenderer} from 'three';
 
 import {IMVEffect, IntegrationOptions, MVEffectBase} from './effects/mixins/effect-base.js';
 import {disposeEffectPass, isConvolution, validateLiteralType} from './utilities.js';
@@ -71,7 +71,7 @@ export class EffectComposer extends PPEffectComposer {
 
   private postRender() {
     const renderer = this.getRenderer();
-    renderer.toneMapping = ACESFilmicToneMapping;
+    renderer.toneMapping = NeutralToneMapping;
     renderer.autoClear = true;
   }
 

diff --git a/packages/model-viewer-effects/src/effects/color-grade.ts b/packages/model-viewer-effects/src/effects/color-grade.ts
@@ -13,56 +13,59 @@
  * limitations under the License.
  */
 
-import { property } from 'lit/decorators.js';
-import { BlendFunction, BrightnessContrastEffect, HueSaturationEffect, ToneMappingEffect } from 'postprocessing';
-import { clamp, validateLiteralType, wrapClamp } from '../utilities.js';
-import { $updateProperties, MVEffectBase } from './mixins/effect-base.js';
-import { ToneMappingMode as PPToneMappingMode } from 'postprocessing';
-import { $effectComposer, $tonemapping } from '../effect-composer.js';
-import { ACESFilmicToneMapping, NoToneMapping } from 'three';
+import {property} from 'lit/decorators.js';
+import {BlendFunction, BrightnessContrastEffect, HueSaturationEffect, ToneMappingEffect, ToneMappingMode as PPToneMappingMode} from 'postprocessing';
+import {NeutralToneMapping, NoToneMapping} from 'three';
+
+import {$effectComposer, $tonemapping} from '../effect-composer.js';
+import {clamp, validateLiteralType, wrapClamp} from '../utilities.js';
+
+import {$updateProperties, MVEffectBase} from './mixins/effect-base.js';
 
 const TWO_PI = Math.PI * 2;
 
-export type ToneMappingMode = keyof typeof PPToneMappingMode;;
-export const TONEMAPPING_MODES = Object.keys(PPToneMappingMode) as ToneMappingMode[];
+export type ToneMappingMode = keyof typeof PPToneMappingMode;
+;
+export const TONEMAPPING_MODES =
+    Object.keys(PPToneMappingMode) as ToneMappingMode[];
 
 export class MVColorGradeEffect extends MVEffectBase {
   static get is() {
     return 'color-grade-effect';
   }
 
   /**
-   * `reinhard | reinhard2 | reinhard_adaptive | optimized_cineon | aces_filmic | linear`
+   * `reinhard | reinhard2 | reinhard_adaptive | optimized_cineon | aces_filmic
+   * | linear`
    * @default 'aces_filmic'
    */
-  @property({ type: String, attribute: 'tonemapping', reflect: true})
+  @property({type: String, attribute: 'tonemapping', reflect: true})
   tonemapping: ToneMappingMode = 'ACES_FILMIC'
 
-  /**
-   * Value in the range of (-1, 1).
-   */
-  @property({ type: Number, attribute: 'brightness', reflect: true })
-  brightness = 0;
+      /**
+       * Value in the range of (-1, 1).
+       */
+      @property({type: Number, attribute: 'brightness', reflect: true})
+      brightness = 0;
 
   /**
    * Value in the range of (-1, 1).
    */
-  @property({ type: Number, attribute: 'contrast', reflect: true })
-  contrast = 0;
+  @property({type: Number, attribute: 'contrast', reflect: true}) contrast = 0;
 
   /**
    * Value in the range of (-1, 1).
    */
-  @property({ type: Number, attribute: 'saturation', reflect: true })
+  @property({type: Number, attribute: 'saturation', reflect: true})
   saturation = 0;
 
   /**
    * Value in the range of (0, 2 * PI).
    *
-   * This property is wrapping, meaning that if you set it above the max it resets to the minimum and vice-versa.
+   * This property is wrapping, meaning that if you set it above the max it
+   * resets to the minimum and vice-versa.
    */
-  @property({ type: Number, attribute: 'hue', reflect: true })
-  hue = 0;
+  @property({type: Number, attribute: 'hue', reflect: true}) hue = 0;
 
   constructor() {
     super();
@@ -88,23 +91,20 @@ export class MVColorGradeEffect extends MVEffectBase {
     this[$updateProperties]();
   }
 
-  updated(changedProperties: Map<string | number | symbol, any>) {
+  updated(changedProperties: Map<string|number|symbol, any>) {
     super.updated(changedProperties);
-    if (
-      changedProperties.has('tonemapping') ||
-      changedProperties.has('brightness') ||
-      changedProperties.has('contrast') ||
-      changedProperties.has('hue') ||
-      changedProperties.has('saturation') ||
-      changedProperties.has('blendMode')
-    ) {
+    if (changedProperties.has('tonemapping') ||
+        changedProperties.has('brightness') ||
+        changedProperties.has('contrast') || changedProperties.has('hue') ||
+        changedProperties.has('saturation') ||
+        changedProperties.has('blendMode')) {
       this[$updateProperties]();
     }
   }
 
   [$updateProperties]() {
     if (this.blendMode === 'SKIP') {
-      this.effectComposer[$effectComposer][$tonemapping] = ACESFilmicToneMapping;
+      this.effectComposer[$effectComposer][$tonemapping] = NeutralToneMapping;
     } else {
       this.effectComposer[$effectComposer][$tonemapping] = NoToneMapping;
     }
@@ -119,7 +119,8 @@ export class MVColorGradeEffect extends MVEffectBase {
     try {
       this.tonemapping = this.tonemapping.toUpperCase() as ToneMappingMode;
       validateLiteralType(TONEMAPPING_MODES, this.tonemapping);
-      (this.effects[0] as ToneMappingEffect).mode = PPToneMappingMode[this.tonemapping];
+      (this.effects[0] as ToneMappingEffect).mode =
+          PPToneMappingMode[this.tonemapping];
     } finally {
       this.effectComposer.queueRender();
     }

diff --git a/packages/model-viewer/package.json b/packages/model-viewer/package.json
@@ -84,32 +84,34 @@
   ],
   "dependencies": {
     "lit": "^3.2.1",
-    "@monogrid/gainmap-js": "^3.0.1"
+    "@monogrid/gainmap-js": "^3.1.0"
   },
   "peerDependencies": {
-    "three": "^0.170.0"
+    "three": "^0.172.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-replace": "^6.0.1",
-    "@types/mocha": "^10.0.9",
-    "@types/pngjs": "^6.0.1",
-    "@types/three": "^0.169.0",
-    "@ungap/event-target": "^0.2.3",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@types/mocha": "^10.0.10",
+    "@types/pngjs": "^6.0.5",
+    "@types/three": "^0.172.0",
+    "@ungap/event-target": "^0.2.4",
     "@web/test-runner": "^0.19.0",
+    "@rollup/plugin-swc": "^0.4.0",
+    "@swc/core": "^1.10.12",
     "@web/test-runner-playwright": "^0.11.0",
     "chai": "^5.1.2",
     "http-server": "^14.1.1",
-    "mocha": "^10.0.0",
+    "mocha": "^11.1.0",
     "npm-run-all": "^4.1.5",
-    "rollup": "^4.24.0",
+    "rollup": "^4.32.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-polyfill": "^3.0.0",
+    "rollup-plugin-polyfill": "^4.2.0",
     "@rollup/plugin-terser": "^0.4.4",
-    "typescript": "5.6.3",
-    "three": "^0.170.0"
+    "typescript": "5.7.3",
+    "three": "^0.172.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/model-viewer/rollup.config.js b/packages/model-viewer/rollup.config.js
@@ -16,10 +16,10 @@
 import commonjs from '@rollup/plugin-commonjs';
 import {nodeResolve as resolve} from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
+import swc from '@rollup/plugin-swc';
 import terser from '@rollup/plugin-terser';
 import cleanup from 'rollup-plugin-cleanup';
 import dts from 'rollup-plugin-dts';
-import polyfill from 'rollup-plugin-polyfill';
 
 const {NODE_ENV} = process.env;
 
@@ -30,8 +30,10 @@ const onwarn = (warning, warn) => {
   }
 };
 
-let commonPlugins =
-    [resolve({dedupe: 'three'}), replace({'Reflect.decorate': 'undefined'})];
+let commonPlugins = [
+  resolve({dedupe: 'three'}),
+  replace({'Reflect.decorate': 'undefined', preventAssignment: true})
+];
 
 const watchFiles = ['lib/**'];
 
@@ -69,7 +71,7 @@ if (NODE_ENV !== 'development') {
   const pluginsIE11 = [
     ...commonPlugins,
     commonjs(),
-    polyfill(['object.values/auto']),
+    swc(),
     cleanup({
       // Ideally we'd also clean third_party/three, which saves
       // ~45kb in filesize alone... but takes 2 minutes to build