Special Relativity with ThreeJS
Understand time dilation and length contraction without bending your mind
Einstein postulated in 1905, that time like distance is measured relative to the observer. It depends on the time and distance as measured at rest, the relative velocity of the observers, and the speed of light.
While his paper and subsequent work in laying out the complete Theory of Relativity was intensely mathematical in nature, he wrote a booklet[1] in 1915 to make the matter approachable to the general public. In that booklet, he has explained each concept with the help of a Gedanken(Thought)-Experiment.
Each experiment typically involves the conceptual study of events observed by a person on a platform and another person on a train moving past at near the speed of light. The crux of his argument (in Special Relativity) was:
- Speed of light in vacuum c, is a constant in the laws of physics. So it does not vary based on observer or light source.
- Constant c leads to the strange result that simultaneous events that occur for someone on the platform are not simultaneous when observed from the train (and vice-versa).
- Specifically, a moving clock runs slower when observed by someone at rest.
- As time is dilated, length of the train and all objects on it, are contracted when measured from the platform (and vice-versa).
- Time dilation, length contraction and in general, transformation of space and time coordinates between moving reference frames can be performed using the Lorentz transformation equations.
I have attempted to bring his thought-experiments on Special Relativity to life with the ThreeJS framework. The visualizations and detailed rationale can be viewed at https://mpdroid.github.io/gedankens/.
The example at the top of this page, shows how Lorentz transformations manifest, depending on the observer’s frame of reference.
The code for the entire site is available here. This intent of this article is to take you behind the scenes and show how the powerful ThreeJS framework can be leveraged to easily create such visualizations. Use sample.html from the repo to follow along.
Building a ThreeJS visualization is much like making a movie (presumably). We need to think about and execute the same things that a movie director would, except we can do it all from the comfort of our couch cushions.
We need some barebones infrastructure:
- A code editor (e.g. Visual Studio Code) to write HTML, CSS and JavaScript.
- The ThreeJS library: Install it in your project home using node package manager(
npm). Other methods are available as described here.
$ npm install --save three- A web server like http-server, to test your web page.
$ npm install --global http-server- Start your web-server
$ http-serverStage
Our stage is a web page, specifically a container (div tag) inside a web page. The web-page will be rendered by a browser, either on the desktop or on a mobile phone. Apply flexbox styling to this container to let it be responsive to various device dimensions and aspect ratios.
// sample.html
...
<div id="stage"></div>...// sample.css
#stage {
display: flex;
width: 100vw;
height: 100vh;
... }
Import the ThreeJS library and create a Renderer object that binds to the web page container.
// sample.js
import {WebGLRenderer} from './path/to/three.module.js'// use the element id to find the div hosting the scene
// match the stage dimensions to the container dimensionsconst container = document.getElementById('stage');
const dimensions = container.getBoundingClientRect();
const renderer = new WebGLRenderer();
renderer.setSize(dimensions.width, dimensions.height);
container.appendChild(renderer.domElement);
As the name of the renderer class suggests, ThreeJS requires the browser to support the Web GL standard. You can check if your target browser supports WebGL by navigating to https://get.webgl.org and viewing the spinning cube.
It is recommended to only import those components that you need, and not the entire library. The library is huge; your page may not even load on a mobile browser, if you import everything. So:
// bad for memory utilization
// import * as THREE from 'three'; // better
import {WebGLRenderer} from './path/to/three.module.js'
Scene
The scene is a virtual three-dimensional space that will contain the set pieces and the actors who interact with them to entertain and inform us.
// sample.js
...
const scene = new Scene();In Special Relativity, a typical Gedanken-Experiment involves a railroad, a platform, a train, one observer (Bob) standing on the platform , another observer (also Bob) on the train, and some lightning events that occur somewhere in space and time. In each experiment, we view each event from Train-Bob and Platfrorm-Bob’s perspective to understand how relativity works.
In Platform-Bob’s viewpoint, the railroad and platform are stationary. The Train and Train-Bob move past him at some velocity close to the speed of light.
Each object in our scene, whether a set piece or an actor, is constructed as a Mesh. As the name suggests, a mesh is a three-dimensional network of points. Every mesh is defined by its geometry (bones) and material (flesh). Here is an easy one:
// sample.js
...
const platform = new Mesh(
new BoxBufferGeometry(0.06, 0.02, 1),
new MeshBasicMaterial({ color: 0xAAAAAA })
);platform.position.set(0, 0.01, 0);
scene.add(platform)
...
This creates a mesh in the shape of a box of given dimensions, connects each vertex with a plane of a certain color, and places it at the center of the scene.
Geometry: ThreeJS offers numerous geometrical shapes that we can use either solo or in combination to create complex set pieces. They all belong to two kinds:
- Plain geometries (BoxGeometry, CyclinderGeometry etc.) that are easier to code.
- Buffer geometries (BoxBufferGeometry, CyclinderBufferGeometry etc.) that are memory efficient. It is probably better to use buffer geometries every time.
Material: Material connects the vertices of the geometry and brings realism to the objects. ThreeJS offers a variety of materials. The most popular seem to be MeshBasicMaterial and MeshPhongMaterial. The latter has the ability to reflect light.
What are the dimensional units for the numbers 0.06, 0.02 etc. ? Whatever you imagine it to be. All that matters is the camera “field of view” that you will use to view the scene. If you set the camera to have a very deep field of view, your objects of length 1 along the z-axis, will appear very tiny. The same object will appear huge if you choose a shallow field of view.
So let us add a camera and leverage some of the helpers that ThreeJS provides to help us test the scene.
// sample.js
...const aspect = dimensions.width / dimensions.height;
const camera = new PerspectiveCamera(55, aspect, 0.01, 5);
// place the camera near the platform at an offset
// so you can see the perspective effect
camera.position.set(.75, 0.3, 1);const axesHelper = new AxesHelper( 5 );
scene.add( axesHelper );...
renderer.render(scene, camera);
Assuming your http-server is running on port 8080, check your web page at http://localhost:8080/sample.html
The scene should look like this:
The red, green and blue lines represent the positive x, y and z axes respectively.
Now let us add a few more interesting objects, starting with the railway tracks:
// sample.js...
const railRoad = new Object3D();
railRoad.position.set(0.08, 0, 0);const points = [];
points.push(new Vector3(0, 0, 5));
points.push(new Vector3(0, 0, -5));
const trackGeometry = new BufferGeometry().setFromPoints(points);
const track1 = new Line(trackGeometry,
new LineBasicMaterial(
{ color: 0xffffff }));
track1.position.set(-0.02, 0 , 0);
railRoad.add(track1);// meshes can be deep cloned
const track2 = track1.clone();
track2.position.set(0.02, 0 , 0);
railRoad.add(track2);
- Note that we can group different meshes as children of a shell 3D object. We can then reposition and scale the objects in the group together, by just updating the top level object.
- Also note the use of
cloneto create the second track. ThreeJS typically deep clones objects, which saves time and code.
The train is a simple composite of box cars:
// sample.js...
const protoCar = new Mesh(carGeometry, carMaterial);
...const train = new Object3D;
for (let c = 0; c < 5; c++) {
const car = protoCar.clone();
...
train.add(car);
}train.position.set(0.08, 0 , -0.75);
scene.add(train);
Now let us add the Bobs, one on the train and the other on the platform. Bob’s geometry and range of motions are implemented in bob.js and too intricate to describe here effectively.
// sample.js
...
import { Bob } from './bob.js'...
const trainBob = new Bob(0.002);
trainBob.rotation.y = 2 * Math.PI;
...
train.add(trainBob);const platformBob = trainBob.clone();
platformBob.rotation.y = Math.PI;
...
platform.add(platformBob);
- Note the use of rotation attributes to rotate objects relative to their parent.
- Also note that detail-oriented assets are typically created in a tool such as Blender , exported in the GL Transmission fomat and and loaded in using the
GLTFLoader. This implementation of Bob is not typical.
Let us add some labels to the scene.
// sample.js
...
function addLabel(fnt, object3D, text) {
const shapes = fnt.generateShapes(text, 0.03);
const geometry = new ShapeBufferGeometry(shapes);
geometry.computeBoundingBox();
const xMid = - 0.5 * (geometry.boundingBox.max.x
- geometry.boundingBox.min.x) - 0.004;
geometry.translate(xMid, 0, 0);
const basic = new MeshBasicMaterial({
color: 0xFFFFFF,
side: DoubleSide
});
const label = new Mesh(geometry, basic);
label.position.y = .1;
object3D.add(label);
object3D.label = label;
}const fontloader = new FontLoader();
fontloader.load('./assets/Roboto_Regular.json', (fnt) => {
addLabel(fnt, platform, 'Platform Bob');
addLabel(fnt, train, 'Train Bob');
// initial rendering after fonts are loaded
renderer.render(scene, camera);
});
- Note that fonts have to be loaded asynchronously before they can be used in the
TextGeometry. For this reason, it is recommended to defer scene initialization until fonts are loaded.
Lights
First we need some ambient lighting. This throws some minimal light on all objects in the scene but does not cast shadows:
const ambientLight = new AmbientLight(0xFFFFFF);
scene.add(ambientLight);Next we place some directional lights that can reflect off emissive materials such as the MeshPhongMaterial. Directional lights simulate light from a distant source, such as the sun.
const dirLight = new DirectionalLight(0xffffff, 1);
dirLight.position.set(-1, 0, 1);Other light sources include PointLights that simulate light bulbs and SpotLights that shine light in one direction like a torch.
This is how the scene should look like now with ambient and directional lighting:
Roll Camera
The PerspectiveCamera is more fun than the OrthographicCamera, as it renders depth more realistically. Let us take another look at how it is initialized:
const aspect = dimensions.width / dimensions.height;
const camera = new PerspectiveCamera(55, aspect, 0.01, 5);
camera.position.set(0.1, 0.1, 1);The constructor arguments allow us to specify the angle of the field of view, wider angle leads to more warping), the aspect ratio (typically matched to the web page container dimensions), and the near and far plane of the field of view.
The camera is just another object in the scene and can be placed and moved anywhere.
Camera and object animation is controlled by an animation loop. We create a function that updates the position of the camera based on time or any number that indicates progression of time. We bind that function to the browser window refresh cycle.
Here we set the camera to roll back and forth along the x-axis based on the sine of some changing angle.
// sample.js
...
...function render() {
// DOM function that to bind function to browser refresh cycle
requestAnimationFrame(render);
const displacement = sinTheta();
camera.position.x = displacement;
camera.lookAt(platform.position);
renderer.render(scene, camera);
}render();
One interesting thing you can do with a camera, is to make it always point at a certain object or position, regardless of its motion. In the example above, we configure the camera to always point it at the platform’s center.
Another interesting thing is you can orient objects to always face the camera. Here we clone the orientation of the camera (as given by its quaternion), rotate the orientation by 180 degrees and apply it to Bob’s labels such that the labels always face the camera, regardless of the camera’s position at any instant.
// sample.js
...
function orientLabels() {
const cameraQuaternion = camera.quaternion.clone();
let q = new Quaternion(0, 1, 0, 0);
q.setFromAxisAngle(new Vector3(0, 1, 0), 2 * Math.PI);
cameraQuaternion.multiply(q);
if(!!platform.label) {
platform.label.quaternion.copy(cameraQuaternion);
} if(!!train.label) {
train.label.quaternion.copy(cameraQuaternion);
}
}
...
Action
Each experiment, requires some event to occur when the train passes the platform. So first we need the train to move back and forth in the render cycle.
// sample.jsfunction render() {
... const zDistanceFromTrainToPlatform = displacement;
train.position.z = zDistanceFromTrainToPlatform;
...
}
The event is typically some form of lightning, for which we can leverage the excellent LightningStrike component provided in the ThreeJS examples. This project bundles all lightning related functionality in lightning.js.
// sample.js
...
import {Lightning} from './lightning.js';function render() {
...
if(isCrossing()){
lightning = new Lightning(new Vector3(0.2, 0.01, 0));
scene.add(lightning);
} if(isEndOfLine()){
scene.remove(lightning);
} lightning.update(currentTime);
...
}
The sample scene in its final form should work as below:
To recap…
ThreeJS provides a powerful graphics library based on the widely supported and open source Web GL framework. It is possible to apply this framework to visualize complex phenomenon in science and engineering without the need for specialized programming knowledge or expensive desktop software.
I hope this example on Special Relativity, this write-up and the code repo will make it a little easier for someone to do so. Happy coding!
References
1] Einstein. A. (1915). Relativity: The Special and General Theory. In Gutfreund H. and Renn J. (eds) Relativity — 100th Anniversary Edition. Princeton University Press.
2] ThreeJS documentation threejs.org December 2020.
