Deck.gl LineLayer vs react-three-fiber Line (drei) with large data.

[DmitryAgalakov]

What could be the reason for the performance loss in deck.gl compared to three.js? In the provided example, there is a 2.5x difference in the amount of input data. And judging by the screenshots below from DevTools, the difference in GPU memory consumption is 4x.

Threejs (react-three-fiber)

The points array contains 55,920 objects of type THREE.Vector3. This component renders 25 curves with 55,920 points each, resulting in a total of 1,398,000 points.

import { CameraControls, Line } from '@react-three/drei';
export function App() {
  return (
    <Canvas orthographic camera={{ near: 1000, far: 0.1 }} frameloop='demand'>
      {Array.from({ length: 25 }, (_, x) => (
        <group key={x} position={[x * 20, 0, 0]}>
          <Line points={points} color='hotpink' lineWidth={1} />
        </group>
      ))}
      <CameraControls />
    </Canvas>
  );
}

Deck.gl

The points array contains 559,200 objects of type {start: [number, number], end: [number, number]}. This represents 10 curves with 55,920 points each.

export function App() {
  const layers = [
    new LineLayer({
      id: 'line-layer',
      data: points,
      getSourcePosition: (d) => d.start,
      getTargetPosition: (d) => d.end,
      getColor: [255, 0, 0],
      getWidth: 1,
      pickable: true,
      widthUnits: 'pixels',
      widthMinPixels: 1,
      parameters: {
        depthTest: false,
      },
    }),
  ];

  return (
      <DeckGL
         viewState={viewport}
         controller={{ scrollZoom: false }}
         views={new OrthographicView({ id: 'ortho-view' })}
         layers={layers}
         width='100%'
         height='100%'
       />
  );
}

GPU: NVIDIA GeForce GT 710.