MathBox.js: A 3d Math Visualization Library using WebGL


I’ve always been impressed by the work of Steven Wittens, and MathBox.js is certainly no exception.  MathBox.js is a JavaScript library for creating high quality 3d math visualizations using WebGL.  It is built on top of Three.js and tQuery, which is a jQuery-like API for Three.js.  MathBox.js provides APIs to “visualize mathematical relationships and animate them smoothly”.  MathBox has a nice jQuery-like API as well, with chained methods for defining how visualizations appear and animate, as well as the actual mathematical functions themselves.

MathBox.js starts with a library of WebGL shaders that must be loaded.  It makes use of another library called ShaderGraph.js, which takes the source code for multiple shaders, partially parses them, and combines them together into a single output shader.  This enables you to have shader components that can be reused in various configurations.

Once everything is loaded, it’s your job as a user of the library to define what you want to be displayed.  As mentioned above, you do this using a variety of library methods to define the viewport, camera, and objects that appear in a scene such as axes, grids, vectors, curves, and surfaces.  You can even enable user interaction to rotate the camera using your mouse.

There are a variety of demos available for you to check out, and more linked to from the Github page.  Make sure to view them in a WebGL compatible browser (anything but IE and Safari unless you’ve enabled it these days).  As you can see, the rendering and animation is super smooth, and if you view source, it seems incredibly simple to use given the output you get.

There is an excellent article about the inspiration and process behind MathBox including a video of a talk from the Full Frontal conference that you should check out, as well as the code on Github.  It’s exciting to see WebGL taking shape and enabling functionality on the web previously reserved for native applications.  If you ever need to render high quality 3d math visualizations on the web, MathBox.js seems to be the place to go!



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *