gl-surface-plot

gl-surface-plot

Draws a surface plot

Example

var shell = require("gl-now")({ clearColor: [0,0,0,0] })
var camera = require("game-shell-orbit-camera")(shell)
var createSurfacePlot = require("gl-surface-plot")
var ndarray = require("ndarray")
var fill = require("ndarray-fill")
var diric = require("dirichlet")
var glm = require("gl-matrix")
var mat4 = glm.mat4

var surface

shell.on("gl-init", function() {
  var gl = shell.gl
  gl.enable(gl.DEPTH_TEST)

  //Set up camera
  camera.lookAt(
    [0, 0, 2],      //Eye position
    [256, 256, 64], //Eye target
    [0, 0, 1])      //Up direction

  //Create field
  var field = ndarray(new Float32Array(512*512), [512,512])
  fill(field, function(x,y) {
    return 128 * diric(10, 10.0*(x-256)/512) * diric(10, 10.0*(y-256)/512)
  })
  surface = createSurface(gl, field)
})

shell.on("gl-render", function() {
  surface.draw({
    view: camera.view(),
    projection:  mat4.perspective(new Array(16), Math.PI/4.0, shell.width/shell.height, 0.1, 10000.0)
  })
})

Here is what this should look like:

Test it in your browser (requires WebGL)

Install

npm install gl-surface-plot

API

var createSurfacePlot = require("gl-surface-plot")

var surface = createSurfacePlot(gl, field[, params])

Creates a surface plot object

• gl is a WebGL context

• field is a 2D ndarray

• params is an optional collection of arguments that contains any of the following:

  • colormap - the name of the color map to use for the surface (default "jet")
  • pickId is the picking id for the surface

Returns A surface object

surface.update(params)

Updates the surface. The parameter object may contain any of the following properties:

• field a new 2D field encoded as an ndarray
• colormap the name of the new color map for the surface
• pickId is the picking id for the surface
• ticks is a pair of arrays of ticks representing the spacing of the points for the axes of the surface

surface.draw([params])

Draws the surface. Accepts the following parameters

• model the 4x4 model matrix (in gl-matrix format)
• view the 4x4 view matrix
• projection the 4x4 projection matrix

surface.dispose()

Destroys the surface, releases all associated WebGL resources

surface.drawPick(camera)

Draws the surface for point picking mode

surface.pick(selection)

Test if the given selection is contained in the surface. If true, returns an object encoding the selected point.

Returns An object encoding the selected point on the surface with the following properties:

• position which is the position of the selected point on the surface
• index a vector encoding the [x,y] index of the closest data point

surface.bounds

A pair of 3D arrays representing the lower/upper bounding box for the surface plot.

surface.clipBounds

A pair of arrays which bound the coordinates of the surface plot in 3D.

License

MIT License.