如何创建圆角矩形平面？

[jasonxs45]

翻了文档，没有找到相关能力

[eyworldwide]

@jasonxs45 可以自己组织 buffer 创建自定义的几何体，参考：https://galacean.antgroup.com/#/docs/latest/cn/buffer-mesh

[cptbtptpbcptdtptp]

引擎没有内置，但是你可以参考一些构建顶点的方法来构建 圆角矩形 ， 圆形 或者 椭圆形 。

下方代码通过顶点生成算法（借鉴了 pixi ），并将数据填充到 ModelMesh 通过 MeshRenderer 渲染显示

import {
  Buffer,
  BufferBindFlag,
  Camera,
  Entity,
  MeshRenderer,
  MeshTopology,
  ModelMesh,
  RenderFace,
  Script,
  SubMesh,
  UnlitMaterial,
  VertexAttribute,
  VertexBufferBinding,
  VertexElement,
  VertexElementFormat,
  WebGLEngine,
} from "@galacean/engine";

// Create engine
WebGLEngine.create({ canvas: "canvas" }).then((engine) => {
  engine.canvas.resizeByClientSize();

  const root: Entity | null = engine.sceneManager.scenes[0].createRootEntity();
  const cameraEntity = root.createChild("camera");
  cameraEntity.transform.setPosition(0, 0, 600);
  const camera = cameraEntity.addComponent(Camera);
  camera.isOrthographic = true;
  camera.orthographicSize = engine.canvas.height / 2;
  camera.farClipPlane = 2000;

  const entity = root.createChild("renderer");
  const renderer = entity.addComponent(MeshRenderer);
  const modelMesh = new ModelMesh(engine);
  const points = buildRoundedRect(300, 100, 30, []);
  const vertexData = new Float32Array((points.length / 2 + 1) * 3);
  const indicesData = new Uint16Array((points.length / 2) * 3);
  triangulate(points, vertexData, 3, 0, indicesData, 0);
  modelMesh.setVertexElements([
    new VertexElement(
      VertexAttribute.Position,
      0,
      VertexElementFormat.Vector3,
      0
    ),
  ]);
  modelMesh.setVertexBufferBinding(
    new VertexBufferBinding(
      new Buffer(engine, BufferBindFlag.VertexBuffer, vertexData),
      12
    )
  );
  modelMesh.setIndices(indicesData);
  modelMesh.bounds.min.set(-10000, -10000, -10000);
  modelMesh.bounds.max.set(10000, 10000, 10000);
  modelMesh.addSubMesh(
    new SubMesh(0, indicesData.length, MeshTopology.Triangles)
  );
  modelMesh.uploadData(true);
  renderer.mesh = modelMesh;
  const material = new UnlitMaterial(engine);
  material.renderFace = RenderFace.Double;
  renderer.setMaterial(material);

  entity.addComponent(
    class extends Script {
      onUpdate(deltaTime: number): void {
        this.entity.transform.rotate(0, 1, 0);
      }
    }
  );

  engine.run();
});

function buildCircle(radius: number, pointers: number[]): number[] {
  const x = 0;
  const y = 0;
  const rx = radius;
  const ry = radius;
  const dx = 0;
  const dy = 0;
  build(x, y, rx, ry, dx, dy, pointers);
  return pointers;
}

function buildEllipse(
  halfWidth: number,
  halfHeight: number,
  pointers: number[]
): number[] {
  const x = 0;
  const y = 0;
  const rx = halfWidth;
  const ry = halfHeight;
  const dx = 0;
  const dy = 0;
  build(x, y, rx, ry, dx, dy, pointers);
  return pointers;
}

function buildRoundedRect(
  width: number,
  height: number,
  radius: number,
  pointers: number[]
): number[] {
  const halfWidth = width / 2;
  const halfHeight = height / 2;
  const x = halfWidth;
  const y = halfHeight;
  const temp = Math.max(0, Math.min(radius, Math.min(halfWidth, halfHeight)));
  const rx = temp;
  const ry = temp;
  const dx = halfWidth - temp;
  const dy = halfHeight - temp;
  build(x, y, rx, ry, dx, dy, pointers);
  return pointers;
}

function build(
  x: number,
  y: number,
  rx: number,
  ry: number,
  dx: number,
  dy: number,
  points: number[]
) {
  if (!(rx >= 0 && ry >= 0 && dx >= 0 && dy >= 0)) {
    return points;
  }
  // Choose a number of segments such that the maximum absolute deviation from the circle is approximately 0.029
  const n = Math.ceil(2.3 * Math.sqrt(rx + ry));
  const m = n * 8 + (dx ? 4 : 0) + (dy ? 4 : 0);
  if (m === 0) {
    return points;
  }

  if (n === 0) {
    points[0] = points[6] = x + dx;
    points[1] = points[3] = y + dy;
    points[2] = points[4] = x - dx;
    points[5] = points[7] = y - dy;

    return points;
  }

  let j1 = 0;
  let j2 = n * 4 + (dx ? 2 : 0) + 2;
  let j3 = j2;
  let j4 = m;

  let x0 = dx + rx;
  let y0 = dy;
  let x1 = x + x0;
  let x2 = x - x0;
  let y1 = y + y0;

  points[j1++] = x1;
  points[j1++] = y1;
  points[--j2] = y1;
  points[--j2] = x2;

  if (dy) {
    const y2 = y - y0;

    points[j3++] = x2;
    points[j3++] = y2;
    points[--j4] = y2;
    points[--j4] = x1;
  }

  for (let i = 1; i < n; i++) {
    const a = (Math.PI / 2) * (i / n);
    const x0 = dx + Math.cos(a) * rx;
    const y0 = dy + Math.sin(a) * ry;
    const x1 = x + x0;
    const x2 = x - x0;
    const y1 = y + y0;
    const y2 = y - y0;

    points[j1++] = x1;
    points[j1++] = y1;
    points[--j2] = y1;
    points[--j2] = x2;
    points[j3++] = x2;
    points[j3++] = y2;
    points[--j4] = y2;
    points[--j4] = x1;
  }

  x0 = dx;
  y0 = dy + ry;
  x1 = x + x0;
  x2 = x - x0;
  y1 = y + y0;
  const y2 = y - y0;

  points[j1++] = x1;
  points[j1++] = y1;
  points[--j4] = y2;
  points[--j4] = x1;

  if (dx) {
    points[j1++] = x2;
    points[j1++] = y1;
    points[--j4] = y2;
    points[--j4] = x2;
  }

  return points;
}

function triangulate(
  points: number[],
  vertices: Float32Array,
  verticesStride: number,
  verticesOffset: number,
  indices: Uint16Array,
  indicesOffset: number
) {
  if (points.length === 0) {
    return;
  }

  // Compute center (average of all points)
  let centerX = 0;
  let centerY = 0;

  for (let i = 0; i < points.length; i += 2) {
    centerX += points[i];
    centerY += points[i + 1];
  }
  centerX /= points.length / 2;
  centerY /= points.length / 2;

  // Set center vertex
  let count = verticesOffset;

  vertices[count * verticesStride] = centerX;
  vertices[count * verticesStride + 1] = centerY;
  vertices[count * verticesStride + 2] = 0;
  const centerIndex = count++;

  // Set edge vertices and indices
  for (let i = 0; i < points.length; i += 2) {
    vertices[count * verticesStride] = points[i];
    vertices[count * verticesStride + 1] = points[i + 1];
    vertices[count * verticesStride + 2] = 0;
    if (i > 0) {
      // Skip first point for indices
      indices[indicesOffset++] = count;
      indices[indicesOffset++] = centerIndex;
      indices[indicesOffset++] = count - 1;
    }
    count++;
  }

  // Connect last point to the first edge point
  indices[indicesOffset++] = centerIndex + 1;
  indices[indicesOffset++] = centerIndex;
  indices[indicesOffset++] = count - 1;
}