WebGL performance in G6 V5

[rafaelvanbelle]

I tried to use the webgl renderer (followed instructions published here) instead of the default canvas renderer in a small example from the examples section Original example.
Codesandbox

import { Graph } from '@antv/g6';
import { Renderer as WebGLRenderer } from '@antv/g-webgl';

fetch('https://assets.antv.antgroup.com/g6/cluster.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      data,
      node: {
        style: {
          labelText: (d) => d.id,
          ports: [],
        },
        palette: {
          type: 'group',
          field: 'cluster',
        },
      },
      layout: {
        type: 'force',
        linkDistance: 50,
        clustering: true,
        nodeClusterBy: 'cluster',
        clusterNodeStrength: 70,
      },
      behaviors: ['zoom-canvas', 'drag-canvas'],
      renderer: () => new WebGLRenderer(),
    });

    graph.render();
  });

I expected the webgl renderer to be faster and smoother than the default canvas renderer.
Instead, webgl turns out to be laggy and nodes seem to disappear while the graph is animated.

Am I doing something wrong?
Or is there an issue with the @antv/g-webgl renderer?

[Aarebecca]

In fact, there are currently some issues with the WebGL renderer that make it even less performant than Canvas in some cases, which will be optimized in the future