Visual improvements

src/components/collision-particles.ts

@@ -0,0 +1,71 @@
+import * as THREE from 'three';
+// Reference: https://codepen.io/Xanmia/pen/nqyMgJ
+
+export default class CollisionParticles extends THREE.Object3D {
+ private geometry = new THREE.BufferGeometry();
+ private material = new THREE.PointsMaterial({
+ color: 0xffbb11,
+ size: 0.2e6,
+ transparent: true,
+ opacity: 1
+
+ });
+ private mesh = new THREE.Points(this.geometry, this.material);
+
+ private particlesMovementSpeed = 0.5e6;
+ private particles: Float32Array;
+ /**
+ * Each particle (x, y, z) has a velocity (vx, vy, vz)
+ * so it can spread out.
+ */
+ private particleVelocities: Float32Array;
+ private PARTICLES_COUNT = 100;
+
+ /**
+ * The rate at which the particles material fades out per second.
+ */
+ private fadeOutFactor = 0.001;
+
+ constructor(
+ private collisionPosition = new THREE.Vector3(0, 0, 0)
+ ) {
+ super();
+ // Create particles and velocities arrays
+ this.particles = new Float32Array(this.PARTICLES_COUNT * 3);
+ this.particleVelocities = new Float32Array(this.PARTICLES_COUNT * 3);
+
+ // Set the position attribute in the geometry buffer to take values from the particles array
+ this.geometry.setAttribute('position', new THREE.BufferAttribute(this.particles, 3));
+ this.initializeParticles();
+ this.add(this.mesh);
+ }
+
+ private initializeParticles() {
+ for (let i = 0; i < this.PARTICLES_COUNT; i++) {
+ this.particles[i * 3 + 0] = this.collisionPosition.x;
+ this.particles[i * 3 + 1] = this.collisionPosition.y;
+ this.particles[i * 3 + 2] = this.collisionPosition.z;
+
+ this.particleVelocities[i * 3 + 0] = Math.random() * this.particlesMovementSpeed - this.particlesMovementSpeed / 2;
+ this.particleVelocities[i * 3 + 1] = Math.random() * this.particlesMovementSpeed - this.particlesMovementSpeed / 2;
+ this.particleVelocities[i * 3 + 2] = Math.random() * this.particlesMovementSpeed - this.particlesMovementSpeed / 2;
+ }
+ }
+
+ public update(dt: number) {
+ // Don't forget that it's multiplied by 3 here!
+ for (let i = 0; i < this.PARTICLES_COUNT * 3; i++) {
+ this.particles[i] += this.particleVelocities[i];
+ }
+
+ this.material.opacity -= this.fadeOutFactor * dt;
+ this.geometry.attributes.position.needsUpdate = true;
+ }
+
+ /**
+ * Returns whether the collision animation is done.
+ */
+ public isDone(): boolean {
+ return this.material.opacity <= 0;
+ }
+}

src/components/satellite.ts

@@ -4,6 +4,7 @@ import { satelliteModel } from 'models';
 
 import { BodyType, Rigid } from 'physics/body';
 import SimulatedObject from 'components/simulated-object';
+import Trail from 'components/trail';
 
 const geometry = new THREE.SphereGeometry(7e5, 4, 2);
 const material = new THREE.MeshBasicMaterial({
@@ -21,13 +22,14 @@ export default class Satellite extends SimulatedObject implements Rigid {
 
  static readonly defaultCollisionRadius = 7e5;
  public collisionRadius = Satellite.defaultCollisionRadius;
-
  /**
  * A an array of subscribers that will be notified
  * when the satellite is destroyed.
  */
  private readonly destructionListeners: DestructionListener[] = [];
 
+ public trail = new Trail(this);
+
  constructor(mass = 10) {
  super(BodyType.Dynamic, mass, 100);
  this.add(this.mesh);
@@ -55,4 +57,8 @@ export default class Satellite extends SimulatedObject implements Rigid {
  satellite.velocity.copy(velocity);
  return satellite;
  }
+
+ update() {
+ this.trail.update();
+ }
 }

src/components/trail.ts

@@ -0,0 +1,64 @@
+import * as THREE from "three";
+
+// Drawing dynamic lines: https://stackoverflow.com/questions/31399856/drawing-a-line-with-three-js-dynamically
+
+const material = new THREE.PointsMaterial({
+ color: "yellow",
+ size: 20
+});
+
+/**
+ * A trail of points that follows the position of a given object.
+ */
+export default class Trail extends THREE.Object3D {
+ private positions = new Float32Array(this.MAX_TRAIL_POINTS * 3);
+
+ private geometry = new THREE.BufferGeometry();
+ private points = new THREE.Points(this.geometry, material);
+
+ private currentDrawingIndex = 0;
+ private hasReachedMaxTrailPoints = false;
+
+ constructor(private followedObject: THREE.Object3D, private MAX_TRAIL_POINTS = 1000) {
+ super();
+ this.geometry.setAttribute('position', new THREE.BufferAttribute(this.positions, 3));
+ this.add(this.points);
+ }
+
+ public update() {
+ /**
+ * Each vertex in the trail has three entries in the poisitions array (x, y, z)
+ */
+ this.positions[this.currentDrawingIndex * 3 + 0] = this.followedObject.position.x;
+ this.positions[this.currentDrawingIndex * 3 + 1] = this.followedObject.position.y;
+ this.positions[this.currentDrawingIndex * 3 + 2] = this.followedObject.position.z;
+
+ this.currentDrawingIndex++;
+
+ /**
+ * Reset drawing index once we reach the maximum trail points limit.
+ */
+ if (this.currentDrawingIndex == this.MAX_TRAIL_POINTS) {
+ this.hasReachedMaxTrailPoints = true;
+ this.currentDrawingIndex = 0;
+ } 
+
+ /**
+ * If we reached the maximum number of vertices we can draw
+ * for a trail, then overwrite their values from the start of the buffer
+ * and stop incrementing `verticesToDraw` in `this.geometry.setDrawRange(0, verticesToDraw)`
+ * 
+ * I.e. after we reach the limit the first vertex in the buffer represents
+ * the last point in the trail, the second vertex represents (last - 1) point from
+ * tail, and so on.
+ * 
+ * Otherwise, draw one vertex by one vertex to create a smooth effect.
+ */
+ const verticesToDraw = this.hasReachedMaxTrailPoints ? 
+ this.MAX_TRAIL_POINTS :
+ this.currentDrawingIndex;
+
+ this.geometry.setDrawRange(0, verticesToDraw);
+ this.geometry.attributes.position.needsUpdate = true;
+ }
+}

src/components/world.ts

@@ -1,13 +1,15 @@
 import * as THREE from 'three';
 
-import SimulatedSpace from 'components/simulated-space';
 import Planet from 'components/planet';
+import SimulatedSpace from 'components/simulated-space';
 import Sun from 'components/sun';
 
-import { EARTH_RADIUS } from 'physics/constants';
-import GhostSatellite from 'components/ghost-satellite';
 import Satellite from 'components/satellite';
+import GhostSatellite from 'components/ghost-satellite';
+import CollisionParticles from 'components/collision-particles';
+
 import { remove as _remove } from 'lodash';
+import { EARTH_RADIUS } from 'physics/constants';
 import { skyBoxTexture } from 'textures';
 
 export type SatelliteDestructionListener = (satellite: Satellite) => void;
@@ -24,6 +26,7 @@ export default class World extends THREE.Scene {
 
  public paused = false;
  public timescale = 1;
+ private collisions: CollisionParticles[] = [];
 
  get timeResolution() {
  return this.simulatedSpace.timeResolution
@@ -55,31 +58,49 @@ export default class World extends THREE.Scene {
 
  update() {
  if (this.paused) return;
- 
+
  /**
  * The (% (1 / 30)) trick is to prevent prevent frames
  * from taking more than 1 / 30 seconds to render,
- * regardlessof the actual time needed to render them on the hardware. 
- */ 
- const dt = this.clock.getDelta() % (1 / 30) * this.timescale;
+ * regardlessof the actual time needed to render them on the hardware.
+ */
+ const dt = (this.clock.getDelta() % (1 / 30)) * this.timescale;
 
  this.simulatedSpace.run(dt);
  this.planet.update(dt);
- this.satellites.forEach((satellite) => satellite.lookAt(this.planet.position));
+ this.satellites.forEach((satellite) => {
+ satellite.lookAt(this.planet.position);
+ satellite.update();
+ });
+
+ this.collisions.forEach((collision) => {
+ collision.update(dt);
+ if (collision.isDone()) {
+ _remove(this.collisions, (obj) => obj === collision);
+ this.remove(collision);
+ }
+ });
  }
 
  addSatellite(satellite: Satellite) {
  this.satellites.push(satellite);
  this.simulatedSpace.add(satellite);
+ this.add(satellite.trail);
 
  satellite.addDestructionListener((satellite) => {
+ const collisionParticles = new CollisionParticles(satellite.position);
+ this.collisions.push(collisionParticles);
+ this.add(collisionParticles);
+
  this.removeSatellite(satellite);
- if (this.onSatelliteDestruction) this.onSatelliteDestruction(satellite);
+ if (this.onSatelliteDestruction)
+ this.onSatelliteDestruction(satellite);
  });
  }
 
  removeSatellite(satellite: Satellite) {
+ this.remove(satellite.trail);
  _remove(this.satellites, (obj) => obj === satellite);
  this.simulatedSpace.remove(satellite);
  }
-}
+}