regl 畫兩個不同顏色的三角形拼接的矩形

原文鏈接: regl 畫兩個不同顏色的三角形拼接的矩形

 

分兩次繪製, 每次三個點, 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],
    ]
  );
};