regl 画两个不同颜色的三角形拼接的矩形

原文链接: regl 画两个不同颜色的三角形拼接的矩形

上一篇: regl 用直线画五角星

下一篇: twojs 加载图片和为图片加mask

分两次绘制, 每次三个点, color数组对应的是点的个数, 矩形四个点, 虽然两个三角形是六个点, 但是点只有四个, color也就是只有四个了

color中的值是[0,1], 如果这两个三角形在一次绘制中, 那么总会出现线性插值, 除非四个点都是一样的颜色, 这个其实可以在vs和fs中使用条件判断来实现

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

  const drawTri = (position, elements, aVsColor) => {
    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,
        // 颜色值需要归一化[0,1]
        aVsColor,
      },
      elements,
    })();
  };
  drawTri(
    [
      [-1, 1],
      [1, 1],
      [1, -1],
    ],
    [[0, 1, 2]],
    [
      [1, 0, 0, 1],
      [1, 0, 0, 1],
      [1, 0, 0, 1],
    ]
  );
  drawTri(
    [
      [-1, 1],
      [1, -1],
      [-1, -1],
    ],
    [[0, 1, 2]],
    [
      [0, 1, 0, 1],
      [0, 1, 0, 1],
      [0, 1, 0, 1],
    ]
  );
};