Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added the ability to run and combine multiple animations simultaneously #4979

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
Open

Added the ability to run and combine multiple animations simultaneously #4979

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
3c96aec
Added the ability to run and combine multiple animations simultaneous…
mohammadbaghaei Dec 22, 2024
ce1d45e
fix build warnings and errors and replace rollup-plugin-polyfill with…
mohammadbaghaei Dec 22, 2024
ee4c276
fix fidelity-tests chrome error
mohammadbaghaei Dec 23, 2024
80e7299
fix chrome install error on fidelity-tests
mohammadbaghaei Dec 23, 2024
044e7a9
fix fidelity-tests error on Fix dependencies step
mohammadbaghaei Dec 23, 2024
859fcfd
add no-sandbox args to puppeteer.launch
mohammadbaghaei Dec 23, 2024
194f682
cleanup github workflow
mohammadbaghaei Dec 23, 2024
0e7a581
add example for appendAnimation, improve modelviewer.dev styles, impr…
mohammadbaghaei Dec 28, 2024
1cadb92
Fix all requested changes in #4979 PR, improve the flexibility of app…
mohammadbaghaei Dec 28, 2024
523e1e3
improve detachAnimation flexibility
mohammadbaghaei Dec 28, 2024
4740302
update dependencies to latest version
mohammadbaghaei Dec 29, 2024
2035fde
fix #4960 issue
mohammadbaghaei Dec 29, 2024
e2dd816
Fix animation skipping when updating with appendAnimation method and …
mohammadbaghaei Jan 8, 2025
9066abc
Upgrade to three.js r172 and update dependencies and fix peer depende…
mohammadbaghaei Jan 8, 2025
3d0df06
add Cineon, Reinhard, Linear, none tone mapping options and update do…
mohammadbaghaei Jan 9, 2025
d945f08
revert peetDependencies change
mohammadbaghaei Jan 9, 2025
4b2e77b
fix package-lock error
mohammadbaghaei Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12,032 changes: 6,467 additions & 5,565 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.19.1",
"@typescript-eslint/parser": "^8.19.1",
"clang-format": "^1.8.0",
"eslint": "^8.20.0",
"eslint": "^9.17.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"
}
}
2 changes: 1 addition & 1 deletion packages/model-viewer-effects/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
30 changes: 16 additions & 14 deletions packages/model-viewer-effects/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.6",
"focus-visible": "^5.2.1",
"http-server": "^14.1.1",
"mocha": "^10.0.0",
"mocha": "^11.0.1",
"npm-run-all": "^4.1.5",
"rollup": "^4.24.0",
"rollup": "^4.30.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"
Expand Down
9 changes: 6 additions & 3 deletions packages/model-viewer-effects/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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/**'];

Expand Down Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/model-viewer-effects/src/effect-composer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -71,7 +71,7 @@ export class EffectComposer extends PPEffectComposer {

private postRender() {
const renderer = this.getRenderer();
renderer.toneMapping = ACESFilmicToneMapping;
renderer.toneMapping = NeutralToneMapping;
renderer.autoClear = true;
}

Expand Down
67 changes: 34 additions & 33 deletions packages/model-viewer-effects/src/effects/color-grade.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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;
}
Expand All @@ -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();
}
Expand Down
30 changes: 16 additions & 14 deletions packages/model-viewer/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.6",
"@web/test-runner-playwright": "^0.11.0",
"chai": "^5.1.2",
"http-server": "^14.1.1",
"mocha": "^10.0.0",
"mocha": "^11.0.1",
"npm-run-all": "^4.1.5",
"rollup": "^4.24.0",
"rollup": "^4.30.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"
Expand Down
10 changes: 6 additions & 4 deletions packages/model-viewer/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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/**'];

Expand Down Expand Up @@ -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
Expand Down
Loading
Loading