Question

修改;

工作的codepen（需要提供视频文件以避免跨源策略）

https://codepen.io/bw1984/pen/pezOXm

我正在尝试修改优秀的rutt etra示例https://airtightinteractive.com/demos/js/ruttetra/来处理视频（仍然使用threejs）并遇到性能方面的奇怪问题。

我的代码目前按预期工作，并且在我的macbook pro上实际上在chrome上运行得相当顺利，但似乎会导致某种缓慢的内存泄漏，我认为这与所有繁重的工作有关，这是必须由getImageData。奇怪的是，一旦我尝试刷新标签，它才会引人注目，所以看起来它可能与chrome中的垃圾收集有关吗？无论如何要将咕噜咕噜的工作分流到GPU而不是杀死CPU？

我只是想知道我是否遗漏了代码优化方面的任何明显问题，或者考虑到我想要做的事情的性质，我是否会遇到性能问题。

我只对WebGL / chrome功能感兴趣，所以不必担心任何类型的浏览器兼容性。

if [ -z "$JAVACMD" ] ; then
  if [ -n "$JAVA_HOME"  ] ; then
    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
      # IBM's JDK on AIX uses strange locations for the executables
      JAVACMD="$JAVA_HOME/jre/sh/java"
    else
#      JAVACMD="$JAVA_HOME/bin/java"
      JAVACMD="/usr/bin/java"
    fi
  else
    JAVACMD=java
  fi
fi

任何人都可以提供的任何帮助都会非常感激，即使它只是指向我正确的方向，因为我只是刚刚开始尝试这些东西而且几乎给了我自己的动脉瘤试图将我的小脑袋缠绕在它周围。

Answer 1

缓慢的内存泄漏很可能是由于：

        // add a line
        var _line = new THREE.Line(_geometry, _material);

        //log(line);

        _lineGroup.add(_line);

THREE.Line是一个对象，包含其他对象和大量数据。每次实例化它时，它都会创建.matrix，.matrixWorld，.modelViewMatrix，.normalMatrix，它们都是带有一堆数字的数组。 .position，.quaternion，.scale，.rotation以及可能.up是向量，季铵等，并且稍微小一点，但也包含特殊构造函数的数组。

每隔16毫秒分配一次所有这些只是为了释放下一帧可能是你＆＃34;泄漏＆＃34;的原因。

您应该创建一个THREE.Line个对象池，然后绘制每个帧。可以使用.visible控制的绘制对象的数量，并改变它们的转换属性。

threejs getImageData视频性能

1 个答案: