perf: avoid unnecessary transformation matrix calculations and canvas…

… context matrix updates
antvis · Nov 1, 2024 · 8157ad0 · 8157ad0
1 parent 7c6f3d3
commit 8157ad0
Show file tree

Hide file tree

Showing 9 changed files with 221 additions and 64 deletions.
diff --git a/__tests__/demos/perf/attr-update.ts b/__tests__/demos/perf/attr-update.ts
@@ -1,8 +1,9 @@
+import * as lil from 'lil-gui';
 import { Rect, Group, CanvasEvent } from '@antv/g';
 import type { Canvas } from '@antv/g';
 
-export async function attrUpdate(context: { canvas: Canvas }) {
-  const { canvas } = context;
+export async function attrUpdate(context: { canvas: Canvas; gui: lil.GUI }) {
+  const { canvas, gui } = context;
   console.log(canvas);
 
   await canvas.ready;
@@ -85,4 +86,20 @@ export async function attrUpdate(context: { canvas: Canvas }) {
     },
     { once: true },
   );
+
+  // GUI
+  canvas.getConfig().renderer.getConfig().enableRenderingOptimization = true;
+
+  gui
+    .add(
+      {
+        enableRenderingOptimization: canvas.getConfig().renderer.getConfig()
+          .enableRenderingOptimization,
+      },
+      'enableRenderingOptimization',
+    )
+    .onChange((result) => {
+      canvas.getConfig().renderer.getConfig().enableRenderingOptimization =
+        result;
+    });
 }
diff --git a/__tests__/index.html b/__tests__/index.html
@@ -60,8 +60,6 @@
     </style>
   </head>
   <body>
-    <script src="https://unpkg.com/[email protected]/dist/fpsmeter.min.js"></script>
-
     <div id="app"></div>
     <script type="module" src="./main.ts"></script>
   </body>

diff --git a/__tests__/main.ts b/__tests__/main.ts
@@ -1,4 +1,4 @@
-// import Stats from 'stats.js';
+import Stats from 'stats.js';
 import * as lil from 'lil-gui';
 import '@antv/g-camera-api';
 import { Canvas, CanvasEvent, runtime } from '@antv/g';
@@ -59,7 +59,7 @@ const renderOptions = (keyword = '') => {
 
 // Select for chart.
 const selectChart = document.createElement('select') as HTMLSelectElement;
-selectChart.style.margin = '1em 1em 1em 120px';
+selectChart.style.margin = '1em 1em 1em 96px';
 renderOptions();
 selectChart.onchange = () => {
   const { value } = selectChart;
@@ -227,35 +227,24 @@ function createSpecRender(object) {
       window.__g_instances__ = [canvas];
 
       // stats
-      // const stats = new Stats();
-      // stats.showPanel(0);
-      // const $stats = stats.dom;
-      // $stats.style.position = 'absolute';
-      // $stats.style.left = '4px';
-      // $stats.style.top = '4px';
-      // app.appendChild($stats);
+      const stats = new Stats();
+      stats.showPanel(0);
+      const $stats = stats.dom;
+      $stats.style.position = 'fixed';
+      $stats.style.left = '2px';
+      $stats.style.top = '2px';
+      // document.body.appendChild($stats);
 
       // GUI
       const gui = new lil.GUI({ autoPlace: false });
       $div.appendChild(gui.domElement);
 
-      // @see https://github.com/Darsain/fpsmeter/wiki/Options
-      const fpsMeter = new window.FPSMeter({
-        theme: 'light',
-        heat: 1,
-        graph: 1,
-      });
-
-      await generate({ canvas, renderer, container: $div, gui, fpsMeter });
+      await generate({ canvas, renderer, container: $div, gui });
 
       canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
-        fpsMeter.tick();
+        stats.update();
       });
 
-      // canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
-      //   stats.update();
-      // });
-
       if (
         selectRenderer.value === 'canvas' &&
         renderer.getConfig().enableDirtyRectangleRendering &&

diff --git a/packages/g-lite/src/AbstractRenderer.ts b/packages/g-lite/src/AbstractRenderer.ts
@@ -88,6 +88,7 @@ export class AbstractRenderer implements IRenderer {
       enableDirtyRectangleRendering: true,
       enableDirtyRectangleRenderingDebug: false,
       enableSizeAttenuation: true,
+      enableRenderingOptimization: false,
       ...config,
     };
   }

diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts
@@ -122,9 +122,6 @@ export class Canvas extends EventTarget implements ICanvas {
    */
   isMouseEvent: (event: InteractivePointerEvent) => event is MouseEvent;
 
-  /**
-   * double click speed (ms), default is 200ms
-   */
   dblClickSpeed?: CanvasConfig['dblClickSpeed'];
 
   /**

diff --git a/packages/g-lite/src/services/RenderingService.ts b/packages/g-lite/src/services/RenderingService.ts
@@ -134,10 +134,13 @@ export class RenderingService {
       this.inited = true;
       callback();
     } else {
-      this.hooks.initAsync.promise().then(() => {
-        this.inited = true;
-        callback();
-      });
+      this.hooks.initAsync
+        .promise()
+        .then(() => {
+          this.inited = true;
+          callback();
+        })
+        .catch((err) => {});
     }
   }
 

diff --git a/packages/g-lite/src/types.ts b/packages/g-lite/src/types.ts
@@ -430,6 +430,13 @@ export interface RendererConfig {
    */
   enableSizeAttenuation: boolean;
 
+  /**
+   * Enable rendering optimization
+   *
+   * @default false
+   */
+  enableRenderingOptimization: boolean;
+
   // plugins:
 }
 
@@ -545,6 +552,10 @@ export interface CanvasConfig {
   supportsTouchEvents?: boolean;
   isTouchEvent?: (event: InteractivePointerEvent) => event is TouchEvent;
   isMouseEvent?: (event: InteractivePointerEvent) => event is MouseEvent;
+
+  /**
+   * double click speed (ms), default is 200ms
+   */
   dblClickSpeed?: number;
 
   /**