regl 三角形切片拟合二维圆

原文链接: regl 三角形切片拟合二维圆

 

这种做法相对而言比较低效, 最好是先根据顶点是否相邻做分割, 用并查分割出几个集合, 然后每次在这些集合中绘制, 这样会减少大量时间

 

 

import createREGL from "regl";
import { randomColor } from "../../utils";
import Delaunator from "delaunator";
export default () => {
  const regl = createREGL();
  const points: [number, number][] = [];
  const height = 100;
  const step = 4;
  for (let r = 0; r <= height; r += step) {
    for (let x = 0; x <= r; x += 10) {
      const y = (r ** 2 - x ** 2) ** 0.5;
      points.push([x, y]);
      points.push([x, -y]);
      points.push([-x, y]);
      points.push([-x, -y]);
    }
  }

  console.log(points.length);
  console.time("delaunay");
  const delaunay = Delaunator.from(points);
  console.log("===", delaunay.triangles.length);
  const { triangles } = delaunay;
  const position = points.map((i) => [i[0] / height, i[1] / height]);
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1,
  });
  regl({
    frag: `
  precision mediump float;
  uniform vec4 color;
  varying vec4 outVsColor;
  void main () {
    // gl_FragColor = color;
    gl_FragColor = outVsColor;
}`,
    vert: `
  precision mediump float;
  attribute vec2 position;
  attribute vec4 aVsColor;
  varying vec4 outVsColor;
    void main () {
    outVsColor = aVsColor;
    gl_Position = vec4(position, 0, 1);
  }`,
  })(() => {
    for (let i = 0; i < triangles.length; i += 3) {
      const p1 = position[triangles[i]];
      const p2 = position[triangles[i + 1]];
      const p3 = position[triangles[i + 2]];
      const color = randomColor(true);
      // console.error([p1, p2, p3], [color, color, color], [[0, 1, 2]]);
      regl({
        attributes: {
          position: [p1, p2, p3],
          aVsColor: [color, color, color],
        },
        elements: [[0, 1, 2]],
      })();
    }
  });
};

 

来源：oschina

链接：https://my.oschina.net/ahaoboy/blog/4953046