Utilizing Tween.js to animate a lissajous curve in a Three.js render loop has been mostly successful. However, I have encountered an issue after around 70 iterations where WebGL crashes and displays the error message:
CONTEXT_LOST_WEBGL: loseContext: context lostThe lissajous curve is relatively low in vertices and does not involve any textures (which are known causes of WebGL context losses), leading me to believe that the problem lies in my implementation of Tween.js handling figure interpolation, specifically the .onComplete callback.
Could anyone provide insights into why this issue might be happening? Alternatively, I may need to refer to the WebGL documentation on how to deal with context loss using HandleContextLoss.
function tweenLandingLissaj(newLissaj) {
var update = function() {
lissajousCurve.fa = current.freqA;
lissajousCurve.fb = current.freqB;
lissajousCurve.fc = current.freqC;
lissajousCurve.phaseX = current.phaseX;
lissajousCurve.phaseY = current.phaseY;
lissajousCurve.phaseZ = current.phaseZ;
lissajousCurve.update();
};
var current = {
freqA: lissajousCurve.fa,
freqB: lissajousCurve.fb,
freqC: lissajousCurve.fc,
phaseX: lissajousCurve.phaseX,
phaseY: lissajousCurve.phaseY,
phaseZ: lissajousCurve.phaseZ
};
var tweenTo = new TWEEN.Tween(current);
tweenTo.to({
freqA: newLissaj.freqA,
freqB: newLissaj.freqB,
freqC: newLissaj.phaseC,
phaseX: newLissaj.phaseX,
phaseY: newLissaj.phaseY,
phaseZ: newLissaj.phaseZ
}, 6000);
tweenTo.onUpdate(update);
tweenTo.onComplete(function() {
tweenTo.to({
freqA: Math.floor(Math.random() * 10) + 1,
freqB: Math.floor(Math.random() * 10) + 1,
freqC: Math.floor(Math.random() * 10) + 1,
phaseX: Math.floor(Math.random() * 10) + 1,
phaseY: Math.floor(Math.random() * 10) + 1,
phaseZ: Math.floor(Math.random() * 10) + 1
}, 6000);
tweenTo.start();
});
tweenTo.start();
}