gl-scatter-plot - npm Package Compare versions

Comparing version 5.3.2 to 5.4.0

example/example.js

@@ -6,5 +6,6 @@ var shell = require("gl-now")({tickRate: 2})
 var createSelect = require("gl-select")
+var createSpikes = require("gl-spikes")
 var mat4 = require("gl-matrix").mat4
  
-var points, axes, select, target=null
+var points, axes, select, spikes, target=null
 
@@ -22,3 +23,3 @@ var SCALE = 1
   var initialData = {
-    position: [ [1, 0, -1], [0, 1, -1], [0, 0, 1], [1,1,-1], [1,0,1], [0,1,1] ],
+    position: [ [0.9, 0, -0.8], [0, 0.6, -0.75], [0, 0, 0.4], [0.8,0.92,-0.4], [0.33,0,0.56], [0,0.11,0.8] ],
     glyph: [  "▼", "★", "■", "◆", "✚", "✖" ],
@@ -29,3 +30,4 @@ color: [ [0,1,0], [0,0,1], [1,1,0], [1,0,1], [0,1,1], [0,0,0] ],
     lineColor: [0,0,0],
-    lineWidth: 1
+    lineWidth: 1,
+    project: [true, true, true]
   }
@@ -46,6 +48,14 @@
     bounds: [[-SCALE,-SCALE, -SCALE], [SCALE, SCALE, SCALE]],
-    tickSpacing: [0.1*SCALE, 0.1*SCALE, 0.1*SCALE],
-    textSize: 0.1
+    tickSpacing: [0.25*SCALE, 0.25*SCALE, 0.25*SCALE],
+    textSize: 0.1,
+    tickPad: 0.2,
+    labelPad: 0.2,
+    gridColor: [0.5,0.5,0.5]
+
   })
 
+  spikes = createSpikes(gl, {
+    bounds: axes.bounds,
+    colors: [[1,0,0,1], [0,1,0,1], [0,0,1,1]]
+  })
   select = createSelect(gl, [shell.height, shell.width])
@@ -72,4 +82,7 @@ })
     points.highlight(target.index, [Math.random(),Math.random(),Math.random()])
+    spikes.position = target.position
+    spikes.enabled = [true,true,true]
   } else {
     points.highlight()
+    spikes.enabled = [false,false,false]
   }
@@ -102,4 +115,8 @@ }
   //Update camera
+  points.axesProject = [true,true,true]
+  points.axesBounds = axes.bounds
+  points.clipBounds = axes.bounds
   points.draw(cameraParams)
   axes.draw(cameraParams)
+  spikes.draw(cameraParams)
 })

package.json

 {
   "name": "gl-scatter-plot",
-  "version": "5.3.2",
+  "version": "5.4.0",
   "description": "3D scatter plot",
@@ -14,3 +14,6 @@ "main": "pointcloud.js",
     "vectorize-text": "^2.0.0",
-    "typedarray-pool": "^1.0.2"
+    "typedarray-pool": "^1.0.2",
+    "gl-mat4": "^1.0.0",
+    "gl-axes": "^5.0.3",
+    "gl-matrix": "^2.1.0"
   },
@@ -24,3 +27,4 @@ "devDependencies": {
     "browserify": "^4.1.8",
-    "gl-select": "^2.0.0"
+    "gl-select": "^2.0.0",
+    "gl-spikes": "^2.0.0"
   },
@@ -27,0 +31,0 @@ "scripts": {

pointcloud.js

@@ -7,2 +7,6 @@ 'use strict'
 var pool          = require('typedarray-pool')
+var getCubeParams = require('gl-axes/lib/cube')
+var mat4          = require('gl-mat4')
+var vec4          = require('gl-matrix').vec4
+var vec3          = require('gl-matrix').vec3
 var getGlyph      = require('./lib/glyphs')
@@ -18,2 +22,6 @@
   }),
+  createProjectShader = glslify({
+    vertex:   './lib/projection.glsl',
+    fragment: './lib/draw-fragment.glsl'
+  }),
   createPickPerspectiveShader = glslify({
@@ -26,2 +34,6 @@ vertex:   './lib/perspective.glsl',
     fragment: './lib/pick-fragment.glsl'
+  }),
+  createPickProjectShader = glslify({
+    vertex:   './lib/projection.glsl',
+    fragment: './lib/pick-fragment.glsl'
   })
@@ -36,2 +48,8 @@
 
+function project(p, v, m, x) {
+  vec4.transformMat4(x, x, m)
+  vec4.transformMat4(x, x, v)
+  return vec4.transformMat4(x, x, p)
+}
+
 function clampVec(v) {
@@ -54,2 +72,3 @@ var result = new Array(3)
   orthoShader, 
+  projectShader,
   pointBuffer, 
@@ -61,7 +80,11 @@ colorBuffer,
   pickPerspectiveShader, 
-  pickOrthoShader) {
+  pickOrthoShader,
+  pickProjectShader) {
 
   this.gl              = gl
+
   this.shader          = shader
   this.orthoShader     = orthoShader
+  this.projectShader   = projectShader
+
   this.pointBuffer     = pointBuffer
@@ -80,8 +103,15 @@ this.colorBuffer     = colorBuffer
   this.pickOrthoShader       = pickOrthoShader
+  this.pickProjectShader     = pickProjectShader
   this.points                = []
 
   this.useOrtho = false
-  this.bounds   = [[0,0,0],
-                   [0,0,0]]
+  this.bounds   = [[ Infinity,Infinity,Infinity],
+                   [-Infinity,-Infinity,-Infinity]]
 
+  //Axes projections
+  this.axesProject = [ false, false, false ]
+  this.axesBounds = [[-Infinity,-Infinity,-Infinity],
+                     [ Infinity, Infinity, Infinity]]
+
+
   this.highlightColor = [0,0,0,1]
@@ -96,6 +126,92 @@ this.highlightId    = [1,1,1,1]
 
-proto.draw = function(camera) {
-  var gl     = this.gl
-  var shader = this.useOrtho ? this.orthoShader : this.shader
+function drawProject(shader, points, camera) {
+  var axesProject = points.axesProject
+  if(!(axesProject[0] || axesProject[1] || axesProject[2])) {
+    return
+  }
 
+  var gl         = points.gl
+  var uniforms   = shader.uniforms
+  var model      = camera.model      || IDENTITY
+  var view       = camera.view       || IDENTITY
+  var projection = camera.projection || IDENTITY
+  var bounds     = points.axesBounds
+  var clipBounds = points.clipBounds.map(clampVec)
+  var cubeParams = getCubeParams(model, view, projection, bounds)
+  var cubeAxis   = cubeParams.axis
+
+  shader.bind()
+  uniforms.view           = view
+  uniforms.projection     = projection
+  uniforms.screenSize     = [2.0/gl.drawingBufferWidth, 2.0/gl.drawingBufferHeight]
+  uniforms.highlightId    = points.highlightId
+  uniforms.highlightColor = points.highlightColor
+  uniforms.clipBounds     = clipBounds
+
+  for(var i=0; i<3; ++i) {
+    if(!axesProject[i]) {
+      continue
+    }
+
+    //Project model matrix
+    var pmodel = IDENTITY.slice()
+    pmodel[5*i] = 0
+    if(cubeAxis[i] < 0) {
+      pmodel[12+i] = bounds[0][i]
+    } else {
+      pmodel[12+i] = bounds[1][i]
+    }
+    mat4.multiply(pmodel, model, pmodel)
+    uniforms.model = pmodel
+
+    //Compute initial axes
+    var u = (i+1)%3
+    var v = (i+2)%3
+    var du = [0,0,0]
+    var dv = [0,0,0]
+    du[u] = 1
+    dv[v] = 1
+
+    //Align orientation relative to viewer
+    var mdu = project(projection, view, model, [du[0],du[1],du[2],0])
+    var mdv = project(projection, view, model, [dv[0],dv[1],dv[2],0])
+    if(Math.abs(mdu[1]) > Math.abs(mdv[1])) {
+      var tmp = mdu
+      mdu = mdv
+      mdv = tmp
+      tmp = du
+      du = dv
+      dv = tmp
+      var t = u
+      u = v
+      v = t
+    }
+    if(mdu[0] < 0) {
+      du[u] = -1
+    }
+    if(mdv[1] > 0) {
+      dv[v] = -1
+    }
+    uniforms.axes = [du, dv]
+
+    //Update fragment clip bounds
+    var fragClip = [clipBounds[0].slice(), clipBounds[1].slice()]
+    fragClip[0][i] = -1e8
+    fragClip[1][i] = 1e8
+    uniforms.fragClipBounds = fragClip
+
+    //Draw interior
+    points.vao.draw(gl.TRIANGLES, points.vertexCount)
+
+    //Draw edges
+    if(points.lineWidth > 0) {
+      gl.lineWidth(points.lineWidth)
+      points.vao.draw(gl.LINES, points.lineVertexCount, points.vertexCount)
+    }
+  }
+}
+
+
+function drawFull(shader, pshader, points, camera) {
+  var gl = points.gl
   gl.depthFunc(gl.LEQUAL)
@@ -109,35 +225,32 @@
     screenSize:     [2.0/gl.drawingBufferWidth, 2.0/gl.drawingBufferHeight],
-    highlightId:    this.highlightId,
-    highlightColor: this.highlightColor,
-    clipBounds:     this.clipBounds.map(clampVec)
+    highlightId:    points.highlightId,
+    highlightColor: points.highlightColor,
+    clipBounds:     points.clipBounds.map(clampVec),
+    fragClipBounds: [[-1e8,-1e8,-1e8],[1e8,1e8,1e8]]
   }
 
-  this.vao.bind()
+  points.vao.bind()
 
   //Draw interior
-  this.vao.draw(gl.TRIANGLES, this.vertexCount)
+  points.vao.draw(gl.TRIANGLES, points.vertexCount)
 
-  if(this.lineWidth > 0) {
-    gl.lineWidth(this.lineWidth)
-    this.vao.draw(gl.LINES, this.lineVertexCount, this.vertexCount)
+  //Draw edges
+  if(points.lineWidth > 0) {
+    gl.lineWidth(points.lineWidth)
+    points.vao.draw(gl.LINES, points.lineVertexCount, points.vertexCount)
   }
 
-  this.vao.unbind()
+  drawProject(pshader, points, camera)
+
+  points.vao.unbind()
 }
 
+proto.draw = function(camera) {
+  var shader = this.useOrtho ? this.orthoShader : this.shader
+  drawFull(shader, this.projectShader, this, camera)
+}
+
 proto.drawPick = function(camera) {
-  var gl = this.gl
   var shader = this.useOrtho ? this.pickOrthoShader : this.pickPerspectiveShader
-  shader.bind()
-  shader.uniforms = {
-    model:        camera.model      || IDENTITY, 
-    view:         camera.view       || IDENTITY,
-    projection:   camera.projection || IDENTITY,
-    screenSize:   [2.0/gl.drawingBufferWidth, 2.0/gl.drawingBufferHeight],
-    clipBounds:   this.clipBounds.map(clampVec),
-    pickId:       this.pickId
-  }
-  this.vao.bind()
-  this.vao.draw(gl.TRIANGLES, this.vertexCount)
-  this.vao.unbind()
+  drawFull(shader, this.pickProjectShader, this, camera)
 }
@@ -198,2 +311,13 @@
   }
+  if('project' in options) {
+    if(Array.isArray(options.project)) {
+      var v = !!options.project
+      this.axesProject = [v,v,v]
+    } else {
+      this.axesProject = options.project
+    }
+  }
+  if('axisBounds' in options) {
+    this.axesBounds = options.axisBounds
+  }
 
@@ -465,23 +589,23 @@ //Text font
   var shader = createShader(gl)
-  shader.attributes.position.location = 0
-  shader.attributes.color.location = 1
-  shader.attributes.glyph.location = 2
-  shader.attributes.id.location = 3
-
   var orthoShader = createOrthoShader(gl)
-  orthoShader.attributes.position.location = 0
-  orthoShader.attributes.color.location = 1
-  orthoShader.attributes.glyph.location = 2
-  orthoShader.attributes.id.location = 3
-
+  var projectShader = createProjectShader(gl)
   var pickPerspectiveShader = createPickPerspectiveShader(gl)
-  pickPerspectiveShader.attributes.position.location = 0
-  pickPerspectiveShader.attributes.glyph.location = 2
-  pickPerspectiveShader.attributes.id.location = 3
+  var pickOrthoShader = createPickOrthoShader(gl)
+  var pickProjectShader = createPickProjectShader(gl)
 
-  var pickOrthoShader = createPickOrthoShader(gl)
-  pickOrthoShader.attributes.position.location = 0
-  pickOrthoShader.attributes.glyph.location = 2
-  pickOrthoShader.attributes.id.location = 3
-  
+  var shaders = [shader, 
+                 orthoShader, 
+                 projectShader, 
+                 pickPerspectiveShader, 
+                 pickOrthoShader,
+                 pickProjectShader]
+
+  for(var i=0; i<shaders.length; ++i) {
+    var attr = shaders[i].attributes
+    attr.position.location = 0
+    attr.color.location = 1
+    attr.glyph.location = 2
+    attr.id.location = 3
+  }
+
   var pointBuffer = createBuffer(gl)
@@ -518,3 +642,4 @@ var colorBuffer = createBuffer(gl)
     shader, 
-    orthoShader, 
+    orthoShader,
+    projectShader,
     pointBuffer, 
@@ -526,3 +651,4 @@ colorBuffer,
     pickPerspectiveShader,
-    pickOrthoShader)
+    pickOrthoShader,
+    pickProjectShader)
 
@@ -529,0 +655,0 @@ pointCloud.update(options)

README.md

@@ -143,2 +143,4 @@ gl-scatter-plot
 * `alignment` a 2d vector to offset text drawing by (default `[0,0]`)
+* `project` a flag (or array of flags) which determines which axes to project onto
+* `axisBounds` a pair of 3d arrays representing the bounds of the axes to project onto
 
@@ -145,0 +147,0 @@ #### `points.draw(camera)`

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

467297

increased by1.12%

Number of package files

13

increased by8.33%

Lines of code

684

increased by22.58%

Number of lines in readme file

192

increased by1.05%

Worsened metrics

Dependency count

8

increased by60%

Dev dependency count

8

increased by14.29%

Dependency changes

• + Addedgl-axes@^5.0.3

• + Addedgl-mat4@^1.0.0

• + Addedgl-matrix@^2.1.0

• + Addedextract-frustum-planes@1.0.0(transitive)

• + Addedgl-axes@5.0.4(transitive)

• + Addedgl-mat4@1.2.0(transitive)

• + Addedgl-matrix@2.8.1(transitive)

• + Addedgl-state@1.0.0(transitive)

• + Addedrobust-dot-product@1.0.0(transitive)

• + Addedsplit-polygon@1.0.0(transitive)