gl-vis/gl-plot3d

A common interface for setting up 3D plots

gl-plot3d

This is the core module for 3D plotting in gl-vis. It is compatible with the following modules:

• gl-scatter3d: 3D scatter plots
• gl-line3d: 3D line plots
• gl-surface3d: 3D surface plots
• gl-mesh3d: General mesh drawing

This module (and this whole subecosystem) skew more towards the easy-side of the simple vs. easy tradeoff spectrum. It has lots of options, but has opinionated and reasonable defaults which should make it suitable for small projects like mesh viewers or knocking out one-off data visualizations. If you want more precise, low level control, check out stack.gl.

Examples

Scatter plot

var createScene   = require('gl-plot3d').createScene
var createCamera  = require('gl-plot3d').createCamera
var createScatter = require('gl-scatter3d')
var bunny         = require('bunny')

var scene = createScene()

var scatter = createScatter({
  gl:             scene.gl,
  position:       bunny.positions,
  size:           10,
  glyph:          '★',
  orthographic:   true,
  lineColor:      [0,0,0],
  color:          [1,0,0],
  lineWidth:      1,
  projectOpacity: 0.3
})

scene.add(scatter)

Line plot

var createScene = require('gl-plot3d').createScene
var createLine  = require('gl-line3d')

var scene = createScene()

var points = []
for(var t = 0; t< 1000; ++t) {
  var theta = Math.PI * t / 200.0
  points.push([Math.cos(theta), 0.002 * t, Math.sin(theta)])
}

var linePlot = createLine({
  gl:        scene.gl,
  position:  points,
  lineWidth: 5,
  color:     [1,0,0]
})

scene.add(linePlot)

Surfaces

var createScene       = require('gl-plot3d').createScene
var createSurfacePlot = require('gl-surface3d')
var ndarray           = require('ndarray')
var fill              = require('ndarray-fill')
var diric             = require('dirichlet')

var scene = createScene()

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)
})

var surface = createSurfacePlot({
  gl:             scene.gl,
  field:          field,
  contourProject: true
})

scene.add(surface)

Parametric surfaces

var createScene   = require('gl-plot3d').createScene
var createSurface = require('gl-surface3d')
var ndarray       = require('ndarray')

var scene = createScene()

var size = 64
var coords = [
  ndarray(new Float32Array(4*(size+1)*(size+1)), [2*size+1,2*size+1]),
  ndarray(new Float32Array(4*(size+1)*(size+1)), [2*size+1,2*size+1]),
  ndarray(new Float32Array(4*(size+1)*(size+1)), [2*size+1,2*size+1])
]
for(var i=0; i<=2*size; ++i) {
  var theta = Math.PI * (i - size) / size
  for(var j=0; j<=2*size; ++j) {
    var phi = Math.PI * (j - size) / size
    coords[0].set(i, j, (50.0 + 20.0 * Math.cos(theta)) * Math.cos(phi))
    coords[1].set(i, j, (50.0 + 20.0 * Math.cos(theta)) * Math.sin(phi))
    coords[2].set(i, j, 20.0 * Math.sin(theta))
  }
}

var surface = createSurface({
  gl:             scene.gl,
  coords:         coords,
  contourProject: true,
  showContour:    true
})

scene.add(surface)

Meshes

var createScene = require('gl-plot3d').createScene
var createMesh  = require('gl-mesh3d')
var bunny       = require('bunny')

var scene = createScene()

var mesh = createMesh({
  gl:         scene.gl,
  cells:      bunny.cells,
  positions:  bunny.positions,
  colormap:   'jet'
})

scene.add(mesh)

Wireframe meshes

var createScene = require('gl-plot3d').createScene
var createMesh  = require('gl-mesh3d')
var bunny       = require('bunny')
var sc          = require('simplicial-complex')

var scene = createScene()

var mesh = createMesh({
  gl:         scene.gl,
  cells:      sc.skeleton(bunny.cells, 1),
  positions:  bunny.positions,
  colormap:   'jet'
})

scene.add(mesh)

Install

npm i gl-plot3d

API

Scene Constructor

var scene = require('gl-plot3d').createScene(canvas[, options])

Creates a new scene object.

• canvas is an HTML canvas element into which the scene is inserted. (If not specified, a new fullscreen canvas is created and appended to the document)
• gl is a WebGL context (If not specified, a new context is created)
• glOptions is a set of options passed to the new WebGL context, gl is not specified
• camera an object storing camera options. See orbiter for more details
• axes options passed to the axes object. See gl-axes for more details
• spikes options passed to the axes spikes. See gl-spikes for more details
• clearColor a length 4 array of color values for the clear
• fovy the vertical field of view
• zNear near clip plane distance
• zFar far clip plane distance
• pickRadius the distance for mouse picking
• autoBounds a flag, if set automatically recalculates object bounds (default true)
• autoScale a flag, if set automatically scales the data set to unit length, preserving aspect ratio (default true)
• autoCenter a flag, if set translates data to the center of the coordinate system (default true)
• clipToBounds clip data points to remain within the axes bounds
• snapToData snap selections to data points
• onselect called whenever the currently highlighted data point changes
• onrender called whenever the scene is drawn

Methods

scene.addObject(obj)

Adds a new object to the scene

scene.removeObject(obj)

Removes an object from the scene

scene.redraw()

Forces an immediate redraw of the scene and pick buffer. Useful if you are s

scene.dispose()

Destroys the scene and releases all associated resources. Also destroys all attached objects.

Properties

scene.selection

Information about the currently selected object in the scene.

scene.objects

A list of all objects in the scene.

scene.canvas

The canvas element associated with the scene

scene.gl

The WebGL context associated with the scene.

scene.axes

A reference to the axes object for the scene

scene.camera

A reference to the camera object for the scene

scene.bounds

Bounds for the scene

Camera Constructor

var camera = require('gl-plot3d').createCamera(element[, options])

Please refer to 3d-view-controls for more info.

https://www.npmjs.com/package/3d-view-controls https://github.com/mikolalysenko/3d-view-controls

License

(c) 2015 Mikola Lysenko. MIT License

Development support by plot.ly

gl-plot3d's Issues

zoomMin zoomMax possibly switched

I was looking at the code here:

gl-plot3d/scene.js

Line 120 in 0ae1280

zoomMin: options.camera.zoomMax || 0.1,

and was wondering if it was meant to be

zoomMin: options.camera.zoomMin || 0.1, 

(and vice versa on the following line)

Hardware + chrome-dependent washed out colors

If I visit this page: https://rreusser.github.io/plotly-mock-viewer/#gl3d_bunny

On a computer with these specs:
OS X El Capitan
Version 10.11.6
MacBook Pro (Retina, 13-inch, Early 2015)
Processor 2.7 GHz Intel Core i5
Memory 8 GB 1867 MHz DDR3
Graphics Intel Iris Graphics 6100 1536 MB

With Chrome 62.0.3202.94

I see this:

With Chrome <= 59, I see this:

If I change scene.js#L706 to this:

gl.clearColor(0,0,0,0.0000001)

I see this:

I'm aware of this happening on other webgl software products and at least a couple computers using it. It seems like new Chrome has some sort of hardware-dependent bug.

`mouse-wheel` (and the buggy `to-px` dependency) is abandoned, please replace

mouse-wheel has not been touched in 3 to 4 years, and to-px in 7 months, and this critical module loading bug has sat untouched since January: mikolalysenko/to-px#6

@archmoj Since it looks like it was added in c7f8316 could you please review this, and change to a different library for that mouse wheel dependency?

Canvas scaling skwed

Using the following code:

var createScene = require('gl-plot3d');
var scene = createScene({'canvas': document.getElementById('mycanvas')});

I expect the canvas to maintain it's height and width defined in html. This was the case in v1.0.0. However, when I try 1.0.1, adding the scene to the canvas results in a change in placement and dimension of the canvas.

iPhone/iPad flickering

Related #11

Some frames get lost while panning in iPad/iPhone. That is not happening if context has preserveDrawingBuffer: true, therefore frame gets rendered before marked as dirty.
Similar issue was in dy/pan-zoom@2cfc238.

Aspect ratio for axes

Should have some option to preserve the aspect ratio of the axes.

Switch camera from free movement to turntable by default