使用`elementsNeedUpdate`时的三个.js内存泄漏答案

【问题标题】：three.js Memory Leak when using `elementsNeedUpdate`使用`elementsNeedUpdate`时的三个.js内存泄漏
【发布时间】：2017-11-07 22:50:53
【问题描述】：

我正在three.js 中创建一个Geometry 并用顶点填充它以构建2D 地形。创建地形后，我将所有Vector3s 和Face3s 推送到几何体，然后修改每个顶点和每一帧的面。

因为我每帧都在修改人脸顶点，所以我需要告诉 three.js 来更新人脸。我正在使用geometry.elementsNeedUpdate = true 执行此操作。这可行，但是我注意到它会导致大量内存使用（我的应用程序每秒使用额外的 ~50mb 内存）。

以下代码演示了我正在尝试做的事情：

function pushEverything(geom) {
    for (var i = 0; i < 10000; i++) {
        geom.vertices.push(new THREE.Vector3(...));
        geom.faces.push(new THREE.Face3(...));
        geom.faces.push(new THREE.Face3(...));
    }
}

function rebuild(geom) {
    for (var face of geom.faces) {
        face.a = ...
        face.b = ...
        face.c = ...
    }
    geom.elementsNeedUpdate = true
}

var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("my-canvas")
});
var geom = new THREE.Geometry();
var camera = new THREE.PerspectiveCamera(...);
pushEverything(geom);
while (true) {
    // Perform some terrain modifications
    rebuild(geom);
    renderer.render(geom, camera);
    sleep(1000 / 30);
}

我已经按照this问题的建议，建议使用geometry.vertices[x].copy(...)而不是geometry.vertices[x] = new Vector3(...)。

我的问题是：为什么在使用geometry.elementsNeedUpdate = true 时我的内存使用率如此之高？是否有其他方法可以更新Geometry 的面孔？

我正在使用 NPM 的 three.js 0.87.1。

【问题讨论】：

您使用哪个版本？ github.com/mrdoob/three.js/issues/9353
我已经更新了我的问题。我正在使用从 NPM 下载的 three.js 0.87.1。
您能否提供一些有关时间的信息：何时调用rebuild？和pushEverything?什么时候渲染场景？这是什么sleep 函数？
@neeh rebuild 每帧都会被调用一次。 pushEverything 在第一次渲染之前被推送。 sleep 只是一个传统的“睡眠”（暂停执行线程1000 / 30 毫秒）。我更新了我的问题以显示我在哪里渲染。
Three.js 内部处理的是BufferGeometry，它不能使用Geometry。 elementsNeedUpdate 表示“我的Geometry 已更新，需要转换为BufferGeometry”。从Geometry 转换为BufferGeometry 在内存、CPU 和GPU 中都是一项繁重的操作（Geometry 首先转换为DirectGeometry，然后才能转换为BufferGeometry）。如果您能更准确地解释您要达到的目标，我们可能会找到解决方案

标签： javascript memory-leaks three.js

【解决方案1】：

我已经找到并解决了这个问题。这不是 three.js 的内存泄漏，而是我的内存泄漏。

我正在创建一个Geometry 并允许自己克隆它，对克隆进行修改，然后将其合并回原始文件。我没有意识到，当我完成克隆的几何图形时，我应该调用geometry.dispose()。所以，我基本上是在每一帧都克隆几何图形，这就解释了巨大的内存使用量。

我已通过将Geometry 转换为BufferGeometry 并在完成后对几何图形调用geometry.dispose() 来解决我的问题。我现在有了预期的内存使用情况。

【讨论】：