0

我正在使用 Tween.js 在 Three.js 渲染周期内更新李萨如曲线。这在大多数情况下都有效，但是，在大约 70 次迭代之后，WebGL 似乎与错误一起崩溃：CONTEXT_LOST_WEBGL: loseContext: context lost. 这种缺乏稳定性令人不安，特别是因为它似乎有时需要我重新启动浏览器才能让 WebGL 再次工作（不仅在这个页面上，而且在其他使用 WebGL 的页面上也是如此）。

lissajous 曲线不是很高的顶点并且不使用纹理（这似乎是其他 WebGL 上下文丢失的原因），所以我很确定这一定是由于我实现 Tween.js 处理图形之间的插值（特别是.onComplete回调）。

任何人都可以提供任何关于为什么会发生这种情况的指示吗？根据 WebGL 文档，我的替代方案是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.freqC,
    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();

}

4

1 回答 1

0

从未找到 Tween.js 导致 WebGL 上下文丢失的真正原因。我怀疑这是由于我使用了 onComplete 回调。

然而，我确实找到了一个更优雅的解决方案来实现我在使用 Tween.js 库后不会导致上下文丢失的效果。

通过链接两个随机生成的补间，我可以使用 onComplete 回调创建一个无限生成的 lissajous 曲线，而之前这会导致我出现问题。

对于发现自己处于类似情况的任何人，我的解决方案都可以在下面找到：

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: 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
  }, 10000);
  tweenTo.onUpdate(update);

  var tweenBack = new TWEEN.Tween(current);
  tweenBack.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
  }, 10000);
  tweenBack.onUpdate(update);

  tweenTo.chain(tweenBack);
  tweenBack.chain(tweenTo);

  tweenTo.start();

}

于 2018-03-11T21:42:02.757 回答