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

varcreateScene=require('gl-plot3d').createScenevarcreateCamera=require('gl-plot3d').createCameravarcreateScatter=require('gl-scatter3d')varbunny=require('bunny')varscene=createScene()varscatter=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

varcreateScene=require('gl-plot3d').createScenevarcreateLine=require('gl-line3d')varscene=createScene()varpoints=[]for(vart=0;t<1000;++t){vartheta=Math.PI*t/200.0points.push([Math.cos(theta),0.002*t,Math.sin(theta)])}varlinePlot=createLine({gl: scene.gl,position: points,lineWidth: 5,color: [1,0,0]})scene.add(linePlot)

Surfaces

varcreateScene=require('gl-plot3d').createScenevarcreateSurfacePlot=require('gl-surface3d')varndarray=require('ndarray')varfill=require('ndarray-fill')vardiric=require('dirichlet')varscene=createScene()varfield=ndarray(newFloat32Array(512*512),[512,512])fill(field,function(x,y){return128*diric(10,10.0*(x-256)/512)*diric(10,10.0*(y-256)/512)})varsurface=createSurfacePlot({gl: scene.gl,field: field,contourProject: true})scene.add(surface)

Parametric surfaces

varcreateScene=require('gl-plot3d').createScenevarcreateSurface=require('gl-surface3d')varndarray=require('ndarray')varscene=createScene()varsize=64varcoords=[ndarray(newFloat32Array(4*(size+1)*(size+1)),[2*size+1,2*size+1]),ndarray(newFloat32Array(4*(size+1)*(size+1)),[2*size+1,2*size+1]),ndarray(newFloat32Array(4*(size+1)*(size+1)),[2*size+1,2*size+1])]for(vari=0;i<=2*size;++i){vartheta=Math.PI*(i-size)/sizefor(varj=0;j<=2*size;++j){varphi=Math.PI*(j-size)/sizecoords[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))}}varsurface=createSurface({gl: scene.gl,coords: coords,contourProject: true,showContour: true})scene.add(surface)

Meshes

varcreateScene=require('gl-plot3d').createScenevarcreateMesh=require('gl-mesh3d')varbunny=require('bunny')varscene=createScene()varmesh=createMesh({gl: scene.gl,cells: bunny.cells,positions: bunny.positions,colormap: 'jet'})scene.add(mesh)

Wireframe meshes

varcreateScene=require('gl-plot3d').createScenevarcreateMesh=require('gl-mesh3d')varbunny=require('bunny')varsc=require('simplicial-complex')varscene=createScene()varmesh=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-controlshttps://github.com/mikolalysenko/3d-view-controls

License

(c) 2015 Mikola Lysenko. MIT License

Development support by plot.ly