I have about 350 meshes on my scene and everything works fine.
However, when I add just 10 lines (360 meshes total) the browser tab crashes and comes back like once every 30-60 seconds.
I’m not doing anything crazy, just adding 10 straight black lines from point A to B using:
import { LineGeometry } from '../lines/LineGeometry.js';
import { LineMaterial } from '../lines/LineMaterial.js';
import { Line2 } from '../lines/Line2.js';
let points = [
new THREE.Vector3(0, 0, 0),
new THREE.Vector3(10, 0, 0),
];
let positions = [];
let divisions = 24;
const spline = new THREE.CatmullRomCurve3(points, false, 'catmullrom', 0.1);
const point = new THREE.Vector3();
for(let i = 0, l = divisions; i < l; i++){
const t = i / l;
spline.getPoint(t, point);
positions.push(point.x, point.y, point.z);
}
const geometry = new LineGeometry();
geometry.setPositions(positions);
let matLine = new LineMaterial({
color: 0xffffff,
linewidth: 0.01, // in world units with size attenuation, pixels otherwise
vertexColors: true, // also tried false and it works slightly better but RAM also goes to 15.8 GB and it crashes
//resolution: // to be set by renderer, eventually
dashed: false,
alphaToCoverage: true,
});
let line = new Line2(geometry, matLine);
So, I guess this is a bug/feedback to the developers of three.js that there doesn’t seem to exist any solution to draw lines of thickness bigger than 1 from point A to B.
My RAM goes immediately from regular 10 GB to 15.8 GB (100%) when these 10 lines are being rendered, CPU goes from 10% to 50%, fan turns on immediately (normally it’s quiet) and you can observe Intel GPU 0 crash from 50% to 0% on the second picture.