feat: make options for appendAnimation and detachAnimation optional (#5025)

Author: Frank3K

packages/model-viewer-effects/src/test/effect-composer-spec.ts

@@ -18,6 +18,8 @@ import {expect} from 'chai';
 import {DotScreenEffect, Effect, EffectPass, GridEffect} from 'postprocessing';
 import {Camera} from 'three';
 
+import {Renderer} from '@google/model-viewer/lib/three-components/Renderer.js';
+
 import {$effectComposer, $normalPass, $renderPass, $scene} from '../effect-composer.js';
 import {EffectComposer} from '../model-viewer-effects.js';
 
@@ -27,6 +29,12 @@ suite('MVEffectComposer', () => {
   let element: ModelViewerElement;
   let composer: EffectComposer;
 
+  suiteSetup(function() {
+    if (!Renderer.singleton.canRender) {
+      this.skip();
+    }
+  });
+
   setup(async () => {
     element = createModelViewerElement(assetPath('models/Astronaut.glb'));
     composer = new EffectComposer();

packages/model-viewer-effects/src/test/effects/color-grade-spec.ts

@@ -16,6 +16,8 @@
 import {ModelViewerElement} from '@google/model-viewer';
 import {expect} from 'chai';
 
+import {Renderer} from '@google/model-viewer/lib/three-components/Renderer.js';
+
 import {ColorGradeEffect, EffectComposer} from '../../model-viewer-effects.js';
 import {ArraysAreEqual, assetPath, AverageHSL, CompareArrays, createModelViewerElement, rafPasses, screenshot, waitForEvent} from '../utilities.js';
 
@@ -25,6 +27,12 @@ suite('Color Grade Effect', () => {
   let baseScreenshot: Uint8Array;
   let colorGrade: ColorGradeEffect;
 
+  suiteSetup(function() {
+    if (!Renderer.singleton.canRender) {
+      this.skip();
+    }
+  });
+
   setup(async () => {
     element = createModelViewerElement(assetPath('models/Astronaut.glb'));
     composer = new EffectComposer();

packages/model-viewer-effects/src/test/utilities-spec.ts

@@ -67,7 +67,6 @@ suite('Screenshot Baseline Test', () => {
     setup(async () => {
       composer = new EffectComposer();
       composer.renderMode = 'quality';
-      composer.msaa = 8;
       element.insertBefore(composer, element.firstChild);
       await element.updateComplete;
       await composer.updateComplete;

packages/model-viewer/src/features/animation.ts

@@ -27,17 +27,23 @@ const $detachAnimation = Symbol('detachAnimation');
 const $paused = Symbol('paused');
 
 interface PlayAnimationOptions {
-  repetitions: number, pingpong: boolean,
+  repetitions: number;
+  pingpong: boolean;
 }
 
 interface AppendAnimationOptions {
-  pingpong: boolean, repetitions: number|null, weight: number,
-      timeScale: number, fade: boolean|number, warp: boolean|number,
-      relativeWarp: boolean, time: number|null
+  pingpong?: boolean;
+  repetitions?: number|null;
+  weight?: number;
+  timeScale?: number;
+  fade?: boolean|number;
+  warp?: boolean|number;
+  relativeWarp?: boolean;
+  time?: number|null;
 }
 
 interface DetachAnimationOptions {
-  fade: boolean|number
+  fade?: boolean|number;
 }
 
 const DEFAULT_PLAY_OPTIONS: PlayAnimationOptions = {
@@ -262,9 +268,10 @@ export const AnimationMixin = <T extends Constructor<ModelViewerElementBase>>(
 
     [$appendAnimation](
         animationName: string = '',
-        options: AppendAnimationOptions = DEFAULT_APPEND_OPTIONS) {
-      const repetitions = options.repetitions ?? Infinity;
-      const mode = options.pingpong ?
+        options: AppendAnimationOptions = {}) {
+      const opts = {...DEFAULT_APPEND_OPTIONS, ...options};
+      const repetitions = opts.repetitions ?? Infinity;
+      const mode = opts.pingpong ?
           LoopPingPong :
           (repetitions === 1 ? LoopOnce : LoopRepeat);
 
@@ -274,12 +281,12 @@ export const AnimationMixin = <T extends Constructor<ModelViewerElementBase>>(
           animationName ? animationName : this.animationName,
           mode,
           repetitions,
-          options.weight,
-          options.timeScale,
-          options.fade,
-          options.warp,
-          options.relativeWarp,
-          options.time,
+          opts.weight,
+          opts.timeScale,
+          opts.fade,
+          opts.warp,
+          opts.relativeWarp,
+          opts.time,
           needsToStop);
 
       // If we are currently paused, we need to force a render so that
@@ -292,9 +299,10 @@ export const AnimationMixin = <T extends Constructor<ModelViewerElementBase>>(
 
     [$detachAnimation](
         animationName: string = '',
-        options: DetachAnimationOptions = DEFAULT_DETACH_OPTIONS) {
+        options: DetachAnimationOptions = {}) {
+      const opts = {...DEFAULT_DETACH_OPTIONS, ...options};
       this[$scene].detachAnimation(
-          animationName ? animationName : this.animationName, options.fade);
+          animationName ? animationName : this.animationName, opts.fade);
 
       // If we are currently paused, we need to force a render so that
       // the scene updates to the first frame of the new animation