diff --git a/packages/g-camera-api/CHANGELOG.md b/packages/g-camera-api/CHANGELOG.md
index 7f5432621..06e894b5e 100644
--- a/packages/g-camera-api/CHANGELOG.md
+++ b/packages/g-camera-api/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-camera-api
 
+## 1.2.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.2.7
 
 ### Patch Changes
diff --git a/packages/g-camera-api/package.json b/packages/g-camera-api/package.json
index 87775efac..9cb5ae901 100644
--- a/packages/g-camera-api/package.json
+++ b/packages/g-camera-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-camera-api",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "A simple implementation of Camera API.",
   "keywords": [
     "antv",
diff --git a/packages/g-canvas/CHANGELOG.md b/packages/g-canvas/CHANGELOG.md
index abbe01bb7..8e71a1b73 100644
--- a/packages/g-canvas/CHANGELOG.md
+++ b/packages/g-canvas/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @antv/g-canvas
 
+## 1.11.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-canvas-path-generator@1.3.8
+    -   @antv/g-plugin-canvas-picker@1.10.8
+    -   @antv/g-plugin-canvas-renderer@1.9.8
+    -   @antv/g-plugin-dom-interaction@1.9.8
+    -   @antv/g-plugin-html-renderer@1.9.9
+    -   @antv/g-plugin-image-loader@1.3.8
+
 ## 1.11.8
 
 ### Patch Changes
diff --git a/packages/g-canvas/package.json b/packages/g-canvas/package.json
index 9065e2761..e99eaf555 100644
--- a/packages/g-canvas/package.json
+++ b/packages/g-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvas",
-  "version": "1.11.8",
+  "version": "1.11.9",
   "description": "A renderer implemented by Canvas 2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-canvaskit/CHANGELOG.md b/packages/g-canvaskit/CHANGELOG.md
index e211176b4..128579c18 100644
--- a/packages/g-canvaskit/CHANGELOG.md
+++ b/packages/g-canvaskit/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @antv/g-canvaskit
 
+## 0.10.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-canvas-path-generator@1.3.8
+    -   @antv/g-plugin-canvas-picker@1.10.8
+    -   @antv/g-plugin-canvaskit-renderer@1.3.8
+    -   @antv/g-plugin-dom-interaction@1.9.8
+    -   @antv/g-plugin-html-renderer@1.9.9
+    -   @antv/g-plugin-image-loader@1.3.8
+
 ## 0.10.8
 
 ### Patch Changes
diff --git a/packages/g-canvaskit/package.json b/packages/g-canvaskit/package.json
index dc629d3c2..3b04841be 100644
--- a/packages/g-canvaskit/package.json
+++ b/packages/g-canvaskit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-canvaskit",
-  "version": "0.10.8",
+  "version": "0.10.9",
   "description": "A renderer implemented by CanvasKit",
   "keywords": [
     "antv",
diff --git a/packages/g-components/CHANGELOG.md b/packages/g-components/CHANGELOG.md
index e0057d580..9a76a5e37 100644
--- a/packages/g-components/CHANGELOG.md
+++ b/packages/g-components/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-components
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-components/package.json b/packages/g-components/package.json
index 2e7798351..fb8e09003 100644
--- a/packages/g-components/package.json
+++ b/packages/g-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-components",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "Components for g",
   "keywords": [
     "antv",
diff --git a/packages/g-dom-mutation-observer-api/CHANGELOG.md b/packages/g-dom-mutation-observer-api/CHANGELOG.md
index 87326ad5d..3f2ade022 100644
--- a/packages/g-dom-mutation-observer-api/CHANGELOG.md
+++ b/packages/g-dom-mutation-observer-api/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-dom-mutation-observer-api
 
+## 1.2.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.2.7
 
 ### Patch Changes
diff --git a/packages/g-dom-mutation-observer-api/package.json b/packages/g-dom-mutation-observer-api/package.json
index 7731470b2..f79b9ab4a 100644
--- a/packages/g-dom-mutation-observer-api/package.json
+++ b/packages/g-dom-mutation-observer-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-dom-mutation-observer-api",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "A simple implementation of DOM MutationObserver API.",
   "keywords": [
     "antv",
diff --git a/packages/g-gesture/CHANGELOG.md b/packages/g-gesture/CHANGELOG.md
index 69b2b65ed..6a7547970 100644
--- a/packages/g-gesture/CHANGELOG.md
+++ b/packages/g-gesture/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-gesture
 
+## 2.2.10
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 2.2.9
 
 ### Patch Changes
diff --git a/packages/g-gesture/package.json b/packages/g-gesture/package.json
index a6660abe1..906edd803 100644
--- a/packages/g-gesture/package.json
+++ b/packages/g-gesture/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-gesture",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "description": "G Gesture",
   "keywords": [
     "antv",
diff --git a/packages/g-image-exporter/CHANGELOG.md b/packages/g-image-exporter/CHANGELOG.md
index b889e49a1..1b13a3d65 100644
--- a/packages/g-image-exporter/CHANGELOG.md
+++ b/packages/g-image-exporter/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-image-exporter
 
+## 0.7.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 0.7.7
 
 ### Patch Changes
diff --git a/packages/g-image-exporter/package.json b/packages/g-image-exporter/package.json
index bbf5e40b4..777ee4fe3 100644
--- a/packages/g-image-exporter/package.json
+++ b/packages/g-image-exporter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-image-exporter",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "A image exporter for G using DOM API",
   "keywords": [
     "antv",
diff --git a/packages/g-lite/CHANGELOG.md b/packages/g-lite/CHANGELOG.md
index fd3178bd5..8cd5480d8 100644
--- a/packages/g-lite/CHANGELOG.md
+++ b/packages/g-lite/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-lite
 
+## 1.2.8
+
+### Patch Changes
+
+-   3d4f5da7: Support size attenuation.
+-   3d4f5da7: Polyline should support 3D points.
+-   3d4f5da7: Support rotation when applying billboard effect.
+
 ## 1.2.7
 
 ### Patch Changes
diff --git a/packages/g-lite/package.json b/packages/g-lite/package.json
index 999424398..8b80bc62e 100644
--- a/packages/g-lite/package.json
+++ b/packages/g-lite/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lite",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",
diff --git a/packages/g-lite/src/css/properties/CSSPropertyPoints.ts b/packages/g-lite/src/css/properties/CSSPropertyPoints.ts
index 33fe469c2..f7d60e1f8 100644
--- a/packages/g-lite/src/css/properties/CSSPropertyPoints.ts
+++ b/packages/g-lite/src/css/properties/CSSPropertyPoints.ts
@@ -9,12 +9,12 @@ export class CSSPropertyPoints
     Partial<
       CSSProperty<
         {
-          points: [number, number][];
+          points: [number, number, number?][];
           totalLength: number;
           segments: [number, number][];
         },
         {
-          points: [number, number][];
+          points: [number, number, number?][];
           totalLength: number;
           segments: [number, number][];
         }
diff --git a/packages/g-lite/src/display-objects/Image.ts b/packages/g-lite/src/display-objects/Image.ts
index cbfa088e0..3fff9cb55 100644
--- a/packages/g-lite/src/display-objects/Image.ts
+++ b/packages/g-lite/src/display-objects/Image.ts
@@ -13,6 +13,8 @@ export interface ImageStyleProps extends BaseStyleProps {
   width?: number | string;
   height?: number | string;
   isBillboard?: boolean;
+  billboardRotation?: number;
+  isSizeAttenuation?: boolean;
 }
 export interface ParsedImageStyleProps extends ParsedBaseStyleProps {
   x: number;
@@ -23,6 +25,8 @@ export interface ParsedImageStyleProps extends ParsedBaseStyleProps {
   width?: number;
   height?: number;
   isBillboard?: boolean;
+  billboardRotation?: number;
+  isSizeAttenuation?: boolean;
 }
 export class Image extends DisplayObject<
   ImageStyleProps,
diff --git a/packages/g-lite/src/display-objects/Polygon.ts b/packages/g-lite/src/display-objects/Polygon.ts
index 2fe1d0bd6..667b90f24 100644
--- a/packages/g-lite/src/display-objects/Polygon.ts
+++ b/packages/g-lite/src/display-objects/Polygon.ts
@@ -5,7 +5,7 @@ import { Shape } from '../types';
 import { DisplayObject, isDisplayObject } from './DisplayObject';
 
 export interface PolygonStyleProps extends BaseStyleProps {
-  points: [number, number][];
+  points: [number, number, number?][];
   /**
    * marker will be positioned at the first point
    */
@@ -31,7 +31,7 @@ export interface PolygonStyleProps extends BaseStyleProps {
 }
 export interface ParsedPolygonStyleProps extends ParsedBaseStyleProps {
   points: {
-    points: [number, number][];
+    points: [number, number, number?][];
     segments: [number, number][];
     totalLength: number;
   };
diff --git a/packages/g-lite/src/display-objects/Polyline.ts b/packages/g-lite/src/display-objects/Polyline.ts
index ea002dfda..201c4e952 100644
--- a/packages/g-lite/src/display-objects/Polyline.ts
+++ b/packages/g-lite/src/display-objects/Polyline.ts
@@ -9,7 +9,7 @@ import type { DisplayObject } from './DisplayObject';
 import { Polygon } from './Polygon';
 
 export interface PolylineStyleProps extends BaseStyleProps {
-  points: [number, number][];
+  points: [number, number, number?][];
   /**
    * marker will be positioned at the first point
    */
@@ -34,7 +34,7 @@ export interface PolylineStyleProps extends BaseStyleProps {
 }
 export interface ParsedPolylineStyleProps extends ParsedBaseStyleProps {
   points: {
-    points: [number, number][];
+    points: [number, number, number?][];
     segments: [number, number][];
     totalLength: number;
   };
diff --git a/packages/g-lite/src/display-objects/Text.ts b/packages/g-lite/src/display-objects/Text.ts
index d27716ec1..ecdcfbb94 100644
--- a/packages/g-lite/src/display-objects/Text.ts
+++ b/packages/g-lite/src/display-objects/Text.ts
@@ -23,10 +23,15 @@ export interface TextStyleProps extends BaseStyleProps {
    */
   isBillboard?: boolean;
 
+  /**
+   * The rotation of the billboard in radians.
+   */
+  billboardRotation?: number;
+
   /**
    * Whether the size of the sprite is attenuated by the camera depth. (Perspective camera only.)
    */
-  sizeAttenuation?: boolean;
+  isSizeAttenuation?: boolean;
 
   text: number | string;
 
@@ -194,7 +199,8 @@ export interface ParsedTextStyleProps extends ParsedBaseStyleProps {
   y: number;
   z?: number;
   isBillboard?: boolean;
-  sizeAttenuation?: boolean;
+  billboardRotation?: number;
+  isSizeAttenuation?: boolean;
   text: string;
   textAlign?: 'start' | 'center' | 'middle' | 'end' | 'left' | 'right';
   textBaseline?:
@@ -268,8 +274,6 @@ export class Text extends DisplayObject<TextStyleProps, ParsedTextStyleProps> {
             leading: 0,
             dx: '',
             dy: '',
-            isBillboard: false,
-            sizeAttenuation: true,
             ...style,
           }
         : {
@@ -295,8 +299,6 @@ export class Text extends DisplayObject<TextStyleProps, ParsedTextStyleProps> {
             leading: 0,
             dx: 0,
             dy: 0,
-            isBillboard: false,
-            sizeAttenuation: true,
           },
       ...rest,
     });
diff --git a/packages/g-lite/src/utils/path.ts b/packages/g-lite/src/utils/path.ts
index d3f6cb2ca..86cca1e18 100644
--- a/packages/g-lite/src/utils/path.ts
+++ b/packages/g-lite/src/utils/path.ts
@@ -786,7 +786,7 @@ function ellipseToCommands(
 }
 
 function polygonToCommands(
-  points: [number, number][],
+  points: [number, number, number?][],
   closed: boolean,
 ): AbsoluteArray {
   const result = points.map((point, i) => {
diff --git a/packages/g-lottie-player/CHANGELOG.md b/packages/g-lottie-player/CHANGELOG.md
index b4e1c531c..fd12c693b 100644
--- a/packages/g-lottie-player/CHANGELOG.md
+++ b/packages/g-lottie-player/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-lottie-player
 
+## 0.2.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 0.2.7
 
 ### Patch Changes
diff --git a/packages/g-lottie-player/package.json b/packages/g-lottie-player/package.json
index baadaeb05..31f3f1ce1 100644
--- a/packages/g-lottie-player/package.json
+++ b/packages/g-lottie-player/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-lottie-player",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "A lottie player for G",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-canvas-element/CHANGELOG.md b/packages/g-mobile-canvas-element/CHANGELOG.md
index f27c296c9..1149a541d 100644
--- a/packages/g-mobile-canvas-element/CHANGELOG.md
+++ b/packages/g-mobile-canvas-element/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-mobile-canvas-element
 
+## 0.8.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 0.8.7
 
 ### Patch Changes
diff --git a/packages/g-mobile-canvas-element/package.json b/packages/g-mobile-canvas-element/package.json
index 9ca3698f5..63b660e7f 100644
--- a/packages/g-mobile-canvas-element/package.json
+++ b/packages/g-mobile-canvas-element/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-canvas-element",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "Create a CanvasLike element from existed context in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-canvas/CHANGELOG.md b/packages/g-mobile-canvas/CHANGELOG.md
index 8a83ed311..81c429a84 100644
--- a/packages/g-mobile-canvas/CHANGELOG.md
+++ b/packages/g-mobile-canvas/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @antv/g-mobile-canvas
 
+## 0.10.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-canvas-path-generator@1.3.8
+    -   @antv/g-plugin-canvas-picker@1.10.8
+    -   @antv/g-plugin-canvas-renderer@1.9.8
+    -   @antv/g-plugin-dragndrop@1.8.8
+    -   @antv/g-plugin-image-loader@1.3.8
+    -   @antv/g-plugin-mobile-interaction@0.9.8
+
 ## 0.10.7
 
 ### Patch Changes
diff --git a/packages/g-mobile-canvas/package.json b/packages/g-mobile-canvas/package.json
index e43b00b52..963db6fd1 100644
--- a/packages/g-mobile-canvas/package.json
+++ b/packages/g-mobile-canvas/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-canvas",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "description": "A renderer implemented with Canvas2D API in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-svg/CHANGELOG.md b/packages/g-mobile-svg/CHANGELOG.md
index 0d8fd71e7..648d8fd15 100644
--- a/packages/g-mobile-svg/CHANGELOG.md
+++ b/packages/g-mobile-svg/CHANGELOG.md
@@ -1,5 +1,18 @@
 # @antv/g-mobile-svg
 
+## 0.10.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-dragndrop@1.8.8
+    -   @antv/g-plugin-mobile-interaction@0.9.8
+    -   @antv/g-plugin-svg-picker@1.9.8
+    -   @antv/g-plugin-svg-renderer@1.10.8
+
 ## 0.10.7
 
 ### Patch Changes
diff --git a/packages/g-mobile-svg/package.json b/packages/g-mobile-svg/package.json
index 3b491fda5..8be93af31 100644
--- a/packages/g-mobile-svg/package.json
+++ b/packages/g-mobile-svg/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-svg",
-  "version": "0.10.7",
+  "version": "0.10.8",
   "description": "A renderer implemented by SVG in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-mobile-webgl/CHANGELOG.md b/packages/g-mobile-webgl/CHANGELOG.md
index ba35708a1..a6ebf6428 100644
--- a/packages/g-mobile-webgl/CHANGELOG.md
+++ b/packages/g-mobile-webgl/CHANGELOG.md
@@ -1,5 +1,20 @@
 # @antv/g-mobile-webgl
 
+## 0.9.11
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-plugin-device-renderer@1.9.10
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-webgl-device@1.9.10
+    -   @antv/g-plugin-dragndrop@1.8.8
+    -   @antv/g-plugin-html-renderer@1.9.9
+    -   @antv/g-plugin-image-loader@1.3.8
+    -   @antv/g-plugin-mobile-interaction@0.9.8
+
 ## 0.9.10
 
 ### Patch Changes
diff --git a/packages/g-mobile-webgl/package.json b/packages/g-mobile-webgl/package.json
index afeb3070e..cb22177a3 100644
--- a/packages/g-mobile-webgl/package.json
+++ b/packages/g-mobile-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-mobile-webgl",
-  "version": "0.9.10",
+  "version": "0.9.11",
   "description": "A renderer implemented by WebGL1/2 in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-pattern/CHANGELOG.md b/packages/g-pattern/CHANGELOG.md
index fa49947d2..d4641adb4 100644
--- a/packages/g-pattern/CHANGELOG.md
+++ b/packages/g-pattern/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-pattern
 
+## 1.2.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.2.7
 
 ### Patch Changes
diff --git a/packages/g-pattern/package.json b/packages/g-pattern/package.json
index 2044f6c49..061aeed07 100644
--- a/packages/g-pattern/package.json
+++ b/packages/g-pattern/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-pattern",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "A pattern libs for G",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-3d/CHANGELOG.md b/packages/g-plugin-3d/CHANGELOG.md
index 84fd874de..c3317f1ff 100644
--- a/packages/g-plugin-3d/CHANGELOG.md
+++ b/packages/g-plugin-3d/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @antv/g-plugin-3d
 
+## 1.9.10
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-plugin-device-renderer@1.9.10
+    -   @antv/g-shader-components@1.8.3
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.9
 
 ### Patch Changes
diff --git a/packages/g-plugin-3d/package.json b/packages/g-plugin-3d/package.json
index 73e8feae2..df8f52fdd 100644
--- a/packages/g-plugin-3d/package.json
+++ b/packages/g-plugin-3d/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-3d",
-  "version": "1.9.9",
+  "version": "1.9.10",
   "description": "Provide 3D extension for G",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-a11y/CHANGELOG.md b/packages/g-plugin-a11y/CHANGELOG.md
index 3c35669fe..a3438054a 100644
--- a/packages/g-plugin-a11y/CHANGELOG.md
+++ b/packages/g-plugin-a11y/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-a11y
 
+## 0.6.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 0.6.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-a11y/package.json b/packages/g-plugin-a11y/package.json
index 3d37542bf..011295337 100644
--- a/packages/g-plugin-a11y/package.json
+++ b/packages/g-plugin-a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-a11y",
-  "version": "0.6.7",
+  "version": "0.6.8",
   "description": "A G plugin for accessibility",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-annotation/CHANGELOG.md b/packages/g-plugin-annotation/CHANGELOG.md
index 628c2e3ad..30651f9d4 100644
--- a/packages/g-plugin-annotation/CHANGELOG.md
+++ b/packages/g-plugin-annotation/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-annotation
 
+## 0.4.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 0.4.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-annotation/package.json b/packages/g-plugin-annotation/package.json
index b845fd25a..cc8760930 100644
--- a/packages/g-plugin-annotation/package.json
+++ b/packages/g-plugin-annotation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-annotation",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "description": "A G plugin for annotation",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-box2d/CHANGELOG.md b/packages/g-plugin-box2d/CHANGELOG.md
index e12574fda..e8c3e9c68 100644
--- a/packages/g-plugin-box2d/CHANGELOG.md
+++ b/packages/g-plugin-box2d/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-box2d
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-box2d/package.json b/packages/g-plugin-box2d/package.json
index 324cfea6d..c1833e4e5 100644
--- a/packages/g-plugin-box2d/package.json
+++ b/packages/g-plugin-box2d/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-box2d",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin for Box2D",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvas-path-generator/CHANGELOG.md b/packages/g-plugin-canvas-path-generator/CHANGELOG.md
index 62c7df6d9..8d982b30e 100644
--- a/packages/g-plugin-canvas-path-generator/CHANGELOG.md
+++ b/packages/g-plugin-canvas-path-generator/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-canvas-path-generator
 
+## 1.3.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.3.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvas-path-generator/package.json b/packages/g-plugin-canvas-path-generator/package.json
index 960524dcf..41944087f 100644
--- a/packages/g-plugin-canvas-path-generator/package.json
+++ b/packages/g-plugin-canvas-path-generator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-path-generator",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "A G plugin of path generator with Canvas2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvas-picker/CHANGELOG.md b/packages/g-plugin-canvas-picker/CHANGELOG.md
index 3cb8112d9..c5d7b1fd9 100644
--- a/packages/g-plugin-canvas-picker/CHANGELOG.md
+++ b/packages/g-plugin-canvas-picker/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @antv/g-plugin-canvas-picker
 
+## 1.10.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-canvas-path-generator@1.3.8
+    -   @antv/g-plugin-canvas-renderer@1.9.8
+
 ## 1.10.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvas-picker/package.json b/packages/g-plugin-canvas-picker/package.json
index 16819f586..93ab91ec4 100644
--- a/packages/g-plugin-canvas-picker/package.json
+++ b/packages/g-plugin-canvas-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-picker",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "A G plugin for picking in canvas",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvas-renderer/CHANGELOG.md b/packages/g-plugin-canvas-renderer/CHANGELOG.md
index ef37c7bd1..eea48caff 100644
--- a/packages/g-plugin-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @antv/g-plugin-canvas-renderer
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-canvas-path-generator@1.3.8
+    -   @antv/g-plugin-image-loader@1.3.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvas-renderer/package.json b/packages/g-plugin-canvas-renderer/package.json
index 2dc97c6b3..d38bba06d 100644
--- a/packages/g-plugin-canvas-renderer/package.json
+++ b/packages/g-plugin-canvas-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvas-renderer",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin of renderer implementation with Canvas2D API",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
index b75f3a049..2069e27ef 100644
--- a/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
+++ b/packages/g-plugin-canvaskit-renderer/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-canvaskit-renderer
 
+## 1.3.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-image-loader@1.3.8
+
 ## 1.3.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-canvaskit-renderer/package.json b/packages/g-plugin-canvaskit-renderer/package.json
index 403f796e4..de3fcbc96 100644
--- a/packages/g-plugin-canvaskit-renderer/package.json
+++ b/packages/g-plugin-canvaskit-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-canvaskit-renderer",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "A G plugin of renderer implementation with CanvasKit",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-control/CHANGELOG.md b/packages/g-plugin-control/CHANGELOG.md
index 90b79fc7e..375798358 100644
--- a/packages/g-plugin-control/CHANGELOG.md
+++ b/packages/g-plugin-control/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-control
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-control/package.json b/packages/g-plugin-control/package.json
index ad86b567f..80b0942d7 100644
--- a/packages/g-plugin-control/package.json
+++ b/packages/g-plugin-control/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-control",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin for orbit control",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-css-select/CHANGELOG.md b/packages/g-plugin-css-select/CHANGELOG.md
index 94d6b8e88..b1d668bdb 100644
--- a/packages/g-plugin-css-select/CHANGELOG.md
+++ b/packages/g-plugin-css-select/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-css-select
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-css-select/package.json b/packages/g-plugin-css-select/package.json
index 3ea3b5f2e..ec933a687 100644
--- a/packages/g-plugin-css-select/package.json
+++ b/packages/g-plugin-css-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-css-select",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin for using CSS select syntax in query selector",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-device-renderer/CHANGELOG.md b/packages/g-plugin-device-renderer/CHANGELOG.md
index eb7f39a78..610b70875 100644
--- a/packages/g-plugin-device-renderer/CHANGELOG.md
+++ b/packages/g-plugin-device-renderer/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @antv/g-plugin-device-renderer
 
+## 1.9.10
+
+### Patch Changes
+
+-   3d4f5da7: Support size attenuation.
+-   3d4f5da7: Polyline should support 3D points.
+-   3d4f5da7: Support rotation when applying billboard effect.
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-shader-components@1.8.3
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-image-loader@1.3.8
+
 ## 1.9.9
 
 ### Patch Changes
diff --git a/packages/g-plugin-device-renderer/package.json b/packages/g-plugin-device-renderer/package.json
index 8abe294e3..9f1345d00 100644
--- a/packages/g-plugin-device-renderer/package.json
+++ b/packages/g-plugin-device-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-device-renderer",
-  "version": "1.9.9",
+  "version": "1.9.10",
   "description": "A G plugin of renderer implementation with GPUDevice",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/Image.ts b/packages/g-plugin-device-renderer/src/drawcalls/Image.ts
index 610c0963c..227871af0 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/Image.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/Image.ts
@@ -7,6 +7,15 @@ import {
 import { Format, VertexBufferFrequency } from '../platform';
 import frag from '../shader/image.frag';
 import vert from '../shader/image.vert';
+import { enumToObject } from '../utils';
+
+enum ImageVertexAttributeBufferIndex {
+  PACKED_STYLE = VertexAttributeBufferIndex.POSITION + 1,
+}
+
+enum ImageVertexAttributeLocation {
+  PACKED_STYLE3 = VertexAttributeLocation.MAX,
+}
 
 export class ImageDrawcall extends Instanced {
   shouldMerge(object: DisplayObject, index: number) {
@@ -29,6 +38,7 @@ export class ImageDrawcall extends Instanced {
 
     this.material.defines = {
       ...this.material.defines,
+      ...enumToObject(ImageVertexAttributeLocation),
     };
 
     this.material.vertexShader = vert;
@@ -45,27 +55,54 @@ export class ImageDrawcall extends Instanced {
     super.createGeometry(objects);
 
     const instanced: number[] = [];
+    const packedStyle: number[] = [];
     objects.forEach((object, i) => {
       const image = object as ImageShape;
-      const { width, height, z, isBillboard } = image.parsedStyle;
-      instanced.push(width, height, z, isBillboard ? 1 : 0);
+      const {
+        width,
+        height,
+        isBillboard,
+        billboardRotation,
+        isSizeAttenuation,
+      } = image.parsedStyle;
+      instanced.push(width, height);
+      packedStyle.push(
+        isBillboard ? 1 : 0,
+        billboardRotation ?? 0,
+        isSizeAttenuation ? 1 : 0,
+        0,
+      );
     });
 
     this.geometry.setIndexBuffer(new Uint32Array([0, 2, 1, 0, 3, 2]));
     this.geometry.vertexCount = 6;
     this.geometry.setVertexBuffer({
       bufferIndex: VertexAttributeBufferIndex.POSITION,
-      byteStride: 4 * 4,
+      byteStride: 4 * 2,
       frequency: VertexBufferFrequency.PerInstance,
       attributes: [
         {
-          format: Format.F32_RGBA,
+          format: Format.F32_RG,
           bufferByteOffset: 4 * 0,
           location: VertexAttributeLocation.POSITION,
         },
       ],
       data: new Float32Array(instanced),
     });
+    this.geometry.setVertexBuffer({
+      bufferIndex: ImageVertexAttributeBufferIndex.PACKED_STYLE,
+      byteStride: 4 * 4,
+      frequency: VertexBufferFrequency.PerInstance,
+      attributes: [
+        {
+          format: Format.F32_RGBA,
+          bufferByteOffset: 4 * 0,
+          location: ImageVertexAttributeLocation.PACKED_STYLE3,
+          divisor: 1,
+        },
+      ],
+      data: new Float32Array(packedStyle),
+    });
     this.geometry.setVertexBuffer({
       bufferIndex: VertexAttributeBufferIndex.UV,
       byteStride: 4 * 2,
@@ -91,17 +128,12 @@ export class ImageDrawcall extends Instanced {
 
     this.updateBatchedAttribute(objects, startIndex, name, value);
 
-    if (
-      name === 'width' ||
-      name === 'height' ||
-      name === 'z' ||
-      name === 'isBillboard'
-    ) {
+    if (name === 'width' || name === 'height' || name === 'z') {
       const packed: number[] = [];
       objects.forEach((object) => {
         const image = object as ImageShape;
-        const { width, height, z, isBillboard } = image.parsedStyle;
-        packed.push(width, height, z, isBillboard ? 1 : 0);
+        const { width, height } = image.parsedStyle;
+        packed.push(width, height);
       });
 
       this.geometry.updateVertexBuffer(
@@ -110,6 +142,30 @@ export class ImageDrawcall extends Instanced {
         startIndex,
         new Uint8Array(new Float32Array(packed).buffer),
       );
+    } else if (
+      name === 'isBillboard' ||
+      name === 'billboardRotation' ||
+      name === 'isSizeAttenuation'
+    ) {
+      const packed: number[] = [];
+      objects.forEach((object) => {
+        const image = object as ImageShape;
+        const { isBillboard, billboardRotation, isSizeAttenuation } =
+          image.parsedStyle;
+        packed.push(
+          isBillboard ? 1 : 0,
+          billboardRotation ?? 0,
+          isSizeAttenuation ? 1 : 0,
+          0,
+        );
+      });
+
+      this.geometry.updateVertexBuffer(
+        ImageVertexAttributeBufferIndex.PACKED_STYLE,
+        ImageVertexAttributeLocation.PACKED_STYLE3,
+        startIndex,
+        new Uint8Array(new Float32Array(packed).buffer),
+      );
     } else if (name === 'img') {
       const map = this.texturePool.getOrCreateTexture(
         this.context.device,
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts
index 2686eb902..18c3194a5 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/InstancedFill.ts
@@ -114,11 +114,11 @@ export class InstancedFillDrawcall extends Instanced {
 
     this.geometry.setVertexBuffer({
       bufferIndex: VertexAttributeBufferIndex.POSITION,
-      byteStride: 4 * 2,
+      byteStride: 4 * 3,
       frequency: VertexBufferFrequency.PerVertex,
       attributes: [
         {
-          format: Format.F32_RG,
+          format: Format.F32_RGB,
           bufferByteOffset: 4 * 0,
           location: VertexAttributeLocation.POSITION,
         },
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts b/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts
index 8def9c4ae..f03477774 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/InstancedPath.ts
@@ -138,7 +138,6 @@ export class InstancedPathDrawcall extends Instanced {
     this.material.defines = {
       ...this.material.defines,
       ...enumToObject(LineVertexAttributeLocation),
-      INSTANCED: true,
     };
   }
 
@@ -175,7 +174,7 @@ export class InstancedPathDrawcall extends Instanced {
 
       // Can't use interleaved buffer here, we should spread them like:
       // | prev - pointA - pointB - next |. This will allocate ~4x buffer memory space.
-      for (let i = 0; i < pBuffer.length - 3 * 3; i += 3) {
+      for (let i = 0; i < pBuffer.length - 3 * 4; i += 4) {
         pointsBuffer.push(
           pBuffer[i],
           pBuffer[i + 1],
@@ -189,6 +188,10 @@ export class InstancedPathDrawcall extends Instanced {
           pBuffer[i + 9],
           pBuffer[i + 10],
           pBuffer[i + 11],
+          pBuffer[i + 12],
+          pBuffer[i + 13],
+          pBuffer[i + 14],
+          pBuffer[i + 15],
         );
       }
 
@@ -217,36 +220,36 @@ export class InstancedPathDrawcall extends Instanced {
     if (pointsBuffer.length) {
       this.geometry.setVertexBuffer({
         bufferIndex: LineVertexAttributeBufferIndex.PACKED,
-        byteStride: 4 * (3 + 3 + 3 + 3),
+        byteStride: 4 * (4 + 4 + 4 + 4),
         frequency: VertexBufferFrequency.PerInstance,
         attributes: [
           {
-            format: Format.F32_RG,
+            format: Format.F32_RGB,
             bufferByteOffset: 4 * 0,
             location: LineVertexAttributeLocation.PREV,
             divisor: 1,
           },
           {
-            format: Format.F32_RG,
-            bufferByteOffset: 4 * 3,
+            format: Format.F32_RGB,
+            bufferByteOffset: 4 * 4,
             location: LineVertexAttributeLocation.POINT1,
             divisor: 1,
           },
           {
             format: Format.F32_R,
-            bufferByteOffset: 4 * 5,
+            bufferByteOffset: 4 * 7,
             location: LineVertexAttributeLocation.VERTEX_JOINT,
             divisor: 1,
           },
           {
-            format: Format.F32_RG,
-            bufferByteOffset: 4 * 6,
+            format: Format.F32_RGB,
+            bufferByteOffset: 4 * 8,
             location: LineVertexAttributeLocation.POINT2,
             divisor: 1,
           },
           {
-            format: Format.F32_RG,
-            bufferByteOffset: 4 * 9,
+            format: Format.F32_RGB,
+            bufferByteOffset: 4 * 12,
             location: LineVertexAttributeLocation.NEXT,
             divisor: 1,
           },
@@ -359,7 +362,7 @@ export class InstancedPathDrawcall extends Instanced {
 
         // Can't use interleaved buffer here, we should spread them like:
         // | prev - pointA - pointB - next |. This will allocate ~4x buffer memory space.
-        for (let i = 0; i < pBuffer.length - 3 * 3; i += 3) {
+        for (let i = 0; i < pBuffer.length - 3 * 4; i += 4) {
           pointsBuffer.push(
             pBuffer[i],
             pBuffer[i + 1],
@@ -373,6 +376,10 @@ export class InstancedPathDrawcall extends Instanced {
             pBuffer[i + 9],
             pBuffer[i + 10],
             pBuffer[i + 11],
+            pBuffer[i + 12],
+            pBuffer[i + 13],
+            pBuffer[i + 14],
+            pBuffer[i + 15],
           );
         }
 
@@ -435,8 +442,8 @@ export enum JOINT_TYPE {
   CAP_BUTT2 = 4 << 5,
 }
 
-const stridePoints = 2;
-const strideFloats = 3;
+const stridePoints = 3;
+const strideFloats = 4;
 
 export function updateBuffer(
   object: DisplayObject,
@@ -496,7 +503,7 @@ export function updateBuffer(
         offsetY = endOffsetY;
       }
 
-      prev.push(cur[0] - defX + offsetX, cur[1] - defY + offsetY);
+      prev.push(cur[0] - defX + offsetX, cur[1] - defY + offsetY, cur[2] || 0);
       return prev;
     }, [] as number[]);
 
@@ -504,7 +511,7 @@ export function updateBuffer(
     if (object.nodeName === Shape.POLYGON) {
       if (needEarcut) {
         // use earcut for triangulation
-        triangles = earcut(points[0], [], 2);
+        triangles = earcut(points[0], [], 3);
         return {
           pointsBuffer: points[0],
           travelBuffer: [],
@@ -512,13 +519,15 @@ export function updateBuffer(
           instancedCount: Math.round(points[0].length / stridePoints),
         };
       } else {
-        points[0].push(points[0][0], points[0][1]);
+        points[0].push(points[0][0], points[0][1], points[0][2] || 0);
         points[0].push(
           ...addTailSegment(
             points[0][0],
             points[0][1],
-            points[0][2],
+            points[0][2] || 0,
             points[0][3],
+            points[0][4],
+            points[0][5] || 0,
           ),
         );
       }
@@ -600,20 +609,23 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[0] - defX + startOffsetX,
             params[1] - defY + startOffsetY,
+            0,
             params[0] - defX,
             params[1] - defY,
+            0,
           );
         } else {
-          points[mCommandsNum].push(params[0] - defX, params[1] - defY);
+          points[mCommandsNum].push(params[0] - defX, params[1] - defY, 0);
         }
       } else if (command === 'L') {
         if (useEndOffset) {
           points[mCommandsNum].push(
             params[0] - defX + endOffsetX,
             params[1] - defY + endOffsetY,
+            0,
           );
         } else {
-          points[mCommandsNum].push(params[0] - defX, params[1] - defY);
+          points[mCommandsNum].push(params[0] - defX, params[1] - defY, 0);
         }
       } else if (command === 'Q') {
         quadCurveTo(
@@ -628,6 +640,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[2] - defX + endOffsetX,
             params[3] - defY + endOffsetY,
+            0,
           );
         }
       } else if (command === 'A') {
@@ -664,6 +677,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[5] - defX + endOffsetX,
             params[6] - defY + endOffsetY,
+            0,
           );
         }
       } else if (command === 'C') {
@@ -681,6 +695,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             params[4] - defX + endOffsetX,
             params[5] - defY + endOffsetY,
+            0,
           );
         }
       } else if (
@@ -702,6 +717,7 @@ export function updateBuffer(
           points[mCommandsNum].push(
             points[mCommandsNum][startPointIndex],
             points[mCommandsNum][startPointIndex + 1],
+            0,
           );
         }
 
@@ -711,6 +727,8 @@ export function updateBuffer(
             points[mCommandsNum][startPointIndex + 1],
             points[mCommandsNum][startPointIndex + 2],
             points[mCommandsNum][startPointIndex + 3],
+            points[mCommandsNum][startPointIndex + 4],
+            points[mCommandsNum][startPointIndex + 5],
           ),
         );
       }
@@ -719,7 +737,7 @@ export function updateBuffer(
     if (needEarcut) {
       const pointsBuffer = points[subPathIndex];
       // use earcut for triangulation
-      triangles = earcut(pointsBuffer, [], 2);
+      triangles = earcut(pointsBuffer, [], 3);
       return {
         pointsBuffer,
         travelBuffer: [],
@@ -755,8 +773,9 @@ export function updateBuffer(
       // if (needDash) {
       if (i > 1) {
         dist += Math.sqrt(
-          Math.pow(points[i] - points[i - 2], 2) +
-            Math.pow(points[i + 1] - points[i + 1 - 2], 2),
+          Math.pow(points[i] - points[i - stridePoints], 2) +
+            Math.pow(points[i + 1] - points[i + 1 - stridePoints], 2) +
+            Math.pow(points[i + 2] - points[i + 2 - stridePoints], 2),
         );
       }
       travelBuffer.push(dist);
@@ -766,6 +785,7 @@ export function updateBuffer(
 
       pointsBuffer[j++] = points[i];
       pointsBuffer[j++] = points[i + 1];
+      pointsBuffer[j++] = points[i + 2] || 0;
       pointsBuffer[j] = jointType;
       if (i == 0 && capType !== JOINT_TYPE.CAP_ROUND) {
         pointsBuffer[j] += capType;
@@ -777,15 +797,18 @@ export function updateBuffer(
       }
       j++;
     }
-    pointsBuffer[j++] = points[points.length - 4];
-    pointsBuffer[j++] = points[points.length - 3];
+    pointsBuffer[j++] = points[points.length - 6];
+    pointsBuffer[j++] = points[points.length - 5];
+    pointsBuffer[j++] = points[points.length - 4] || 0;
     pointsBuffer[j++] = 0;
     pointsBuffer[0] = points[0];
     pointsBuffer[1] = points[1];
-    pointsBuffer[2] = 0;
-    pointsBuffer[3] = points[2];
+    pointsBuffer[2] = points[2] || 0;
+    pointsBuffer[3] = 0;
     pointsBuffer[4] = points[3];
-    pointsBuffer[5] = capType === JOINT_TYPE.CAP_ROUND ? capType : 0;
+    pointsBuffer[5] = points[4];
+    pointsBuffer[6] = points[5] || 0;
+    pointsBuffer[7] = capType === JOINT_TYPE.CAP_ROUND ? capType : 0;
 
     const instancedCount = Math.round(points.length / stridePoints);
 
@@ -837,10 +860,12 @@ function getCapType(lineCap: CanvasLineCap) {
 function addTailSegment(
   x1: number,
   y1: number,
+  z1: number,
   x2: number = x1,
   y2: number = y1,
+  z2: number = z1,
 ) {
-  const vec = [x2 - x1, y2 - y1];
+  const vec = [x2 - x1, y2 - y1, z2 - z1];
   const length = 0.01;
-  return [x1 + vec[0] * length, y1 + vec[1] * length];
+  return [x1 + vec[0] * length, y1 + vec[1] * length, z1 + vec[2] * length];
 }
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts b/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts
index b84358f10..4bfecaa80 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/SDF.ts
@@ -213,15 +213,4 @@ export class SDFDrawcall extends Instanced {
     const hasStrokeOpacity = strokeOpacity < 1;
     return !hasStroke || (hasStroke && (hasLineDash || hasStrokeOpacity));
   }
-
-  private needDrawStrokeSeparately(parsedStyle: ParsedBaseStyleProps) {
-    const { stroke, lineDash, lineWidth, strokeOpacity } = parsedStyle;
-    const hasStroke = stroke && !(stroke as CSSRGB).isNone;
-    const hasLineDash =
-      lineDash &&
-      lineDash.length &&
-      lineDash.every((item: number) => item !== 0);
-    const hasStrokeOpacity = strokeOpacity < 1;
-    return hasStroke && lineWidth > 0 && (hasLineDash || hasStrokeOpacity);
-  }
 }
diff --git a/packages/g-plugin-device-renderer/src/drawcalls/Text.ts b/packages/g-plugin-device-renderer/src/drawcalls/Text.ts
index 7dc540661..26a1e9d0f 100644
--- a/packages/g-plugin-device-renderer/src/drawcalls/Text.ts
+++ b/packages/g-plugin-device-renderer/src/drawcalls/Text.ts
@@ -348,7 +348,9 @@ export class TextDrawcall extends Instanced {
       name === 'lineWidth' ||
       name === 'visibility' ||
       name === 'pointerEvents' ||
-      name === 'isBillboard'
+      name === 'isBillboard' ||
+      name === 'billboardRotation' ||
+      name === 'isSizeAttenuation'
     ) {
       const vertice = this.geometry.vertices[
         TextVertexAttributeBufferIndex.INSTANCED
@@ -369,7 +371,8 @@ export class TextDrawcall extends Instanced {
           lineWidth,
           visibility,
           isBillboard,
-          sizeAttenuation,
+          billboardRotation,
+          isSizeAttenuation,
         } = object.parsedStyle as ParsedTextStyleProps;
         let fillColor: Tuple4Number = [0, 0, 0, 0];
         if (isCSSRGB(fill)) {
@@ -430,8 +433,8 @@ export class TextDrawcall extends Instanced {
           sliced[i + 23] = lineWidth;
           sliced[i + 24] = visibility === 'visible' ? 1 : 0;
           sliced[i + 25] = isBillboard ? 1 : 0;
-          sliced[i + 26] = sizeAttenuation ? 1 : 0;
-          sliced[i + 27] = 0;
+          sliced[i + 26] = isSizeAttenuation ? 1 : 0;
+          sliced[i + 27] = billboardRotation ?? 0;
           sliced[i + 28] = encodedPickingColor[0];
           sliced[i + 29] = encodedPickingColor[1];
           sliced[i + 30] = encodedPickingColor[2];
@@ -479,7 +482,8 @@ export class TextDrawcall extends Instanced {
       lineWidth,
       visibility,
       isBillboard,
-      sizeAttenuation,
+      billboardRotation,
+      isSizeAttenuation,
     } = object.parsedStyle as ParsedTextStyleProps;
     let fillColor: Tuple4Number = [0, 0, 0, 0];
     if (isCSSRGB(fill)) {
@@ -541,8 +545,8 @@ export class TextDrawcall extends Instanced {
         lineWidth,
         visibility === 'visible' ? 1 : 0,
         isBillboard ? 1 : 0,
-        sizeAttenuation ? 1 : 0,
-        0,
+        isSizeAttenuation ? 1 : 0,
+        billboardRotation ?? 0,
         ...encodedPickingColor,
         object.sortable.renderOrder * RENDER_ORDER_SCALE,
       ];
diff --git a/packages/g-plugin-device-renderer/src/shader/image.vert b/packages/g-plugin-device-renderer/src/shader/image.vert
index ccd3697ad..102ddfe7b 100644
--- a/packages/g-plugin-device-renderer/src/shader/image.vert
+++ b/packages/g-plugin-device-renderer/src/shader/image.vert
@@ -1,28 +1,26 @@
 #pragma glslify: import('@antv/g-shader-components/scene.both.glsl')
 #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
+#pragma glslify: billboard = require('@antv/g-shader-components/billboard.vert')
 
-layout(location = POSITION) in vec4 a_Size;
+layout(location = POSITION) in vec2 a_Size;
+layout(location = PACKED_STYLE3) in vec4 a_StylePacked3;
 
 #ifdef USE_UV
   layout(location = UV) in vec2 a_Uv;
   out vec2 v_Uv;
 #endif
 
-bool isPerspectiveMatrix(mat4 m) {
-	return m[ 2 ][ 3 ] == - 1.0;
-}
-
 void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.vert')
 
-  vec2 offset = (a_Uv - u_Anchor.xy) * a_Size.xy;
-
-  bool isPerspective = isPerspectiveMatrix(u_ProjectionMatrix);
+  vec2 offset = (a_Uv - u_Anchor.xy) * a_Size;
 
-  bool isBillboard = a_Size.w > 0.5;
+  bool isBillboard = a_StylePacked3.x > 0.5;
   if (isBillboard) {
-    #pragma glslify: import('@antv/g-shader-components/billboard.vert')
+    float rotation = a_StylePacked3.y;
+    bool isSizeAttenuation = a_StylePacked3.z > 0.5;
+    gl_Position = billboard(offset, rotation, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
   } else {
     gl_Position = project(vec4(offset, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
   }
diff --git a/packages/g-plugin-device-renderer/src/shader/line.frag b/packages/g-plugin-device-renderer/src/shader/line.frag
index 9f2e40f9d..e36d6d9f6 100644
--- a/packages/g-plugin-device-renderer/src/shader/line.frag
+++ b/packages/g-plugin-device-renderer/src/shader/line.frag
@@ -1,11 +1,7 @@
 #pragma glslify: import('@antv/g-shader-components/scene.both.glsl')
 
-#ifdef INSTANCED
-  #pragma glslify: import('@antv/g-shader-components/batch.declaration.frag')
-  in vec4 v_Dash;
-#else
-  #pragma glslify: import('@antv/g-shader-components/line.both.glsl')
-#endif
+#pragma glslify: import('@antv/g-shader-components/batch.declaration.frag')
+in vec4 v_Dash;
 
 in vec4 v_Distance;
 in vec4 v_Arc;
@@ -16,13 +12,7 @@ in float v_ScalingFactor;
 out vec4 outputColor;
 
 void main(){
-  #ifdef INSTANCED
-    #pragma glslify: import('@antv/g-shader-components/batch.frag')
-  #else
-    if (u_Visible < 0.5) {
-      discard;
-    }
-  #endif
+  #pragma glslify: import('@antv/g-shader-components/batch.frag')
 
   float alpha = 1.0;
   float lineWidth = v_Distance.w;
@@ -65,11 +55,9 @@ void main(){
     alpha *= max(min(v_Distance.z + 0.5, 1.0), 0.0);
   }
 
-  #ifdef INSTANCED
-    float u_Dash = v_Dash.x;
-    float u_Gap = v_Dash.y;
-    float u_DashOffset = v_Dash.z;
-  #endif
+  float u_Dash = v_Dash.x;
+  float u_Gap = v_Dash.y;
+  float u_DashOffset = v_Dash.z;
   if (u_Dash + u_Gap > 1.0) {
     float travel = mod(v_Travel + u_Gap * v_ScalingFactor * 0.5 + u_DashOffset, u_Dash * v_ScalingFactor + u_Gap * v_ScalingFactor) - (u_Gap * v_ScalingFactor * 0.5);
     float left = max(travel - 0.5, -0.5);
@@ -78,11 +66,7 @@ void main(){
   }
 
   if (u_IsPicking > 0.5) {
-    #ifdef INSTANCED
-      vec3 pickingColor = u_PickingColor;
-    #else
-      vec3 pickingColor = u_PickingColor / 255.0;
-    #endif
+    vec3 pickingColor = u_PickingColor;
     if (pickingColor.x == 0.0 && pickingColor.y == 0.0 && pickingColor.z == 0.0) {
       discard;
     }
diff --git a/packages/g-plugin-device-renderer/src/shader/line.vert b/packages/g-plugin-device-renderer/src/shader/line.vert
index 02507160f..836ddca5e 100644
--- a/packages/g-plugin-device-renderer/src/shader/line.vert
+++ b/packages/g-plugin-device-renderer/src/shader/line.vert
@@ -1,23 +1,18 @@
 #pragma glslify: import('@antv/g-shader-components/scene.both.glsl')
 
-#ifdef INSTANCED
-  #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
-#else
-  #pragma glslify: import('@antv/g-shader-components/line.both.glsl')
-#endif
+#pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
+#pragma glslify: project = require('@antv/g-shader-components/project.vert')
 
-layout(location = PREV) in vec2 a_Prev;
-layout(location = POINT1) in vec2 a_Point1;
-layout(location = POINT2) in vec2 a_Point2;
-layout(location = NEXT) in vec2 a_Next;
+layout(location = PREV) in vec3 a_Prev;
+layout(location = POINT1) in vec3 a_Point1;
+layout(location = POINT2) in vec3 a_Point2;
+layout(location = NEXT) in vec3 a_Next;
 layout(location = VERTEX_JOINT) in float a_VertexJoint;
 layout(location = VERTEX_NUM) in float a_VertexNum;
 layout(location = TRAVEL) in float a_Travel;
 
-#ifdef INSTANCED
-  layout(location = DASH) in vec4 a_Dash;
-  out vec4 v_Dash;
-#endif
+layout(location = DASH) in vec4 a_Dash;
+out vec4 v_Dash;
 
 const float FILL = 1.0;
 const float BEVEL = 4.0;
@@ -32,12 +27,10 @@ const float CAP_SQUARE = 2.0;
 const float CAP_ROUND = 3.0;
 const float CAP_BUTT2 = 4.0;
 
-#ifdef INSTANCED
-  const float u_Expand = 1.0;
-  const float u_MiterLimit = 5.0;
-  const float u_ScaleMode = 1.0;
-  const float u_Alignment = 0.5;
-#endif
+const float u_Expand = 1.0;
+const float u_MiterLimit = 5.0;
+const float u_ScaleMode = 1.0;
+const float u_Alignment = 0.5;
 
 out vec4 v_Distance;
 out vec4 v_Arc;
@@ -65,14 +58,32 @@ vec2 doBisect(
   return dy * bisect;
 }
 
+vec2 project2ScreenSpace(vec3 pos, mat4 u_ModelMatrix) {
+  vec4 clip = project(vec4(pos, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+  return u_Viewport * (0.5 * clip.xy / clip.w + 0.5);
+}
+
 void main() {
-  #ifdef INSTANCED
-    #pragma glslify: import('@antv/g-shader-components/batch.vert')
-    v_Dash = a_Dash;
-  #endif
+  #pragma glslify: import('@antv/g-shader-components/batch.vert')
+  v_Dash = a_Dash;
+
+  vec2 pointA;
+  vec2 pointB;
+  vec4 clip0;
+  vec4 clip1;
 
-  vec2 pointA = (u_ModelMatrix * vec4(a_Point1, 0., 1.0)).xy;
-  vec2 pointB = (u_ModelMatrix * vec4(a_Point2, 0., 1.0)).xy;
+  float isBillboard = a_Dash.w;
+  if (isBillboard > 0.5) {
+    // clip space
+    clip0 = project(vec4(a_Point1, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+    clip1 = project(vec4(a_Point2, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+    // screen space
+    pointA = project2ScreenSpace(a_Point1, u_ModelMatrix);
+    pointB = project2ScreenSpace(a_Point2, u_ModelMatrix);
+  } else {
+    pointA = (u_ModelMatrix * vec4(a_Point1, 1.0)).xy;
+    pointB = (u_ModelMatrix * vec4(a_Point2, 1.0)).xy;
+  }
 
   vec2 xBasis = pointB - pointA;
   float len = length(xBasis);
@@ -125,12 +136,22 @@ void main() {
     float flag = 0.0;
     float sign2 = 1.0;
     if (a_VertexNum < 0.5 || a_VertexNum > 2.5 && a_VertexNum < 3.5) {
-      next = (u_ModelMatrix * vec4(a_Prev, 0.0, 1.0)).xy;
+      if (isBillboard > 0.5) {
+        next = project2ScreenSpace(a_Prev, u_ModelMatrix);
+      } else {
+        next = (u_ModelMatrix * vec4(a_Prev, 1.0)).xy;
+      }      
+
       base = pointA;
       flag = type - floor(type / 2.0) * 2.0;
       sign2 = -1.0;
     } else {
-      next = (u_ModelMatrix * vec4(a_Next, 0.0, 1.0)).xy;
+      if (isBillboard > 0.5) {
+        next = project2ScreenSpace(a_Next, u_ModelMatrix);
+      } else {
+        next = (u_ModelMatrix * vec4(a_Next, 1.0)).xy;
+      }
+      
       base = pointB;
       if (type >= MITER && type < MITER + 3.5) {
         flag = step(MITER + 1.5, type);
@@ -335,5 +356,10 @@ void main() {
 
   v_ScalingFactor = sqrt(u_ModelMatrix[0][0] * u_ModelMatrix[0][0] + u_ModelMatrix[0][1] * u_ModelMatrix[0][1] + u_ModelMatrix[0][2] * u_ModelMatrix[0][2]);
 
-  gl_Position = u_ProjectionMatrix * u_ViewMatrix * vec4(pos, u_ZIndex, 1.0);
+  if (isBillboard > 0.5) {
+    vec4 clip = mix(clip0, clip1, 0.5);
+    gl_Position = vec4(clip.w * (2.0 * pos / u_Viewport - 1.0), clip.z, clip.w);
+  } else {
+    gl_Position = u_ProjectionMatrix * u_ViewMatrix * vec4(pos, u_ZIndex, 1.0);
+  }
 }
\ No newline at end of file
diff --git a/packages/g-plugin-device-renderer/src/shader/mesh.vert b/packages/g-plugin-device-renderer/src/shader/mesh.vert
index 0d92a2bfe..7a7f21046 100644
--- a/packages/g-plugin-device-renderer/src/shader/mesh.vert
+++ b/packages/g-plugin-device-renderer/src/shader/mesh.vert
@@ -3,7 +3,7 @@
 #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
 
-layout(location = POSITION) in vec2 a_Position;
+layout(location = POSITION) in vec3 a_Position;
 #ifdef USE_UV
   layout(location = UV) in vec2 a_Uv;
   out vec2 v_Uv;
@@ -13,5 +13,5 @@ void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.vert')
   #pragma glslify: import('@antv/g-shader-components/uv.vert')
 
-  gl_Position = project(vec4(a_Position, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
+  gl_Position = project(vec4(a_Position.xy, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
 }
\ No newline at end of file
diff --git a/packages/g-plugin-device-renderer/src/shader/sdf.vert b/packages/g-plugin-device-renderer/src/shader/sdf.vert
index d09eadf94..6ffbe991c 100644
--- a/packages/g-plugin-device-renderer/src/shader/sdf.vert
+++ b/packages/g-plugin-device-renderer/src/shader/sdf.vert
@@ -2,6 +2,7 @@
 
 #pragma glslify: import('@antv/g-shader-components/batch.declaration.vert')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
+#pragma glslify: billboard = require('@antv/g-shader-components/billboard.vert')
 
 layout(location = POSITION) in vec2 a_Extrude;
 // shape, radius, omitStroke, isBillboard
@@ -34,7 +35,9 @@ void main() {
 
   bool isBillboard = a_StylePacked3.w > 0.5;
   if (isBillboard) {
-    #pragma glslify: import('@antv/g-shader-components/billboard.vert')
+    float rotation = 0.0;
+    bool isSizeAttenuation = false;
+    gl_Position = billboard(offset, rotation, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
   } else {
     gl_Position = project(vec4(offset, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
   }
diff --git a/packages/g-plugin-device-renderer/src/shader/text.vert b/packages/g-plugin-device-renderer/src/shader/text.vert
index 42b02b94e..a833c93bb 100644
--- a/packages/g-plugin-device-renderer/src/shader/text.vert
+++ b/packages/g-plugin-device-renderer/src/shader/text.vert
@@ -3,6 +3,7 @@
 
 #pragma glslify: import('@antv/g-shader-components/text.both.glsl')
 #pragma glslify: project = require('@antv/g-shader-components/project.vert')
+#pragma glslify: billboard = require('@antv/g-shader-components/billboard.vert')
 
 layout(location = TEX) in vec2 a_Tex;
 layout(location = OFFSET) in vec2 a_Offset;
@@ -10,23 +11,20 @@ layout(location = OFFSET) in vec2 a_Offset;
 out vec2 v_Uv;
 out float v_GammaScale;
 
-bool isPerspectiveMatrix(mat4 m) {
-  return m[ 2 ][ 3 ] == - 1.0;
-}
-
 void main() {
   #pragma glslify: import('@antv/g-shader-components/batch.vert')
 
   v_Uv = a_Tex / u_SDFMapSize;
   float fontScale = u_FontSize / 24.;
 
-  bool isBillboard = a_StylePacked2.y > 0.5;
-  float sizeAttenuation = a_StylePacked2.z;
   vec2 bufferOffset = vec2(0.7, 2.0);
   vec2 offset = a_Offset * fontScale + bufferOffset;
 
+  bool isBillboard = a_StylePacked2.y > 0.5;
   if (isBillboard) {
-    #pragma glslify: import('@antv/g-shader-components/billboard.vert')
+    float rotation =  a_StylePacked2.w;
+    bool isSizeAttenuation = a_StylePacked2.z > 0.5;
+    gl_Position = billboard(offset, rotation, isSizeAttenuation, u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
     v_GammaScale = 1.0;
   } else {
     gl_Position = project(vec4((a_Offset) * fontScale + bufferOffset, u_ZIndex, 1.0), u_ProjectionMatrix, u_ViewMatrix, u_ModelMatrix);
diff --git a/packages/g-plugin-device-renderer/src/utils/sample.ts b/packages/g-plugin-device-renderer/src/utils/sample.ts
index 268c59775..3d521c5ed 100644
--- a/packages/g-plugin-device-renderer/src/utils/sample.ts
+++ b/packages/g-plugin-device-renderer/src/utils/sample.ts
@@ -13,8 +13,8 @@ export function quadCurveTo(
   points: number[],
   segmentNum?: number,
 ) {
-  const fromX = points[points.length - 2];
-  const fromY = points[points.length - 1];
+  const fromX = points[points.length - 3];
+  const fromY = points[points.length - 3];
 
   const n =
     segmentNum ??
@@ -36,6 +36,7 @@ export function quadCurveTo(
     points.push(
       xa + (cpX + (toX - cpX) * j - xa) * j,
       ya + (cpY + (toY - cpY) * j - ya) * j,
+      0,
     );
   }
 }
@@ -50,10 +51,10 @@ export function bezierCurveTo(
   points: number[],
   segmentNum?: number,
 ): void {
-  const fromX = points[points.length - 2];
-  const fromY = points[points.length - 1];
+  const fromX = points[points.length - 3];
+  const fromY = points[points.length - 2];
 
-  points.length -= 2;
+  points.length -= 3;
 
   const n =
     segmentNum ??
@@ -70,7 +71,7 @@ export function bezierCurveTo(
   let t2 = 0;
   let t3 = 0;
 
-  points.push(fromX, fromY);
+  points.push(fromX, fromY, 0);
 
   for (let i = 1, j = 0; i <= n; ++i) {
     j = i / n;
@@ -85,6 +86,7 @@ export function bezierCurveTo(
     points.push(
       dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
       dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY,
+      0,
     );
   }
 }
diff --git a/packages/g-plugin-dom-interaction/CHANGELOG.md b/packages/g-plugin-dom-interaction/CHANGELOG.md
index f07a069e6..d51f80292 100644
--- a/packages/g-plugin-dom-interaction/CHANGELOG.md
+++ b/packages/g-plugin-dom-interaction/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-dom-interaction
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-dom-interaction/package.json b/packages/g-plugin-dom-interaction/package.json
index 007805c32..90134861f 100644
--- a/packages/g-plugin-dom-interaction/package.json
+++ b/packages/g-plugin-dom-interaction/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-dom-interaction",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-dragndrop/CHANGELOG.md b/packages/g-plugin-dragndrop/CHANGELOG.md
index bcef5d681..62c53075b 100644
--- a/packages/g-plugin-dragndrop/CHANGELOG.md
+++ b/packages/g-plugin-dragndrop/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-dragndrop
 
+## 1.8.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.8.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-dragndrop/package.json b/packages/g-plugin-dragndrop/package.json
index 16131c5cc..b75d91cc1 100644
--- a/packages/g-plugin-dragndrop/package.json
+++ b/packages/g-plugin-dragndrop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-dragndrop",
-  "version": "1.8.7",
+  "version": "1.8.8",
   "description": "A G plugin for Drag n Drop implemented with PointerEvents",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-gpgpu/CHANGELOG.md b/packages/g-plugin-gpgpu/CHANGELOG.md
index 67d92f66d..195e84a5e 100644
--- a/packages/g-plugin-gpgpu/CHANGELOG.md
+++ b/packages/g-plugin-gpgpu/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-gpgpu
 
+## 1.9.11
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-webgpu@1.9.11
+
 ## 1.9.10
 
 ### Patch Changes
diff --git a/packages/g-plugin-gpgpu/package.json b/packages/g-plugin-gpgpu/package.json
index 2c849357a..cffb11b70 100644
--- a/packages/g-plugin-gpgpu/package.json
+++ b/packages/g-plugin-gpgpu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-gpgpu",
-  "version": "1.9.10",
+  "version": "1.9.11",
   "description": "A G plugin for GPGPU based on WebGPU",
   "keywords": [
     "webgpu",
diff --git a/packages/g-plugin-html-renderer/CHANGELOG.md b/packages/g-plugin-html-renderer/CHANGELOG.md
index 345a1cb95..0cc8f4e54 100644
--- a/packages/g-plugin-html-renderer/CHANGELOG.md
+++ b/packages/g-plugin-html-renderer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-html-renderer
 
+## 1.9.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.8
 
 ### Patch Changes
diff --git a/packages/g-plugin-html-renderer/package.json b/packages/g-plugin-html-renderer/package.json
index 59d61bbc5..d3d26e399 100644
--- a/packages/g-plugin-html-renderer/package.json
+++ b/packages/g-plugin-html-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-html-renderer",
-  "version": "1.9.8",
+  "version": "1.9.9",
   "description": "A G plugin for rendering HTML",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-image-loader/CHANGELOG.md b/packages/g-plugin-image-loader/CHANGELOG.md
index 4880ec11d..d7a4c66b9 100644
--- a/packages/g-plugin-image-loader/CHANGELOG.md
+++ b/packages/g-plugin-image-loader/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-image-loader
 
+## 1.3.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.3.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-image-loader/package.json b/packages/g-plugin-image-loader/package.json
index 71dee25dd..8bf8683de 100644
--- a/packages/g-plugin-image-loader/package.json
+++ b/packages/g-plugin-image-loader/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-image-loader",
-  "version": "1.3.7",
+  "version": "1.3.8",
   "description": "A G plugin for loading image",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-matterjs/CHANGELOG.md b/packages/g-plugin-matterjs/CHANGELOG.md
index 247177c84..c2c300cf3 100644
--- a/packages/g-plugin-matterjs/CHANGELOG.md
+++ b/packages/g-plugin-matterjs/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-matterjs
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-matterjs/package.json b/packages/g-plugin-matterjs/package.json
index 5bc4a8a2c..a97323583 100644
--- a/packages/g-plugin-matterjs/package.json
+++ b/packages/g-plugin-matterjs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-matterjs",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin for matter.js physics engine",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-mobile-interaction/CHANGELOG.md b/packages/g-plugin-mobile-interaction/CHANGELOG.md
index f25b16d49..5afee90f6 100644
--- a/packages/g-plugin-mobile-interaction/CHANGELOG.md
+++ b/packages/g-plugin-mobile-interaction/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-mobile-interaction
 
+## 0.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 0.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-mobile-interaction/package.json b/packages/g-plugin-mobile-interaction/package.json
index 90582e3fe..2188fdc80 100644
--- a/packages/g-plugin-mobile-interaction/package.json
+++ b/packages/g-plugin-mobile-interaction/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-mobile-interaction",
-  "version": "0.9.7",
+  "version": "0.9.8",
   "description": "A G plugin listening events in mobile environment",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-physx/CHANGELOG.md b/packages/g-plugin-physx/CHANGELOG.md
index 4422a0cd6..193a36607 100644
--- a/packages/g-plugin-physx/CHANGELOG.md
+++ b/packages/g-plugin-physx/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-physx
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-physx/package.json b/packages/g-plugin-physx/package.json
index 62788f44a..1cc2f3cd7 100644
--- a/packages/g-plugin-physx/package.json
+++ b/packages/g-plugin-physx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-physx",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin for PhysX",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
index 7ba1f8b95..68b66dc1d 100644
--- a/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-rough-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-rough-canvas-renderer
 
+## 1.9.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-canvas@1.11.9
+
 ## 1.9.8
 
 ### Patch Changes
diff --git a/packages/g-plugin-rough-canvas-renderer/package.json b/packages/g-plugin-rough-canvas-renderer/package.json
index e7c3325cb..ce4fb0614 100644
--- a/packages/g-plugin-rough-canvas-renderer/package.json
+++ b/packages/g-plugin-rough-canvas-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-rough-canvas-renderer",
-  "version": "1.9.8",
+  "version": "1.9.9",
   "description": "A G plugin of renderer implementation with rough.js",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-rough-svg-renderer/CHANGELOG.md b/packages/g-plugin-rough-svg-renderer/CHANGELOG.md
index 1db49c41b..b1338f770 100644
--- a/packages/g-plugin-rough-svg-renderer/CHANGELOG.md
+++ b/packages/g-plugin-rough-svg-renderer/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-rough-svg-renderer
 
+## 1.9.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-svg@1.10.8
+
 ## 1.9.8
 
 ### Patch Changes
diff --git a/packages/g-plugin-rough-svg-renderer/package.json b/packages/g-plugin-rough-svg-renderer/package.json
index 71967458d..8cc59a23d 100644
--- a/packages/g-plugin-rough-svg-renderer/package.json
+++ b/packages/g-plugin-rough-svg-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-rough-svg-renderer",
-  "version": "1.9.8",
+  "version": "1.9.9",
   "description": "A G plugin of renderer implementation with rough.js",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-svg-picker/CHANGELOG.md b/packages/g-plugin-svg-picker/CHANGELOG.md
index e5b9f47a6..4aadf9c66 100644
--- a/packages/g-plugin-svg-picker/CHANGELOG.md
+++ b/packages/g-plugin-svg-picker/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-svg-picker
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-svg-renderer@1.10.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-svg-picker/package.json b/packages/g-plugin-svg-picker/package.json
index 516685005..a8fe48051 100644
--- a/packages/g-plugin-svg-picker/package.json
+++ b/packages/g-plugin-svg-picker/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-svg-picker",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin for picking in SVG",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-svg-renderer/CHANGELOG.md b/packages/g-plugin-svg-renderer/CHANGELOG.md
index 5258a2b09..e0af02d49 100644
--- a/packages/g-plugin-svg-renderer/CHANGELOG.md
+++ b/packages/g-plugin-svg-renderer/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-svg-renderer
 
+## 1.10.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.10.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-svg-renderer/package.json b/packages/g-plugin-svg-renderer/package.json
index 6b1156bfe..4187c05eb 100644
--- a/packages/g-plugin-svg-renderer/package.json
+++ b/packages/g-plugin-svg-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-svg-renderer",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "A G plugin of renderer implementation with SVG",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-webgl-device/CHANGELOG.md b/packages/g-plugin-webgl-device/CHANGELOG.md
index db25f1796..e7be88ed9 100644
--- a/packages/g-plugin-webgl-device/CHANGELOG.md
+++ b/packages/g-plugin-webgl-device/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-webgl-device
 
+## 1.9.10
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-plugin-device-renderer@1.9.10
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.9
 
 ### Patch Changes
diff --git a/packages/g-plugin-webgl-device/package.json b/packages/g-plugin-webgl-device/package.json
index c1918485b..9b484aa18 100644
--- a/packages/g-plugin-webgl-device/package.json
+++ b/packages/g-plugin-webgl-device/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-webgl-device",
-  "version": "1.9.9",
+  "version": "1.9.10",
   "description": "A G plugin implements GPUDevice interface with WebGL API",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-webgpu-device/CHANGELOG.md b/packages/g-plugin-webgpu-device/CHANGELOG.md
index 7cd68e5bd..eae6692e3 100644
--- a/packages/g-plugin-webgpu-device/CHANGELOG.md
+++ b/packages/g-plugin-webgpu-device/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-webgpu-device
 
+## 1.9.10
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-plugin-device-renderer@1.9.10
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.9
 
 ### Patch Changes
diff --git a/packages/g-plugin-webgpu-device/package.json b/packages/g-plugin-webgpu-device/package.json
index a01b90c09..2e34ae487 100644
--- a/packages/g-plugin-webgpu-device/package.json
+++ b/packages/g-plugin-webgpu-device/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-webgpu-device",
-  "version": "1.9.9",
+  "version": "1.9.10",
   "description": "A G plugin implements GPUDevice interface with WebGPU API",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-yoga/CHANGELOG.md b/packages/g-plugin-yoga/CHANGELOG.md
index b1a99e94c..f8fc394b5 100644
--- a/packages/g-plugin-yoga/CHANGELOG.md
+++ b/packages/g-plugin-yoga/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-plugin-yoga
 
+## 1.9.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.9.7
 
 ### Patch Changes
diff --git a/packages/g-plugin-yoga/package.json b/packages/g-plugin-yoga/package.json
index 36f1a5db9..eacf7e1d5 100644
--- a/packages/g-plugin-yoga/package.json
+++ b/packages/g-plugin-yoga/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-yoga",
-  "version": "1.9.7",
+  "version": "1.9.8",
   "description": "A G plugin for Yoga layout engine",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
index 9d1836719..6a781765f 100644
--- a/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
+++ b/packages/g-plugin-zdog-canvas-renderer/CHANGELOG.md
@@ -1,5 +1,15 @@
 # @antv/g-plugin-zdog-canvas-renderer
 
+## 1.2.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-canvas@1.11.9
+
 ## 1.2.8
 
 ### Patch Changes
diff --git a/packages/g-plugin-zdog-canvas-renderer/package.json b/packages/g-plugin-zdog-canvas-renderer/package.json
index f539a55f4..b8d913b79 100644
--- a/packages/g-plugin-zdog-canvas-renderer/package.json
+++ b/packages/g-plugin-zdog-canvas-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-zdog-canvas-renderer",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "A G plugin of renderer implementation with Zdog",
   "keywords": [
     "antv",
diff --git a/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md b/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md
index 0c40239b9..0e37fda02 100644
--- a/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md
+++ b/packages/g-plugin-zdog-svg-renderer/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @antv/g-plugin-zdog-svg-renderer
 
+## 1.2.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-svg-renderer@1.10.8
+    -   @antv/g-svg@1.10.8
+
 ## 1.2.8
 
 ### Patch Changes
diff --git a/packages/g-plugin-zdog-svg-renderer/package.json b/packages/g-plugin-zdog-svg-renderer/package.json
index f6cf4aa34..29d7829c7 100644
--- a/packages/g-plugin-zdog-svg-renderer/package.json
+++ b/packages/g-plugin-zdog-svg-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-plugin-zdog-svg-renderer",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "A G plugin of renderer implementation with Zdog",
   "keywords": [
     "antv",
diff --git a/packages/g-shader-components/CHANGELOG.md b/packages/g-shader-components/CHANGELOG.md
index dcf13adde..43400c86d 100644
--- a/packages/g-shader-components/CHANGELOG.md
+++ b/packages/g-shader-components/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @antv/g-shader-components
 
+## 1.8.3
+
+### Patch Changes
+
+-   3d4f5da7: Support size attenuation.
+-   3d4f5da7: Polyline should support 3D points.
+-   3d4f5da7: Support rotation when applying billboard effect.
+
 ## 1.8.2
 
 ### Patch Changes
diff --git a/packages/g-shader-components/billboard.vert b/packages/g-shader-components/billboard.vert
index 68fe8d8d5..cbf773a6e 100644
--- a/packages/g-shader-components/billboard.vert
+++ b/packages/g-shader-components/billboard.vert
@@ -1,20 +1,27 @@
-vec4 mvPosition = u_ViewMatrix * u_ModelMatrix * vec4(0.0, 0.0, u_ZIndex, 1.0);
-vec2 scale;
-scale.x = length(vec3(u_ModelMatrix[0][0], u_ModelMatrix[0][1], u_ModelMatrix[0][2]));
-scale.y = length(vec3(u_ModelMatrix[1][0], u_ModelMatrix[1][1], u_ModelMatrix[1][2]));
+bool isPerspectiveMatrix(mat4 m) {
+  return m[2][3] == -1.0;
+}
 
-// if (sizeAttenuation < 0.5) {
-// bool isPerspective = isPerspectiveMatrix( u_ProjectionMatrix );
-// if ( isPerspective ) scale *= - mvPosition.z;
-// }
+vec4 billboard(vec2 offset, float rotation, bool isSizeAttenuation, mat4 pm, mat4 vm, mat4 mm) {
+  vec4 mvPosition = vm * mm * vec4(0.0, 0.0, 0.0, 1.0);
+  vec2 scale;
+  scale.x = length(vec3(mm[0][0], mm[0][1], mm[0][2]));
+  scale.y = length(vec3(mm[1][0], mm[1][1], mm[1][2]));
 
-vec2 alignedPosition = offset * scale;
+  if (isSizeAttenuation) {
+    bool isPerspective = isPerspectiveMatrix(pm);
+    if (isPerspective) {
+      scale *= -mvPosition.z / 250.0;
+    }
+  }
 
-float rotation = 0.0;
-vec2 rotatedPosition;
-rotatedPosition.x = cos(rotation) * alignedPosition.x - sin(rotation) * alignedPosition.y;
-rotatedPosition.y = sin(rotation) * alignedPosition.x + cos(rotation) * alignedPosition.y;
+  vec2 alignedPosition = offset * scale;
+  vec2 rotatedPosition;
+  rotatedPosition.x = cos(rotation) * alignedPosition.x - sin(rotation) * alignedPosition.y;
+  rotatedPosition.y = sin(rotation) * alignedPosition.x + cos(rotation) * alignedPosition.y;
 
-mvPosition.xy += rotatedPosition;
+  mvPosition.xy += rotatedPosition;
+  return pm * mvPosition;
+}
 
-gl_Position = u_ProjectionMatrix * mvPosition;
\ No newline at end of file
+#pragma glslify: export(billboard)
\ No newline at end of file
diff --git a/packages/g-shader-components/package.json b/packages/g-shader-components/package.json
index d80bdbe6c..b96b57986 100644
--- a/packages/g-shader-components/package.json
+++ b/packages/g-shader-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-shader-components",
-  "version": "1.8.2",
+  "version": "1.8.3",
   "description": "Shader components based on glslify",
   "keywords": [
     "antv",
diff --git a/packages/g-svg/CHANGELOG.md b/packages/g-svg/CHANGELOG.md
index 65b4a1c09..da3631f11 100644
--- a/packages/g-svg/CHANGELOG.md
+++ b/packages/g-svg/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @antv/g-svg
 
+## 1.10.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-dom-interaction@1.9.8
+    -   @antv/g-plugin-svg-picker@1.9.8
+    -   @antv/g-plugin-svg-renderer@1.10.8
+
 ## 1.10.7
 
 ### Patch Changes
diff --git a/packages/g-svg/package.json b/packages/g-svg/package.json
index 94c0e97a4..7f1f3ee0c 100644
--- a/packages/g-svg/package.json
+++ b/packages/g-svg/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-svg",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "A renderer implemented by SVG",
   "keywords": [
     "antv",
diff --git a/packages/g-web-animations-api/CHANGELOG.md b/packages/g-web-animations-api/CHANGELOG.md
index 4710e4e2e..872188cec 100644
--- a/packages/g-web-animations-api/CHANGELOG.md
+++ b/packages/g-web-animations-api/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @antv/g-web-animations-api
 
+## 1.2.8
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+
 ## 1.2.7
 
 ### Patch Changes
diff --git a/packages/g-web-animations-api/package.json b/packages/g-web-animations-api/package.json
index 5e39e74c7..baf3323d0 100644
--- a/packages/g-web-animations-api/package.json
+++ b/packages/g-web-animations-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-web-animations-api",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "A simple implementation of Web Animations API.",
   "keywords": [
     "antv",
diff --git a/packages/g-web-components/CHANGELOG.md b/packages/g-web-components/CHANGELOG.md
index b48fbe4f0..b0accb3f1 100644
--- a/packages/g-web-components/CHANGELOG.md
+++ b/packages/g-web-components/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @antv/g-web-components
 
+## 1.9.11
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-webgl@1.9.11
+    -   @antv/g-canvas@1.11.9
+
 ## 1.9.10
 
 ### Patch Changes
diff --git a/packages/g-web-components/package.json b/packages/g-web-components/package.json
index 8b95bf74e..ba2b47dba 100644
--- a/packages/g-web-components/package.json
+++ b/packages/g-web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-web-components",
-  "version": "1.9.10",
+  "version": "1.9.11",
   "description": "A declarative usage for G implemented with WebComponents",
   "keywords": [
     "antv",
diff --git a/packages/g-webgl/CHANGELOG.md b/packages/g-webgl/CHANGELOG.md
index 3a077e939..e4c95e0d6 100644
--- a/packages/g-webgl/CHANGELOG.md
+++ b/packages/g-webgl/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @antv/g-webgl
 
+## 1.9.11
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-plugin-device-renderer@1.9.10
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-webgl-device@1.9.10
+    -   @antv/g-plugin-dom-interaction@1.9.8
+    -   @antv/g-plugin-html-renderer@1.9.9
+    -   @antv/g-plugin-image-loader@1.3.8
+
 ## 1.9.10
 
 ### Patch Changes
diff --git a/packages/g-webgl/package.json b/packages/g-webgl/package.json
index ebec02034..57bfc7565 100644
--- a/packages/g-webgl/package.json
+++ b/packages/g-webgl/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgl",
-  "version": "1.9.10",
+  "version": "1.9.11",
   "description": "A renderer implemented by WebGL1/2",
   "keywords": [
     "antv",
diff --git a/packages/g-webgpu/CHANGELOG.md b/packages/g-webgpu/CHANGELOG.md
index ee79ddb48..5b10e1baa 100644
--- a/packages/g-webgpu/CHANGELOG.md
+++ b/packages/g-webgpu/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @antv/g-webgpu
 
+## 1.9.11
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-plugin-device-renderer@1.9.10
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-plugin-webgpu-device@1.9.10
+    -   @antv/g-plugin-dom-interaction@1.9.8
+    -   @antv/g-plugin-html-renderer@1.9.9
+    -   @antv/g-plugin-image-loader@1.3.8
+
 ## 1.9.10
 
 ### Patch Changes
diff --git a/packages/g-webgpu/package.json b/packages/g-webgpu/package.json
index a0b5a0051..384a33ea7 100644
--- a/packages/g-webgpu/package.json
+++ b/packages/g-webgpu/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g-webgpu",
-  "version": "1.9.10",
+  "version": "1.9.11",
   "description": "A renderer implemented by WebGPU",
   "keywords": [
     "antv",
diff --git a/packages/g/CHANGELOG.md b/packages/g/CHANGELOG.md
index 3a6b444e4..617f91c9f 100644
--- a/packages/g/CHANGELOG.md
+++ b/packages/g/CHANGELOG.md
@@ -1,5 +1,17 @@
 # @antv/g
 
+## 5.18.9
+
+### Patch Changes
+
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+-   Updated dependencies [3d4f5da7]
+    -   @antv/g-lite@1.2.8
+    -   @antv/g-camera-api@1.2.8
+    -   @antv/g-dom-mutation-observer-api@1.2.8
+    -   @antv/g-web-animations-api@1.2.8
+
 ## 5.18.8
 
 ### Patch Changes
diff --git a/packages/g/package.json b/packages/g/package.json
index a63718456..aa260e0ac 100644
--- a/packages/g/package.json
+++ b/packages/g/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/g",
-  "version": "5.18.8",
+  "version": "5.18.9",
   "description": "A core module for rendering engine implements DOM API.",
   "keywords": [
     "antv",
diff --git a/packages/react-g/CHANGELOG.md b/packages/react-g/CHANGELOG.md
index c3d3a3975..31b176220 100644
--- a/packages/react-g/CHANGELOG.md
+++ b/packages/react-g/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @antv/react-g
 
+## 1.10.9
+
+### Patch Changes
+
+-   @antv/g@5.18.9
+
 ## 1.10.8
 
 ### Patch Changes
diff --git a/packages/react-g/package.json b/packages/react-g/package.json
index c1f874cea..0598bd5d2 100644
--- a/packages/react-g/package.json
+++ b/packages/react-g/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/react-g",
-  "version": "1.10.8",
+  "version": "1.10.9",
   "description": "react render for @antv/g",
   "keywords": [
     "react",
diff --git a/site/docs/api/basic/circle.en.md b/site/docs/api/basic/circle.en.md
index a77737ad0..1ec8e94df 100644
--- a/site/docs/api/basic/circle.en.md
+++ b/site/docs/api/basic/circle.en.md
@@ -5,7 +5,7 @@ order: 2
 
 You can refer to the [\<circle\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/circle) element of SVG.
 
-The following [example](/en/examples/shape#circle) draws a circle with a center of `[100, 100]` and a radius of `100`.
+The following [example](/en/examples/shape/circle/#circle) draws a circle with a center of `[100, 100]` and a radius of `100`.
 
 ```js
 const circle = new Circle({
@@ -35,7 +35,7 @@ The default value is `center`. For details, see [DisplayObject's transformOrigin
 
 The x-axis coordinates of the center of the circle in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
+[https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx)
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -45,7 +45,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
 
 The y-axis coordinates of the center of the circle in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
+[https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy)
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -55,7 +55,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
 
 The radius of the circle.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/r
+[https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/r](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/r)
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
diff --git a/site/docs/api/basic/circle.zh.md b/site/docs/api/basic/circle.zh.md
index ad112a5cd..d135aa63a 100644
--- a/site/docs/api/basic/circle.zh.md
+++ b/site/docs/api/basic/circle.zh.md
@@ -5,7 +5,7 @@ order: 2
 
 可以参考 SVG 的 [\<circle\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/circle) 元素。
 
-如下 [示例](/zh/examples/shape#circle) 绘制了一个圆心在 `[100, 100]`，半径为 `100` 的圆：
+如下 [示例](/zh/examples/shape/circle/#circle) 绘制了一个圆心在 `[100, 100]`，半径为 `100` 的圆：
 
 ```js
 const circle = new Circle({
@@ -35,7 +35,7 @@ const circle = new Circle({
 
 圆心在局部坐标系下的 x 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -45,7 +45,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
 
 圆心在局部坐标系下的 y 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -55,7 +55,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
 
 圆的半径。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/r
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/r>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
diff --git a/site/docs/api/basic/ellipse.en.md b/site/docs/api/basic/ellipse.en.md
index 3d4cb1be4..8390485e4 100644
--- a/site/docs/api/basic/ellipse.en.md
+++ b/site/docs/api/basic/ellipse.en.md
@@ -5,7 +5,7 @@ order: 3
 
 You can refer to the [\<ellipse\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/ellipse) element of SVG.
 
-The following [example](/en/examples/shape#ellipse) draws an ellipse with a center of `[100, 100]` and a radius of `100`.
+The following [example](/en/examples/shape/ellipse/#ellipse) draws an ellipse with a center of `[100, 100]` and a radius of `100`.
 
 ```js
 const ellipse = new Ellipse({
@@ -36,7 +36,7 @@ The default value is `center`. For details, see [DisplayObject's transformOrigin
 
 The x-axis coordinates of the center of the circle in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -46,7 +46,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
 
 The y-axis coordinates of the center of the circle in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -56,7 +56,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
 
 Horizontal radius of the ellipse
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rx
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rx>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -66,7 +66,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rx
 
 The vertical radius of the ellipse
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/ry
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/ry>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
diff --git a/site/docs/api/basic/ellipse.zh.md b/site/docs/api/basic/ellipse.zh.md
index 49e7757c5..6b9e1efa2 100644
--- a/site/docs/api/basic/ellipse.zh.md
+++ b/site/docs/api/basic/ellipse.zh.md
@@ -5,7 +5,7 @@ order: 3
 
 可以参考 SVG 的 [\<ellipse\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/ellipse) 元素。
 
-如下 [示例](/zh/examples/shape#ellipse) 绘制了一个圆心在 `[100, 100]`，半径为 `100` 的椭圆：
+如下 [示例](/zh/examples/shape/ellipse/#ellipse) 绘制了一个圆心在 `[100, 100]`，半径为 `100` 的椭圆：
 
 ```js
 const ellipse = new Ellipse({
@@ -36,7 +36,7 @@ const ellipse = new Ellipse({
 
 圆心在局部坐标系下的 x 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -46,7 +46,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cx
 
 圆心在局部坐标系下的 y 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -56,7 +56,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/cy
 
 椭圆的水平半径
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rx
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rx>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -66,7 +66,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/rx
 
 椭圆的垂直半径
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/ry
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/ry>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
diff --git a/site/docs/api/basic/html.en.md b/site/docs/api/basic/html.en.md
index 5b0a2339e..d4c75fe5d 100644
--- a/site/docs/api/basic/html.en.md
+++ b/site/docs/api/basic/html.en.md
@@ -6,7 +6,7 @@ order: 9
 Sometimes we need to add some HUDs to the canvas, e.g. Tooltip. In this case, the HTML + CSS presentation has the following advantages over using basic graphics.
 
 -   Many native HTML components are difficult to draw, such as some input components: `<input>`, `<select>` etc.
--   Some of the HTML native features are difficult to implement, for example, text cannot be selected after drawing it using `g-canvas/webgl`, while it can be if it is displayed in HTML, the following image shows the text selection effect, [example](/en/examples/shape#html).
+-   Some of the HTML native features are difficult to implement, for example, text cannot be selected after drawing it using `g-canvas/webgl`, while it can be if it is displayed in HTML, the following image shows the text selection effect, [example](/en/examples/shape/html#html).
 
 ![Text selection effect](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*qGIRSaeHsTQAAAAAAAAAAAAAARQnAQ)
 
@@ -91,7 +91,7 @@ Corresponds to the CSS [visibility](https://developer.mozilla.org/zh-CN/docs/Web
 
 Corresponds to the CSS [pointer-events](https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events) property.
 
-When we implement a requirement like tooltip, we can have mouse events penetrate it, [example](/en/examples/shape#html).
+When we implement a requirement like tooltip, we can have mouse events penetrate it, [example](/en/examples/shape/html#html).
 
 ```js
 const tooltip = new HTML({
diff --git a/site/docs/api/basic/html.zh.md b/site/docs/api/basic/html.zh.md
index d1f14159c..429289247 100644
--- a/site/docs/api/basic/html.zh.md
+++ b/site/docs/api/basic/html.zh.md
@@ -6,7 +6,7 @@ order: 9
 有时我们需要在画布上增加一些 HUD（Head-Up Display），例如 Tooltip。此时用 HTML + CSS 展现相比使用基础图形绘制有以下优势：
 
 -   很多原生 HTML 组件难以绘制，例如一些输入类组件 `<input>` `<select>`
--   部分 HTML 原生特性难以实现，例如使用 g-canvas/webgl 绘制文本后无法选中，而如果用 HTML 展示文本就可以，下图展示了文本选中效果，[示例](/zh/examples/shape#html)：
+-   部分 HTML 原生特性难以实现，例如使用 g-canvas/webgl 绘制文本后无法选中，而如果用 HTML 展示文本就可以，下图展示了文本选中效果，[示例](/zh/examples/shape/html#html)：
 
 ![Text selection effect](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*qGIRSaeHsTQAAAAAAAAAAAAAARQnAQ)
 
@@ -91,7 +91,7 @@ canvas.appendChild(html);
 
 对应 CSS [pointer-events](https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events) 属性。
 
-当我们在实现类似 tooltip 这样的需求时，可以让鼠标事件穿透它，[示例](/zh/examples/shape#html)：
+当我们在实现类似 tooltip 这样的需求时，可以让鼠标事件穿透它，[示例](/zh/examples/shape/html#html)：
 
 ```js
 const tooltip = new HTML({
diff --git a/site/docs/api/basic/image.en.md b/site/docs/api/basic/image.en.md
index e93dc8e75..664a93857 100644
--- a/site/docs/api/basic/image.en.md
+++ b/site/docs/api/basic/image.en.md
@@ -5,7 +5,7 @@ order: 5
 
 You can refer to the [\<image\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/image) element of SVG.
 
-The following [example](/en/examples/shape#image) defines an image with a top-left vertex position of `(200, 100)`.
+The following [example](/en/examples/shape/image/#image) defines an image with a top-left vertex position of `(200, 100)`.
 
 ```javascript
 const image = new Image({
@@ -48,7 +48,7 @@ The default value is `left top`. For details, see [DisplayObject's transformOrig
 
 The x-axis coordinates of the top-left vertex of the image in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -58,7 +58,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
 
 The y-axis coordinates of the top-left vertex of the image in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -101,7 +101,7 @@ This attribute is an alias for [img](/en/api/basic/image).
 
 Image width.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -111,8 +111,45 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
 
 Image height.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | '0'                                                                  | -                   | no                                     | yes        | [\<percentage\>](/en/api/css/css-properties-values-api#percentage) [\<length\>](/en/api/css/css-properties-values-api#length) |
+
+### isBillboard
+
+Whether or not to always face the camera in 3D scenes, defaults to `false`, also known as the "billboard effect".
+
+In [example](/en/examples/3d/3d-basic#billboard), the image is rendered compressed when the camera is rotated without being turned on:
+
+![disable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DptES7Mly00AAAAAAAAAAAAADmJ7AQ/original)
+
+Turning it on doesn't change the position of the image, but it will always face the camera. This is in line with what is usually required for 2D graphics like text in 3D scenes:
+
+![enable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A28RS4TxIZYAAAAAAAAAAAAADmJ7AQ/original)
+
+### billboardRotation
+
+Rotation angle in billboard mode, clockwise in radians.
+
+In [example](/zh/examples/3d/3d-basic#billboard), we add a rotation angle to the image:
+
+```js
+image.style.isBillboard = true;
+image.style.billboardRotation = Math.PI / 8;
+```
+
+![billboard rotation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*v8ngTbgkP-MAAAAAAAAAAAAADmJ7AQ/original)
+
+## isSizeAttenuation
+
+Whether or not to apply size attenuation in perspective projection. This option can be turned on if you want to keep the size consistent regardless of depth, following the "near big, far small" visual effect in perspective projection.
+
+In [example](/en/examples/3d/3d-basic#size-attenuation), we enable size attenuation for image:
+
+```js
+image.style.isSizeAttenuation = true;
+```
+
+![enable size attenuation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uLDORaJ-snoAAAAAAAAAAAAADmJ7AQ/original)
diff --git a/site/docs/api/basic/image.zh.md b/site/docs/api/basic/image.zh.md
index 811eb9f58..34a6e059b 100644
--- a/site/docs/api/basic/image.zh.md
+++ b/site/docs/api/basic/image.zh.md
@@ -5,7 +5,7 @@ order: 5
 
 可以参考 SVG 的 [\<image\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/image) 元素。
 
-如下 [示例](/zh/examples/shape#image) 定义了一个图片，左上角顶点位置为 `(200, 100)`：
+如下 [示例](/zh/examples/shape/image/#image) 定义了一个图片，左上角顶点位置为 `(200, 100)`：
 
 ```javascript
 const image = new Image({
@@ -48,7 +48,7 @@ const image = new Image({
 
 局部坐标系下，图片左上角顶点的 x 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -58,7 +58,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
 
 局部坐标系下，图片左上角顶点的 y 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -102,7 +102,7 @@ img.onload = () => {
 
 图片宽度。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -112,8 +112,45 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
 
 图片高度。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
 | '0'                                                           | -        | 否                                    | 是           | [\<percentage\>](/zh/api/css/css-properties-values-api#percentage) [\<length\>](/zh/api/css/css-properties-values-api#length) |
+
+### isBillboard
+
+在 3D 场景下是否永远面朝相机，默认为 `false`，也称作“公告牌效果”。
+
+在[示例](/zh/examples/3d/3d-basic#billboard)中，未开启情况下在相机发生旋转时，图片会呈现被压缩的效果：
+
+![disable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*DptES7Mly00AAAAAAAAAAAAADmJ7AQ/original)
+
+开启后并不会改变图片的位置，但它会始终面朝相机。这也符合通常 3D 场景下对于图片这类 2D 图形的需求：
+
+![enable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*A28RS4TxIZYAAAAAAAAAAAAADmJ7AQ/original)
+
+### billboardRotation
+
+公告牌模式下的旋转角度，顺时针方向以 radians 为单位。
+
+在[示例](/zh/examples/3d/3d-basic#billboard)中，我们为图片增加一个旋转角度：
+
+```js
+image.style.isBillboard = true;
+image.style.billboardRotation = Math.PI / 8;
+```
+
+![billboard rotation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*v8ngTbgkP-MAAAAAAAAAAAAADmJ7AQ/original)
+
+## isSizeAttenuation
+
+在透视投影下，是否进行尺寸衰减。在透视投影中遵循“近大远小”的视觉效果，如果希望保持大小始终一致不受深度影响，可以开启该选项。
+
+在[示例](/zh/examples/3d/3d-basic#size-attenuation)中，我们为图片开启了尺寸衰减：
+
+```js
+image.style.isSizeAttenuation = true;
+```
+
+![enable size attenuation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*uLDORaJ-snoAAAAAAAAAAAAADmJ7AQ/original)
diff --git a/site/docs/api/basic/line.en.md b/site/docs/api/basic/line.en.md
index c211d9e61..09019491b 100644
--- a/site/docs/api/basic/line.en.md
+++ b/site/docs/api/basic/line.en.md
@@ -5,7 +5,7 @@ order: 6
 
 You can refer to the [\<line\>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line) element of SVG.
 
-The following [example](/en/examples/shape#line) defines a line with two endpoints `[200, 100]` and `[400, 100]`, a line width of 2, and a dashed line.
+The following [example](/en/examples/shape/line/#line) defines a line with two endpoints `[200, 100]` and `[400, 100]`, a line width of 2, and a dashed line.
 
 ```javascript
 const line1 = new Line({
@@ -72,7 +72,7 @@ Default value is `'1'`. See [DisplayObject's lineWidth](/en/api/basic/display-ob
 
 The x-axis coordinate of the first endpoint in the local coordinate system.
 
-https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x1
+<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x1>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -82,7 +82,7 @@ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x1
 
 The y-axis coordinate of the first endpoint in the local coordinate system.
 
-https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y1
+<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y1>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -100,7 +100,7 @@ The z-axis coordinate of the first endpoint in the local coordinate system.
 
 The x-axis coordinate of the second endpoint in the local coordinate system.
 
-https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x2
+<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x2>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -110,7 +110,7 @@ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/x2
 
 The y-axis coordinate of the second endpoint in the local coordinate system.
 
-https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y2
+<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/y2>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -134,7 +134,7 @@ You can refer to the [attribute of the same name](https://developer.mozilla.org/
 
 Add a marker graphic to the "start point" of the line, where the "start point" is the endpoint defined by [x1/y1](/en/api/basic/line#x1).
 
-In the following [example](/en/examples/shape#line), we first created an arrow using [Path](/en/api/basic/path) and then added it to the start of the line with this property.
+In the following [example](/en/examples/shape/line#line), we first created an arrow using [Path](/en/api/basic/path) and then added it to the start of the line with this property.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*Ft0URoJ4joYAAAAAAAAAAAAAARQnAQ" width="200" alt="arrowhead">
 
@@ -164,7 +164,7 @@ const arrowLine = new Line({
 
 The marker graphic can be any graphic, and we will place it in the right place and adjust the orientation. When the definition of a line is changed, it will be adjusted automatically as well.
 
-Of course you can also manually adjust its [anchor](/en/api/basic/display-object#anchor), [transformOrigin](/en/api/basic/display-object#transformorigin) and [transform](/en/api/basic/display-object#transform), for example in this [example](/en/examples/shape#line) we rotate [Image](/en/api/basic/image) as a marker graphic, manually rotated by 90 degrees.
+Of course you can also manually adjust its [anchor](/en/api/basic/display-object#anchor), [transformOrigin](/en/api/basic/display-object#transformorigin) and [transform](/en/api/basic/display-object#transform), for example in this [example](/en/examples/shape/line#line) we rotate [Image](/en/api/basic/image) as a marker graphic, manually rotated by 90 degrees.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*fWUrQKbwGngAAAAAAAAAAAAAARQnAQ" width="200" alt="image arrowhead">
 
@@ -189,7 +189,7 @@ line.style.markerStart = null;
 
 The relationship between the line and the marker graph in the implementation is parent-child.
 
-```
+```js
 Line
   -> Path(#markerStart)
   -> Path(#markerEnd)
@@ -225,13 +225,13 @@ You can refer to the [attribute of the same name](https://developer.mozilla.org/
 
 Sometimes we want to adjust the position of the marker shape, so we provide the option to increase the offset along the line by a certain amount, positive offset inward and negative offset outward.
 
-In [example](/en/examples/shape#line), we manipulate this property to give the line a "stretch effect".
+In [example](/en/examples/shape/line#line), we manipulate this property to give the line a "stretch effect".
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*Uc-wSYP9sYUAAAAAAAAAAAAAARQnAQ">
 
 It is worth noting that while the offset will make the line change visually, it does not affect the [x1/y1/x2/y2](/en/api/basic/line#x1) values of these attributes.
 
-In [example](/en/examples/shape#marker), the endpoints of the line coincide with the center of the circle at both ends, but to avoid the arrows coinciding with the nodes at both ends, they need to be indented a certain distance inward.
+In [example](/en/examples/shape/line#marker), the endpoints of the line coincide with the center of the circle at both ends, but to avoid the arrows coinciding with the nodes at both ends, they need to be indented a certain distance inward.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*X5W_TYz-2SIAAAAAAAAAAAAAARQnAQ" alt="arrow marker" width="200">
 
@@ -253,7 +253,7 @@ Adjusts the position of the marker graphic at the "end point".
 
 Get the length of the line.
 
-https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength
+<https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getTotalLength>
 
 ```js
 line.getTotalLength(); // 200
@@ -277,7 +277,7 @@ export type Point = {
 };
 ```
 
-https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
+<https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength>
 
 For example, to obtain the coordinates of a point in the local coordinate system on a line at a distance of 100 from the starting point.
 
diff --git a/site/docs/api/basic/line.zh.md b/site/docs/api/basic/line.zh.md
index de82dcfa1..fece0ebf9 100644
--- a/site/docs/api/basic/line.zh.md
+++ b/site/docs/api/basic/line.zh.md
@@ -5,7 +5,7 @@ order: 6
 
 可以参考 SVG 的 [\<line\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/line) 元素。
 
-如下 [示例](/zh/examples/shape#line) 定义了一条直线，两个端点分别为 `[200, 100]` 和 `[400, 100]`，线宽为 2，而且是一条虚线：
+如下 [示例](/zh/examples/shape/line/#line) 定义了一条直线，两个端点分别为 `[200, 100]` 和 `[400, 100]`，线宽为 2，而且是一条虚线：
 
 ```javascript
 const line1 = new Line({
@@ -72,7 +72,7 @@ line.getLocalPosition(); // [200, 100]
 
 局部坐标系下，第一个端点的 x 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x1
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x1>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -82,7 +82,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x1
 
 局部坐标系下，第一个端点的 y 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y1
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y1>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -100,7 +100,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y1
 
 局部坐标系下，第二个端点的 x 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x2
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x2>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -110,7 +110,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x2
 
 局部坐标系下，第二个端点的 y 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y2
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y2>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -134,7 +134,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y2
 
 在直线的 “起始点” 处添加一个标记图形，其中 “起始点” 为 [x1/y1](/zh/api/basic/line#x1) 定义的端点。
 
-在下面的 [示例](/zh/examples/shape#line) 中，我们首先使用 [Path](/zh/api/basic/path) 创建了一个箭头，然后通过该属性把它添加到了直线的起点上：
+在下面的 [示例](/zh/examples/shape/line#line) 中，我们首先使用 [Path](/zh/api/basic/path) 创建了一个箭头，然后通过该属性把它添加到了直线的起点上：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*Ft0URoJ4joYAAAAAAAAAAAAAARQnAQ" width="200" alt="arrowhead">
 
@@ -164,7 +164,7 @@ const arrowLine = new Line({
 
 标记图形可以是任意图形，我们会将它放置在合适的位置并调整好朝向。当直线的定义改变时，也会随之自动调整。
 
-当然你也可以手动调整它的 [anchor](/zh/api/basic/display-object#anchor), [transformOrigin](/zh/api/basic/display-object#transformorigin) 和 [transform](/zh/api/basic/display-object#transform)，例如在该 [示例](/zh/examples/shape#line) 中，我们将 [Image](/zh/api/basic/image) 作为标记图形，手动旋转了 90 度：
+当然你也可以手动调整它的 [anchor](/zh/api/basic/display-object#anchor), [transformOrigin](/zh/api/basic/display-object#transformorigin) 和 [transform](/zh/api/basic/display-object#transform)，例如在该 [示例](/zh/examples/shape/line#line) 中，我们将 [Image](/zh/api/basic/image) 作为标记图形，手动旋转了 90 度：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*fWUrQKbwGngAAAAAAAAAAAAAARQnAQ" width="200" alt="image arrowhead">
 
@@ -189,7 +189,7 @@ line.style.markerStart = null;
 
 在实现中直线和标记图形的关系为父子关系：
 
-```
+```js
 Line
   -> Path(#markerStart)
   -> Path(#markerEnd)
@@ -225,13 +225,13 @@ line.childNodes[0].style.stroke = 'red';
 
 有时我们想调整标记图形的位置，为此我们提供了该选项沿直线方向增加一定偏移量，正偏移量向内，负偏移量向外。
 
-在 [示例](/zh/examples/shape#line) 中，我们通过操作该属性让直线实现“伸缩效果”：
+在 [示例](/zh/examples/shape/line#line) 中，我们通过操作该属性让直线实现“伸缩效果”：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*Uc-wSYP9sYUAAAAAAAAAAAAAARQnAQ">
 
 值得注意的是，虽然偏移量会让直线在视觉效果上发生变化，但并不会影响 [x1/y1/x2/y2](/zh/api/basic/line#x1) 这些属性值。
 
-在 [示例](/zh/examples/shape#marker) 中，直线端点与两端的圆心重合，但为了避免箭头与两端的节点重合，需要向内缩进一定距离：
+在 [示例](/zh/examples/shape/line#marker) 中，直线端点与两端的圆心重合，但为了避免箭头与两端的节点重合，需要向内缩进一定距离：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*X5W_TYz-2SIAAAAAAAAAAAAAARQnAQ" alt="arrow marker" width="200">
 
@@ -253,7 +253,7 @@ line.childNodes[0].style.stroke = 'red';
 
 获取直线长度。
 
-https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength
+<https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength>
 
 ```js
 line.getTotalLength(); // 200
@@ -277,7 +277,7 @@ export type Point = {
 };
 ```
 
-https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
+<https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength>
 
 例如获取直线上局部坐标系下从起点出发 100 距离的点坐标：
 
diff --git a/site/docs/api/basic/path.en.md b/site/docs/api/basic/path.en.md
index 08459ccb6..41ae80f30 100644
--- a/site/docs/api/basic/path.en.md
+++ b/site/docs/api/basic/path.en.md
@@ -3,9 +3,9 @@ title: Path
 order: 8
 ---
 
-Use Path to define lines, dashes, arcs, Bezier curves, etc. The path contains a set of commands and arguments with different semantics, which can be found at: https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
+Use Path to define lines, dashes, arcs, Bezier curves, etc. The path contains a set of commands and arguments with different semantics, which can be found at: <https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths>
 
-The following [example](/en/examples/shape#path) defines a line from `[100, 100]` to `[200, 200]` in the local coordinate system.
+The following [example](/en/examples/shape/path#path) defines a line from `[100, 100]` to `[200, 200]` in the local coordinate system.
 
 ```javascript
 const line = new Path({
@@ -72,7 +72,7 @@ Paths, both `string` and `Array` forms are supported, see [SVG path](https://dev
 -   String form: `M 100,100 L 200,200`
 -   Array form: `[ [ 'M', 100, 100 ], [ 'L', 200, 200 ]]`
 
-https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/path
+<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/path>
 
 ### d
 
@@ -89,7 +89,7 @@ For example, in the following figure, where markerStart and markerEnd are also s
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*2Pi6SpcqPwAAAAAAAAAAAAAAARQnAQ" alt="unclosed path marker" width="200"><img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*HEpoQbRiRowAAAAAAAAAAAAAARQnAQ" alt="closed path marker" width="200">
 
-In this [example](/en/examples/shape#path), we have placed an arrow at the beginning of the Path.
+In this [example](/en/examples/shape/path#path), we have placed an arrow at the beginning of the Path.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*-ooIS5IePf4AAAAAAAAAAAAAARQnAQ" alt="path start marker" width="400">
 
@@ -115,7 +115,7 @@ Since Path can be closed by the `Z` command, the definition of the "end point" d
 -   If it is not closed, you can refer to the [markerEnd](/en/api/basic/polyline#markerend) attribute of [Polyline](/en/api/basic/polyline).
 -   If closed, see the [markerEnd](/en/api/basic/polygon#markerend) property of [Polygon](/en/api/basic/polygon).
 
-In this [example](/en/examples/shape#path), we have placed an image at the termination point of the polygon.
+In this [example](/en/examples/shape/path#path), we have placed an image at the termination point of the polygon.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*4bYtTKQxOrQAAAAAAAAAAAAAARQnAQ" alt="polygon marker" width="200">
 
@@ -183,7 +183,7 @@ See the [markerEndOffset](/en/api/basic/polyline) property of [Polyline](/en/api
 
 ### getTotalLength
 
-https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength
+<https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength>
 
 For example, get the length of the following line.
 
@@ -250,7 +250,7 @@ path.getPoint(0.5); // Point {x: 100, y: 150}
 
 It is worth noting that if the value range `[0-1]` is exceeded, the coordinates of the point at the beginning and end of the path will be returned. For illegal paths, the method returns `Point {x: NaN, y: NaN}`.
 
-Also the transformations applied on the original path, in the local coordinate system, will be applied to the returned points. For example, in this [example](/en/examples/shape#path), the path itself is translated and scaled by.
+Also the transformations applied on the original path, in the local coordinate system, will be applied to the returned points. For example, in this [example](/en/examples/shape/path#path), the path itself is translated and scaled by.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*fOKWRIq_IWsAAAAAAAAAAAAAARQnAQ" width="300" alt="get point of a path">
 
@@ -263,7 +263,7 @@ The parameters are as follows.
 -   `distance` mandatory, the distance value
 -   `inWorldSpace` optional, indicates if the distance is calculated in the world coordinate system. The default value is `false`.
 
-https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
+<https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength>
 
 ```js
 path.getPointAtLength(100); // Point {x: 300, y: 100}
diff --git a/site/docs/api/basic/path.zh.md b/site/docs/api/basic/path.zh.md
index fcaf84e0d..1a067a649 100644
--- a/site/docs/api/basic/path.zh.md
+++ b/site/docs/api/basic/path.zh.md
@@ -3,9 +3,9 @@ title: Path 路径
 order: 8
 ---
 
-使用 Path 可以定义直线、折线、圆弧、贝塞尔曲线等。路径中包含一组命令与参数，这些命令有不同的语义，具体用法可以参考：https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths
+使用 Path 可以定义直线、折线、圆弧、贝塞尔曲线等。路径中包含一组命令与参数，这些命令有不同的语义，具体用法可以参考：<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths>
 
-如下 [示例](/zh/examples/shape#path) 定义了一条直线，在局部坐标系下从 `[100, 100]` 到 `[200, 200]`：
+如下 [示例](/zh/examples/shape/path#path) 定义了一条直线，在局部坐标系下从 `[100, 100]` 到 `[200, 200]`：
 
 ```javascript
 const line = new Path({
@@ -72,7 +72,7 @@ line.translateLocal(100, 0); // 沿 X 轴平移
 -   字符串形式: `M 100,100 L 200,200`
 -   数组形式: `[ [ 'M', 100, 100 ], [ 'L', 200, 200 ] ]`
 
-https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/path
+<https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/path>
 
 ### d
 
@@ -89,7 +89,7 @@ https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/path
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*2Pi6SpcqPwAAAAAAAAAAAAAAARQnAQ" alt="unclosed path marker" width="200"><img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*HEpoQbRiRowAAAAAAAAAAAAAARQnAQ" alt="closed path marker" width="200">
 
-在该[示例](/zh/examples/shape#path)中，我们在 Path 的起始点上放置了一个箭头：
+在该[示例](/zh/examples/shape/path#path)中，我们在 Path 的起始点上放置了一个箭头：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*-ooIS5IePf4AAAAAAAAAAAAAARQnAQ" alt="path start marker" width="400">
 
@@ -115,7 +115,7 @@ path.style.markerStart = arrowMarker;
 -   如果未闭合，可以参考 [Polyline](/zh/api/basic/polyline) 的 [markerEnd](/zh/api/basic/polyline#markerend) 属性。
 -   如果已闭合，可以参考 [Polygon](/zh/api/basic/polygon) 的 [markerEnd](/zh/api/basic/polygon#markerend) 属性。
 
-在该[示例](/zh/examples/shape#path)中，我们在多边形的终止点上放置了一个图片：
+在该[示例](/zh/examples/shape/path#path)中，我们在多边形的终止点上放置了一个图片：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*4bYtTKQxOrQAAAAAAAAAAAAAARQnAQ" alt="polygon marker" width="200">
 
@@ -183,7 +183,7 @@ path.style.markerMid = circleMarker;
 
 获取路径长度。
 
-https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength
+<https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength>
 
 例如获取如下直线的长度：
 
@@ -250,7 +250,7 @@ path.getPoint(0.5); // Point {x: 100, y: 150}
 
 值得注意的是，如果超出取值范围 `[0-1]`，会返回路径头尾的点坐标。对于非法路径，该方法会返回 `Point {x: NaN, y: NaN}`
 
-另外在原路径上应用的，在局部坐标系下的变换也会应用到返回的点上。例如在该[示例](/zh/examples/shape#path)中，路径本身经过了平移和缩放：
+另外在原路径上应用的，在局部坐标系下的变换也会应用到返回的点上。例如在该[示例](/zh/examples/shape/path#path)中，路径本身经过了平移和缩放：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*fOKWRIq_IWsAAAAAAAAAAAAAARQnAQ" width="300" alt="get point of a path">
 
@@ -263,7 +263,7 @@ path.getPoint(0.5); // Point {x: 100, y: 150}
 -   `distance` 必填，从起点出发的距离值
 -   `inWorldSpace` 可选，表示是否在世界坐标系下计算。默认值为 `false`
 
-https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
+<https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength>
 
 ```js
 path.getPointAtLength(100); // Point {x: 300, y: 100}
diff --git a/site/docs/api/basic/polygon.en.md b/site/docs/api/basic/polygon.en.md
index ac7a87ad3..0ca75fab1 100644
--- a/site/docs/api/basic/polygon.en.md
+++ b/site/docs/api/basic/polygon.en.md
@@ -5,7 +5,7 @@ order: 7
 
 You can refer to the [\<polygon\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/polygon) element of SVG.
 
-The following [example](/en/examples/shape#polygon) defines a polygon.
+The following [example](/en/examples/shape/polygon#polygon) defines a polygon.
 
 ```javascript
 const polygon = new Polygon({
@@ -62,7 +62,7 @@ polygon.style.points = [
 ];
 ```
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points>
 
 ### markerStart
 
@@ -72,7 +72,7 @@ But unlike Polyline, since polygons are **closed**, the positions of the "start"
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*mXYATLithEUAAAAAAAAAAAAAARQnAQ" alt="polygon end/start overlap" width="400">
 
-In this [example](/en/examples/shape#polygon), we have placed an arrow at the start of the polygon.
+In this [example](/en/examples/shape/polygon#polygon), we have placed an arrow at the start of the polygon.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*RRPTRIpZoUIAAAAAAAAAAAAAARQnAQ" alt="polygon marker" width="200">
 
@@ -95,7 +95,7 @@ See [markerEnd](/en/api/basic/polyline#markerend) property of [Polyline](/en/api
 
 However, unlike Polyline, since polygons are **closed**, the positions of the "start point" and "end point" coincide exactly. The "end point" is determined by the first point in [points](/en/api/basic/polygon#points).
 
-In this [example](/en/examples/shape#polygon), we have placed a picture at the termination point of the polygon.
+In this [example](/en/examples/shape/polygon#polygon), we have placed a picture at the termination point of the polygon.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*eZHETJ0B3lkAAAAAAAAAAAAAARQnAQ" alt="polygon marker" width="200">
 
diff --git a/site/docs/api/basic/polygon.zh.md b/site/docs/api/basic/polygon.zh.md
index 5b17b78c1..d99a51ab9 100644
--- a/site/docs/api/basic/polygon.zh.md
+++ b/site/docs/api/basic/polygon.zh.md
@@ -5,7 +5,7 @@ order: 7
 
 可以参考 SVG 的 [\<polygon\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/polygon) 元素。
 
-如下 [示例](/zh/examples/shape#polygon) 定义了一个多边形：
+如下 [示例](/zh/examples/shape/polygon#polygon) 定义了一个多边形：
 
 ```javascript
 const polygon = new Polygon({
@@ -62,7 +62,7 @@ polygon.style.points = [
 ];
 ```
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points>
 
 ### markerStart
 
@@ -72,7 +72,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*mXYATLithEUAAAAAAAAAAAAAARQnAQ" alt="polygon end/start overlap" width="400">
 
-在该[示例](/zh/examples/shape#polygon)中，我们在多边形的“起始点”上放置了一个箭头：
+在该[示例](/zh/examples/shape/polygon#polygon)中，我们在多边形的“起始点”上放置了一个箭头：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*RRPTRIpZoUIAAAAAAAAAAAAAARQnAQ" alt="polygon marker" width="200">
 
@@ -95,7 +95,7 @@ polygon.style.markerStart = arrowMarker;
 
 但和 Polyline 不同的是，由于多边形是**闭合**的，因此 “起始点” 和 “终止点” 的位置是完全重合的。“终止点” 由 [points](/zh/api/basic/polygon#points) 中的第一个点决定。
 
-在该[示例](/zh/examples/shape#polygon)中，我们在多边形的终止点上放置了一个图片：
+在该[示例](/zh/examples/shape/polygon#polygon)中，我们在多边形的终止点上放置了一个图片：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*eZHETJ0B3lkAAAAAAAAAAAAAARQnAQ" alt="polygon marker" width="200">
 
diff --git a/site/docs/api/basic/polyline.en.md b/site/docs/api/basic/polyline.en.md
index 733f07826..34a5c839b 100644
--- a/site/docs/api/basic/polyline.en.md
+++ b/site/docs/api/basic/polyline.en.md
@@ -5,7 +5,7 @@ order: 7
 
 You can refer to the [\<polyline\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/polyline) element of SVG.
 
-The following [example](/en/examples/shape#polyline) defines a polyline with the following endpoints in order
+The following [example](/en/examples/shape/polyline#polyline) defines a polyline with the following endpoints in order
 
 ```javascript
 const polyline = new Polyline({
@@ -80,7 +80,7 @@ polyline.style.points = [
 ];
 ```
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/points>
 
 ### markerStart
 
@@ -88,7 +88,7 @@ See the [markerStart](/en/api/basic/line) property of [Line](/en/api/basic/line#
 
 The "start point" is determined by the first point in [points](/en/api/basic/polyline#points).
 
-In this [example](/en/examples/shape#polyline), we have placed an arrow at the start of the line.
+In this [example](/en/examples/shape/polyline#polyline), we have placed an arrow at the start of the line.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*jPJnTJ9VANYAAAAAAAAAAAAAARQnAQ" alt="polyline marker" width="120">
 
@@ -111,7 +111,7 @@ See the [markerEnd](/en/api/basic/line) attribute of [Line](/en/api/basic/line#m
 
 The "end point" is determined by the last point in [points](/en/api/basic/polyline#points).
 
-In this [example](/en/examples/shape#polyline), we have placed an image at the termination point of the line.
+In this [example](/en/examples/shape/polyline#polyline), we have placed an image at the termination point of the line.
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*aXEMQIPzPVYAAAAAAAAAAAAAARQnAQ" alt="polyline marker" width="120">
 
@@ -181,7 +181,7 @@ Moves the marker graphic in the direction of the last line segment of the fold.
 
 Get the length of the polyline.
 
-https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength
+<https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength>
 
 ### getPoint
 
@@ -210,7 +210,7 @@ The parameters are as follows.
 -   `distance` mandatory, the distance value
 -   `inWorldSpace` optional, indicates if the distance is calculated in the world coordinate system. The default value is `false`.
 
-https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
+<https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength>
 
 ```js
 polyline.getPointAtLength(100); // Point {x: 300, y: 100}
diff --git a/site/docs/api/basic/polyline.zh.md b/site/docs/api/basic/polyline.zh.md
index f714c17fe..7a39e706f 100644
--- a/site/docs/api/basic/polyline.zh.md
+++ b/site/docs/api/basic/polyline.zh.md
@@ -5,7 +5,7 @@ order: 7
 
 可以参考 SVG 的 [\<polyline\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/polyline) 元素。
 
-如下 [示例](/zh/examples/shape#polyline) 定义了一条折线，各个端点依次为：
+如下 [示例](/zh/examples/shape/polyline#polyline) 定义了一条折线，各个端点依次为：
 
 ```javascript
 const polyline = new Polyline({
@@ -88,7 +88,7 @@ polyline.style.points = [
 
 “起始点” 由 [points](/zh/api/basic/polyline#points) 中的第一个点决定。
 
-在该[示例](/zh/examples/shape#polyline)中，我们在折线的起始点上放置了一个箭头：
+在该[示例](/zh/examples/shape/polyline#polyline)中，我们在折线的起始点上放置了一个箭头：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*jPJnTJ9VANYAAAAAAAAAAAAAARQnAQ" alt="polyline marker" width="120">
 
@@ -111,7 +111,7 @@ polyline.style.markerStart = arrowMarker;
 
 “终止点” 由 [points](/zh/api/basic/polyline#points) 中的最后一个点决定。
 
-在该[示例](/zh/examples/shape#polyline)中，我们在折线的终止点上放置了一个图片：
+在该[示例](/zh/examples/shape/polyline#polyline)中，我们在折线的终止点上放置了一个图片：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*aXEMQIPzPVYAAAAAAAAAAAAAARQnAQ" alt="polyline marker" width="120">
 
@@ -181,7 +181,7 @@ polyline.style.markerMid = circleMarker;
 
 获取折线长度。
 
-https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength
+<https://developer.mozilla.org/zh-CN/docs/Web/API/SVGGeometryElement/getTotalLength>
 
 ### getPoint
 
@@ -210,7 +210,7 @@ export type Point = {
 -   `distance` 必填，从起点出发的距离值
 -   `inWorldSpace` 可选，表示是否在世界坐标系下计算。默认值为 `false`
 
-https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength
+<https://developer.mozilla.org/en-US/docs/Web/API/SVGGeometryElement/getPointAtLength>
 
 ```js
 polyline.getPointAtLength(100); // Point {x: 300, y: 100}
diff --git a/site/docs/api/basic/rect.en.md b/site/docs/api/basic/rect.en.md
index 29ec6d1aa..51a826482 100644
--- a/site/docs/api/basic/rect.en.md
+++ b/site/docs/api/basic/rect.en.md
@@ -5,7 +5,7 @@ order: 4
 
 You can refer to the [\<rect\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/rect) element of SVG.
 
-The following [example](/en/examples/shape#rect) defines a rounded rectangle with the top left vertex at `(200, 100)`.
+The following [example](/en/examples/shape/rect/#rect) defines a rounded rectangle with the top left vertex at `(200, 100)`.
 
 ```javascript
 const rect = new Rect({
@@ -40,7 +40,7 @@ The default value is `left top`. For details, see [DisplayObject's transformOrig
 
 The x-axis coordinate of the top-left vertex of the rectangle in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -50,7 +50,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
 
 The y-axis coordinate of the top-left vertex of the rectangle in the local coordinate system.
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -58,7 +58,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y
 
 ### width
 
-The width of the rectangle. Supports taking **negative numbers** with the effect of reversing along the Y-axis, [example](/en/examples/shape#rect).
+The width of the rectangle. Supports taking **negative numbers** with the effect of reversing along the Y-axis, [example](/en/examples/shape/rect/#rect).
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*_sVnRJmw7m8AAAAAAAAAAAAAARQnAQ" width="300" alt="negative width of rect">
 
@@ -68,7 +68,7 @@ This is consistent with the Canvas2D API, [see](https://stackoverflow.com/a/1559
 
 We circumvent this problem by using `<path>` instead of `<rect>` for drawing in [g-svg](/en/api/renderer/svg).
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -76,11 +76,11 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
 
 ### height
 
-The height of the rectangle. Supports taking **negative numbers** with the effect of reversing along the X-axis, [example](/en/examples/shape#rect).
+The height of the rectangle. Supports taking **negative numbers** with the effect of reversing along the X-axis, [example](/en/examples/shape/rect/#rect).
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*gPkGR56c5QgAAAAAAAAAAAAAARQnAQ" width="300" alt="negative height of rect">
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height>
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value)                                                        |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
diff --git a/site/docs/api/basic/rect.zh.md b/site/docs/api/basic/rect.zh.md
index 561767c87..1b941434e 100644
--- a/site/docs/api/basic/rect.zh.md
+++ b/site/docs/api/basic/rect.zh.md
@@ -5,7 +5,7 @@ order: 4
 
 可以参考 SVG 的 [\<rect\>](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/rect) 元素。
 
-如下 [示例](/zh/examples/shape#rect) 定义了一个圆角矩形，左上角顶点位置为 `(200, 100)`：
+如下 [示例](/zh/examples/shape/rect/#rect) 定义了一个圆角矩形，左上角顶点位置为 `(200, 100)`：
 
 ```javascript
 const rect = new Rect({
@@ -40,7 +40,7 @@ const rect = new Rect({
 
 局部坐标系下，矩形左上角顶点的 x 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -50,7 +50,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x
 
 局部坐标系下，矩形左上角顶点的 y 轴坐标。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -58,7 +58,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y
 
 ### width
 
-矩形宽度。支持取**负数**，效果为沿 Y 轴反转，[示例](/zh/examples/shape#rect)：
+矩形宽度。支持取**负数**，效果为沿 Y 轴反转，[示例](/zh/examples/shape/rect/#rect)：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*_sVnRJmw7m8AAAAAAAAAAAAAARQnAQ" width="300" alt="negative width of rect">
 
@@ -68,7 +68,7 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y
 
 我们在 [g-svg](/zh/api/renderer/svg) 中使用 `<path>` 代替 `<rect>` 绘制规避了这个问题。
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
@@ -76,11 +76,11 @@ https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width
 
 ### height
 
-矩形高度。支持取**负数**，效果为沿 X 轴反转，[示例](/zh/examples/shape#rect)：
+矩形高度。支持取**负数**，效果为沿 X 轴反转，[示例](/zh/examples/shape/rect/#rect)：
 
 <img src="https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*gPkGR56c5QgAAAAAAAAAAAAAARQnAQ" width="300" alt="negative height of rect">
 
-https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height
+<https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height>
 
 | [初始值](/zh/api/css/css-properties-values-api#initial-value) | 适用元素 | [是否可继承](/zh/api/css/inheritance) | 是否支持动画 | [计算值](/zh/api/css/css-properties-values-api#computed-value)                                                                |
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
diff --git a/site/docs/api/basic/text.en.md b/site/docs/api/basic/text.en.md
index 95a404db5..55c3c23f1 100644
--- a/site/docs/api/basic/text.en.md
+++ b/site/docs/api/basic/text.en.md
@@ -5,7 +5,7 @@ order: 1
 
 Provides simple single/multi-line text layout capabilities, with single-line support for horizontal alignment and character spacing; multi-line support for explicit line breaks as well as automatic line breaks and vertical alignment.
 
-The following properties can be adjusted in this [example](/en/examples/shape#text).
+The following properties can be adjusted in this [example](/en/examples/shape/text/#text).
 
 ## Inherited from
 
@@ -52,6 +52,43 @@ Both `px` and `em` units are supported, and the default `px` unit when using the
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
 | '0'                                                                  | -                   | no                                     | yes        | [\<percentage\>](/en/api/css/css-properties-values-api#percentage) [\<length\>](/en/api/css/css-properties-values-api#length) |
 
+## isBillboard
+
+Whether or not to always face the camera in 3D scenes, defaults to `false`, also known as the "billboard effect".
+
+In [example](/en/examples/3d/3d-basic#billboard), the text is rendered compressed when the camera is rotated without being turned on:
+
+![disable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*i7kASr_GZhUAAAAAAAAAAAAADmJ7AQ/original)
+
+Turning it on doesn't change the position of the text, but it will always face the camera. This is in line with what is usually required for 2D graphics like text in 3D scenes:
+
+![enable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5cNIQ40b4IIAAAAAAAAAAAAADmJ7AQ/original)
+
+## billboardRotation
+
+Rotation angle in billboard mode, clockwise in radians.
+
+In [example](/zh/examples/3d/3d-basic#billboard), we add a rotation angle to the text:
+
+```js
+label.style.isBillboard = true;
+label.style.billboardRotation = Math.PI / 8;
+```
+
+![billboard rotation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*v8ngTbgkP-MAAAAAAAAAAAAADmJ7AQ/original)
+
+## isSizeAttenuation
+
+Whether or not to apply size attenuation in perspective projection. This option can be turned on if you want to keep the size consistent regardless of depth, following the "near big, far small" visual effect in perspective projection.
+
+In [example](/en/examples/3d/3d-basic#size-attenuation), we enable size attenuation for text:
+
+```js
+label.style.isSizeAttenuation = true;
+```
+
+![enable size attenuation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9SMLQpVThc4AAAAAAAAAAAAADmJ7AQ/original)
+
 ## Font Related
 
 ### fontFamily
@@ -92,7 +129,7 @@ Corresponds to the [CSS font-style](https://developer.mozilla.org/en-US/docs/Web
 
 Font style, for example, the image below shows the tilted `italic` effect.
 
-![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*DQivSL2Oll0AAAAAAAAAAAAAARQnAQ)
+![fontStyle](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*DQivSL2Oll0AAAAAAAAAAAAAARQnAQ)
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value) |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ---------------------------------------------------------------------- |
@@ -104,7 +141,7 @@ Corresponds to the [CSS font-variant](https://developer.mozilla.org/en-US/docs/W
 
 Font style, for example, the following image is the `small-cap` effect.
 
-![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*DQivSL2Oll0AAAAAAAAAAAAAARQnAQ)
+![fontVariant](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*DQivSL2Oll0AAAAAAAAAAAAAARQnAQ)
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value) |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ---------------------------------------------------------------------- |
@@ -118,11 +155,11 @@ Corresponds to the [Canvas textBaseline](https://developer.mozilla.org/en-US/doc
 
 Alignment in the vertical direction is achieved by `textBaseline`, and the following figure shows the effect of alignment with different values.
 
-![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*1g1SQZlEBCAAAAAAAAAAAAAAARQnAQ)
+![textBaseline](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*1g1SQZlEBCAAAAAAAAAAAAAAARQnAQ)
 
 Using the current position of the text as the anchor point, the following figure shows the effect of `top`, `middle` and `bottom` in turn. In addition to single line also applies to multi-line text blocks.
 
-![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*ZJzIQKBhAnUAAAAAAAAAAAAAARQnAQ)
+![textBaseline](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*ZJzIQKBhAnUAAAAAAAAAAAAAARQnAQ)
 
 | [Initial value](/en/api/css/css-properties-values-api#initial-value) | Applicable elements | [Inheritable](/en/api/css/inheritance) | Animatable | [Computed value](/en/api/css/css-properties-values-api#computed-value) |
 | -------------------------------------------------------------------- | ------------------- | -------------------------------------- | ---------- | ---------------------------------------------------------------------- |
@@ -188,7 +225,7 @@ Corresponds to the [CSS text-overflow](https://developer.mozilla.org/zh-CN/docs/
 The following values are supported.
 
 -   `'clip'` truncates the text directly
--   `'ellipsis'` uses `... ` to indicate the truncated text
+-   `'ellipsis'` uses `...` to indicate the truncated text
 -   Custom strings, using it to indicate the truncated text
 
 Caution.
@@ -203,7 +240,7 @@ Caution.
 
 ### maxLines
 
-Max lines, text overflow will be truncated, need to use with [wordWrap](/en/api/basic/text#wordwrap), [wordWrapWidth](/en/api/basic/text#wordwrapwidth) and [ textOverflow](/en/api/basic/text#textoverflow) are used together.
+Max lines, text overflow will be truncated, need to use with [wordWrap](/en/api/basic/text#wordwrap), [wordWrapWidth](/en/api/basic/text#wordwrapwidth) and [textOverflow](/en/api/basic/text#textoverflow) are used together.
 
 The following figure shows limiting text to be displayed on one line and truncated with an ellipsis after it is exceeded.
 
@@ -250,7 +287,7 @@ interface Rectangle {
 
 In [example](/en/examples/shape#text), we draw the bounding box for each line of the multi-line text, and we can implement advanced text features such as underline and strikethrough based on the bounding box information:
 
-![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*4bL1QaVJ40MAAAAAAAAAAAAAARQnAQ)
+![getLineBoundingRects](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*4bL1QaVJ40MAAAAAAAAAAAAAARQnAQ)
 
 ```js
 text.getLineBoundingRects().forEach(({ x, y, width, height }) => {
@@ -288,7 +325,7 @@ And only if the content does overflow, i.e. the [textOverflow](/en/api/basic/tex
 
 In addition to the system default fonts, sometimes we want to load third-party fonts.
 
-In this case, you can use [Web Font Loader](https://github.com/typekit/webfontloader), which is created in the `active` callback function when it is loaded successfully, [example](/en/examples/shape#text):
+In this case, you can use [Web Font Loader](https://github.com/typekit/webfontloader), which is created in the `active` callback function when it is loaded successfully, [example](/en/examples/shape/text/#web-font-loader):
 
 ```js
 import WebFont from 'webfontloader';
diff --git a/site/docs/api/basic/text.zh.md b/site/docs/api/basic/text.zh.md
index 1490df3fc..e89e57e79 100644
--- a/site/docs/api/basic/text.zh.md
+++ b/site/docs/api/basic/text.zh.md
@@ -5,7 +5,7 @@ order: 1
 
 提供简单的单行/多行文本排版能力，单行支持水平对齐、字符间距；多行支持显式换行符以及自动换行，垂直对齐。
 
-可以在该 [示例](/zh/examples/shape#text) 中调整以下属性。
+可以在该 [示例](/zh/examples/shape/text/#text) 中调整以下属性。
 
 ## 继承自
 
@@ -52,6 +52,43 @@ order: 1
 | ------------------------------------------------------------- | -------- | ------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------- |
 | '0'                                                           | -        | 否                                    | 是           | [\<percentage\>](/zh/api/css/css-properties-values-api#percentage) [\<length\>](/zh/api/css/css-properties-values-api#length) |
 
+## isBillboard
+
+在 3D 场景下是否永远面朝相机，默认为 `false`，也称作“公告牌效果”。
+
+在[示例](/zh/examples/3d/3d-basic#billboard)中，未开启情况下在相机发生旋转时，文本会呈现被压缩的效果：
+
+![disable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*i7kASr_GZhUAAAAAAAAAAAAADmJ7AQ/original)
+
+开启后并不会改变文本的位置，但它会始终面朝相机。这也符合通常 3D 场景下对于文本这类 2D 图形的需求：
+
+![enable billboard effect](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*5cNIQ40b4IIAAAAAAAAAAAAADmJ7AQ/original)
+
+## billboardRotation
+
+公告牌模式下的旋转角度，顺时针方向以 radians 为单位。
+
+在[示例](/zh/examples/3d/3d-basic#billboard)中，我们为文本增加一个旋转角度：
+
+```js
+label.style.isBillboard = true;
+label.style.billboardRotation = Math.PI / 8;
+```
+
+![billboard rotation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*v8ngTbgkP-MAAAAAAAAAAAAADmJ7AQ/original)
+
+## isSizeAttenuation
+
+在透视投影下，是否进行尺寸衰减。在透视投影中遵循“近大远小”的视觉效果，如果希望保持大小始终一致不受深度影响，可以开启该选项。
+
+在[示例](/zh/examples/3d/3d-basic#size-attenuation)中，我们为文本开启了尺寸衰减：
+
+```js
+label.style.isSizeAttenuation = true;
+```
+
+![enable size attenuation](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9SMLQpVThc4AAAAAAAAAAAAADmJ7AQ/original)
+
 ## 字体相关
 
 ### fontFamily
@@ -275,7 +312,7 @@ interface Rectangle {
 
 在[示例](/zh/examples/shape#text)中，我们绘制出了多行文本中每一行的包围盒，可以根据包围盒信息实现例如下划线、删除线等高级文本特性：
 
-![](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*4bL1QaVJ40MAAAAAAAAAAAAAARQnAQ)
+![getLineBoundingRects](https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*4bL1QaVJ40MAAAAAAAAAAAAAARQnAQ)
 
 ```js
 text.getLineBoundingRects().forEach(({ x, y, width, height }) => {
@@ -313,7 +350,7 @@ text.isOverflowing(); // true
 
 除了系统默认字体，有时我们希望加载第三方字体。
 
-此时可以使用 [Web Font Loader](https://github.com/typekit/webfontloader)，在加载成功的 `active` 回调函数中创建，[示例](/zh/examples/shape#text)：
+此时可以使用 [Web Font Loader](https://github.com/typekit/webfontloader)，在加载成功的 `active` 回调函数中创建，[示例](/zh/examples/shape/text/#web-font-loader)：
 
 ```js
 import WebFont from 'webfontloader';
diff --git a/site/docs/api/renderer/canvas.en.md b/site/docs/api/renderer/canvas.en.md
index 07b104358..8555f90bf 100644
--- a/site/docs/api/renderer/canvas.en.md
+++ b/site/docs/api/renderer/canvas.en.md
@@ -131,16 +131,16 @@ We provide [g-plugin-rough-canvas-renderer](/en/plugins/rough-canvas-renderer) p
 
 ## Server-side rendering
 
-This renderer relies on [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/Web/API/CanvasRenderingContext2D) rendering capabilities and is not limited to the browser side, so you can also use [ node-canvas](https://github.com/Automattic/node-canvas) for server-side rendering.
+This renderer relies on [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/Web/API/CanvasRenderingContext2D) rendering capabilities and is not limited to the browser side, so you can also use [node-canvas](https://github.com/Automattic/node-canvas) for server-side rendering.
 
 In our [integration test](https://github.com/antvis/g/tree/next/integration/__node__tests__/canvas), it will be paired with [node-canvas](https://github.com/) on the Node side Automattic/node-canvas) to render the result image and compare it with the baseline image. Other server-side rendering scenarios can also follow the following steps.
 
 1. Use [unregisterPlugin](/en/api/renderer/renderer#unregisterplugin) to uninstall the DOM API-related plugins built into [g-canvas](/en/api/renderer/canvas). For example [g-plugin-dom-interaction](/en/plugins/dom-interaction) which is responsible for event binding
 2. Use [node-canvas](https://github.com/Automattic/node-canvas) to create a class `Canvas` object to be passed into the canvas via the [canvas](/en/api/canvas#canvas) property
 3. Normal use of [g-canvas](/en/api/renderer/canvas) renderer to create scenes via G's API
-4. Use the methods provided by [node-canvas](https://github.com/Automattic/node-canvas) (e.g. [createPNGStream](https://github.com/Automattic/node-canvas# canvascreatepngstream)) to output the resulting image
+4. Use the methods provided by [node-canvas](https://github.com/Automattic/node-canvas) (e.g. [createPNGStream](<https://github.com/Automattic/node-canvas># canvascreatepngstream)) to output the resulting image
 
-https://github.com/antvis/g/blob/next/integration/__node__tests__/canvas/circle.spec.js
+<https://github.com/antvis/g/blob/next/integration/>**node**tests\_\_/canvas/circle.spec.js
 
 ```js
 const { createCanvas } = require('canvas');
@@ -176,3 +176,24 @@ const stream = nodeCanvas.createPNGStream();
 stream.pipe(out);
 out.on('finish', () => {});
 ```
+
+## Takeover CanvasRenderingContext2D and continue drawing
+
+If you want to use [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/Web/API/CanvasRenderingContext2D) to continue drawing after G has drawn, you can get the context at `CanvasEvent. AFTER_RENDER` to get the context when G has finished drawing, but since it is set to be transformable in the context, it needs to be cleared before drawing, and then you can draw in the Canvas native coordinate system:
+
+```js
+// 在 G 绘制完接着画
+canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
+    // 获取原生 Canvas2DContext
+    const context = canvas.getContextService().getContext();
+
+    // 重置 transform
+    context.resetTransform();
+
+    // 绘制
+    context.fillStyle = 'red';
+    context.fillRect(200, 200, 100, 100);
+});
+```
+
+[DEMO in CodeSandbox](https://codesandbox.io/s/zhi-jie-shi-yong-canvas-2d-context-hui-zhi-8ymfg9?file=/index.js)
diff --git a/site/docs/api/renderer/canvas.zh.md b/site/docs/api/renderer/canvas.zh.md
index 292bb27e9..ef6569a86 100644
--- a/site/docs/api/renderer/canvas.zh.md
+++ b/site/docs/api/renderer/canvas.zh.md
@@ -140,7 +140,7 @@ canvas.addEventListener(CanvasEvent.DIRTY_RECTANGLE, (e) => {
 3. 正常使用 [g-canvas](/zh/api/renderer/canvas) 渲染器，通过 G 的 API 创建场景
 4. 使用 [node-canvas](https://github.com/Automattic/node-canvas) 提供的方法（例如 [createPNGStream](https://github.com/Automattic/node-canvas#canvascreatepngstream)）输出结果图片
 
-https://github.com/antvis/g/blob/next/integration/__node__tests__/canvas/circle.spec.js
+<https://github.com/antvis/g/blob/next/integration/>**node**tests\_\_/canvas/circle.spec.js
 
 ```js
 const { createCanvas } = require('canvas');
@@ -176,3 +176,24 @@ const stream = nodeCanvas.createPNGStream();
 stream.pipe(out);
 out.on('finish', () => {});
 ```
+
+## 接管上下文绘制
+
+如果希望在 G 绘制之后使用 [CanvasRenderingContext2D](https://developer.mozilla.org/zh-CN/Web/API/CanvasRenderingContext2D) 继续绘制，可以在 `CanvasEvent.AFTER_RENDER` 时获取上下文，此时 G 已经完成了绘制，但由于在上下文中设置可 transform，在绘制前需要先清除，然后就可以按照 Canvas 原生坐标系进行绘制：
+
+```js
+// 在 G 绘制完接着画
+canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
+    // 获取原生 Canvas2DContext
+    const context = canvas.getContextService().getContext();
+
+    // 重置 transform
+    context.resetTransform();
+
+    // 绘制
+    context.fillStyle = 'red';
+    context.fillRect(200, 200, 100, 100);
+});
+```
+
+[示例](https://codesandbox.io/s/zhi-jie-shi-yong-canvas-2d-context-hui-zhi-8ymfg9?file=/index.js)
diff --git a/site/docs/api/renderer/webgl.zh.md b/site/docs/api/renderer/webgl.zh.md
index 7639fa981..33d6253be 100644
--- a/site/docs/api/renderer/webgl.zh.md
+++ b/site/docs/api/renderer/webgl.zh.md
@@ -110,3 +110,9 @@ const webglRenderer = new WebGLRenderer({
 ### 相机交互
 
 [g-plugin-control](/zh/plugins/control) 为 3D 场景提供相机交互，内部使用 Hammer.js 响应鼠标移动、滚轮事件。根据不同的 [相机类型](/zh/api/camera/intro)，提供不同的交互效果。
+
+## 目前暂不支持的特性
+
+-   filter
+-   clipPath
+-   lineDash 应用 lineJoin，例如开启 `lineJoin: 'round'` 后每个小线段都应该有圆角效果
diff --git a/site/examples/3d/3d-basic/demo/billboard.js b/site/examples/3d/3d-basic/demo/billboard.js
index ac6a18796..16ee403e4 100644
--- a/site/examples/3d/3d-basic/demo/billboard.js
+++ b/site/examples/3d/3d-basic/demo/billboard.js
@@ -6,17 +6,13 @@ import {
   Text,
   Rect,
   Image,
+  CameraType,
   Circle,
+  Polyline,
   Path,
 } from '@antv/g';
 import { Renderer } from '@antv/g-webgl';
-import {
-  MeshPhongMaterial,
-  SphereGeometry,
-  DirectionalLight,
-  Mesh,
-  Plugin as Plugin3D,
-} from '@antv/g-plugin-3d';
+import { DirectionalLight, Plugin as Plugin3D } from '@antv/g-plugin-3d';
 import { Plugin as PluginControl } from '@antv/g-plugin-control';
 import * as lil from 'lil-gui';
 import Stats from 'stats.js';
@@ -52,26 +48,41 @@ const canvas = new Canvas({
       height: 20,
       src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
       isBillboard: true,
+      billboardRotation: Math.PI / 8,
+    },
+  });
+  const label = new Text({
+    style: {
+      x: 20,
+      text: '0',
+      fontSize: 12,
+      fill: 'black',
+      isBillboard: true,
+      billboardRotation: Math.PI / 8,
     },
   });
+  origin.appendChild(label);
   canvas.appendChild(origin);
 
-  const x = origin.cloneNode();
+  const x = origin.cloneNode(true);
   x.attr({
     x: 300,
   });
+  x.childNodes[0].style.text = 'x';
   canvas.appendChild(x);
 
-  const y = origin.cloneNode();
+  const y = origin.cloneNode(true);
   y.attr({
     y: 100,
   });
+  y.childNodes[0].style.text = 'y';
   canvas.appendChild(y);
 
-  const z = origin.cloneNode();
+  const z = origin.cloneNode(true);
   z.attr({
     z: 100,
   });
+  z.childNodes[0].style.text = 'z';
   canvas.appendChild(z);
 
   const xAxis = new Line({
@@ -119,6 +130,28 @@ const canvas = new Canvas({
   });
   canvas.appendChild(zAxis);
 
+  const polyline = new Polyline({
+    style: {
+      stroke: '#1890FF',
+      lineWidth: 10,
+      lineCap: 'round',
+      lineJoin: 'round',
+      isBillboard: true,
+      points: [
+        [50, 50, 0],
+        [100, 50, 100],
+        [100, 100, 0],
+        [150, 100, 100],
+        [150, 150, 0],
+        [200, 150, 0],
+        [200, 200, 0],
+        [250, 200, 0],
+      ],
+    },
+  });
+  polyline.translate(0, 200);
+  canvas.appendChild(polyline);
+
   // add a directional light into scene
   const light = new DirectionalLight({
     style: {
@@ -129,8 +162,8 @@ const canvas = new Canvas({
   canvas.appendChild(light);
 
   // adjust camera's position
-  // const camera = canvas.getCamera();
-  // camera.setPerspective(0.1, 5000, 90, 400 / 400);
+  const camera = canvas.getCamera();
+  camera.setType(CameraType.ORBITING);
 
   // stats
   const stats = new Stats();
diff --git a/site/examples/3d/3d-basic/demo/meta.json b/site/examples/3d/3d-basic/demo/meta.json
index dd2e5b0c8..3ca1d9f00 100644
--- a/site/examples/3d/3d-basic/demo/meta.json
+++ b/site/examples/3d/3d-basic/demo/meta.json
@@ -29,11 +29,12 @@
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*V44QR4my8ZwAAAAAAAAAAAAADmJ7AQ/original"
     },
     {
-      "filename": "sprite.js",
+      "filename": "size-attenuation.js",
       "title": {
-        "zh": "Sprite",
-        "en": "Sprite"
-      }
+        "zh": "开启大小衰减",
+        "en": "Enable size attenuation"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*9SMLQpVThc4AAAAAAAAAAAAADmJ7AQ/original"
     },
     {
       "filename": "webgpu.js",
diff --git a/site/examples/3d/3d-basic/demo/size-attenuation.js b/site/examples/3d/3d-basic/demo/size-attenuation.js
new file mode 100644
index 000000000..407bf4d78
--- /dev/null
+++ b/site/examples/3d/3d-basic/demo/size-attenuation.js
@@ -0,0 +1,179 @@
+import {
+  runtime,
+  Canvas,
+  CanvasEvent,
+  Line,
+  Text,
+  Rect,
+  Image,
+  CameraType,
+} from '@antv/g';
+import { Renderer } from '@antv/g-webgl';
+import { DirectionalLight, Plugin as Plugin3D } from '@antv/g-plugin-3d';
+import { Plugin as PluginControl } from '@antv/g-plugin-control';
+import * as lil from 'lil-gui';
+import Stats from 'stats.js';
+
+runtime.enableCSSParsing = false;
+
+// create a renderer
+const renderer = new Renderer();
+renderer.registerPlugin(new Plugin3D());
+renderer.registerPlugin(new PluginControl());
+
+// create a canvas
+const canvas = new Canvas({
+  container: 'container',
+  width: 400,
+  height: 400,
+  renderer,
+});
+
+(async () => {
+  // wait for canvas' initialization complete
+  await canvas.ready;
+  // use GPU device
+  const plugin = renderer.getPlugin('device-renderer');
+  const device = plugin.getDevice();
+
+  const origin = new Image({
+    style: {
+      x: 200,
+      y: 200,
+      z: 0,
+      width: 20,
+      height: 20,
+      src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
+      isBillboard: true,
+    },
+  });
+  const label = new Text({
+    style: {
+      x: 20,
+      text: '0',
+      fontSize: 12,
+      fill: 'black',
+      isBillboard: true,
+      billboardRotation: Math.PI / 8,
+      isSizeAttenuation: true,
+    },
+  });
+  origin.appendChild(label);
+  canvas.appendChild(origin);
+
+  const x = origin.cloneNode(true);
+  x.attr({
+    x: 300,
+  });
+  x.childNodes[0].style.text = 'x';
+  canvas.appendChild(x);
+
+  const y = origin.cloneNode(true);
+  y.attr({
+    y: 100,
+  });
+  y.childNodes[0].style.text = 'y';
+  canvas.appendChild(y);
+
+  const z = origin.cloneNode(true);
+  z.attr({
+    z: 100,
+  });
+  z.childNodes[0].style.text = 'z';
+  canvas.appendChild(z);
+
+  const xAxis = new Line({
+    style: {
+      x1: 200,
+      y1: 200,
+      z1: 0,
+      x2: 300,
+      y2: 200,
+      z2: 0,
+      stroke: 'black',
+      lineWidth: 2,
+      isBillboard: true,
+    },
+  });
+  canvas.appendChild(xAxis);
+
+  const yAxis = new Line({
+    style: {
+      x1: 200,
+      y1: 200,
+      z1: 0,
+      x2: 200,
+      y2: 100,
+      z2: 0,
+      stroke: 'black',
+      lineWidth: 2,
+      isBillboard: true,
+    },
+  });
+  canvas.appendChild(yAxis);
+
+  const zAxis = new Line({
+    style: {
+      x1: 200,
+      y1: 200,
+      z1: 0,
+      x2: 200,
+      y2: 200,
+      z2: 100,
+      stroke: 'black',
+      lineWidth: 2,
+      isBillboard: true,
+    },
+  });
+  canvas.appendChild(zAxis);
+
+  // add a directional light into scene
+  const light = new DirectionalLight({
+    style: {
+      fill: 'white',
+      direction: [-1, 0, 1],
+    },
+  });
+  canvas.appendChild(light);
+
+  // adjust camera's position
+  const camera = canvas.getCamera();
+  camera.setPerspective(0.01, 1000, 75, 1);
+  camera.setType(CameraType.ORBITING);
+
+  // stats
+  const stats = new Stats();
+  stats.showPanel(0);
+  const $stats = stats.dom;
+  $stats.style.position = 'absolute';
+  $stats.style.left = '0px';
+  $stats.style.top = '0px';
+  const $wrapper = document.getElementById('container');
+  $wrapper.appendChild($stats);
+  canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
+    if (stats) {
+      stats.update();
+    }
+  });
+
+  // GUI
+  const gui = new lil.GUI({ autoPlace: false });
+  $wrapper.appendChild(gui.domElement);
+  const folder = gui.addFolder('size attenuation');
+  const config = {
+    textSizeAttenuation: true,
+    imageSizeAttenuation: false,
+  };
+  folder.add(config, 'textSizeAttenuation').onChange((textSizeAttenuation) => {
+    canvas.document.querySelectorAll('text').forEach((text) => {
+      text.style.isSizeAttenuation = textSizeAttenuation;
+    });
+  });
+  folder
+    .add(config, 'imageSizeAttenuation')
+    .onChange((imageSizeAttenuation) => {
+      canvas.document.querySelectorAll('image').forEach((image) => {
+        image.style.isSizeAttenuation = imageSizeAttenuation;
+      });
+    });
+})();
diff --git a/site/examples/3d/3d-basic/demo/sprite.js b/site/examples/3d/3d-basic/demo/sprite.js
deleted file mode 100644
index 206b42597..000000000
--- a/site/examples/3d/3d-basic/demo/sprite.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import {
-  runtime,
-  Canvas,
-  CanvasEvent,
-  Line,
-  Text,
-  Rect,
-  Image,
-  Circle,
-} from '@antv/g';
-import { Renderer } from '@antv/g-webgl';
-import {
-  MeshPhongMaterial,
-  SphereGeometry,
-  DirectionalLight,
-  Mesh,
-  Plugin as Plugin3D,
-} from '@antv/g-plugin-3d';
-import { Plugin as PluginControl } from '@antv/g-plugin-control';
-import * as lil from 'lil-gui';
-import Stats from 'stats.js';
-
-runtime.enableCSSParsing = false;
-
-// create a renderer
-const renderer = new Renderer();
-renderer.registerPlugin(new Plugin3D());
-renderer.registerPlugin(new PluginControl());
-
-// create a canvas
-const canvas = new Canvas({
-  container: 'container',
-  width: 400,
-  height: 400,
-  renderer,
-});
-
-(async () => {
-  // wait for canvas' initialization complete
-  await canvas.ready;
-  // use GPU device
-  const plugin = renderer.getPlugin('device-renderer');
-  const device = plugin.getDevice();
-
-  const icon = new Image({
-    style: {
-      x: 200,
-      y: 200,
-      z: 0,
-      width: 200,
-      height: 200,
-      src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
-      isBillboard: true,
-    },
-  });
-  canvas.appendChild(icon);
-
-  // add a directional light into scene
-  const light = new DirectionalLight({
-    style: {
-      fill: 'white',
-      direction: [-1, 0, 1],
-    },
-  });
-  canvas.appendChild(light);
-
-  // adjust camera's position
-  const camera = canvas.getCamera();
-  camera.setPerspective(0.1, 5000, 90, 400 / 400);
-
-  // stats
-  const stats = new Stats();
-  stats.showPanel(0);
-  const $stats = stats.dom;
-  $stats.style.position = 'absolute';
-  $stats.style.left = '0px';
-  $stats.style.top = '0px';
-  const $wrapper = document.getElementById('container');
-  $wrapper.appendChild($stats);
-  canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
-    if (stats) {
-      stats.update();
-    }
-  });
-
-  // GUI
-  const gui = new lil.GUI({ autoPlace: false });
-  $wrapper.appendChild(gui.domElement);
-})();
diff --git a/site/examples/shape/polyline/demo/polyline.js b/site/examples/shape/polyline/demo/polyline.js
index 308036176..37c87f1df 100644
--- a/site/examples/shape/polyline/demo/polyline.js
+++ b/site/examples/shape/polyline/demo/polyline.js
@@ -33,7 +33,7 @@ const canvas = new Canvas({
   container: 'container',
   width: 600,
   height: 500,
-  renderer: webglRenderer,
+  renderer: canvasRenderer,
 });
 
 // create a line