feat: support lambert material (#1501)

* feat: support lambert material

* fix: gradient for path in webgl #1447

* fix: fill subpath correctly in webgl #1429

* feat: add cone, cylinder and capsule geometry

* chore: update pnpm lock

* chore: commit changeset

.changeset/soft-kids-bake.md

@@ -0,0 +1,8 @@
+---
+'@antv/g-plugin-device-renderer': patch
+'@antv/g-shader-components': patch
+'@antv/g-plugin-3d': patch
+'@antv/g-lite': patch
+---
+
+Fix gradient path & add more geometry.

packages/g-plugin-3d/src/geometries/CapsuleGeometry.ts

@@ -0,0 +1,95 @@
+import type { Device } from '@antv/g-plugin-device-renderer';
+import { ProceduralGeometry } from './ProceduralGeometry';
+import { createConeData } from './util';
+
+export interface CapsuleGeometryProps {
+  /**
+   * The radius of the tube forming the body of the capsule
+   */
+  radius: number;
+  /**
+   * The length of the body of the capsule from tip to tip
+   */
+  height: number;
+  /**
+   * The number of divisions along the tubular length of the capsule
+   */
+  heightSegments: number;
+  /**
+   * The number of divisions around the tubular body of the capsule
+   */
+  sides: number;
+}
+
+export class CapsuleGeometry extends ProceduralGeometry<CapsuleGeometryProps> {
+  constructor(device: Device, props: Partial<CapsuleGeometryProps> = {}) {
+    super(device, {
+      radius: 0.5,
+      height: 1,
+      heightSegments: 1,
+      sides: 20,
+      ...props,
+    });
+  }
+
+  get radius() {
+    return this.props.radius;
+  }
+  set radius(v) {
+    if (this.props.radius !== v) {
+      this.props.radius = v;
+      this.rebuildPosition();
+    }
+  }
+
+  get height() {
+    return this.props.height;
+  }
+  set height(v) {
+    if (this.props.height !== v) {
+      this.props.height = v;
+      this.rebuildPosition();
+    }
+  }
+
+  get heightSegments() {
+    return this.props.heightSegments;
+  }
+  set heightSegments(v) {
+    if (this.props.heightSegments !== v) {
+      this.props.heightSegments = v;
+      this.build();
+    }
+  }
+
+  get sides() {
+    return this.props.sides;
+  }
+  set sides(v) {
+    if (this.props.sides !== v) {
+      this.props.sides = v;
+      this.build();
+    }
+  }
+
+  createTopology() {
+    const { radius, height, heightSegments, sides } = this.props;
+
+    const { indices, positions, normals, uvs, uvs1 } = createConeData(
+      radius,
+      radius,
+      height - 2 * radius,
+      heightSegments,
+      sides,
+      true,
+    );
+
+    return {
+      indices,
+      positions,
+      normals,
+      uvs,
+      uv1s: uvs1,
+    };
+  }
+}

packages/g-plugin-3d/src/geometries/ConeGeometry.ts

@@ -0,0 +1,111 @@
+import type { Device } from '@antv/g-plugin-device-renderer';
+import { ProceduralGeometry } from './ProceduralGeometry';
+import { createConeData } from './util';
+
+export interface ConeGeometryProps {
+  /**
+   * The base radius of the cone
+   */
+  baseRadius: number;
+  /**
+   * The peak radius of the cone
+   */
+  peakRadius: number;
+  /**
+   * The length of the body of the cylinder
+   */
+  height: number;
+  /**
+   * The number of divisions along the length of the cylinder
+   */
+  heightSegments: number;
+  /**
+   * The number of divisions around the tubular body of the cylinder
+   */
+  capSegments: number;
+}
+
+export class ConeGeometry extends ProceduralGeometry<ConeGeometryProps> {
+  constructor(device: Device, props: Partial<ConeGeometryProps> = {}) {
+    super(device, {
+      baseRadius: 0.5,
+      peakRadius: 0,
+      height: 1,
+      heightSegments: 5,
+      capSegments: 18,
+      ...props,
+    });
+  }
+
+  get baseRadius() {
+    return this.props.baseRadius;
+  }
+  set baseRadius(v) {
+    if (this.props.baseRadius !== v) {
+      this.props.baseRadius = v;
+      this.rebuildPosition();
+    }
+  }
+
+  get peakRadius() {
+    return this.props.peakRadius;
+  }
+  set peakRadius(v) {
+    if (this.props.peakRadius !== v) {
+      this.props.peakRadius = v;
+      this.rebuildPosition();
+    }
+  }
+
+  get height() {
+    return this.props.height;
+  }
+  set height(v) {
+    if (this.props.height !== v) {
+      this.props.height = v;
+      this.rebuildPosition();
+    }
+  }
+
+  get heightSegments() {
+    return this.props.heightSegments;
+  }
+  set heightSegments(v) {
+    if (this.props.heightSegments !== v) {
+      this.props.heightSegments = v;
+      this.build();
+    }
+  }
+
+  get capSegments() {
+    return this.props.capSegments;
+  }
+  set capSegments(v) {
+    if (this.props.capSegments !== v) {
+      this.props.capSegments = v;
+      this.build();
+    }
+  }
+
+  createTopology() {
+    const { baseRadius, peakRadius, height, heightSegments, capSegments } =
+      this.props;
+
+    const { indices, positions, normals, uvs, uvs1 } = createConeData(
+      baseRadius,
+      peakRadius,
+      height,
+      heightSegments,
+      capSegments,
+      false,
+    );
+
+    return {
+      indices,
+      positions,
+      normals,
+      uvs,
+      uv1s: uvs1,
+    };
+  }
+}

packages/g-plugin-3d/src/geometries/CubeGeometry.ts

@@ -1,17 +1,15 @@
 import type { Device } from '@antv/g-plugin-device-renderer';
 import { vec3 } from 'gl-matrix';
 import { ProceduralGeometry } from './ProceduralGeometry';
-
-const primitiveUv1Padding = 4.0 / 64;
-const primitiveUv1PaddingScale = 1.0 - primitiveUv1Padding * 2;
+import { primitiveUv1Padding, primitiveUv1PaddingScale } from './util';
 
 export interface CubeGeometryProps {
   height: number;
   width: number;
   depth: number;
-  widthSegments?: number;
-  heightSegments?: number;
-  depthSegments?: number;
+  widthSegments: number;
+  heightSegments: number;
+  depthSegments: number;
 }
 
 export class CubeGeometry extends ProceduralGeometry<CubeGeometryProps> {