Presentation-quality WebGL math graphing
Branch: master
Clone or download
Latest commit eaeb8e1 May 1, 2016


Presentation-quality WebGL math graphing


MathBox is a library for rendering presentation-quality math diagrams in a browser using WebGL. Built on top of Three.js and ShaderGraph, it provides a clean API to visualize mathematical relationships and animate them declaratively.

MathBox is used through its JS-based DOM.

For background, see the article series on



Note: this repo uses submodules, clone it with --recursive or do a git submodule update --init after cloning.


or install via bower:

bower install mathbox

Open the included /examples to see more demos.

Docs & Help


Join us in the MathBox Google Group or #mathbox on Freenode.


Include the bundle:

<script src="./mathbox-bundle.js"></script>

Construct a MathBox instance using the provided mathBox() constructor:

var mathbox = mathBox(options);
if (mathbox.fallback) throw "WebGL not supported";

var three = mathbox.three;
// three.renderer, three.scene,

See threestrap for all available options. e.g. To spawn inside a specific element, do:

var element = document.querySelector('#my-thing');
var mathbox = mathBox({ element: element });

On initialization, it returns a MathBox API object, wrapping the MathBox . You can spawn new nodes:

<cartesian range={[[-2, 2], [-1, 1], [-1, 1]]} scale={[2, 1, 1]}>
  <axis axis={1} />
  <axis axis={2} />


var view = mathbox
    range: [[-2, 2], [-1, 1], [-1, 1]],
    scale: [2, 1, 1],
      axis: 1,
      axis: 2,

You can select objects using .select() and a CSS-like selector to get a jQuery-like selection:

  .select("cartesian > axis")

Use .print(), .inspect() and .debug() to show information about a selection.

/src tree:

  • model/ - DOM tree + CSS selector handling
  • primitives/ - The DOM node types (the legos)
  • render/ - Smart proxies for Three.js (the glue)
  • shaders/ - GLSL code
  • stage/ - API / controllers
  • util/ - It's inevitable


Uses gulp to build itself.

MathBox and ShaderGraph (c) Steven Wittens 2013-2015. MIT License.

Libraries and 3rd party shaders (c) their respective authors.