antvG6大量节点渲染优化方案

视口裁剪（Viewport Clipping）

计算可视区坐标

需要与 drag-canvas、zoom-canvas 或 scroll-canvas 等视口操作行为配合使用

获取所有节点，判断是否在区域内部

设置节点可见性

经过测试，7000左右的图形也能很快设置完成

再卡，就直接换webgl渲染引擎 有GPU级别的视口裁剪，还有视口裁剪的节点过滤算法

进入 3D 世界 | G - 一个灵活的可视化渲染引擎 (antgroup.com)

import { Renderer } from '@antv/g-webgl';
import { Plugin as Plugin3D } from '@antv/g-plugin-3d';
const renderer = new Renderer();
renderer.registerPlugin(new Plugin3D());
const canvas = new Canvas({
    container: 'container',
    width: 600,
    height: 500,
    renderer,
});

视口裁剪判断isInViewport

this.gl.enable(this.gl.SCISSOR_TEST);

this.gl.scissor(0, 0, width, height);

this.gl.disable(this.gl.SCISSOR_TEST); packages/core/src/Render/WebGl2DRender.ts · yuyang/webgl2d - 码云 - 开源中国 (gitee.com)