Skip to content

Commit 0637b91

Browse files
mohammadbaghaeimohammadbaghaei
authored
Added the ability to run and combine multiple animations simultaneously (#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)
1 parent a43bb47 commit 0637b91

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+9190
-7512
lines changed

‎package-lock.json

Lines changed: 4673 additions & 4192 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@
3939
},
4040
"homepage": "https://github.com/google/model-viewer#readme",
4141
"devDependencies": {
42-
"@typescript-eslint/eslint-plugin": "^5.31.0",
43-
"@typescript-eslint/parser": "^5.31.0",
42+
"@typescript-eslint/eslint-plugin": "^8.22.0",
43+
"@typescript-eslint/parser": "^8.22.0",
4444
"clang-format": "^1.8.0",
45-
"eslint": "^8.20.0",
45+
"eslint": "^9.19.0",
4646
"eslint-config-google": "^0.14.0",
47-
"eslint-plugin-mocha": "^10.1.0",
48-
"eslint-plugin-wc": "^1.3.0",
47+
"eslint-plugin-mocha": "^10.5.0",
48+
"eslint-plugin-wc": "^2.2.0",
4949
"http-server": "^14.1.1",
50-
"husky": "^7.0.1",
51-
"typescript": "5.6.3"
50+
"husky": "^9.1.7",
51+
"typescript": "5.7.3"
5252
}
5353
}

‎packages/model-viewer-effects/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ npm install three @google/model-viewer @google/model-viewer-effects
5252
<script type="importmap">
5353
{
5454
"imports": {
55-
"three": "https://cdn.jsdelivr.net/npm/three@^0.170.0/build/three.module.min.js"
55+
"three": "https://cdn.jsdelivr.net/npm/three@^0.172.0/build/three.module.min.js"
5656
}
5757
}
5858
</script>

‎packages/model-viewer-effects/package.json

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -73,34 +73,36 @@
7373
],
7474
"dependencies": {
7575
"lit": "^3.2.1",
76-
"postprocessing": "^6.36.4"
76+
"postprocessing": "^6.36.6"
7777
},
7878
"peerDependencies": {
7979
"@google/model-viewer": "^4.0.0"
8080
},
8181
"devDependencies": {
8282
"@google/model-viewer": "^4.0.0",
83-
"@rollup/plugin-commonjs": "^28.0.1",
84-
"@rollup/plugin-node-resolve": "^15.3.0",
85-
"@rollup/plugin-replace": "^6.0.1",
86-
"@types/mocha": "^10.0.9",
87-
"@types/pngjs": "^6.0.1",
88-
"@types/three": "^0.169.0",
89-
"@ungap/event-target": "^0.2.3",
83+
"@rollup/plugin-commonjs": "^28.0.2",
84+
"@rollup/plugin-node-resolve": "^16.0.0",
85+
"@rollup/plugin-replace": "^6.0.2",
86+
"@types/mocha": "^10.0.10",
87+
"@types/pngjs": "^6.0.5",
88+
"@types/three": "^0.172.0",
89+
"@ungap/event-target": "^0.2.4",
9090
"@web/test-runner": "^0.19.0",
9191
"@web/test-runner-playwright": "^0.11.0",
9292
"chai": "^5.1.2",
93-
"focus-visible": "^5.2.0",
93+
"@rollup/plugin-swc": "^0.4.0",
94+
"@swc/core": "^1.10.12",
95+
"focus-visible": "^5.2.1",
9496
"http-server": "^14.1.1",
95-
"mocha": "^10.0.0",
97+
"mocha": "^11.1.0",
9698
"npm-run-all": "^4.1.5",
97-
"rollup": "^4.24.0",
99+
"rollup": "^4.32.1",
98100
"rollup-plugin-cleanup": "^3.2.1",
99101
"rollup-plugin-dts": "^6.1.1",
100-
"rollup-plugin-polyfill": "^3.0.0",
102+
"rollup-plugin-polyfill": "^4.2.0",
101103
"@rollup/plugin-terser": "^0.4.4",
102-
"three": "^0.170.0",
103-
"typescript": "5.6.3"
104+
"three": "^0.172.0",
105+
"typescript": "5.7.3"
104106
},
105107
"publishConfig": {
106108
"access": "public"

‎packages/model-viewer-effects/rollup.config.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
import commonjs from '@rollup/plugin-commonjs';
1717
import {nodeResolve as resolve} from '@rollup/plugin-node-resolve';
1818
import replace from '@rollup/plugin-replace';
19+
import swc from '@rollup/plugin-swc';
1920
import terser from '@rollup/plugin-terser';
2021
import cleanup from 'rollup-plugin-cleanup';
2122
import dts from 'rollup-plugin-dts';
22-
import polyfill from 'rollup-plugin-polyfill';
2323

2424
const {NODE_ENV} = process.env;
2525

@@ -30,7 +30,10 @@ const onwarn = (warning, warn) => {
3030
}
3131
};
3232

33-
let plugins = [resolve(), replace({'Reflect.decorate': 'undefined'})];
33+
let plugins = [
34+
resolve(),
35+
replace({'Reflect.decorate': 'undefined', preventAssignment: true})
36+
];
3437

3538
const watchFiles = ['lib/**'];
3639

@@ -59,7 +62,7 @@ if (NODE_ENV !== 'development') {
5962
const pluginsIE11 = [
6063
...plugins,
6164
commonjs(),
62-
polyfill(['object.values/auto']),
65+
swc(),
6366
cleanup({
6467
// Ideally we'd also clean third_party/three, which saves
6568
// ~45kb in filesize alone... but takes 2 minutes to build

‎packages/model-viewer-effects/src/effect-composer.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import {ModelScene} from '@google/model-viewer/lib/three-components/ModelScene.j
1818
import {ReactiveElement} from 'lit';
1919
import {property} from 'lit/decorators.js';
2020
import {EffectComposer as PPEffectComposer, EffectPass, NormalPass, Pass, RenderPass, Selection} from 'postprocessing';
21-
import {ACESFilmicToneMapping, Camera, HalfFloatType, NeutralToneMapping, ToneMapping, UnsignedByteType, WebGLRenderer} from 'three';
21+
import {Camera, HalfFloatType, NeutralToneMapping, ToneMapping, UnsignedByteType, WebGLRenderer} from 'three';
2222

2323
import {IMVEffect, IntegrationOptions, MVEffectBase} from './effects/mixins/effect-base.js';
2424
import {disposeEffectPass, isConvolution, validateLiteralType} from './utilities.js';
@@ -71,7 +71,7 @@ export class EffectComposer extends PPEffectComposer {
7171

7272
private postRender() {
7373
const renderer = this.getRenderer();
74-
renderer.toneMapping = ACESFilmicToneMapping;
74+
renderer.toneMapping = NeutralToneMapping;
7575
renderer.autoClear = true;
7676
}
7777

‎packages/model-viewer-effects/src/effects/color-grade.ts

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -13,56 +13,59 @@
1313
* limitations under the License.
1414
*/
1515

16-
import { property } from 'lit/decorators.js';
17-
import { BlendFunction, BrightnessContrastEffect, HueSaturationEffect, ToneMappingEffect } from 'postprocessing';
18-
import { clamp, validateLiteralType, wrapClamp } from '../utilities.js';
19-
import { $updateProperties, MVEffectBase } from './mixins/effect-base.js';
20-
import { ToneMappingMode as PPToneMappingMode } from 'postprocessing';
21-
import { $effectComposer, $tonemapping } from '../effect-composer.js';
22-
import { ACESFilmicToneMapping, NoToneMapping } from 'three';
16+
import {property} from 'lit/decorators.js';
17+
import {BlendFunction, BrightnessContrastEffect, HueSaturationEffect, ToneMappingEffect, ToneMappingMode as PPToneMappingMode} from 'postprocessing';
18+
import {NeutralToneMapping, NoToneMapping} from 'three';
19+
20+
import {$effectComposer, $tonemapping} from '../effect-composer.js';
21+
import {clamp, validateLiteralType, wrapClamp} from '../utilities.js';
22+
23+
import {$updateProperties, MVEffectBase} from './mixins/effect-base.js';
2324

2425
const TWO_PI = Math.PI * 2;
2526

26-
export type ToneMappingMode = keyof typeof PPToneMappingMode;;
27-
export const TONEMAPPING_MODES = Object.keys(PPToneMappingMode) as ToneMappingMode[];
27+
export type ToneMappingMode = keyof typeof PPToneMappingMode;
28+
;
29+
export const TONEMAPPING_MODES =
30+
Object.keys(PPToneMappingMode) as ToneMappingMode[];
2831

2932
export class MVColorGradeEffect extends MVEffectBase {
3033
static get is() {
3134
return 'color-grade-effect';
3235
}
3336

3437
/**
35-
* `reinhard | reinhard2 | reinhard_adaptive | optimized_cineon | aces_filmic | linear`
38+
* `reinhard | reinhard2 | reinhard_adaptive | optimized_cineon | aces_filmic
39+
* | linear`
3640
* @default 'aces_filmic'
3741
*/
38-
@property({ type: String, attribute: 'tonemapping', reflect: true})
42+
@property({type: String, attribute: 'tonemapping', reflect: true})
3943
tonemapping: ToneMappingMode = 'ACES_FILMIC'
4044

41-
/**
42-
* Value in the range of (-1, 1).
43-
*/
44-
@property({ type: Number, attribute: 'brightness', reflect: true })
45-
brightness = 0;
45+
/**
46+
* Value in the range of (-1, 1).
47+
*/
48+
@property({type: Number, attribute: 'brightness', reflect: true})
49+
brightness = 0;
4650

4751
/**
4852
* Value in the range of (-1, 1).
4953
*/
50-
@property({ type: Number, attribute: 'contrast', reflect: true })
51-
contrast = 0;
54+
@property({type: Number, attribute: 'contrast', reflect: true}) contrast = 0;
5255

5356
/**
5457
* Value in the range of (-1, 1).
5558
*/
56-
@property({ type: Number, attribute: 'saturation', reflect: true })
59+
@property({type: Number, attribute: 'saturation', reflect: true})
5760
saturation = 0;
5861

5962
/**
6063
* Value in the range of (0, 2 * PI).
6164
*
62-
* This property is wrapping, meaning that if you set it above the max it resets to the minimum and vice-versa.
65+
* This property is wrapping, meaning that if you set it above the max it
66+
* resets to the minimum and vice-versa.
6367
*/
64-
@property({ type: Number, attribute: 'hue', reflect: true })
65-
hue = 0;
68+
@property({type: Number, attribute: 'hue', reflect: true}) hue = 0;
6669

6770
constructor() {
6871
super();
@@ -88,23 +91,20 @@ export class MVColorGradeEffect extends MVEffectBase {
8891
this[$updateProperties]();
8992
}
9093

91-
updated(changedProperties: Map<string | number | symbol, any>) {
94+
updated(changedProperties: Map<string|number|symbol, any>) {
9295
super.updated(changedProperties);
93-
if (
94-
changedProperties.has('tonemapping') ||
95-
changedProperties.has('brightness') ||
96-
changedProperties.has('contrast') ||
97-
changedProperties.has('hue') ||
98-
changedProperties.has('saturation') ||
99-
changedProperties.has('blendMode')
100-
) {
96+
if (changedProperties.has('tonemapping') ||
97+
changedProperties.has('brightness') ||
98+
changedProperties.has('contrast') || changedProperties.has('hue') ||
99+
changedProperties.has('saturation') ||
100+
changedProperties.has('blendMode')) {
101101
this[$updateProperties]();
102102
}
103103
}
104104

105105
[$updateProperties]() {
106106
if (this.blendMode === 'SKIP') {
107-
this.effectComposer[$effectComposer][$tonemapping] = ACESFilmicToneMapping;
107+
this.effectComposer[$effectComposer][$tonemapping] = NeutralToneMapping;
108108
} else {
109109
this.effectComposer[$effectComposer][$tonemapping] = NoToneMapping;
110110
}
@@ -119,7 +119,8 @@ export class MVColorGradeEffect extends MVEffectBase {
119119
try {
120120
this.tonemapping = this.tonemapping.toUpperCase() as ToneMappingMode;
121121
validateLiteralType(TONEMAPPING_MODES, this.tonemapping);
122-
(this.effects[0] as ToneMappingEffect).mode = PPToneMappingMode[this.tonemapping];
122+
(this.effects[0] as ToneMappingEffect).mode =
123+
PPToneMappingMode[this.tonemapping];
123124
} finally {
124125
this.effectComposer.queueRender();
125126
}

‎packages/model-viewer/package.json

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -84,32 +84,34 @@
8484
],
8585
"dependencies": {
8686
"lit": "^3.2.1",
87-
"@monogrid/gainmap-js": "^3.0.1"
87+
"@monogrid/gainmap-js": "^3.1.0"
8888
},
8989
"peerDependencies": {
90-
"three": "^0.170.0"
90+
"three": "^0.172.0"
9191
},
9292
"devDependencies": {
93-
"@rollup/plugin-commonjs": "^28.0.1",
94-
"@rollup/plugin-node-resolve": "^15.3.0",
95-
"@rollup/plugin-replace": "^6.0.1",
96-
"@types/mocha": "^10.0.9",
97-
"@types/pngjs": "^6.0.1",
98-
"@types/three": "^0.169.0",
99-
"@ungap/event-target": "^0.2.3",
93+
"@rollup/plugin-commonjs": "^28.0.2",
94+
"@rollup/plugin-node-resolve": "^16.0.0",
95+
"@rollup/plugin-replace": "^6.0.2",
96+
"@types/mocha": "^10.0.10",
97+
"@types/pngjs": "^6.0.5",
98+
"@types/three": "^0.172.0",
99+
"@ungap/event-target": "^0.2.4",
100100
"@web/test-runner": "^0.19.0",
101+
"@rollup/plugin-swc": "^0.4.0",
102+
"@swc/core": "^1.10.12",
101103
"@web/test-runner-playwright": "^0.11.0",
102104
"chai": "^5.1.2",
103105
"http-server": "^14.1.1",
104-
"mocha": "^10.0.0",
106+
"mocha": "^11.1.0",
105107
"npm-run-all": "^4.1.5",
106-
"rollup": "^4.24.0",
108+
"rollup": "^4.32.1",
107109
"rollup-plugin-cleanup": "^3.2.1",
108110
"rollup-plugin-dts": "^6.1.1",
109-
"rollup-plugin-polyfill": "^3.0.0",
111+
"rollup-plugin-polyfill": "^4.2.0",
110112
"@rollup/plugin-terser": "^0.4.4",
111-
"typescript": "5.6.3",
112-
"three": "^0.170.0"
113+
"typescript": "5.7.3",
114+
"three": "^0.172.0"
113115
},
114116
"publishConfig": {
115117
"access": "public"

‎packages/model-viewer/rollup.config.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
import commonjs from '@rollup/plugin-commonjs';
1717
import {nodeResolve as resolve} from '@rollup/plugin-node-resolve';
1818
import replace from '@rollup/plugin-replace';
19+
import swc from '@rollup/plugin-swc';
1920
import terser from '@rollup/plugin-terser';
2021
import cleanup from 'rollup-plugin-cleanup';
2122
import dts from 'rollup-plugin-dts';
22-
import polyfill from 'rollup-plugin-polyfill';
2323

2424
const {NODE_ENV} = process.env;
2525

@@ -30,8 +30,10 @@ const onwarn = (warning, warn) => {
3030
}
3131
};
3232

33-
let commonPlugins =
34-
[resolve({dedupe: 'three'}), replace({'Reflect.decorate': 'undefined'})];
33+
let commonPlugins = [
34+
resolve({dedupe: 'three'}),
35+
replace({'Reflect.decorate': 'undefined', preventAssignment: true})
36+
];
3537

3638
const watchFiles = ['lib/**'];
3739

@@ -69,7 +71,7 @@ if (NODE_ENV !== 'development') {
6971
const pluginsIE11 = [
7072
...commonPlugins,
7173
commonjs(),
72-
polyfill(['object.values/auto']),
74+
swc(),
7375
cleanup({
7476
// Ideally we'd also clean third_party/three, which saves
7577
// ~45kb in filesize alone... but takes 2 minutes to build

0 commit comments

Comments
 (0)