Низкая производительность 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%'
       />
  );
}

введите сюда описание изображения


Ответы (0 шт):