The "LineSegments" object suffered a 1000% performance worsening after version 0.117.0 (problem also present in r142)

Describe the bug

The performance of the LineSegments object has suffered a 1000% deterioration between version 0.117.0 and version 0.118.0. The performace degradation is present in all versions after 0.117.0. Even in the current version 0.142.0.

To Reproduce Create a LineSegments object with enough number of segments eg 400000, compare performance between version 0.117.0 and version 0.118.0.

Repeat the experiment with version 0.142.0

Steps to reproduce the behavior:

1. Open chrome
2. Go to release 0.118.0
3. Open Inspector
4. Go to performance tab
5. Start registration
6. Drag and zoom on canvas
7. Stop registration
8. Focus on gpu time frame
9. Go to release 0.117.0
10. Open Inspector
11. Go to performance tab
12. Start registration
13. Drag and zoom on canvas
14. Stop registration
15. Focus on gpu time frame
16. Compare point 8 and point 15

Code

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
});

renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('app').appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000000
);

camera.position.x = 40;
camera.position.y = 25;
camera.position.z = 50;

const controls = new OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = false;

const geometry = new THREE.BufferGeometry();
geometry.setFromPoints(generateSegmment());

const material = new THREE.LineBasicMaterial({});
material.color = new THREE.Color(0xff0000);

const object = new THREE.LineSegments(geometry, material);
object.frustumCulled = false;
object.matrixAutoUpdate = false;
object.updateMatrixWorld(true);

scene.add(object);

animate();

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

function generateSegmment(): Array<THREE.Vector3> {
  const segments: Array<THREE.Vector3> = [];

  let k = 0;
  for (let i = 0; i < 50000; i++) {
    const pointA: THREE.Vector3 = new THREE.Vector3(i, 0, i - k);
    const pointB: THREE.Vector3 = new THREE.Vector3(i, 0, i + 10);
    const pointC: THREE.Vector3 = new THREE.Vector3(i - 10 - k, 0, i - k);
    const pointD: THREE.Vector3 = new THREE.Vector3(i - 10 - k, 0, i + 10);
    const pointE: THREE.Vector3 = new THREE.Vector3(i, 0, i + 10);
    const pointF: THREE.Vector3 = new THREE.Vector3(i - 10 - k, 0, i + 10);
    const pointG: THREE.Vector3 = new THREE.Vector3(i, 0, i - k);
    const pointH: THREE.Vector3 = new THREE.Vector3(i - 10 - k, 0, i - k);
    k += 2;
    segments.push(
      pointA,
      pointB,
      pointC,
      pointD,
      pointE,
      pointF,
      pointG,
      pointH
    );
  }

  return segments;
}

Live example

• release 0.117.0
• release 0.118.0

Expected behavior

Have the same performance as version 0.117.0

Screenshots

Please see gpu time 0.117.0

0.118.0

Platform:

• Device: [Desktop]
• OS: [MacOS]
• Browser: [Chrome]
• Three.js version: [r118, r119,r120,r121,r122,r123,r124,r125,r126,r140,r141,r142]

[Mugen87]

We should report this to the Chromium, I think.

https://bugs.chromium.org/p/chromium/issues/detail?id=1245448

[LeviPesin]

Just to confirm - @giuseppeLeggero are you getting this regression on Chrome >=100 on MacOS? Do you get the same regression on other browsers/Chrome 99/other OSes?