@spiffcommerce/preview 3.6.2-rc.5 → 3.6.2-rc.7

package/dist/productAnimations.esm.js

@@ -0,0 +1,182 @@
+import { A as Animation } from './animation.esm.js';
+import { E as EasingFunction, Q as QuadraticEase } from './easing.esm.js';
+import { V as Vector3 } from './webRequest.esm.js';
+import './math.color.esm.js';
+import './node.esm.js';
+import './math.size.esm.js';
+import './math.path.esm.js';
+
+const CAMERA_FRAME_RATE = 60;
+const SPEED_RATIO = 1;
+function getAvgFrameRateForAnimGroup(animGroup) {
+    const sum = animGroup.targetedAnimations
+        .map((ta) => ta.animation.framePerSecond)
+        .reduce((a, b) => a + b, 0);
+    return sum / animGroup.targetedAnimations.length || 0;
+}
+/**
+ * Executes a set of animations. Typically for a single model.
+ * @param animGroups The animation groups to execute.
+ * @param loop Whether or not to loop the animations.
+ * @param to The frame to animate to.
+ * @param from The frame to animate from.
+ * @param name The name of the animation to execute. If not provided all animations will be executed.
+ */
+function executeAnimationGroups(animGroups, loop, to, from, name) {
+    const targetAnimations = !name
+        ? animGroups
+        : animGroups.filter((ag) => ag.name === name);
+    if (targetAnimations.length === 0) {
+        console.warn(`No animations found for name: ${name}`);
+        return;
+    }
+    // When our to & from values match we want to go immediately
+    // to a specific sequence of the animation.
+    if (from !== undefined && to !== undefined && from === to) {
+        targetAnimations.forEach((animGroup) => {
+            animGroup.stop();
+            const frameRate = getAvgFrameRateForAnimGroup(animGroup);
+            const targetFrame = from * frameRate;
+            animGroup.start(loop, SPEED_RATIO, targetFrame, targetFrame);
+        });
+        return;
+    }
+    // Otherwise we go to the 'from' value and play through to the 'to'
+    // value, looping if requested.
+    targetAnimations.forEach((animGroup) => {
+        animGroup.stop();
+        const frameRate = getAvgFrameRateForAnimGroup(animGroup);
+        const fromFrame = from !== undefined ? from * frameRate : undefined;
+        const toFrame = to !== undefined ? to * frameRate : undefined;
+        animGroup.start(loop, SPEED_RATIO, fromFrame, toFrame);
+    });
+}
+/**
+ * Stops all animations for a given collection of animation groups. This typically comes from a single model.
+ * @param animGroups The animation groups to stop.
+ */
+function resetAnimationGroups(animGroups) {
+    animGroups.forEach((animGroup) => {
+        animGroup.stop();
+    });
+}
+/**
+ * Executes all animations in a scene.
+ * @param scene The scene to execute animations in.
+ * @param loop Whether or not to loop the animations.
+ * @param to The frame to animate to.
+ * @param from The frame to animate from.
+ */
+function executeAllAnimationsInScene(scene, loop, to, from) {
+    const animGroups = scene.animationGroups;
+    executeAnimationGroups(animGroups, loop, to, from);
+}
+/**
+ * Stops all animations in a scene.
+ * @param scene The scene to stop animations on.
+ */
+function resetSceneModelAnimations(scene) {
+    const animGroups = scene.animationGroups;
+    resetAnimationGroups(animGroups);
+}
+/**
+ * Stops the camera from animating.
+ * @param camera The camera to stop animating
+ */
+function resetCameraAnimation(camera) {
+    camera.getScene().stopAnimation(camera);
+    camera.animations = [];
+}
+/**
+ * Animates the camera based on configuration.
+ * @param scene The scene the camera relates to.
+ * @param camera The camera to e animated
+ * @param cameraAnimation The animation configuration to play.
+ */
+function animateCameraInScene(scene, camera, cameraAnimation) {
+    // Clear any existing animation, not doing so will hang this animation.
+    scene.stopAnimation(camera);
+    camera.animations = [];
+    // We set the alpha to the equivalent location of its current value but with a value 0 - PI * 2
+    if (Math.abs(camera.alpha) > 2 * Math.PI) {
+        camera.alpha = wrap2Range(camera.alpha, 0, 2 * Math.PI);
+    }
+    const animSet = [];
+    // Indices for ordering the animation operations, we want to rotate before
+    // we pan.
+    const hasTargetTween = cameraAnimation.target;
+    const panSequenceIndex = 0;
+    const rotationSequenceIndex = hasTargetTween ? 1 : 0;
+    const targetHasComponents = cameraAnimation.target && Object.keys(cameraAnimation.target).length > 0;
+    // Build target animation
+    if (targetHasComponents) {
+        animSet.push(createAnimation('cameraTargetLerp', 'target', new Vector3().copyFrom(camera.target), new Vector3(cameraAnimation.target.x, cameraAnimation.target.y, cameraAnimation.target.z), Animation.ANIMATIONTYPE_VECTOR3, panSequenceIndex));
+    }
+    // Build the alpha & beta animations
+    animSet.push(createAnimation('cameraAlphaLerp', 'alpha', camera.alpha, degToRad(cameraAnimation.lonDeg), Animation.ANIMATIONTYPE_FLOAT, rotationSequenceIndex));
+    animSet.push(createAnimation('cameraBetaLerp', 'beta', camera.beta, degToRad(cameraAnimation.latDeg), Animation.ANIMATIONTYPE_FLOAT, rotationSequenceIndex));
+    // Build the radius animation
+    if (cameraAnimation.radius !== undefined) {
+        const targetRadius = Math.max(0.01, cameraAnimation.radius);
+        animSet.push(createAnimation('cameraRadiusLerp', 'radius', camera.radius, targetRadius, Animation.ANIMATIONTYPE_FLOAT, rotationSequenceIndex));
+    }
+    // Execute the animations, cleaning up after it completes.
+    camera.animations.push(...animSet);
+    // When we run a camera animation we must disable any existing
+    // auto rotation too prevent any animations conflicting with each other.
+    // If it was enabled we re-enable again when the animation has finished running.
+    const rotationWasActive = camera.useAutoRotationBehavior;
+    camera.disableAutoRotationBehavior();
+    // Finally, execute the animation on the scene.
+    scene.beginAnimation(camera, 0, hasTargetTween ? CAMERA_FRAME_RATE * 2 : CAMERA_FRAME_RATE, false, 1, () => {
+        camera.animations = [];
+        if (rotationWasActive) {
+            camera.enableAutoRotationBehavior();
+        }
+    });
+}
+/**
+ * Small helper for converting Degrees to Radians
+ * @param value The value to convert
+ */
+function degToRad(value) {
+    return (value * Math.PI) / 180;
+}
+/**
+ * A generic function for tweens between two values which is a concept used
+ * heavily in our camera animation system.
+ * @param animName The name of the animation.
+ * @param targetProperty A target property to affect on the object holding the animation.
+ * @param fromValue The initial value of the property.
+ * @param toValue The end value of the property.
+ * @param dataType The data type being modified eg. Animation.ANIMATIONTYPE_VECTOR3
+ * @param ordering animations are sequenced via ordering, an ordering of 0 means the animation will play from frame 0 -> FRAME_RATE
+ * an ordering of 1 means the animation will play from FRAME_RATE -> FRAME_RATE * 2 allowing us to play animations in a specific order.
+ * @param loopmode What to do when the animation completes eg. Animation.ANIMATIONLOOPMODE_CYCLE
+ */
+function createAnimation(animName, targetProperty, fromValue, toValue, dataType, ordering = 0, loopmode = Animation.ANIMATIONLOOPMODE_CONSTANT) {
+    const easingFunc = new QuadraticEase();
+    easingFunc.setEasingMode(EasingFunction.EASINGMODE_EASEINOUT);
+    const targetAnim = new Animation(animName, targetProperty, CAMERA_FRAME_RATE, dataType, loopmode);
+    const targetKeys = [];
+    ordering > 0 && targetKeys.push({ frame: 0, value: fromValue });
+    targetKeys.push({ frame: CAMERA_FRAME_RATE * ordering, value: fromValue });
+    targetKeys.push({
+        frame: CAMERA_FRAME_RATE * (ordering + 1),
+        value: toValue,
+    });
+    targetAnim.setKeys(targetKeys);
+    targetAnim.setEasingFunction(easingFunc);
+    return targetAnim;
+}
+// Given min, max. Return a value that wraps from max to min or vice versa if required.
+function wrap2Range(val, min, max) {
+    if (val < min) {
+        return (val = max - ((min - val) % (max - min)));
+    }
+    else {
+        return (val = min + ((val - min) % (max - min)));
+    }
+}
+
+export { animateCameraInScene, executeAllAnimationsInScene, executeAnimationGroups, resetAnimationGroups, resetCameraAnimation, resetSceneModelAnimations };

package/dist/productCamera.esm.js

@@ -0,0 +1,14 @@
+export { P as ProductCamera } from './productCamera.esm2.js';
+import './webRequest.esm.js';
+import './node.esm.js';
+import './mesh.esm.js';
+import './engine.esm.js';
+import './math.color.esm.js';
+import './material.esm2.js';
+import './compatibilityOptions.esm.js';
+import './sceneLoaderFlags.esm.js';
+import './math.axis.esm.js';
+import './easing.esm.js';
+import './math.path.esm.js';
+import './animation.esm.js';
+import './math.size.esm.js';

package/dist/renderConstants.esm.js

@@ -0,0 +1,116 @@
+/**
+ * A class containing largely static configuration information.
+ */
+class RenderingConfiguration {
+    /**
+     * Returns the resolution expected for generated textures.
+     */
+    static getDynamicTextureResolution() {
+        return this.getIsMobile() ||
+            !RenderingConfiguration.offscreenRenderingSupported()
+            ? {
+                width: 1024,
+                height: 1024,
+            }
+            : {
+                width: 2048,
+                height: 2048,
+            };
+    }
+    /**
+     * Returns true when textures should generate mip maps
+     */
+    static shouldMipMap() {
+        return true;
+    }
+    /**
+     * Returns true when multithreaded rendering is supported.
+     */
+    static offscreenRenderingSupported() {
+        // Samsung browser has broken web worker custom fonts from v14. To be
+        // safe, if we detect this browser we immediately disable offscreen canvas. There
+        // may be a more specific feature we can detect to be more clean about this moving forwards.
+        if (navigator.userAgent.includes('SamsungBrowser')) {
+            return false;
+        }
+        // Otherwise we check for relevant required functionality
+        return !!window.Worker && !!window.OffscreenCanvas;
+    }
+    /**
+     * Returns the resolution expected for mirror textures.
+     */
+    static getMirrorTextureResolution() {
+        return this.getIsMobile() ? 512 : 1024;
+    }
+    static getIsMobile() {
+        try {
+            if (typeof window === 'undefined' || !window.navigator) {
+                return false;
+            }
+            return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent) || window.innerWidth <= 480);
+        }
+        catch (e) {
+            return false;
+        }
+    }
+}
+const REFLECTION_PROBE_RESOLUTION = 128;
+const renderingPipelineDefaults = {
+    antiAliasing: {
+        samples: 4,
+        fxaaEnabled: false,
+    },
+    bloom: {
+        enabled: false,
+        kernel: 64,
+        scale: 0.5,
+        threshold: 0.9,
+        weight: 0.15,
+    },
+    chromaticAberration: {
+        enabled: false,
+        aberrationAmount: 30,
+        direction: { x: 0, y: 0 },
+        radialIntensity: 0,
+    },
+    colorCurves: {
+        enabled: false,
+        // Color curves values implicitly set to undefined
+    },
+    depthOfField: {
+        enabled: false,
+        blurLevel: 'Low',
+        focalLength: 50,
+        focusDistance: 2000,
+        fStop: 1.4,
+        lensSize: 50,
+    },
+    grain: {
+        enabled: false,
+        animated: false,
+        intensity: 30,
+    },
+    misc: {
+        contrast: 1,
+        exposure: 1,
+        toneMappingEnabled: false,
+        toneMappingType: 'Standard',
+    },
+    sharpen: {
+        enabled: false,
+        colorAmount: 1,
+        edgeAmount: 0.3,
+    },
+    vignette: {
+        enabled: false,
+        blendMode: 'Multiply',
+        cameraFov: 0.5,
+        center: { x: 0, y: 0 },
+        colorHex: '#000000ff',
+        colorRgba: { r: 0, g: 0, b: 0, a: 1 },
+        stretch: 0,
+        weight: 1,
+    },
+};
+
+export { REFLECTION_PROBE_RESOLUTION, RenderingConfiguration, renderingPipelineDefaults };

package/dist/renderingPipeline.esm.js

@@ -0,0 +1,18 @@
+import './engine.esm.js';
+import './math.color.esm.js';
+import './webRequest.esm.js';
+export { R as RenderingPipeline } from './renderingPipeline.esm2.js';
+import './helperFunctions.esm.js';
+import './dynamicTexture.esm2.js';
+import './renderConstants.esm.js';
+import './glowLayer.esm.js';
+import './material.esm2.js';
+import './node.esm.js';
+import './compatibilityOptions.esm.js';
+import './blurPostProcess.esm.js';
+import './effectFallbacks.esm.js';
+import './bumpVertex.esm.js';
+import './pbrBRDFFunctions.esm.js';
+import './animation.esm.js';
+import './math.size.esm.js';
+import './math.axis.esm.js';

package/dist/sceneLoaderFlags.esm.js

@@ -0,0 +1,51 @@
+/**
+ * Class used to represent data loading progression
+ */
+class SceneLoaderFlags {
+    /**
+     * Gets or sets a boolean indicating if entire scene must be loaded even if scene contains incremental data
+     */
+    static get ForceFullSceneLoadingForIncremental() {
+        return SceneLoaderFlags._ForceFullSceneLoadingForIncremental;
+    }
+    static set ForceFullSceneLoadingForIncremental(value) {
+        SceneLoaderFlags._ForceFullSceneLoadingForIncremental = value;
+    }
+    /**
+     * Gets or sets a boolean indicating if loading screen must be displayed while loading a scene
+     */
+    static get ShowLoadingScreen() {
+        return SceneLoaderFlags._ShowLoadingScreen;
+    }
+    static set ShowLoadingScreen(value) {
+        SceneLoaderFlags._ShowLoadingScreen = value;
+    }
+    /**
+     * Defines the current logging level (while loading the scene)
+     * @ignorenaming
+     */
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    static get loggingLevel() {
+        return SceneLoaderFlags._LoggingLevel;
+    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    static set loggingLevel(value) {
+        SceneLoaderFlags._LoggingLevel = value;
+    }
+    /**
+     * Gets or set a boolean indicating if matrix weights must be cleaned upon loading
+     */
+    static get CleanBoneMatrixWeights() {
+        return SceneLoaderFlags._CleanBoneMatrixWeights;
+    }
+    static set CleanBoneMatrixWeights(value) {
+        SceneLoaderFlags._CleanBoneMatrixWeights = value;
+    }
+}
+// Flags
+SceneLoaderFlags._ForceFullSceneLoadingForIncremental = false;
+SceneLoaderFlags._ShowLoadingScreen = true;
+SceneLoaderFlags._CleanBoneMatrixWeights = false;
+SceneLoaderFlags._LoggingLevel = 0;
+
+export { SceneLoaderFlags as S };

package/dist/types.esm.js

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Defines the different behaviors supported by the camera system
+ * for control when viewing a product.
+ */
+var ProductCameraRig;
+(function (ProductCameraRig) {
+    ProductCameraRig[ProductCameraRig["Orbit"] = 0] = "Orbit";
+    ProductCameraRig[ProductCameraRig["Pan"] = 1] = "Pan";
+})(ProductCameraRig || (ProductCameraRig = {}));
+/**
+ * Used to specify the behavior of a material effect such as clearcoat, sheen and translucency.
+ */
+var MaterialEffectMode;
+(function (MaterialEffectMode) {
+    /**
+     * When a material variant effect specifies 'None' the effect doesn't change in any way. This is the default behavior.
+     */
+    MaterialEffectMode["None"] = "None";
+    /**
+     * When a material variant effect specifies 'RemoveWhenSelected' the effect is removed.
+     */
+    MaterialEffectMode["RemoveWhenSelected"] = "RemoveWhenSelected";
+    /**
+     * When a material variant effect specifies 'ApplyWhenSelected' the effect is enabled.
+     */
+    MaterialEffectMode["ApplyWhenSelected"] = "ApplyWhenSelected";
+})(MaterialEffectMode || (MaterialEffectMode = {}));
+
+export { MaterialEffectMode, ProductCameraRig };

package/dist/variants.esm.js

@@ -0,0 +1,16 @@
+import './_tslib.esm.js';
+export { V as default, g as getAllMaterialsForInstance } from './variants.esm2.js';
+import './assetCache.esm2.js';
+import './material.esm.js';
+import './engine.esm.js';
+import './webRequest.esm.js';
+import './math.color.esm.js';
+import './helperFunctions.esm.js';
+import './math.size.esm.js';
+import './compatibilityOptions.esm.js';
+import './hdrFilteringFunctions.esm.js';
+import './pbrBRDFFunctions.esm.js';
+import './math.axis.esm.js';
+import './math.path.esm.js';
+import './sceneLoaderFlags.esm.js';
+import './types.esm.js';