1 | gl-spikes3d
|
2 | ===========
|
3 | Draws axis spikes compatible with gl-axes3d. This can be useful to illustrate selections or specific points in a point cloud
|
4 |
|
5 | ## Example
|
6 |
|
7 | [Try it out here](https://mikolalysenko.github.io/gl-spikes)
|
8 |
|
9 | ```javascript
|
10 | var shell = require("gl-now")({ clearColor: [0,0,0,0], tickRate: 5 })
|
11 | var camera = require("game-shell-orbit-camera")(shell)
|
12 | var mat4 = require("gl-matrix").mat4
|
13 | var createAxes = require("gl-axes")
|
14 | var createSpikes = require("gl-spikes")
|
15 |
|
16 | //Bounds on function to plot
|
17 | var bounds = [[-1,-1,-1], [1,1,1]]
|
18 |
|
19 | //camera.lookAt([-15,20,-15], [0,0,0], [0, 1, 0])
|
20 | camera.lookAt([2, 2, 2], [0,0,0], [0,1,0])
|
21 |
|
22 | //State variables
|
23 | var axes, spikes
|
24 |
|
25 | shell.on("gl-init", function() {
|
26 | var gl = shell.gl
|
27 |
|
28 | axes = createAxes(gl, {
|
29 | bounds: bounds,
|
30 | tickSpacing: [0.1,0.1,0.1],
|
31 | textSize: 0.05
|
32 | })
|
33 |
|
34 | spikes = createSpikes(gl, {
|
35 | bounds: bounds,
|
36 | colors: [[1,0,0,1], [0,1,0,1], [0,0,1,1]],
|
37 | position: [0,0,0]
|
38 | })
|
39 | })
|
40 |
|
41 | shell.on("gl-render", function() {
|
42 | var gl = shell.gl
|
43 | gl.enable(gl.DEPTH_TEST)
|
44 |
|
45 | //Compute camera parameters
|
46 | var cameraParameters = {
|
47 | view: camera.view(),
|
48 | projection: mat4.perspective(
|
49 | mat4.create(),
|
50 | Math.PI/4.0,
|
51 | shell.width/shell.height,
|
52 | 0.1,
|
53 | 1000.0)
|
54 | }
|
55 |
|
56 |
|
57 | //Update spike position
|
58 | var t = 0.001*Date.now()
|
59 | spikes.position = [Math.cos(t), Math.sin(t), Math.cos(2*t+0.1)]
|
60 |
|
61 | //Draw objects
|
62 | axes.draw(cameraParameters)
|
63 | spikes.draw(cameraParameters)
|
64 | })
|
65 | ```
|
66 |
|
67 | ## Install
|
68 |
|
69 | ```
|
70 | npm install gl-spikes
|
71 | ```
|
72 |
|
73 | ## API
|
74 |
|
75 | ### `var spikes = require('gl-spikes')(gl, options)`
|
76 | Creates a new spike object.
|
77 |
|
78 | * `gl` is a WebGL context
|
79 | * `options` is a list of optional parameters which are passed along
|
80 |
|
81 | ### Methods
|
82 |
|
83 | #### `spikes.draw(camera)`
|
84 | Draws the axis spikes using the given camera coordinates.
|
85 |
|
86 | * `camera.model` is the model matrix for the camera
|
87 | * `camera.view` is the view matrix
|
88 | * `camera.projection` is the projection matrix
|
89 |
|
90 | #### `spikes.update(options)`
|
91 | Updates the parameters of the axes spikes. `options` is an object with the following properties:
|
92 |
|
93 | * `position` the position of the spike ball in data coordinates
|
94 | * `bounds` the bounds of the axes object
|
95 | * `colors` an array of 3 length 4 arrays encoding the RGBA colors for the spikes along the x/y/z directions
|
96 | * `enabled` an array of 3 flags which if set turns on or off the spikes
|
97 | * `drawSides` an array of 3 flag which if set turns on or off the projected spikes in each data plane
|
98 | * `lineWidth` an array of 3 numbers giving the thickness of the spikes for each axis
|
99 |
|
100 | #### `spikes.dispose()`
|
101 | Destroys the spike object and releases all associated resources.
|
102 |
|
103 | ## Credits
|
104 | (c) 2014 Mikola Lysenko. MIT License |
\ | No newline at end of file |