fix: support rotation when applying billboard effect

.changeset/big-roses-appear.md

@@ -0,0 +1,7 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-shader-components': patch
+'@antv/g-lite': patch
+---
+
+Support size attenuation.

.changeset/lemon-coins-sell.md

@@ -0,0 +1,7 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-shader-components': patch
+'@antv/g-lite': patch
+---
+
+Polyline should support 3D points.

.changeset/stupid-avocados-report.md

@@ -0,0 +1,7 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-shader-components': patch
+'@antv/g-lite': patch
+---
+
+Support rotation when applying billboard effect.

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][];
         }

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,

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;
   };

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;
   };

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,
     });

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) => {

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,

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,
         },