Низкая производительность DeckGL при отрисовке линий (LineLayer), в сравнении с react-three-fiber (Line from drei)
В чём может быть причина потери производительности у deckgl, по сравнению с threejs? В представленном примере разница в количестве входных данных в 2,5 раза. И судя по скринам ниже, из devtools, разница в потреблении памяти GPU в 4 раза.
Для отслеживания fps, использую devtools (галочка Frame Rendering Stats на вкладке Rendering).
Threejs (react-three-fiber)
Массив points содержит 55 920 объектов типа THREE.Vector3. Этот компонент рендерит 25 кривых по 55 920 точек => всего 1 398 000.
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>
);
}
DeckGL
Массив points содержит 559 200 объектов типа {start: [number, number], end: [number, number]}. Это 10 кривых по 55 920 точек.
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%'
/>
);
}

