Dev log #0: Quantum spins and three.js

Quantum spins and Three.js

As detailed in my Interactive plot blog post, it is my intention to populate the site with visualisations that aid in the explanation of usually abstract concepts. My plan is to create a 3D model illustration of a quantum spin, which in literature, is usually portrayed in a simplified manner as a circle, with an arrow lodged in the middle.

Over the past few weeks, I have been fiddling with three.js, which is a top-tier JavaScript library for creating beautiful and interactive 3D models on websites. It is a fairly low-leveled library compared to libraries like ECharts.js in the sense that three.js allows you to virtually build anything you want, whereas ECharts.js is a lot easier to use, albeit limited in the things it can create.

After toiling away for about a week, I managed to build a working illustration of the quantum spin in three.js as shown above! (Feel free to zoom in/out or pan around!)

Since this is vaguely related to quantum computing, I included its tag in this post.

Shading

For aesthetics, I want the spin to have a cel-shading effect which in my opinion is appropriate for scientific illustration.

I came across this amazing shader in done in three.js, among other equally amazing shaders¹. As amazing as it is however, it is too grandiose for a simple object like a quantum spin illustration. Hence, I continued my search until I found official three.js example where they showcased a toon shading with outline effects on a group of spheres, which is perfect for my use case aesthetically. Upon checking the source code, I realised it is relatively simple, which is a cherry on top.

Modifying the code

The source code² of the toon shading example on threejs.org uses SphereGeometry to create a sphere within three.js. It is then obvious that I need an additional CylinderGeometry and a ConeGeometry to create the ‘arrow’ through the sphere to form a quantum spin illustration.

I also had to modify the code to use an OrthographicCamera instead of a PerspectiveCamera, since in my opinion, orthographic projections (for the layman, this basically means it’s as if a camera is focused at ∞) are much better suited for scientific illustrations because it doesn’t have the depth warping effects that perspective projections have.

There were also a bunch of other minor modifications, which you can deduce by comparing the code in my Github versus three.js’s source code².

Plans

After accumulating experience making this simple three.js geometry, my plan going forward is to employ this knowledge into writing a blog explaining quantum spin dynamics leveraging three.js. Stay tuned!