SDF strategy

.eslintrc.json

@@ -0,0 +1,43 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "commonjs": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "rules": {
+        "strict": 2,
+        "indent": 0,
+        "linebreak-style": 0,
+        "quotes": 0,
+        "semi": 0,
+        "no-cond-assign": 1,
+        "no-constant-condition": 1,
+        "no-duplicate-case": 1,
+        "no-empty": 1,
+        "no-ex-assign": 1,
+        "no-extra-boolean-cast": 1,
+        "no-extra-semi": 1,
+        "no-fallthrough": 1,
+        "no-func-assign": 1,
+        "no-global-assign": 1,
+        "no-implicit-globals": 2,
+        "no-inner-declarations": ["error", "functions"],
+        "no-irregular-whitespace": 2,
+        "no-loop-func": 1,
+        "no-multi-str": 1,
+        "no-mixed-spaces-and-tabs": 1,
+        "no-proto": 1,
+        "no-sequences": 1,
+        "no-throw-literal": 1,
+        "no-unmodified-loop-condition": 1,
+        "no-useless-call": 1,
+        "no-void": 1,
+        "no-with": 2,
+        "wrap-iife": 1,
+        "no-redeclare": 1,
+        "no-unused-vars": ["error", { "vars": "all", "args": "none" }],
+        "no-sparse-arrays": 1
+    }
+}

README.md

@@ -2,5 +2,23 @@ gl-scatter2d-fancy
 ==================
 This code is similar to gl-scatter2d, but supports a larger range of styling features like custom marker glyphs, per marker colors, etc.  As a result, it is not as performant but provides more customization.
 
+```js
+const createPlot = require('gl-plot2d')
+const createScatter = require('gl-scatter2d-fancy')
+
+let plot = createPlot({gl, ...})
+
+let scatter = createScatter(plot, {
+	positions:    [.5,.5, .6,.7, ...],
+	sizes:        [2, 3, ...],
+	colors:       [0,0,0,1, .5,.5,1,1, ...],
+	glyphs:       ['x', 'y', ...],
+	borderWidths: [.5, 1, ...],
+	borderColors: [1,0,0,.5, 0,0,1,.5, ...]
+})
+
+plot.draw()
+```
+
 # License
 (c) 2015 Mikola Lysenko. MIT License

example/566.js

@@ -0,0 +1,23 @@
+/**
+ * plotly.js #566 case
+ */
+
+const setup = require('./')
+
+let N = 1e3
+
+let positions = Array(N*2).fill(0).map((v, i) => (Math.random() * 10 - 5) )
+let sizes = Array(N).fill(0).map(v => 10)
+let colors = Array(N*4).fill(0).map((v, i) => !((i + 1) % 4) ? .7 : Math.random())
+let glyphs = Array(N).fill('●')
+let borderWidths = Array(N).fill(.5)
+let borderColors = Array(N*4).fill(0).map((v, i) => !((i+1) % 4) ? .7 : 1)
+
+setup({
+  positions,
+  sizes,
+  colors,
+  glyphs,
+  borderColors,
+  borderWidths
+})

example/index.js

@@ -0,0 +1,162 @@
+/**
+ * Create gl-scatter2d-fancy test-case
+ */
+
+var fit = require('canvas-fit')
+var mouseWheel = require('mouse-wheel')
+var mouseChange = require('mouse-change')
+// var createScatter = require('../../plotly.js/node_modules/gl-scatter2d-fancy')
+var createScatter = require('../')
+var createSelectBox = require('gl-select-box')
+var createSpikes = require('gl-spikes2d')
+var createPlot = require('gl-plot2d')
+var createFps = require('fps-indicator')
+
+
+module.exports = setup;
+
+
+function setup (options) {
+  createFps()
+
+  var canvas = document.createElement('canvas')
+  document.body.appendChild(canvas)
+  window.addEventListener('resize', fit(canvas, null, +window.devicePixelRatio), false)
+
+  var gl = canvas.getContext('webgl', {
+    depth: false,
+    // alpha: true,
+    // premultipliedAlpha: true
+  })
+
+  var aspect = gl.drawingBufferWidth / gl.drawingBufferHeight
+  var dataBox = [-10,-10/aspect,10,10/aspect]
+
+  function makeTicks(lo, hi) {
+    var result = []
+    for(var i=lo; i<=hi; ++i) {
+      result.push({
+        x: i,
+        text: i + ''
+      })
+    }
+    return result
+  }
+
+  var plot = createPlot({
+    gl:             gl,
+    dataBox:        dataBox,
+    title:          'gl-scatter2d-fancy',
+    ticks:          [ makeTicks(-20,20), makeTicks(-20,20) ],
+    labels:         ['x', 'y'],
+    pixelRatio:     1,
+    tickMarkWidth:  [1,1,1,1],
+    tickMarkLength: [3,3,3,3]
+  })
+
+
+
+  var selectBox = createSelectBox(plot, {
+    innerFill: false,
+    outerFill: true
+  })
+  selectBox.enabled = false
+
+  var spikes = createSpikes(plot)
+
+  var scatter = createScatter(plot, options)
+
+
+  var lastX = 0, lastY = 0
+  var boxStart = [0,0]
+  var boxEnd   = [0,0]
+  var boxEnabled = false
+  mouseChange(function(buttons, x, y, mods) {
+    y = window.innerHeight - y
+    x *= plot.pixelRatio
+    y *= plot.pixelRatio
+
+    if(buttons & 1) {
+      if(mods.shift) {
+        var dataX = (x - plot.viewBox[0]) / (plot.viewBox[2]-plot.viewBox[0]) * (dataBox[2] - dataBox[0]) + dataBox[0]
+        var dataY = (y - plot.viewBox[1]) / (plot.viewBox[3]-plot.viewBox[1]) * (dataBox[3] - dataBox[1]) + dataBox[1]
+        if(!boxEnabled) {
+          boxStart[0] = dataX
+          boxStart[1] = dataY
+        }
+        boxEnd[0] = dataX
+        boxEnd[1] = dataY
+        boxEnabled = true
+        spikes.update()
+      } else {
+        var dx = (lastX - x) * (dataBox[2] - dataBox[0]) / (plot.viewBox[2]-plot.viewBox[0])
+        var dy = (lastY - y) * (dataBox[3] - dataBox[1]) / (plot.viewBox[3] - plot.viewBox[1])
+
+        dataBox[0] += dx
+        dataBox[1] += dy
+        dataBox[2] += dx
+        dataBox[3] += dy
+
+        plot.setDataBox(dataBox)
+        spikes.update()
+      }
+    } else {
+      var result = plot.pick(x/plot.pixelRatio, y/plot.pixelRatio)
+      if(result) {
+        spikes.update({center: result.dataCoord})
+      } else {
+        spikes.update()
+      }
+    }
+
+    if(boxEnabled) {
+      selectBox.enabled = true
+      selectBox.selectBox = [
+        Math.min(boxStart[0], boxEnd[0]),
+        Math.min(boxStart[1], boxEnd[1]),
+        Math.max(boxStart[0], boxEnd[0]),
+        Math.max(boxStart[1], boxEnd[1])
+      ]
+      plot.setDirty()
+      if(!((buttons&1) && mods.shift)) {
+        selectBox.enabled = false
+        dataBox = [
+          Math.min(boxStart[0], boxEnd[0]),
+          Math.min(boxStart[1], boxEnd[1]),
+          Math.max(boxStart[0], boxEnd[0]),
+          Math.max(boxStart[1], boxEnd[1])
+        ]
+        plot.setDataBox(dataBox)
+        boxEnabled = false
+      }
+    }
+
+    lastX = x
+    lastY = y
+  })
+
+  mouseWheel(function(dx, dy, dz) {
+    var scale = Math.exp(0.1 * dy / gl.drawingBufferHeight)
+
+    var cx = (lastX - plot.viewBox[0]) / (plot.viewBox[2] - plot.viewBox[0]) * (dataBox[2] - dataBox[0]) + dataBox[0]
+    var cy = (plot.viewBox[1] - lastY) / (plot.viewBox[3] - plot.viewBox[1]) * (dataBox[3] - dataBox[1]) + dataBox[3]
+
+    dataBox[0] = (dataBox[0] - cx) * scale + cx
+    dataBox[1] = (dataBox[1] - cy) * scale + cy
+    dataBox[2] = (dataBox[2] - cx) * scale + cx
+    dataBox[3] = (dataBox[3] - cy) * scale + cy
+
+    plot.setDataBox(dataBox)
+
+    return true
+  })
+
+  function render() {
+    requestAnimationFrame(render)
+    plot.draw()
+  }
+
+  render()
+
+  return scatter
+}

example/points.js

@@ -0,0 +1,48 @@
+/**
+ * Test multiple points
+ */
+
+const setup = require('./')
+
+
+//5e6 is allocation maximum
+// var POINT_COUNT = 3e6
+var POINT_COUNT = 1e6
+
+var positions = new Float32Array(2 * POINT_COUNT)
+for(var i=0; i<2*POINT_COUNT; ++i) {
+  positions[i] = Math.random() * 10 - 5
+}
+
+var glyphs = new Array(POINT_COUNT)
+var MARKERS = [ '●', '#', '✝', '+' ]
+for(var i=0; i<POINT_COUNT; ++i) {
+  glyphs[i] = MARKERS[(Math.random() * MARKERS.length)|0]
+}
+
+var colors = new Array(4 * POINT_COUNT)
+var borderColors = new Array(4 * POINT_COUNT)
+for(var i=0; i<4*POINT_COUNT; ++i) {
+  colors[i] = Math.random()
+  // if (!((i+1)%4)) colors[i] = 1;
+  borderColors[i] = +((i % 4) === 3)
+}
+
+
+var sizes = new Float32Array(POINT_COUNT)
+var borderWidths = new Float32Array(POINT_COUNT)
+for(var i=0; i<POINT_COUNT; ++i) {
+  borderWidths[i] = .5
+  sizes[i] = 10 + Math.random() * 10
+}
+
+
+setup({
+  positions:  positions,
+  sizes:      sizes,
+  colors:     colors,
+  glyphs:     glyphs,
+  borderWidths: borderWidths,
+  borderColors: borderColors
+})
+

example/render.js

@@ -0,0 +1,33 @@
+/**
+ * Test glyphs/borders/colors rendering
+ */
+const setup = require('./')
+
+
+setup({
+  positions:  [.5,.5, 1.5,.5, 2.5,.5, 3.5,.5, 4.5,.5, 5.5,.5, 6.5,.5, 7.5,.5, 8.5,.5, 9.5,.5,
+               .5,1.5, 1.5,1.5, 2.5,1.5,
+               .5,2.5, 1.5,2.5, 2.5,2.5,
+               .5,3.5, 1.5,3.5, 2.5,3.5, 3.5,3.5, 4.5,3.5, 5.5,3.5],
+  sizes:      [10, 20, 30, 40, 50, 60, 70, 80, 90, 100,
+               25, 30, 35,
+               40, 45, 50,
+               1, 2, 5, 10, 12, 15],
+  colors:     [0,0,0,1, .1,0,0,1, .2,0,0,1, .3,0,0,1, .4,0,0,1, .5,0,0,1, .6,0,0,1, .7,0,0,1, .8,0,0,1, .9,0,0,1,
+               1,0,0,1, 0,1,0,1, 0,0,1,1,
+               0,0,0,.2, 0,0,0,.5, 0,0,0,.8,
+               0,0,1,1, 0,0,1,1, 0,0,1,1, 0,0,1,1, 0,0,1,1, 0,0,1,1],
+  glyphs:     ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
+               '•', '+', '#',
+               'E', '=', 'mc²',
+               '●', '●', '●', '●', '●', '●'],
+  borderWidths: [1,1,1,1,1,1,1,1,1,1,
+                 2,2,2,
+                 0,0,0,
+                 .5, .5, .5, .5, .5, .5],
+  borderColors: [0,0,1,1, 0,0,1,.9, 0,0,1,.8, 0,0,1,.7, 0,0,1,.6, 0,0,1,.5, 0,0,1,.4, 0,0,1,.3, 0,0,1,.2, 0,0,1,.1,
+                 0,1,0,1, 0,0,1,1, 1,0,0,1,
+                 0,0,0,1, 0,0,0,1, 0,0,0,1,
+                 0,0,0,1, 0,0,0,1, 0,0,0,1, 0,0,0,1, 0,0,0,1, 0,0,0,1],
+})
+

lib/shaders/frag.glsl

@@ -1,5 +1,37 @@
-precision lowp float;
-varying vec4 fragColor;
+precision highp float;
+
+uniform sampler2D chars;
+uniform vec2 charsShape;
+uniform float charsStep, pixelRatio, charOffset;
+
+varying vec4 borderColor;
+varying vec4 charColor;
+varying vec2 charId;
+varying vec2 pointCoord;
+varying float pointSize;
+varying float borderWidth;
+
 void main() {
-  gl_FragColor = vec4(fragColor.rgb * fragColor.a, fragColor.a);
+	vec2 pointUV = (pointCoord - gl_FragCoord.xy + pointSize * .5) / pointSize;
+	pointUV.x = 1. - pointUV.x;
+	pointUV.y += charOffset;
+	vec2 texCoord = ((charId + pointUV) * charsStep) / charsShape;
+	float dist = texture2D(chars, texCoord).r;
+
+	//max-distance alpha
+	if (dist < 1e-2)
+		discard;
+
+	float dif = 6. * pixelRatio * borderWidth / pointSize;
+	float borderLevel = .74 - dif * .7;
+	float charLevel = .74 + dif * .3;
+	float gamma = .005 * charsStep / pointSize;
+
+	float borderAmt = smoothstep(borderLevel - gamma, borderLevel + gamma, dist);
+	float charAmt = smoothstep(charLevel - gamma, charLevel + gamma, dist);
+
+	vec4 color = borderColor;
+	color.a *= borderAmt;
+
+	gl_FragColor = mix(color, charColor, charAmt);
 }