feat: axis & grid support 3D

__tests__/integration/canvas.ts

@@ -1,8 +1,8 @@
+import * as fs from 'fs';
 import type { DisplayObject } from '@antv/g';
 import { Canvas, CanvasEvent } from '@antv/g';
 import { Renderer } from '@antv/g-canvas';
 import { createCanvas } from 'canvas';
-import * as fs from 'fs';
 import pixelmatch from 'pixelmatch';
 import { PNG } from 'pngjs';
 

__tests__/integration/components/axis/axis-linear-basis-z.ts

@@ -0,0 +1,137 @@
+import { Group } from '@antv/g';
+import { Axis } from '../../../../src/ui/axis';
+
+export const AxisLinearBasisZ = () => {
+  const group = new Group({
+    style: {
+      width: 650,
+      height: 80,
+    },
+  });
+
+  const zAxis = new Axis({
+    style: {
+      gridLength: 300,
+      gridDirection: 'negative',
+      gridLineWidth: 2,
+      gridLineDash: [0],
+      data: new Array(10).fill(0).map((_, i, arr) => ({ value: i / (arr.length - 1), label: '' })),
+      labelFormatter: (a, b) => b,
+      startPos: [50, 350],
+      endPos: [350, 350],
+      tickLength: 4,
+      type: 'linear',
+      tickLineWidth: 2,
+      labelSpacing: 4,
+      /**
+       * enable billboard effect
+       */
+      tickIsBillboard: true,
+      lineIsBillboard: true,
+      labelIsBillboard: true,
+      titleIsBillboard: true,
+      gridIsBillboard: true,
+      titleText: 'zAxis',
+      titlePosition: 'bottom',
+    },
+  });
+  zAxis.setOrigin(50, 50, 0);
+  zAxis.rotate(0, 90, 0);
+  group.appendChild(zAxis);
+
+  const yAxis = new Axis({
+    style: {
+      gridLength: 300,
+      gridDirection: 'positive',
+      gridLineWidth: 2,
+      gridLineDash: [0],
+      data: new Array(10).fill(0).map((_, i, arr) => ({ value: i / (arr.length - 1), label: '' })),
+      labelFormatter: (a, b) => b,
+      startPos: [50, 350],
+      endPos: [50, 50],
+      tickLength: 4,
+      type: 'linear',
+      tickLineWidth: 2,
+      tickDirection: 'negative',
+      showLabel: false,
+      showTitle: false,
+      /**
+       * enable billboard effect
+       */
+      tickIsBillboard: true,
+      lineIsBillboard: true,
+      labelIsBillboard: true,
+      titleIsBillboard: true,
+      gridIsBillboard: true,
+      titleBillboardRotation: -Math.PI / 2,
+    },
+  });
+  yAxis.setOrigin(50, 50, 0);
+  yAxis.rotate(0, 90, 0);
+  group.appendChild(yAxis);
+
+  group.appendChild(
+    new Axis({
+      style: {
+        gridLength: 300,
+        gridDirection: 'positive',
+        gridLineWidth: 2,
+        gridLineDash: [0],
+        data: new Array(10).fill(0).map((_, i, arr) => ({ value: i / (arr.length - 1), label: '' })),
+        labelFormatter: (a, b) => b,
+        startPos: [50, 350],
+        endPos: [50, 50],
+        tickLength: 4,
+        type: 'linear',
+        tickLineWidth: 2,
+        labelSpacing: 8,
+        tickDirection: 'negative',
+        labelDirection: 'negative',
+        /**
+         * enable billboard effect
+         */
+        tickIsBillboard: true,
+        lineIsBillboard: true,
+        labelIsBillboard: true,
+        titleIsBillboard: true,
+        gridIsBillboard: true,
+        titlePosition: 'left',
+        titleText: 'yAxis',
+        titleBillboardRotation: -Math.PI / 2,
+      },
+    })
+  );
+
+  group.appendChild(
+    new Axis({
+      style: {
+        gridLength: 300,
+        gridDirection: 'negative',
+        gridLineWidth: 2,
+        gridLineDash: [0],
+        data: new Array(10).fill(0).map((_, i, arr) => ({ value: i / (arr.length - 1), label: '' })),
+        labelFormatter: (a, b) => b,
+        startPos: [50, 350],
+        endPos: [350, 350],
+        tickLength: 4,
+        type: 'linear',
+        tickLineWidth: 2,
+        labelSpacing: 4,
+        /**
+         * enable billboard effect
+         */
+        tickIsBillboard: true,
+        lineIsBillboard: true,
+        labelIsBillboard: true,
+        titleIsBillboard: true,
+        gridIsBillboard: true,
+        titlePosition: 'bottom',
+        titleText: 'xAxis',
+      },
+    })
+  );
+
+  return group;
+};
+
+AxisLinearBasisZ.tags = ['笛卡尔坐标系', '截断', '水平', '正向'];

__tests__/integration/components/axis/index.ts

@@ -6,6 +6,7 @@ export { AxisLinearBasis5 } from './axis-linear-basis-5';
 export { AxisLinearBasis6 } from './axis-linear-basis-6';
 export { AxisLinearBasis7 } from './axis-linear-basis-7';
 export { AxisLinearBasis8 } from './axis-linear-basis-8';
+export { AxisLinearBasisZ } from './axis-linear-basis-z';
 export { AxisLinearCustomTick } from './axis-linear-custom-tick';
 export { AxisLinearLabel } from './axis-linear-label';
 export { AxisLinearVertical } from './axis-linear-vertical';

__tests__/integration/main.tsx

@@ -1,6 +1,8 @@
-import { Canvas, CanvasEvent, type DisplayObject } from '@antv/g';
+import { CameraType, Canvas, CanvasEvent, type DisplayObject } from '@antv/g';
 import { Renderer as CanvasRenderer } from '@antv/g-canvas';
 import { Renderer as SVGRenderer } from '@antv/g-svg';
+import { Renderer as WebGLRenderer } from '@antv/g-webgl';
+import { Plugin as ControlPlugin } from '@antv/g-plugin-control';
 import { Select, Tag } from 'antd';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -15,7 +17,9 @@ const casesName = Object.keys(cases);
 const renderers = {
   svg: new SVGRenderer(),
   canvas: new CanvasRenderer(),
+  webgl: new WebGLRenderer(),
 } as const;
+renderers.webgl.registerPlugin(new ControlPlugin());
 
 type Renderer = keyof typeof renderers;
 
@@ -109,6 +113,8 @@ const View: React.FC = () => {
     });
     canvasRef.current = canvas;
 
+    canvas.getCamera().setType(CameraType.ORBITING);
+
     connectToPlugins(canvas);
 
     window.addEventListener('keydown', onKeyDown);
@@ -145,6 +151,7 @@ const View: React.FC = () => {
       <Select value={renderer} onSelect={setRenderer} style={{ width: 140, margin: 10 }}>
         <Option value="svg">svg</Option>
         <Option value="canvas">canvas</Option>
+        <Option value="webgl">webgl</Option>
       </Select>
       <span>
         {tags.map((tag) => (

__tests__/performance/server.ts

@@ -1,8 +1,8 @@
 import fs from 'fs';
-import cors from 'cors';
 import path from 'path';
-import express from 'express';
 import util from 'util';
+import cors from 'cors';
+import express from 'express';
 
 const exec = util.promisify(require('child_process').exec);
 

package.json

@@ -56,6 +56,8 @@
     "@antv/g": "^5.14.1",
     "@antv/g-canvas": "^1.9.18",
     "@antv/g-svg": "^1.8.27",
+    "@antv/g-webgl": "^1.9.6",
+    "@antv/g-plugin-control": "^1.9.6",
     "@babel/plugin-proposal-decorators": "^7.20.5",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",

src/ui/grid/index.ts

@@ -82,37 +82,44 @@ function renderGridLine(
   attr: GridStyleProps,
   style: GridStyle
 ) {
-  const { animate } = attr;
-  const lines = data.map((item, idx) => ({
-    id: item.id || `grid-line-${idx}`,
-    path: getLinePath(item.points, attr),
-  }));
+  const { animate, isBillboard } = attr;
+  const lines = data.map((item, idx) => {
+    return {
+      id: item.id || `grid-line-${idx}`,
+      path: getLinePath(item.points, attr),
+    };
+  });
   return container
     .selectAll(CLASS_NAMES.line.class)
     .data(lines, (d) => d.id)
     .join(
       (enter) =>
         enter.append('path').each(function (datum, index) {
-          const lineStyle = getCallbackValue(getPrimitiveAttributes({ path: datum.path, ...style }), [
-            datum,
-            index,
-            lines,
-          ]);
+          const lineStyle = getCallbackValue(
+            getPrimitiveAttributes({
+              path: datum.path,
+              ...style,
+            }),
+            [datum, index, lines]
+          );
           this.attr({
             class: CLASS_NAMES.line.name,
             stroke: '#D9D9D9',
             lineWidth: 1,
             lineDash: [4, 4],
+            isBillboard,
             ...lineStyle,
           });
         }),
       (update) =>
         update.transition(function (datum, index) {
-          const lineStyle = getCallbackValue(getPrimitiveAttributes({ path: datum.path, ...style }), [
-            datum,
-            index,
-            lines,
-          ]);
+          const lineStyle = getCallbackValue(
+            getPrimitiveAttributes({
+              path: datum.path,
+              ...style,
+            }),
+            [datum, index, lines]
+          );
           return transition(this, lineStyle, animate.update);
         }),
       (exit) =>

src/ui/grid/types.ts

@@ -17,6 +17,7 @@ export type GridStyleProps = GridStyle & {
   closed?: boolean;
   /** FillColors between lines. */
   areaFill?: string | string[] | null;
+  isBillboard?: boolean;
 };
 
 export type GridOptions = ComponentOptions<GridStyleProps>;

src/util/primitive.ts

@@ -21,6 +21,8 @@ export const PRIMILTIVE_ATTRIBUTES = [
   'increasedLineWidthForHitTesting',
   'innerHTML',
   'isBillboard',
+  'billboardRotation',
+  'isSizeAttenuation',
   'isClosed',
   'isOverflowing',
   'leading',