regl blend 颜色混合

原文链接: regl blend 颜色混合

上一篇: regl batch 批量绘制三角形

下一篇: regl depth 深度缓冲

https://en.wikipedia.org/wiki/Blend_modes

http://www.jiazhengblog.com/blog/2017/01/04/2989/

混合有很多种, 每种合成方式对应一种两个颜色的合成算法

import createRegl from "regl";
export default (canvas: HTMLCanvasElement) => {
  const regl = createRegl({ canvas });
  regl.clear({
    color: [0, 0, 0, 1],
    depth: 1,
  });
  const draw = regl({
    blend: {
      enable: true,
      func: {
        src: 1,
        dst: 1,
      },
      equation: "add",
    },
    // blend: {
    //   enable: true,
    //   func: {
    //     src: "src alpha",
    //     dst: "one minus src alpha",
    //   },
    // },
    // 只需要关掉mask好像就行了, 但是这种最好还是两个都干掉吧
    depth: { enable: true, mask: false },
    // depth: { enable: false, mask: false },
    frag: `
    precision mediump float;
    varying vec4 color;
    void main() {
      gl_FragColor = color;
    }`,

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

    attributes: {
      position: [
        [0, 1],
        [-1, -1],
        [1, -1],
        [0, -1],
        [-1, 1],
        [1, 1],
      ].map((i) => i.map((j) => j / 2)),
      inColor: [
        [1, 0, 0, 0.5],
        [1, 0, 0, 0.5],
        [1, 0, 0, 0.5],
        [0, 0, 1, 0.5],
        [0, 0, 1, 0.5],
        [0, 0, 1, 0.5],
      ],
    },
    elements: [
      [0, 1, 2],
      [3, 4, 5],
    ],
  });
  draw();
};