regl-multiply-blend.js

const regl = require('regl')()

const drawCircle = regl({
  attributes: {
    p: [0]  // dummy attribute
  },

  frag: `
  precision highp float;
  uniform vec3 color;
  void main () {
    if (length(gl_PointCoord.xy - 0.5) > 0.5) {
      discard;
    }
    gl_FragColor = vec4(color, 1);
  }`,

  vert: `
  precision highp float;
  attribute float p;
  uniform vec2 position;
  uniform float radius;
  void main () {
    gl_PointSize = radius;
    gl_Position = vec4(position, 0, 1);
  }`,

  uniforms: {
    position: regl.prop('position'),
    color: regl.prop('color'),
    radius: regl.prop('radius')
  },

  depth: {
    enable: false,
    mask: false
  },

  // set up the blending such that the color is:
  //  src * dst + dst * 0 = src * dst
  blend: {
    enable: true,
    func: {
      src: 'dst color',
      dst: 0
    },
    equation: 'add'
  },

  count: 1,

  primitive: 'points'
})

regl.frame(({tick, viewportHeight}) => {
  regl.clear({
    // need to clear color buffer to all 1 for multiply blending
    color: [1, 1, 1, 1]
  })

  const radius = 0.25 * viewportHeight
  const d = 0.5 * (1.0 + Math.cos(0.01 * tick))
  const ANGLE = 2.0 * Math.PI / 3

  drawCircle([{
    radius,
    color: [1, 0, 1],
    position: [0, d]
  }, {
    radius,
    color: [1, 1, 0],
    position: [d * Math.sin(ANGLE), d * Math.cos(ANGLE)]
  },
  {
    radius,
    color: [0, 1, 1],
    position: [d * Math.sin(2 * ANGLE), d * Math.cos(2 * ANGLE)]
  }])
})