blend-alpha by 1wheel

I can’t figure out why points with gl_FragColor = vec4(255, 255, 255, .1); get darker and then lighter when overlaid with increasing density.

I’m using these blending settings:

blend: {
  enable: true,
  func: {
    srcRGB: 'src alpha',
    srcAlpha: 1,
    dstRGB: 'one minus src alpha',
    dstAlpha: 1
  },
  equation: {
    rgb: 'add',
    alpha: 'add'
  },
  color: [0, 0, 0, 0]
},

Tweaking them hasn’t fixed the problem, but I’m not sure what I’m doing…

_script.js

try { window.regltick.cancel() } catch(e){}
console.clear()


var sel = d3.select('#graph').html('')
var c = d3.conventions({sel, layers: 'ds', margin: {left: 30, bottom: 30}, totalHeight: innerHeight})

c.x.domain([0, 1]).range([-1, 1])
c.y.domain([0, 1]).range([-1, 1])

var data = d3.range(100000).map(d => {
  var y = Math.random()
  var x = Math.random()
  var uniform = [
    c.x(x),
    c.y(y),
    1
  ]

  var left = [
    c.x(y*x), 
    c.y(y),
    1
  ]

  return {d, y, uniform, left}

})

c.x.range([0, c.width])
c.y.range([c.height, 0])
d3.drawAxis(c)

reglLib({onDone, container: c.layers[0].node()})


function onDone(err, regl){
  if (err) return console.log(err)
  
  window.regl = regl

  var count = data.length
  var curIndex = 0
  datasets = ['uniform', 'left'].map(str => {
    var pos = data.map(d => d[str])
    return {str, pos}
  })

  var drawPoints = regl({
    vert: `
      precision mediump float;
      attribute vec3 xyz0, xyz1;
      varying float c;
      uniform float interp, radius;      
      void main() {
        vec3 pos = mix(xyz0, xyz1, interp);
        gl_Position = vec4(pos.xy, 0, 1);

        gl_PointSize = 5.0;
        c = pos.z/20.0;
      }`,

    frag: `
      precision mediump float;
      varying float c;
      void main() {
        gl_FragColor = vec4(255, 255, 255, .1);
        gl_FragColor = vec4(255, 0, 255, .1);
        // gl_FragColor = vec4(0, 0, 0, .1);
      }`,
    attributes: {
      xyz0: () => datasets[curIndex % datasets.length].pos,
      xyz1: () => datasets[(curIndex + 1) % datasets.length].pos
    },
    uniforms: {
      radius: () => 2,
      interp: (ctx, props) => Math.max(0, Math.min(1, props.interp))
    },
    primitive: 'point',
    count: count,

    depth: {
      enable: false
    },
    blend: {
      enable: true,
      func: {
        srcRGB: 'src alpha',
        srcAlpha: 1,
        dstRGB: 'one minus src alpha',
        dstAlpha: 1
      },
      equation: {
        rgb: 'add',
        alpha: 'add'
      },
      color: [0, 0, 0, 0]
    },

  })

  var lastSwitchTime = 0
  var switchInterval = 5
  var switchDuration = 5

  window.regltick = regl.frame(({time}) => {
    if ((time - lastSwitchTime) > switchInterval) {
      lastSwitchTime = time
      curIndex = (curIndex + 1) % datasets.length
    }

    drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
  })

}

index.html

<!DOCTYPE html>
<html>
<head>
<body>
	<div id='graph'></div>
</body>

<script src='d3+_.js'></script>
<script src='lib-build.js'></script>
<script src='_script.js'></script>
</html>

lib-src.js

var libs = {
  reglLib: require('regl'),
}



for (key in libs) window[key] = libs[key]