Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »



    3D WebGL scatter plots with custom point glyphs.


    var shell = require("gl-now")({tickRate: 2})
    var camera = require("game-shell-orbit-camera")(shell)
    var createPoints = require("gl-scatter-plot")
    var createAxes = require("gl-axes")
    var createSelect = require("gl-select")
    var mat4 = require("gl-matrix").mat4
    var points, axes, select
    shell.on("gl-init", function() {
      var gl =
      //Initialize point cloud 
      var initialData = {
        position: [ [1, 0, -1], [0, 1, -1], [0, 0, 1], [1,1,-1], [1,0,1], [0,1,1] ],
        glyph: [  "", "", "", "", "", "" ],
        color: [ [0,1,0], [0,0,1], [1,1,0], [1,0,1], [0,1,1], [0,0,0] ],
        size: 12,
        orthographic: true
      for(var i=0; i<100; ++i) {
        var theta = i / 100.0 * 2.0 * Math.PI
        var x = Math.cos(theta)
        var y = Math.sin(theta)
        initialData.position.push([ x, y, 0 ])
        initialData.color.push([1, 0, 0])
      points = createPoints(gl, initialData)
      axes = createAxes(gl, {
        bounds: [[-1,-1, -1], [1,1,1]],
        tickSpacing: [.1, .1, .1]
      select = createSelect(gl, [shell.height, shell.width])
    function updatePick(cameraParams) {
      //Update size of select buffer 
      select.shape = [shell.height, shell.width]
      //Begin pass, look for points within 30 pixels of mouse 
      select.begin(shell.mouse[0], shell.mouse[1], 30)
      //Draw point cloud pick buffer 
      //End pass, retrieve selection information 
      var selected = select.end()
      //Look up point id in scatter plot, mark as highlighted 
      var target = points.pick(selected)
      if(target >= 0) {
        points.highlight(target.index, [0,0,0])
      } else {
    shell.on("gl-render", function() {
      var gl =
      //Compute camera paramters 
      var cameraParams = {
        view: camera.view(),
        projection: mat4.perspective(
      //Turn on z-buffer 
      //Update point picking data 
      //Update camera 


    npm install gl-scatter-plot


    var createScatterPlot = require("gl-scatter-plot")


    var points = createScatterPlot(gl, options)

    Constructs a scatter plot with the given parameters.

    • gl is a WebGL context
    • options is a JSON object containing configuration data for the scatter plot. For more information, see the documentation in the .update method

    Returns A new scatter plot object


    Basic rendering


    Updates the scatter plot object. The parameter options is an object with the following properties:

    • position (Required) an array of length 3 arrays encoding the position of the points in the scatter plot.
    • color A length 3 array encoding the color of the points in the scatter plot. To set colors per point, pass an array instead. Default is [0,0,0]
    • glyph The glyph of each point. This is a UTF8 string representing some shape. Per point glyphs can be specified by passing an array. The default glyph is a circle, "●". For more glyph ideas, check out the unicode character set. Some other fun suggestions: "☢", "☯", "❤", "▲", "⚑".
    • size The size of each point, or specified per-point using an array. In orthographic, this is in screen coordinates, or in perspective this is in world coordinates. Default is 0.1
    • orthographic A flag, which if set to true causes the points to be drawn without perspective scaling.
    • pickId An 8 bit value which determines the tag for all elements within the pick buffer
    • lineWidth the width of the outline (set to 0 for no outline) Default is 0
    • lineColor the color of the outline for each marker
    • font the font used for drawing the glyphs (default normal)
    • angle an angle to rotate the glyphs by in radians (default 0)
    • alignment a 2d vector to offset text drawing by (default [0,0])
    • project a flag (or array of flags) which determines which axes to project onto
    • axisBounds a pair of 3d arrays representing the bounds of the axes to project onto
    • projectOpacity the opacity of the projected point sprites (default 1.0)
    • projectScale the scaling factor of the projected point sprites (default 2.0/3.0)


    Draws the scatter plot with the given camera parameters.

    • camera is a JSON object storing the camera parameters for the point cloud. It has the following properties:

      • model the model matrix, encoded as a length 16 array
      • view the view matrix of the camera, encoded as a length 16 array
      • projection the projection matrix of the camera, encoded as a length 16 array


    Destroys the scatter plot object and releases all stored resources.



    Draws the scatter plot into a pick buffer for point selection purposes.

    • camera is a camera object, with the same properties as in draw


    Finds the index of a point selected by some mouse coordinate.

    • selected is the selection information returned by calling end on a gl-select object

    Returns An object representing the highlighted point, or null if no point is selected. The object has the following properties:

    • index which is the index of the selected point
    • position which the 3D position of the selected point in data coordinates

    points.highlight(pointId, highlightColor)

    Highlights the point with index pointId in the scatter plot by changing its color to highlightColor

    • pointId is the index of a point in the scatter plot
    • highlightColor is the color to draw the highlighted point with

    If this function is called with no arguments, then it will deselect the currently highlighted point.



    Lower and upper bounds on the point cloud


    A pair of arrays that determine lower and upper bounds on the scatter plot to draw. These are useful for clipping the scatter plot to a smaller region.


    (c) 2014 Mikola Lysenko. MIT License. Supported by


    npm i gl-scatter-plot

    Downloadslast 7 days







    last publish


    • avatar