regl 用直线画五角星

原文链接: regl 用直线画五角星

上一篇: 使用delaunator 用三角形拟合平面圆

下一篇: regl 画两个不同颜色的三角形拼接的矩形

官方例子稍微改了下

这个库封装后对于一些场景还是简单不少的

import createREGL from "regl";
import { randomColor } from "../../utils";
export default () => {
  const regl = createREGL();
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1,
  });
  // windows上大多数情况下, 线宽都是1
  const lineWidth = Math.min(3, regl.limits.lineWidthDims[1]);
  console.log("lineWidth", lineWidth, regl.limits);
  regl({
    frag: `
    precision mediump float;
    uniform vec4 color;
    varying vec4 outVsColor;
    void main() {
      gl_FragColor = outVsColor;
    }`,

    vert: `
    precision mediump float;
    attribute vec2 position;
    attribute vec4 aVsColor;
    varying vec4 outVsColor;
    void main() {
      gl_Position = vec4(position, 0, 1);
      outVsColor = aVsColor;
    }`,

    attributes: {
      position: new Array(5).fill().map((x, i) => {
        const theta = (2.0 * Math.PI * i) / 5;
        return [Math.sin(theta), Math.cos(theta)];
      }),
      // 颜色值需要归一化[0,1]
      aVsColor: new Array(5).fill(0).map(() => randomColor(true)),
    },
    uniforms: {
      color: [1, 0, 0, 1],
    },
    elements: [
      [0, 1],
      [0, 2],
      [0, 3],
      [0, 4],
      [1, 2],
      [1, 3],
      [1, 4],
      [2, 3],
      [2, 4],
      [3, 4],
    ],
    lineWidth: lineWidth,
  })();
};