redblobgames · January 2, 2019 17:27 · Jan 2, 2019 · Jan 2, 2019 · Jan 2, 2019 · Jan 2, 2019
diff --git a/_script.js b/_script.js
@@ -95,7 +95,7 @@ function onDone(err, regl){
         rgb: 'add',
         alpha: 'add'
       },
-      color: [1, 1, 1, 0]
+      color: [0, 0, 0, 0] // only needed for 'constant' blend color
     },
 
   })

diff --git a/_script.js b/_script.js
@@ -58,9 +58,7 @@ function onDone(err, regl){
       void main() {
         vec3 pos = mix(xyz0, xyz1, interp);
         gl_Position = vec4(pos.xy, 0, 1);
-
-        gl_PointSize = 5.0;
-        c = pos.z/20.0;
+        gl_PointSize = radius;
       }`,
 
     frag: `
@@ -75,7 +73,7 @@ function onDone(err, regl){
       xyz1: () => datasets[(curIndex + 1) % datasets.length].pos
     },
     uniforms: {
-      radius: () => 2,
+      radius: () => 8,
       interp: (ctx, props) => Math.max(0, Math.min(1, props.interp))
     },
     primitive: 'point',

diff --git a/preview.png b/preview.png
diff --git a/_script.js b/_script.js
@@ -46,7 +46,7 @@ function onDone(err, regl){
     return {str, pos}
   })
 
-  const fbo_texture = regl.texture({width: 2*960, height: 2*500}) // to match the size of the canvas
+  const fbo_texture = regl.texture({width: 2*960, height: 2*500, min: 'linear', mag: 'linear'}) // to match the size of the canvas
   const fbo = regl.framebuffer({color: [fbo_texture]})
 
   var drawPoints = regl({

diff --git a/_script.js b/_script.js
@@ -97,7 +97,7 @@ function onDone(err, regl){
         rgb: 'add',
         alpha: 'add'
       },
-      color: [0, 0, 0, 0]
+      color: [1, 1, 1, 0]
     },
 
   })
@@ -143,7 +143,7 @@ function onDone(err, regl){
       curIndex = (curIndex + 1) % datasets.length
     }
 
-    fbo.use(() => { regl.clear({color: [0, 0, 0, 0]}) })
+    fbo.use(() => { regl.clear({color: [1, 1, 1, 0]}) })
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
     demultiply()
   })

diff --git a/preview.png b/preview.png
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-(redblobgames updated this block to use premultiplied alpha)
+(redblobgames updated this block to use premultiplied alpha - http://apoorvaj.io/alpha-compositing-opengl-blending-and-premultiplied-alpha.html)
 
 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. (note: it should be vec4(1.0, 1.0, 1.0, 0.1) not 0-255 --redblobgames)
 

diff --git a/_script.js b/_script.js
@@ -46,7 +46,7 @@ function onDone(err, regl){
     return {str, pos}
   })
 
-  const fbo_texture = regl.texture({width: 960, height: 500}) // to match the size of the canvas
+  const fbo_texture = regl.texture({width: 2*960, height: 2*500}) // to match the size of the canvas
   const fbo = regl.framebuffer({color: [fbo_texture]})
 
   var drawPoints = regl({

diff --git a/_script.js b/_script.js
@@ -46,8 +46,7 @@ function onDone(err, regl){
     return {str, pos}
   })
 
-  const fbo_size = 2048
-  const fbo_texture = regl.texture({width: fbo_size, height: fbo_size})
+  const fbo_texture = regl.texture({width: 960, height: 500}) // to match the size of the canvas
   const fbo = regl.framebuffer({color: [fbo_texture]})
 
   var drawPoints = regl({
@@ -144,9 +143,9 @@ function onDone(err, regl){
       curIndex = (curIndex + 1) % datasets.length
     }
 
+    fbo.use(() => { regl.clear({color: [0, 0, 0, 0]}) })
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
     demultiply()
-    fbo.use(() => { regl.clear({color: [1, 1, 0, 0], depth: 1}) })
   })
 
 }

diff --git a/_script.js b/_script.js
@@ -144,10 +144,9 @@ function onDone(err, regl){
       curIndex = (curIndex + 1) % datasets.length
     }
 
-    regl.clear({color: [0, 1, 1, 0], depth: 1})
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
     demultiply()
-    fbo_texture.use(() => { regl.clear({color: [1, 1, 0, 0], depth: 1}) })
+    fbo.use(() => { regl.clear({color: [1, 1, 0, 0], depth: 1}) })
   })
 
 }

diff --git a/preview.png b/preview.png
diff --git a/_script.js b/_script.js
@@ -144,10 +144,10 @@ function onDone(err, regl){
       curIndex = (curIndex + 1) % datasets.length
     }
 
-    regl.clear({color: [0, 1, 1, 0]})
+    regl.clear({color: [0, 1, 1, 0], depth: 1})
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
     demultiply()
-    fbo_texture.use(() => { regl.clear({color: [1, 1, 0, 0]}) })
+    fbo_texture.use(() => { regl.clear({color: [1, 1, 0, 0], depth: 1}) })
   })
 
 }

diff --git a/_script.js b/_script.js
@@ -144,10 +144,10 @@ function onDone(err, regl){
       curIndex = (curIndex + 1) % datasets.length
     }
 
-    regl.clear({color: [1, 1, 1, 0]})
+    regl.clear({color: [0, 1, 1, 0]})
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
     demultiply()
-    fbo_texture.use(() => { regl.clear({color: [1, 1, 1, 0]}) })
+    fbo_texture.use(() => { regl.clear({color: [1, 1, 0, 0]}) })
   })
 
 }

diff --git a/preview.png b/preview.png
diff --git a/_script.js b/_script.js
@@ -144,9 +144,10 @@ function onDone(err, regl){
       curIndex = (curIndex + 1) % datasets.length
     }
 
+    regl.clear({color: [1, 1, 1, 0]})
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
     demultiply()
-    fbo_texture.use(() => { regl.clear({color: [0, 0, 0, 0]}) })
+    fbo_texture.use(() => { regl.clear({color: [1, 1, 1, 0]}) })
   })
 
 }

diff --git a/preview.png b/preview.png
diff --git a/_script.js b/_script.js
@@ -146,6 +146,7 @@ function onDone(err, regl){
 
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
     demultiply()
+    fbo_texture.use(() => { regl.clear({color: [0, 0, 0, 0]}) })
   })
 
 }

diff --git a/preview.png b/preview.png
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-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. 
+(redblobgames updated this block to use premultiplied alpha)
+
+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. (note: it should be vec4(1.0, 1.0, 1.0, 0.1) not 0-255 --redblobgames)
 
 I'm using these blending settings:
 

diff --git a/_script.js b/_script.js
@@ -46,6 +46,10 @@ function onDone(err, regl){
     return {str, pos}
   })
 
+  const fbo_size = 2048
+  const fbo_texture = regl.texture({width: fbo_size, height: fbo_size})
+  const fbo = regl.framebuffer({color: [fbo_texture]})
+
   var drawPoints = regl({
     vert: `
       precision mediump float;
@@ -77,6 +81,7 @@ function onDone(err, regl){
     },
     primitive: 'point',
     count: count,
+    framebuffer: fbo,
 
     depth: {
       enable: false
@@ -98,6 +103,37 @@ function onDone(err, regl){
 
   })
 
+  const demultiply = regl({
+    frag: `
+        precision mediump float;
+        uniform sampler2D u_texture;
+        varying vec2 v_uv;
+        void main() {
+           vec4 premultiplied_color = texture2D(u_texture, v_uv);
+           gl_FragColor = premultiplied_color / premultiplied_color.a;
+        }`,
+
+    vert: `
+        precision highp float;
+        attribute vec2 a_uv;
+        varying vec2 v_uv;
+        void main() {
+          v_uv = a_uv;
+          gl_Position = vec4(2.0 * v_uv - 1.0, 0.0, 1.0);
+        }`,
+
+    uniforms:  {
+        u_texture: fbo_texture,
+    },
+    depth: {
+        enable: false,
+    },
+    count: 3,
+    attributes: {
+        a_uv: [-2, 0, 0, -2, 2, 2]
+    },
+  })
+
   var lastSwitchTime = 0
   var switchInterval = 5
   var switchDuration = 5
@@ -109,6 +145,7 @@ function onDone(err, regl){
     }
 
     drawPoints({interp: d3.easeBackOut((time - lastSwitchTime) / switchDuration)})
+    demultiply()
   })
 
 }

diff --git a/_script.js b/_script.js
@@ -64,9 +64,8 @@ function onDone(err, regl){
       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);
+        vec4 color = vec4(1.0, 0.0, 1.0, 0.1);
+        gl_FragColor = vec4(color.rgb * color.a, color.a);
       }`,
     attributes: {
       xyz0: () => datasets[curIndex % datasets.length].pos,
@@ -85,7 +84,7 @@ function onDone(err, regl){
     blend: {
       enable: true,
       func: {
-        srcRGB: 'src alpha',
+        srcRGB: 'one',
         srcAlpha: 1,
         dstRGB: 'one minus src alpha',
         dstAlpha: 1

diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -1,6 +1,26 @@
-Not sure why points with `gl_FragColor = vec4(255, 255, 255, .1);` get lighter, then darker when overlaid.
+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. 
 
-Probably needs a different magic string when blending?
+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... 
 
 - http://regl.party/api#blending
 - https://www.khronos.org/registry/OpenGL-Refpages/es2.0/xhtml/glBlendFuncSeparate.xml
diff --git a/_script.js b/_script.js
@@ -17,13 +17,13 @@ var data = d3.range(100000).map(d => {
     1
   ]
 
-  var quad = [
+  var left = [
     c.x(y*x), 
     c.y(y),
     1
   ]
 
-  return {d, y, uniform, quad}
+  return {d, y, uniform, left}
 
 })
 
@@ -41,7 +41,7 @@ function onDone(err, regl){
 
   var count = data.length
   var curIndex = 0
-  datasets = ['uniform', 'quad'].map(str => {
+  datasets = ['uniform', 'left'].map(str => {
     var pos = data.map(d => d[str])
     return {str, pos}
   })
@@ -65,6 +65,7 @@ function onDone(err, regl){
       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: {
@@ -81,7 +82,6 @@ function onDone(err, regl){
     depth: {
       enable: false
     },
-
     blend: {
       enable: true,
       func: {

diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -0,0 +1,6 @@
+Not sure why points with `gl_FragColor = vec4(255, 255, 255, .1);` get lighter, then darker when overlaid.
+
+Probably needs a different magic string when blending?
+
+- http://regl.party/api#blending
+- https://www.khronos.org/registry/OpenGL-Refpages/es2.0/xhtml/glBlendFuncSeparate.xml
diff --git a/_script.js b/_script.js
@@ -0,0 +1,117 @@
+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 quad = [
+    c.x(y*x), 
+    c.y(y),
+    1
+  ]
+
+  return {d, y, uniform, quad}
+
+})
+
+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', 'quad'].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(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)})
+  })
+
+}
+
+
diff --git a/d3+_.js b/d3+_.js
diff --git a/index.html b/index.html
@@ -0,0 +1,11 @@
+<!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>
diff --git a/lib-build.js b/lib-build.js
diff --git a/lib-src.js b/lib-src.js
@@ -0,0 +1,7 @@
+var libs = {
+  reglLib: require('regl'),
+}
+
+
+
+for (key in libs) window[key] = libs[key]