Memory Leak in LineGeometry

Describe the bug

Calling the setPositions function of LineGeometry or LineSegmentsGeometry multiple times results in a memory leak that can crash the application. This happens because every time its called it creates a new Float32Array, InstancedInterleavedBuffer and two InterleavedBufferAttribute, instead of reusing the old ones.

To Reproduce

Steps to reproduce the behavior:

1. Create a scene with ~400 Line2s
2. During every frame, call setPositions on their geometry to update them
3. Let it run for some seconds
4. The entire browser freezes and the WebGL context gets lots

Code

import * as THREE from "https://unpkg.com/three/build/three.module.js";
import { Line2 } from "https://unpkg.com/three/examples/jsm/lines/Line2.js";

var lines, renderer, scene, camera;

// Increase this number until it crashes (100 is enough for firefox)
const n = 5;

init();
animate();

function init() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(
    40,
    window.innerWidth / window.innerHeight,
    0.1,
    10000
  );
  camera.position.set(0, 0, 4);

  lines = new Array(n).fill(0).map(() => new Line2());
  lines.forEach((line) => scene.add(line));
}

function animate(t) {
  requestAnimationFrame(animate);

  lines.forEach((line, i) => {
    line.material.resolution.set(window.innerWidth, window.innerHeight);
    const x = Math.cos(t + i / 20) * 2;
    const y = Math.sin(t + i / 20) * 2;
    line.geometry.setPositions([x, y, 0, x * 2 * (i / n), y * 2 * (i / n), 0]);
  });
  renderer.render(scene, camera);
}

Live example

• jsfiddle-latest-release

Expected behavior

Not crash, reusing the same attributes.

Screenshots

Not necessary.

Platform:

• Device: [Desktop]
• OS: [MacOS]
• Browser: [Chrome, Firefox]
• Three.js version: [dev, r143]

[giulioz]

I did that in my solution, but still it seems an abstraction leak having to rely on mutating the buffers directly, when a method could do that for you.

Also I couldn’t find any info anywhere in the docs about the fact that “set” methods are intended to be called just once. What about calling it setInitialPositions or something like that, and adding a method updatePositions to do this without crashing the browser? I’m seeing a lot of code online that is calling setPositions every frame without knowing this detail, at least a comment could help.

For anyone interested, this is how I’ve done it:

const attributeStarts = line.geometry.getAttribute("instanceStart");
for (let i = 0; i < points.length - 3; i += 3) {
  attributeStarts.array[2 * i] = points[i];
  attributeStarts.array[2 * i + 1] = points[i + 1];
  attributeStarts.array[2 * i + 2] = points[i + 2];

  attributeStarts.array[2 * i + 3] = points[i + 3];
  attributeStarts.array[2 * i + 4] = points[i + 4];
  attributeStarts.array[2 * i + 5] = points[i + 5];
}
attributeStarts.needsUpdate = true;
line.geometry.computeBoundingBox();
line.geometry.computeBoundingSphere();

[Mugen87]

Related #21488