Skip to content

LottieWeb: Remove expressions eval, harden SSR check. #30872

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

Closed
wants to merge 1 commit into from
Closed

LottieWeb: Remove expressions eval, harden SSR check. #30872

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
367 changes: 17 additions & 350 deletions examples/jsm/libs/lottie_canvas.module.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,14 @@
const lottie = {};

if (typeof document !== 'undefined') {
// Checks for SSR including partial DOM implementation and emulation.
// In these environments, Lottie should not be loaded or it can crash.
// https://github.com/pmndrs/three-stdlib/pull/398#issuecomment-2600778156
const isSSR =
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why isn't this something apps can't check before importing lottie loader? Something like:

if ( isSSR === false ) {

    const { LottieLoader } = await import( 'three/addons/loaders/LottieLoader.js' );

}

Copy link
Contributor Author

@CodyJasonBennett CodyJasonBennett Apr 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is because three/addons brings in LottieLoader when evaluated on the server side.

I can add a CI step for this, which is as simple as node examples/jsm/Addons.js.

The changes here aren't strictly necessary for SSR (completed in #26989), only environments that partially implement DOM APIs. I wouldn't be opposed to keeping it as-is, but I've seen requests from users who use mocking in testing environments or more modern runtimes that are headless.

typeof navigator === 'undefined' ||
typeof document === 'undefined' ||
typeof CanvasRenderingContext2D === 'undefined'

if (isSSR === false) {

const svgNS = 'http://www.w3.org/2000/svg';

Expand Down Expand Up @@ -7433,7 +7441,6 @@ const TextExpressionInterface = (function () {
if (stringValue !== _prevValue) {
elem.textProperty.currentData.t = _prevValue;
_sourceText = new String(stringValue); // eslint-disable-line no-new-wrappers
// If stringValue is an empty string, eval returns undefined, so it has to be returned as a String primitive
_sourceText.value = stringValue || new String(stringValue); // eslint-disable-line no-new-wrappers
}
return _sourceText;
Expand Down Expand Up @@ -13925,354 +13932,14 @@ const ExpressionManager = (function () {
return path;
}

function initiateExpression(elem, data, property) {
var val = data.x;
var needsVelocity = /velocity(?![\w\d])/.test(val);
var _needsRandom = val.indexOf('random') !== -1;
var elemType = elem.data.ty;
var transform;
var $bm_transform;
var content;
var effect;
var thisProperty = property;
thisProperty.valueAtTime = thisProperty.getValueAtTime;
Object.defineProperty(thisProperty, 'value', {
get: function () {
return thisProperty.v;
},
});
elem.comp.frameDuration = 1 / elem.comp.globalData.frameRate;
elem.comp.displayStartTime = 0;
var inPoint = elem.data.ip / elem.comp.globalData.frameRate;
var outPoint = elem.data.op / elem.comp.globalData.frameRate;
var width = elem.data.sw ? elem.data.sw : 0;
var height = elem.data.sh ? elem.data.sh : 0;
var name = elem.data.nm;
var loopIn;
var loop_in;
var loopOut;
var loop_out;
var smooth;
var toWorld;
var fromWorld;
var fromComp;
var toComp;
var fromCompToSurface;
var position;
var rotation;
var anchorPoint;
var scale;
var thisLayer;
var thisComp;
var mask;
var valueAtTime;
var velocityAtTime;

var scoped_bm_rt;
// val = val.replace(/(\\?"|')((http)(s)?(:\/))?\/.*?(\\?"|')/g, "\"\""); // deter potential network calls
var expression_function = eval('[function _expression_function(){' + val + ';scoped_bm_rt=$bm_rt}]')[0]; // eslint-disable-line no-eval
var numKeys = property.kf ? data.k.length : 0;

var active = !this.data || this.data.hd !== true;

var wiggle = function wiggle(freq, amp) {
var iWiggle;
var j;
var lenWiggle = this.pv.length ? this.pv.length : 1;
var addedAmps = createTypedArray('float32', lenWiggle);
freq = 5;
var iterations = Math.floor(time * freq);
iWiggle = 0;
j = 0;
while (iWiggle < iterations) {
// var rnd = BMMath.random();
for (j = 0; j < lenWiggle; j += 1) {
addedAmps[j] += -amp + amp * 2 * BMMath.random();
// addedAmps[j] += -amp + amp*2*rnd;
}
iWiggle += 1;
}
// var rnd2 = BMMath.random();
var periods = time * freq;
var perc = periods - Math.floor(periods);
var arr = createTypedArray('float32', lenWiggle);
if (lenWiggle > 1) {
for (j = 0; j < lenWiggle; j += 1) {
arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp * 2 * BMMath.random()) * perc;
// arr[j] = this.pv[j] + addedAmps[j] + (-amp + amp*2*rnd)*perc;
// arr[i] = this.pv[i] + addedAmp + amp1*perc + amp2*(1-perc);
}
return arr;
}
return this.pv + addedAmps[0] + (-amp + amp * 2 * BMMath.random()) * perc;
}.bind(this);

if (thisProperty.loopIn) {
loopIn = thisProperty.loopIn.bind(thisProperty);
loop_in = loopIn;
}

if (thisProperty.loopOut) {
loopOut = thisProperty.loopOut.bind(thisProperty);
loop_out = loopOut;
}

if (thisProperty.smooth) {
smooth = thisProperty.smooth.bind(thisProperty);
}

function loopInDuration(type, duration) {
return loopIn(type, duration, true);
}

function loopOutDuration(type, duration) {
return loopOut(type, duration, true);
}

if (this.getValueAtTime) {
valueAtTime = this.getValueAtTime.bind(this);
}

if (this.getVelocityAtTime) {
velocityAtTime = this.getVelocityAtTime.bind(this);
}

var comp = elem.comp.globalData.projectInterface.bind(elem.comp.globalData.projectInterface);

function lookAt(elem1, elem2) {
var fVec = [elem2[0] - elem1[0], elem2[1] - elem1[1], elem2[2] - elem1[2]];
var pitch = Math.atan2(fVec[0], Math.sqrt(fVec[1] * fVec[1] + fVec[2] * fVec[2])) / degToRads;
var yaw = -Math.atan2(fVec[1], fVec[2]) / degToRads;
return [yaw, pitch, 0];
}

function easeOut(t, tMin, tMax, val1, val2) {
return applyEase(easeOutBez, t, tMin, tMax, val1, val2);
}

function easeIn(t, tMin, tMax, val1, val2) {
return applyEase(easeInBez, t, tMin, tMax, val1, val2);
}

function ease(t, tMin, tMax, val1, val2) {
return applyEase(easeInOutBez, t, tMin, tMax, val1, val2);
}

function applyEase(fn, t, tMin, tMax, val1, val2) {
if (val1 === undefined) {
val1 = tMin;
val2 = tMax;
} else {
t = (t - tMin) / (tMax - tMin);
}
if (t > 1) {
t = 1;
} else if (t < 0) {
t = 0;
}
var mult = fn(t);
if ($bm_isInstanceOfArray(val1)) {
var iKey;
var lenKey = val1.length;
var arr = createTypedArray('float32', lenKey);
for (iKey = 0; iKey < lenKey; iKey += 1) {
arr[iKey] = (val2[iKey] - val1[iKey]) * mult + val1[iKey];
}
return arr;
}
return (val2 - val1) * mult + val1;
}

function nearestKey(time) {
var iKey;
var lenKey = data.k.length;
var index;
var keyTime;
if (!data.k.length || typeof (data.k[0]) === 'number') {
index = 0;
keyTime = 0;
} else {
index = -1;
time *= elem.comp.globalData.frameRate;
if (time < data.k[0].t) {
index = 1;
keyTime = data.k[0].t;
} else {
for (iKey = 0; iKey < lenKey - 1; iKey += 1) {
if (time === data.k[iKey].t) {
index = iKey + 1;
keyTime = data.k[iKey].t;
break;
} else if (time > data.k[iKey].t && time < data.k[iKey + 1].t) {
if (time - data.k[iKey].t > data.k[iKey + 1].t - time) {
index = iKey + 2;
keyTime = data.k[iKey + 1].t;
} else {
index = iKey + 1;
keyTime = data.k[iKey].t;
}
break;
}
}
if (index === -1) {
index = iKey + 1;
keyTime = data.k[iKey].t;
}
}
}
var obKey = {};
obKey.index = index;
obKey.time = keyTime / elem.comp.globalData.frameRate;
return obKey;
}

function key(ind) {
var obKey;
var iKey;
var lenKey;
if (!data.k.length || typeof (data.k[0]) === 'number') {
throw new Error('The property has no keyframe at index ' + ind);
}
ind -= 1;
obKey = {
time: data.k[ind].t / elem.comp.globalData.frameRate,
value: [],
};
var arr = Object.prototype.hasOwnProperty.call(data.k[ind], 's') ? data.k[ind].s : data.k[ind - 1].e;

lenKey = arr.length;
for (iKey = 0; iKey < lenKey; iKey += 1) {
obKey[iKey] = arr[iKey];
obKey.value[iKey] = arr[iKey];
}
return obKey;
}

function framesToTime(fr, fps) {
if (!fps) {
fps = elem.comp.globalData.frameRate;
}
return fr / fps;
}

function timeToFrames(t, fps) {
if (!t && t !== 0) {
t = time;
}
if (!fps) {
fps = elem.comp.globalData.frameRate;
}
return t * fps;
}

function seedRandom(seed) {
BMMath.seedrandom(randSeed + seed);
}

function sourceRectAtTime() {
return elem.sourceRectAtTime();
}

function substring(init, end) {
if (typeof value === 'string') {
if (end === undefined) {
return value.substring(init);
}
return value.substring(init, end);
}
return '';
}

function substr(init, end) {
if (typeof value === 'string') {
if (end === undefined) {
return value.substr(init);
}
return value.substr(init, end);
}
return '';
}

function posterizeTime(framesPerSecond) {
time = framesPerSecond === 0 ? 0 : Math.floor(time * framesPerSecond) / framesPerSecond;
value = valueAtTime(time);
}

var time;
var velocity;
var value;
var text;
var textIndex;
var textTotal;
var selectorValue;
var index = elem.data.ind;
var hasParent = !!(elem.hierarchy && elem.hierarchy.length);
var parent;
var randSeed = Math.floor(Math.random() * 1000000);
var globalData = elem.globalData;
function executeExpression(_value) {
// globalData.pushExpression();
value = _value;
if (this.frameExpressionId === elem.globalData.frameId && this.propType !== 'textSelector') {
return value;
}
if (this.propType === 'textSelector') {
textIndex = this.textIndex;
textTotal = this.textTotal;
selectorValue = this.selectorValue;
}
if (!thisLayer) {
text = elem.layerInterface.text;
thisLayer = elem.layerInterface;
thisComp = elem.comp.compInterface;
toWorld = thisLayer.toWorld.bind(thisLayer);
fromWorld = thisLayer.fromWorld.bind(thisLayer);
fromComp = thisLayer.fromComp.bind(thisLayer);
toComp = thisLayer.toComp.bind(thisLayer);
mask = thisLayer.mask ? thisLayer.mask.bind(thisLayer) : null;
fromCompToSurface = fromComp;
}
if (!transform) {
transform = elem.layerInterface('ADBE Transform Group');
$bm_transform = transform;
if (transform) {
anchorPoint = transform.anchorPoint;
/* position = transform.position;
rotation = transform.rotation;
scale = transform.scale; */
}
}

if (elemType === 4 && !content) {
content = thisLayer('ADBE Root Vectors Group');
}
if (!effect) {
effect = thisLayer(4);
}
hasParent = !!(elem.hierarchy && elem.hierarchy.length);
if (hasParent && !parent) {
parent = elem.hierarchy[0].layerInterface;
}
time = this.comp.renderedFrame / this.comp.globalData.frameRate;
if (_needsRandom) {
seedRandom(randSeed + time);
}
if (needsVelocity) {
velocity = velocityAtTime(time);
}
expression_function();
this.frameExpressionId = elem.globalData.frameId;

// TODO: Check if it's possible to return on ShapeInterface the .v value
// Changed this to a ternary operation because Rollup failed compiling it correctly
scoped_bm_rt = scoped_bm_rt.propType === propTypes.SHAPE
? scoped_bm_rt.v
: scoped_bm_rt;
return scoped_bm_rt;
}
// Bundlers will see these as dead code and unless we reference them
executeExpression.__preventDeadCodeRemoval = [$bm_transform, anchorPoint, time, velocity, inPoint, outPoint, width, height, name, loop_in, loop_out, smooth, toComp, fromCompToSurface, toWorld, fromWorld, mask, position, rotation, scale, thisComp, numKeys, active, wiggle, loopInDuration, loopOutDuration, comp, lookAt, easeOut, easeIn, ease, nearestKey, key, text, textIndex, textTotal, selectorValue, framesToTime, timeToFrames, sourceRectAtTime, substring, substr, posterizeTime, index, globalData];
return executeExpression;
// https://github.com/airbnb/lottie-web/issues/2828
// https://github.com/airbnb/lottie-web/pull/2833
// Bail out if we don't want expressions
function noOp(_value) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not ideal to modify library code in this way since if we want to update lottie_canvas, we have to apply the same fixes again. I understand the argument that lottie isn't properly maintained anymore but then we should consider to remove the dependency and the loader altogether.

LottieLoader isn't complex. Users should be able to call const animation = lottie.loadAnimation( { } ); on their own and then apply lottie's canvas to a CanvasTexture.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, I volunteer to upstream any and all updates to/from Lottie Web for the next decade.

Does that really change anything, though? I don't think that's the problem.

Copy link
Contributor Author

@CodyJasonBennett CodyJasonBennett Apr 6, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see; maybe the class should be deprecated (or removed? how does this work for examples?) and the example updated to use CanvasTexture directly.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mrdoob originally added this loader. Let's see how he thinks about this issue.

return _value;
}
function initiateExpression(_elem, _data, _property) {
return noOp;
}

ob.initiateExpression = initiateExpression;
Expand Down