gl-line-plot - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

example/example.js

@@ -38,3 +38,5 @@ "use strict"
     position: polyline,
-    color: [1,0,0]
+    color: [1,0,0],
+    dashes: [0.5,0.5],
+    dashScale: 0.1
   })
@@ -41,0 +43,0 @@

lines.js

@@ -1,19 +0,21 @@
-"use strict"
+'use strict'
 
 module.exports = createLinePlot
 
-var createBuffer = require("gl-buffer")
-var createVAO = require("gl-vao")
-var glslify = require("glslify")
-var unpackFloat = require("glsl-read-float")
-var bsearch = require("binary-search-bounds")
+var createBuffer  = require('gl-buffer')
+var createVAO     = require('gl-vao')
+var createTexture = require('gl-texture2d')
+var glslify       = require('glslify')
+var unpackFloat   = require('glsl-read-float')
+var bsearch       = require('binary-search-bounds')
+var ndarray       = require('ndarray')
 
 var createShader = glslify({
-  vert: "./shaders/vertex.glsl",
-  frag: "./shaders/fragment.glsl"
+  vert: './shaders/vertex.glsl',
+  frag: './shaders/fragment.glsl'
 })
 
 var createPickShader = glslify({
-  vert: "./shaders/vertex.glsl",
-  frag: "./shaders/pick.glsl"
+  vert: './shaders/vertex.glsl',
+  frag: './shaders/pick.glsl'
 })
@@ -49,16 +51,18 @@
 
-function LinePlot(gl, shader, pickShader, buffer, vao) {
-  this.gl = gl
-  this.shader = shader
-  this.pickShader = pickShader
-  this.buffer = buffer
-  this.vao = vao
-  this.clipBounds = [[-Infinity,-Infinity,-Infinity], 
-                     [ Infinity, Infinity, Infinity]]
-  this.points = []
-  this.arcLength = []
-  this.vertexCount = 0
-  this.bounds = [[0,0,0],[0,0,0]]
-  this.pickId = 0
-  this.lineWidth = 1
+function LinePlot(gl, shader, pickShader, buffer, vao, texture) {
+  this.gl           = gl
+  this.shader       = shader
+  this.pickShader   = pickShader
+  this.buffer       = buffer
+  this.vao          = vao
+  this.clipBounds   = [[-Infinity,-Infinity,-Infinity], 
+                       [ Infinity, Infinity, Infinity]]
+  this.points       = []
+  this.arcLength    = []
+  this.vertexCount  = 0
+  this.bounds       = [[0,0,0],[0,0,0]]
+  this.pickId       = 0
+  this.lineWidth    = 1
+  this.texture      = texture
+  this.dashScale    = 1
 }
@@ -69,11 +73,14 @@
 proto.draw = function(camera) {
-  var gl = this.gl
-  var shader = this.shader
-  var vao = this.vao
+  var gl      = this.gl
+  var shader  = this.shader
+  var vao     = this.vao
+  gl.lineWidth(this.lineWidth)
   shader.bind()
   shader.uniforms = {
-    model: camera.model || identity,
-    view: camera.view || identity,
-    projection: camera.projection || identity,
-    clipBounds: filterClipBounds(this.clipBounds)
+    model:        camera.model      || identity,
+    view:         camera.view       || identity,
+    projection:   camera.projection || identity,
+    clipBounds:   filterClipBounds(this.clipBounds),
+    dashTexture:  this.texture.bind(),
+    dashScale:    this.dashScale / this.arcLength[this.arcLength.length-1]
   }
@@ -85,11 +92,12 @@ vao.bind()
 proto.drawPick = function(camera) {
-  var gl = this.gl
-  var shader = this.pickShader
-  var vao = this.vao
+  var gl      = this.gl
+  var shader  = this.pickShader
+  var vao     = this.vao
+  gl.lineWidth(this.lineWidth)
   shader.bind()
   shader.uniforms = {
-    model: camera.model || identity,
-    view: camera.view || identity,
+    model:      camera.model      || identity,
+    view:       camera.view       || identity,
     projection: camera.projection || identity,
-    pickId: this.pickId,
+    pickId:     this.pickId,
     clipBounds: filterClipBounds(this.clipBounds)
@@ -108,2 +116,5 @@ }
   }
+  if("dashScale" in options) {
+    this.dashScale = options.dashScale
+  }
 
@@ -148,3 +159,3 @@ var positions = options.position || options.positions
     arcLength += distance(a, b)
-    buffer.push(a[0], a[1], a[2], t0, acolor[0], acolor[1], acolor[2],
+    buffer.push(a[0], a[1], a[2], t0,        acolor[0], acolor[1], acolor[2],
                 b[0], b[1], b[2], arcLength, bcolor[0], bcolor[1], bcolor[2])
@@ -165,2 +176,27 @@
   this.arcLength = arcLengthArray
+
+  if('dashes' in options) {
+    var dashArray = options.dashes
+
+    //Calculate prefix sum
+    var prefixSum = dashArray.slice()
+    prefixSum.unshift(0)
+    for(var i=1; i<prefixSum.length; ++i) {
+      prefixSum[i] = prefixSum[i-1] + prefixSum[i]
+    }
+
+    var dashTexture = ndarray(new Array(256*4), [256, 1, 4])
+    for(var i=0; i<256; ++i) {
+      for(var j=0; j<4; ++j) {
+        dashTexture.set(i,0,j, 0)
+      }
+      if(bsearch.le(prefixSum, prefixSum[prefixSum.length-1]*i/255.0) & 1) {
+        dashTexture.set(i,0,0, 0)
+      } else {
+        dashTexture.set(i,0,0, 255)
+      }
+    }
+
+    this.texture.setPixels(dashTexture)
+  }
 }
@@ -208,10 +244,10 @@
   var shader = createShader(gl)
-  shader.attributes.position.location = 0
-  shader.attributes.arcLength.location = 1
-  shader.attributes.color.location = 2
+  shader.attributes.position.location   = 0
+  shader.attributes.arcLength.location  = 1
+  shader.attributes.color.location      = 2
 
   var pickShader = createPickShader(gl)
-  pickShader.attributes.position.location = 0
-  pickShader.attributes.arcLength.location = 1
-  pickShader.attributes.color.location = 2
+  pickShader.attributes.position.location   = 0
+  pickShader.attributes.arcLength.location  = 1
+  pickShader.attributes.color.location      = 2
 
@@ -221,24 +257,32 @@ var buffer = createBuffer(gl)
       {
-        "buffer": buffer,
-        "size": 3,
-        "offset": 0,
-        "stride": 28
+        'buffer': buffer,
+        'size': 3,
+        'offset': 0,
+        'stride': 28
       },
       { 
-        "buffer": buffer,
-        "size": 1,
-        "offset": 12,
-        "stride": 28
+        'buffer': buffer,
+        'size': 1,
+        'offset': 12,
+        'stride': 28
       },
       {
-        "buffer": buffer,
-        "size": 3,
-        "offset": 16,
-        "stride": 28
+        'buffer': buffer,
+        'size': 3,
+        'offset': 16,
+        'stride': 28
       }
     ])
 
-  var linePlot = new LinePlot(gl, shader, pickShader, buffer, vao)
+  //Create texture for dash pattern
+  var defaultTexture = ndarray(new Array(256*4), [256,1,4])
+  for(var i=0; i<256*4; ++i) {
+    defaultTexture.data[i] = 255
+  }
+  var texture = createTexture(gl, defaultTexture)
+  texture.wrap = gl.REPEAT
+
+  var linePlot = new LinePlot(gl, shader, pickShader, buffer, vao, texture)
   linePlot.update(options)
   return linePlot
 }

package.json

 {
   "name": "gl-line-plot",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "3D line plot",
@@ -14,3 +14,5 @@ "main": "lines.js",
     "glsl-read-float": "^1.0.0",
-    "binary-search-bounds": "^1.0.0"
+    "binary-search-bounds": "^1.0.0",
+    "gl-texture2d": "^2.0.2",
+    "ndarray": "^1.0.15"
   },
@@ -17,0 +19,0 @@ "devDependencies": {

README.md

@@ -130,2 +130,4 @@ gl-line-plot
 * `options.lineWidth` The width of the line
+* `options.dashes` An array of dash patterns representing the dash pattern.  For example, `[0.5,0.5,0.5]`
+* `options.dashScale` The number of times to repeat the dash pattern
 
@@ -132,0 +134,0 @@ #### `plot.dispose()`

No alert changes

Improved metrics

Total package byte prevSize

16091

13.76%

Lines of code

313

15.07%

Number of lines in readme file

163

1.24%

Worsened metrics

Dependency count

7

40%

Dependency changes

• + Added

  gl-texture2d@^2.0.2

• + Added

  ndarray@^1.0.15

• + Added

  gl-texture2d@2.1.0
  (transitive)