gl-spikes3d

Draws axis spikes compatible with gl-axes3d. This can be useful to illustrate selections or specific points in a point cloud

Example

Try it out here

1var shell = require("gl-now")({ clearColor: [0,0,0,0], tickRate: 5 })
2var camera = require("game-shell-orbit-camera")(shell)
3var mat4 = require("gl-matrix").mat4
4var createAxes = require("gl-axes")
5var createSpikes = require("gl-spikes")
6
7//Bounds on function to plot
8var bounds = [[-1,-1,-1], [1,1,1]]
9
10//camera.lookAt([-15,20,-15], [0,0,0], [0, 1, 0])
11camera.lookAt([2, 2, 2], [0,0,0], [0,1,0])
12
13//State variables
14var axes, spikes
15
16shell.on("gl-init", function() {
17  var gl = shell.gl
18  
19  axes = createAxes(gl, {
20    bounds: bounds,
21    tickSpacing: [0.1,0.1,0.1],
22    textSize: 0.05
23  })
24
25  spikes = createSpikes(gl, {
26    bounds: bounds,
27    colors: [[1,0,0,1], [0,1,0,1], [0,0,1,1]],
28    position: [0,0,0]
29  })
30})
31
32shell.on("gl-render", function() {
33  var gl = shell.gl
34  gl.enable(gl.DEPTH_TEST)
35
36  //Compute camera parameters
37  var cameraParameters = {
38    view: camera.view(),
39    projection: mat4.perspective(
40        mat4.create(),
41        Math.PI/4.0,
42        shell.width/shell.height,
43        0.1,
44        1000.0)
45  }
46
47
48  //Update spike position
49  var t = 0.001*Date.now()
50  spikes.position = [Math.cos(t), Math.sin(t), Math.cos(2*t+0.1)]
51
52  //Draw objects
53  axes.draw(cameraParameters)
54  spikes.draw(cameraParameters)
55})

Install

npm install gl-spikes

API

var spikes = require('gl-spikes')(gl, options)

Creates a new spike object.

• gl is a WebGL context
• options is a list of optional parameters which are passed along

Methods

spikes.draw(camera)

Draws the axis spikes using the given camera coordinates.

• camera.model is the model matrix for the camera
• camera.view is the view matrix
• camera.projection is the projection matrix

spikes.update(options)

Updates the parameters of the axes spikes. options is an object with the following properties:

• position the position of the spike ball in data coordinates
• bounds the bounds of the axes object
• colors an array of 3 length 4 arrays encoding the RGBA colors for the spikes along the x/y/z directions
• enabled an array of 3 flags which if set turns on or off the spikes
• drawSides an array of 3 flag which if set turns on or off the projected spikes in each data plane
• lineWidth an array of 3 numbers giving the thickness of the spikes for each axis

spikes.dispose()

Destroys the spike object and releases all associated resources.

Credits

(c) 2014 Mikola Lysenko. MIT License