When you want to prepare your 3D visualizations for publication in print/PDF you typically want to convert them into a vector graphics format. Three.js is a JavaScript library for creating 3D graphics that can be easily used to create vector graphics images in SVG format from 3D visualizations. Here is an example of how to achieve this – and you can modify the example right in your browser!

The 3D Visualization

This is a graph of the greates common divisor function. See [this blog post]() and [this research paper]() for the math behind this picture. To take an SVG snapshot of this picture, click here: SVG snapshot.

The SVG Snapshot

This is a static SVG snapshot of the 3D image above. You can save it by right-clicking in the iframe and chosing “Save as…” or something similar. The resulting SVG file can then be edited in InkScape, which is extremely useful.

The Code

Here is the code for the visualization. The language is [CoffeeScript]().

# The Mathematics gcd = (a,b,depth=0) -> switch when a > b then gcd(a-b,b,depth+1) when a < b then gcd(a,b-a,depth+1) when a == b then [a, depth] else "error" canonicalize = (a,b) -> [g,d] = gcd(a,b) [a/g, b/g] # Helper Functions for Creating Three.js Objects remove_duplicates = (arr) -> output = {} output[arr[key]] = arr[key] for key in [0…arr.length] value for key, value of output gcd_geometry = (boxsize=10) -> M = boxsize S = [] for a in [1..M] for b in [1..M] S.push(canonicalize(a,b)) S = remove_duplicates(S) console.log(S) pair2line = (p,q) -> l = Math.min(M/p,M/q) [g,depth] = gcd(p,q) { from: [p,q,1], to: [l*p,l*q,l], color: depth/M } ( pair2line(p,q) for [p,q] in S ) drawline = (from,to,material) -> geometry = new THREE.Geometry() geometry.vertices[0] = new THREE.Vector3( from[0], from[1], from[2] ) geometry.vertices[1] = new THREE.Vector3( to[0], to[1], to[2] ) new THREE.Line(geometry, material, THREE.LineStrip) drawcube = (M,material) -> group = new THREE.Object3D() group.add(drawline(a,b,material)) for [a,b] in [ [[0,0,0], [M,0,0]], [[0,0,0], [0,M,0]], [[0,0,0], [0,0,M]], [[M,0,0], [M,0,M]], [[M,0,0], [M,M,0]], [[0,M,0], [0,M,M]], [[0,M,0], [M,M,0]], [[0,0,M], [M,0,M]], [[0,0,M], [0,M,M]], [[M,M,0], [M,M,M]], [[0,M,M], [M,M,M]], [[M,0,M], [M,M,M]] ] group # Setup Three.js init = (boxsize) -> renderer = new THREE.SVGRenderer() renderer.setSize( window.innerWidth, window.innerHeight ) document.body.appendChild( renderer.domElement ) alpha = 1 aspect = window.innerWidth / window.innerHeight camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 1000 ) #camera = new THREE.OrthographicCamera( -alpha*boxsize*aspect, alpha*boxsize*aspect, alpha*boxsize, -alpha*boxsize, 1, 1000 ); camera.position.z = 50 scene = new THREE.Scene() group = new THREE.Object3D() group.add(drawcube(boxsize, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 2} ))) for line in gcd_geometry(boxsize) color = new THREE.Color() color.setHSL(line.color, 0.8, 0.4) material = new THREE.LineBasicMaterial( { color: color, dashSize: 3, gapSize: 1, linewidth: 2} ) group.add(drawline(line.from,line.to,material)) scene.add(group) group.rotation.x = 3.1415 * (- 0.5 ) group.position.x = -5 group.position.y = -5 render = () -> renderer.render( scene, camera ) controls = new THREE.OrbitControls( camera ) controls.addEventListener( ‘change’, render ) ## Code for creating snapshots of SVG image snap = () -> XMLS = new XMLSerializer() svgfile = XMLS.serializeToString(renderer.domElement) return svgfile [render,snap] # Main [render,snap] = init(10) ## Export snap as we are going to call it externally window.snap = snap render()

Feel free to experiment and change the code. To reload the visualization with the updated code, click: Run!

Of course, when working on a project of your own, you will want to have the code on your own system. If you want to use this example as a template to start from, feel free to clone my GitHub repository [fbreuer/threejs-example]().

The Story

Last year, I created [a 3D-visualization of the greatest commond divisor function](). Then, a few weeks ago, I wanted to take snapshots of the visualization for inclusion in [a research paper]() I was writing. However, as the research papers was intended for print/PDF publication, I was not satisfied with rasterizing the image (i.e., “taking a screenshot”). I wanted to have a vector graphics version of the image, especially since my visualization consisted entirely of lines. Ideally, I wanted to have image in SVG format so that I could edit the result in [InkScape](), my favorite program for [creating mathematical illustrations](). Unfortunately, [Sage](), the computer algebra system in which I had prepared the visualization, does currently not support exporting 3D plots in a vector graphics format. So I had to find a different tool.

[Three.js]() came to the rescue. Three.js is a fantastic JavaScript library for creating 3D graphics in the browser. It is mature, easy to use, has a large community and a creator, Mr. Doob, who is extremely helpful. Moreover, I think scientific publishing needs to move away from the PDF as its main medium and start creating web-first publications for the web browser – very much in the spirit of, e.g., [MathJax]() and [Substance](). So getting my feet wet with three.js was certainly a worthwhile investment.

In my opinion, the three.js version turned out much nicer than the original. Just as with the original version, you can modify the code producing the visualization right in the browser. However, in contrast to the Sage-based version, there is no need for clunky Java applets to do the rendering and there is no dependency on a Sage cell server that benevolently does all the computation for you – now, everything happens right inside the reader’s browser, which makes these kind of interactive documents far easier to host. And of course, you can now take SVG snapshots of the visualization, which was the motivation for the whole exercise.

Of course this is not the end of the story. Inspired by this success, I already have big plans for a next visualization project based on research papers I am currently writing with [Dennis Eichhorn]() and [Brandt Kronholm](). I also plan to take a closer look at [MathBox](), which is a wonderful library for math visualization based on three.js.