Spaces:

hadadxyz
/

interstellar

Sleeping

Pim Schreurs commited on May 19, 2018

Commit

8194362

1 Parent(s): 33be52b

Modernize the whole codebase; improve rendering

Previously it was hacked together and using an out-of-date three.js
version. Besides a cleaner codebase this commit also includes a better
bloom (based on the UnrealBloom which can be found in three.js's
examples) and fixes some rendering issues on some mobile devices.

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.babelrc +6 -0
.editorconfig +9 -0
.eslintignore +1 -0
.eslintrc.js +16 -0
.gitignore +2 -0
accretion_disk.png → assets/accretion_disk.png +0 -0
galaxy1.png → assets/galaxy1.png +0 -0
galaxy2.png → assets/galaxy2.png +0 -0
saturn.jpg → assets/saturn.jpg +0 -0
saturnrings.png → assets/saturnrings.png +0 -0
index.html +10 -373
js/Detector.js +0 -68
js/Player.js +0 -153
js/Simulation.js +0 -345
js/controls/DeviceOrientationControls.js +0 -88
js/controls/KeyboardControls.js +0 -324
js/controls/MobileDeviceControls.js +0 -89
js/main.js +0 -13
js/postprocessing/BloomPass.js +0 -115
js/postprocessing/ConvolutionShader.js +0 -101
js/postprocessing/CopyShader.js +0 -46
js/postprocessing/EffectComposer.js +0 -135
js/postprocessing/MaskPass.js +0 -86
js/postprocessing/RenderPass.js +0 -51
js/postprocessing/ShaderPass.js +0 -58
js/three.min.js +0 -0
package-lock.json +0 -0
package.json +50 -0
src/Player.js +130 -0
src/Simulation.js +192 -0
src/SimulationRenderer.js +231 -0
src/Teleporter.js +55 -0
src/Ui.js +68 -0
src/controls/ControlsBase.js +10 -0
src/controls/ControlsManager.js +52 -0
src/controls/DeviceOrientationControls.js +64 -0
src/controls/KeyboardControls.js +333 -0
src/controls/MobileDeviceControls.js +37 -0
src/controls/TouchControls.js +80 -0
src/main.js +11 -0
src/postprocessing/CopyShader.js +14 -0
src/postprocessing/EffectComposer.js +66 -0
src/postprocessing/LuminosityHighPassShader.js +21 -0
src/postprocessing/Pass.js +30 -0
src/postprocessing/RenderPass.js +23 -0
src/postprocessing/UnrealBloomPass.js +298 -0
src/shaders/bloomComposite.glsl +24 -0
src/shaders/copy.glsl +9 -0
src/shaders/luminosityHighPass.glsl +20 -0
src/shaders/seperableBlur.glsl +26 -0

.babelrc ADDED Viewed

	@@ -0,0 +1,6 @@

+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-3"
+  ]
+}

.editorconfig ADDED Viewed

	@@ -0,0 +1,9 @@

+root = true
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.eslintignore ADDED Viewed

	@@ -0,0 +1 @@


1	+ /dist/

.eslintrc.js ADDED Viewed

	@@ -0,0 +1,16 @@

+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  env: {
+    browser: true
+  },
+  extends: [
+    'standard'
+  ],
+  rules: {
+    'brace-style': ['error', 'stroustrup'],
+    'padded-blocks': ['error', { classes: 'always' }]
+  }
+}

.gitignore ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ node_modules
2	+ dist

accretion_disk.png → assets/accretion_disk.png RENAMED Viewed

File without changes

galaxy1.png → assets/galaxy1.png RENAMED Viewed

File without changes

galaxy2.png → assets/galaxy2.png RENAMED Viewed

File without changes

saturn.jpg → assets/saturn.jpg RENAMED Viewed

File without changes

saturnrings.png → assets/saturnrings.png RENAMED Viewed

File without changes

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <title>Interstellar - Interactive wormhole &amp; black hole</title>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
   <style>
     body {
       background:#000;
@@ -19,13 +19,14 @@
     }
     #webgl-error {
-      display: block;
       text-align: center;
       position: fixed;
       left: 50%;
       top: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
     }
     #webgl-error a {
@@ -145,6 +146,11 @@
 <body>
 <div id="info">
   <h3 class="no-pointer-events">Controls:</h3>
   <div id="keyboard-controls" class="no-pointer-events">
@@ -172,7 +178,7 @@
 </div>
 <div id="version">
-  <a target="_blank" href="https://github.com/sirxemic/Interstellar">version 1.5</a>
 </div>
 <div class="ui-toggle">
@@ -182,376 +188,7 @@
 <div id="container"></div>
 <div id="loading">Loading...</div>
-<script type="x-shader/x-fragment" id="fragmentShader">
-#define ID_SATURN 0
-#define ID_SATURN_RING 1
-#define ID_GALAXY1 2
-#define ID_GALAXY2 3
-#define ID_BLACKHOLE 4
-#define ID_BLACKHOLE_DISK 5
-#define ID_PLANET 6
-varying vec4 rayDir;
-uniform vec3 lightDirection;
-uniform vec3 planetDiffuse;
-uniform vec3 planetSpecular;
-uniform vec4 wormhole;
-uniform float wormholeGravityRatio;
-uniform vec4 blackhole;
-uniform vec4 saturn;
-uniform vec4 planet;
-uniform vec4 blackholeDisk;
-uniform vec4 saturnRings;
-uniform sampler2D texSaturn;
-uniform sampler2D texSaturnRings;
-uniform sampler2D texGalaxy1;
-uniform sampler2D texGalaxy2;
-uniform sampler2D texAccretionDisk;
-uniform float worldSize;
-uniform int startGalaxy;
-const float lightSpeed = 0.2;
-const float INFINITY = 1000000.0;
-const float GALAXY_EDGE = 10000.0;
-const float EPSILON = 0.0001;
-const float r2 = 0.0625;
-const float PI = 3.14159265359;
-const float TWOPI = 6.28318530718;
-float gravityWormhole = wormhole.w * lightSpeed * lightSpeed;
-float gravityBlackhole = blackhole.w * lightSpeed * lightSpeed;
-vec3 saturnColor(vec3 pos)
-{
-  vec2 uv = vec2(
-    0.5 + atan(pos.z, pos.x) / TWOPI,
-    0.5 - asin(pos.y) / PI
-  );
-  return texture2D(texSaturn, uv).rgb;
-}
-vec3 panoramaColor(float n, vec3 pos)
-{
-  vec2 uv = vec2(
-    0.5 - atan(pos.z, pos.x) / TWOPI,
-    0.5 - asin(pos.y) / PI
-  );
-  if (n < 0.5) return texture2D(texGalaxy1, uv).rgb;
-  else return texture2D(texGalaxy2, uv).rgb;
-}
-vec3 accretionDiskColor(vec3 pos)
-{
-  pos = pos - blackhole.xyz;
-  float dist = length(pos);
-  float r1 = length(blackholeDisk.xyz);
-  float r2 = blackholeDisk.w;
-  // Important! Scale radii according to black hole
-  float v = clamp((dist - r1) / (r2 - r1), 0.0, 1.0);
-  vec3 base = cross(blackholeDisk.xyz, vec3(0.0, 0.0, 1.0));
-  float angle = acos(dot(normalize(base), normalize(pos)));
-  if (dot(cross(base, pos), blackholeDisk.xyz) < 0.0) angle = -angle;
-  float u = 0.5 - angle / TWOPI;
-  return texture2D(texAccretionDisk, vec2(u, v)).rgb;
-}
-float sphereDistance(vec3 rayPosition, vec3 rayDirection, vec4 sphere)
-{
-  vec3 v;
-  float p, d;
-  v = rayPosition - sphere.xyz;
-  p = dot(rayDirection, v);
-  d = p * p + sphere.w * sphere.w - dot(v, v);
-  return d < 0.0 ? -1.0 : -p - sqrt(d);
-}
-vec4 saturnRingColor(vec3 pos)
-{
-  pos = pos - saturn.xyz;
-  float r1 = length(saturnRings.xyz);
-  float r2 = saturnRings.w;
-  // Important! Scale radii according to saturn
-  float v = clamp((length(pos) - r1) / (r2 - r1), 0.0, 1.0);
-  vec4 color = texture2D(texSaturnRings, vec2(0.5, v));
-  float objectDistance = sphereDistance(saturn.xyz + pos, lightDirection, saturn);
-  if (objectDistance > 0.0)
-  {
-    color.rgb *= 0.01;
-  }
-  color.rgb *= color.a;
-  return vec4(color.rgb, -color.a);
-}
-float ringDistance(vec3 rayPosition, vec3 rayDirection, vec3 center, vec4 definition)
-{
-  float r1 = length(definition.xyz);
-  float r2 = definition.w;
-  vec3 normal = definition.xyz / r1;
-  float denominator = dot(rayDirection, normal);
-  float constant = -dot(center, normal);
-  float distanceToCenter;
-  if (abs(denominator) < EPSILON)
-  {
-    return -1.0;
-  }
-  else
-  {
-    float t = -(dot(rayPosition, normal) + constant) / denominator;
-    if (t < 0.0) return -1.0;
-    vec3 intersection = rayPosition + t * rayDirection;
-    distanceToCenter = length(intersection - center);
-    if (distanceToCenter >= r1 && distanceToCenter <= r2)
-    {
-      return t;
-    }
-    return -1.0;
-  }
-}
-vec3 computeShading(vec3 light, vec3 view, vec3 normal, vec3 diffuse, vec3 specular, vec3 ambient)
-{
-  float lambertian = max(dot(light, normal), 0.0);
-  vec3 reflectDir = reflect(-light, normal);
-  float specAngle = max(dot(reflectDir, view), 0.0);
-  float specularAmount = pow(specAngle, 4.0);
-  return ambient + lambertian * diffuse + specularAmount * specular;
-}
-void testDistance(int i, float distance, inout float currentDistance, inout int currentObject)
-{
-  if (distance >= EPSILON && distance < currentDistance)
-  {
-    currentDistance = distance;
-    currentObject = i;
-  }
-}
-vec3 raytrace(vec3 rayPosition, vec3 rayDirection)
-{
-  float currentDistance = INFINITY;
-  int   currentObject = -1, prevObject = -1;
-  float currentGalaxy = float(startGalaxy);
-  vec3  currentPosition;
-  vec3  normal;
-  float stepSize, rayDistance;
-  vec3 gravityVector, rayAccel;
-  float objectDistance;
-  vec4 color = vec4(0.0, 0.0, 0.0, 1.0);
-  for (int i = 0; i < 100; i++)
-  {
-    currentDistance = INFINITY;
-    // Bend the light towards the wormhole
-    gravityVector = wormhole.xyz - rayPosition;
-    rayDistance = length(gravityVector);
-    // 0.86: rate of smaller steps when approaching wormhole
-    stepSize = rayDistance - wormhole.w * 0.86;
-    rayDistance -= wormhole.w * (1.0 - wormholeGravityRatio);
-    float amount = wormholeGravityRatio / rayDistance;
-    rayAccel = normalize(gravityVector) * gravityWormhole * amount * amount;
-    if (currentGalaxy > 0.5)
-    {
-      // Bend the light towards the black hole
-      gravityVector = blackhole.xyz - rayPosition;
-      rayDistance = length(gravityVector);
-      // 0.05: rate of smaller steps when approaching blackhole
-      stepSize = min(stepSize, rayDistance - blackhole.w * 0.05);
-      // rayAccel += normalize(gravityVector) * gravityBlackhole / (rayDistance * rayDistance)
-      rayAccel += gravityVector * gravityBlackhole / (rayDistance * rayDistance * rayDistance);
-    }
-    if (length(rayAccel) > lightSpeed)
-    {
-      rayAccel = normalize(rayAccel) * lightSpeed;
-    }
-    rayDirection = normalize(rayDirection * lightSpeed + rayAccel * stepSize);
-    if (stepSize <= 0.005)
-    {
-      currentObject = -1;
-      break;
-    }
-    if (currentGalaxy < 0.5)
-    {
-      objectDistance = sphereDistance(rayPosition, rayDirection, saturn);
-      testDistance(ID_SATURN, objectDistance, currentDistance, currentObject);
-      objectDistance = ringDistance(rayPosition, rayDirection, saturn.xyz, saturnRings);
-      testDistance(ID_SATURN_RING, objectDistance, currentDistance, currentObject);
-      testDistance(ID_GALAXY1, GALAXY_EDGE, currentDistance, currentObject);
-    }
-    else
-    {
-      objectDistance = sphereDistance(rayPosition, rayDirection, planet);
-      testDistance(ID_PLANET, objectDistance, currentDistance, currentObject);
-      // Test against a bit smaller sphere due to precision errors
-      objectDistance = sphereDistance(rayPosition, rayDirection, vec4(blackhole.xyz, blackhole.w * 0.93));
-      testDistance(ID_BLACKHOLE, objectDistance, currentDistance, currentObject);
-      objectDistance = ringDistance(rayPosition, rayDirection, blackhole.xyz, blackholeDisk);
-      testDistance(ID_BLACKHOLE_DISK, objectDistance, currentDistance, currentObject);
-      testDistance(ID_GALAXY2, GALAXY_EDGE, currentDistance, currentObject);
-    }
-    rayDistance = lightSpeed * stepSize;
-    // Check if we hit any object, and if so, stop integrating
-    if (currentObject != -1 && currentDistance <= rayDistance)
-    {
-      // But if it's something transparent, get its color, and continue
-      if (currentObject == ID_BLACKHOLE_DISK)
-      {
-        currentPosition = rayPosition + rayDirection * currentDistance;
-        color.rgb += accretionDiskColor(currentPosition).rgb * color.a;
-        currentObject = -1;
-        prevObject = ID_BLACKHOLE_DISK;
-      }
-      else if (currentObject == ID_SATURN_RING)
-      {
-        currentPosition = rayPosition + rayDirection * currentDistance;
-        if (prevObject != ID_SATURN_RING)
-        {
-          color += saturnRingColor(currentPosition);
-        }
-        currentObject = -1;
-        prevObject = ID_SATURN_RING;
-        // Ensure we don't overstep and go through Saturn
-        rayDistance = min(rayDistance, 0.9 * (length(saturnRings.xyz) - saturn.w));
-      }
-      else
-      {
-        break;
-      }
-    }
-    float d = sphereDistance(rayPosition, rayDirection, wormhole);
-    if (d > 0.0 && d < rayDistance)
-    { // Ray goes through wormhole
-      currentGalaxy = 1.0 - currentGalaxy;
-      vec3 intersection = rayPosition + rayDirection * d;
-      gravityVector = normalize(intersection - wormhole.xyz);
-      rayPosition = 2.0 * wormhole.xyz - intersection;
-      rayDirection = -reflect(rayDirection, gravityVector);
-      rayPosition += rayDirection * d;
-    }
-    else
-    {
-      rayPosition += rayDirection * rayDistance;
-    }
-  }
-  currentPosition = rayPosition + rayDirection * currentDistance;
-  if (currentObject == ID_GALAXY1 || currentObject == ID_GALAXY2)
-  {
-    color.rgb += panoramaColor(currentGalaxy, rayDirection) * color.a;
-  }
-  else if (currentObject == ID_SATURN)
-  {
-    normal = (currentPosition - saturn.xyz) / saturn.w;
-    vec3 diffuse = saturnColor(normal);
-    vec3 specular = vec3(0.0);
-    vec3 ambient = diffuse * 0.02;
-    float objectDistance = ringDistance(currentPosition, lightDirection, saturn.xyz, saturnRings);
-    if (objectDistance > 0.0)
-    {
-      diffuse *= 1.0 + saturnRingColor(currentPosition + lightDirection * objectDistance).a;
-    }
-    color.rgb += computeShading(lightDirection, -rayDirection, normal, diffuse, specular, ambient) * color.a;
-  }
-  else if (currentObject == ID_PLANET)
-  {
-    normal = (currentPosition - planet.xyz) / planet.w;
-    // light direction for black hole-orbiting planet is towards the blackhole
-    vec3 lightDirection2 = normalize(blackhole.xyz - planet.xyz);
-    vec3 diffuse = planetDiffuse;
-    vec3 specular = planetSpecular;
-    vec3 ambient = vec3(0.0);
-    color.rgb += computeShading(lightDirection2, -rayDirection, normal, diffuse, specular, ambient) * color.a;
-  }
-  return color.rgb;
-}
-void main()
-{
-  gl_FragColor = vec4(raytrace(cameraPosition, normalize(rayDir.xyz)), 1.0);
-}
-</script>
-<script type="x-shader/x-vertex" id="vertexShader">
-uniform mat4 rayMatrix;
-varying vec4 rayDir;
-void main() {
-  rayDir = rayMatrix * vec4(position.xy, 1.0, 0.0);
-  gl_Position = vec4(position.xy, 0.0, 1.0);
-}
-</script>
-<script src="js/three.min.js"></script>
-<script src="js/postprocessing/ConvolutionShader.js"></script>
-<script src="js/postprocessing/CopyShader.js"></script>
-<script src="js/postprocessing/EffectComposer.js"></script>
-<script src="js/postprocessing/ShaderPass.js"></script>
-<script src="js/postprocessing/MaskPass.js"></script>
-<script src="js/postprocessing/RenderPass.js"></script>
-<script src="js/postprocessing/BloomPass.js"></script>
-<script src="js/controls/DeviceOrientationControls.js"></script>
-<script src="js/controls/KeyboardControls.js"></script>
-<script src="js/controls/MobileDeviceControls.js"></script>
-<script src="js/Detector.js"></script>
-<script src="js/Player.js"></script>
-<script src="js/Simulation.js"></script>
-<script src="js/main.js"></script>
 </body>
 </html>

 <head>
   <title>Interstellar - Interactive wormhole &amp; black hole</title>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
   <style>
     body {
       background:#000;
     }
     #webgl-error {
+      display: none;
       text-align: center;
       position: fixed;
       left: 50%;
       top: 50%;
       -webkit-transform: translate(-50%, -50%);
       transform: translate(-50%, -50%);
+      z-index: 1;
     }
     #webgl-error a {
 <body>
+<div id="webgl-error">
+  Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a><br>
+  Find out how to get it <a href="http://get.webgl.org/">here</a>
+</div>
 <div id="info">
   <h3 class="no-pointer-events">Controls:</h3>
   <div id="keyboard-controls" class="no-pointer-events">
 </div>
 <div id="version">
+  <a target="_blank" href="https://github.com/sirxemic/Interstellar">version 2.0.0</a>
 </div>
 <div class="ui-toggle">
 <div id="container"></div>
 <div id="loading">Loading...</div>
+<script src="dist/build.js"></script>
 </body>
 </html>

js/Detector.js DELETED Viewed

@@ -1,68 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- * @author mr.doob / http://mrdoob.com/
- */
-var Detector = {
-	canvas: !! window.CanvasRenderingContext2D,
-	webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) ); } catch( e ) { return false; } } )(),
-	workers: !! window.Worker,
-	fileapi: window.File && window.FileReader && window.FileList && window.Blob,
-	getWebGLErrorMessage: function () {
-		var element = document.createElement( 'div' );
-		element.id = 'webgl-error-message';
-		/*
-		element.style.fontFamily = 'monospace';
-		element.style.fontSize = '13px';
-		element.style.fontWeight = 'normal';
-		element.style.textAlign = 'center';
-		element.style.background = '#fff';
-		element.style.color = '#000';
-		element.style.padding = '1.5em';
-		element.style.width = '400px';
-		element.style.margin = '5em auto 0';
-		*/
-		if ( ! this.webgl ) {
-			element.innerHTML = window.WebGLRenderingContext ? [
-				'Your graphics card does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br />',
-				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
-			].join( '\n' ) : [
-				'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation">WebGL</a>.<br/>',
-				'Find out how to get it <a href="http://get.webgl.org/">here</a>.'
-			].join( '\n' );
-		}
-		return element;
-	},
-	addGetWebGLMessage: function ( parameters ) {
-		var parent, id, element;
-		parameters = parameters || {};
-		parent = parameters.parent !== undefined ? parameters.parent : document.body;
-		id = parameters.id !== undefined ? parameters.id : 'oldie';
-		element = Detector.getWebGLErrorMessage();
-		element.id = id;
-		parent.appendChild( element );
-	}
-};
-// browserify support
-if ( typeof module === 'object' ) {
-	module.exports = Detector;
-}

js/Player.js DELETED Viewed

@@ -1,153 +0,0 @@
-function Player()
-{
-  this.object = new THREE.Object3D;
-  this.eyes = new THREE.OrthographicCamera(-1, 1, -1, 1, 0, 1);
-  this.velocity = new THREE.Vector3(0, 0, 0);
-  this.eyeAngularVelocity = new THREE.Vector3;
-  this.object.add(this.eyes);
-  this.galaxy = 0;
-  this.controls = [];
-  this.teleportTargets = [];
-}
-Player.prototype = {
-  addTeleportTarget: function(target) {
-    this.teleportTargets.push(target)
-  },
-  lookAt: function(position)
-  {
-    // this.object.lookAt makes it look in the exact opposite direction, for some reason
-    var lookAtMatrix = new THREE.Matrix4();
-    lookAtMatrix.lookAt(this.object.position, position, this.object.up);
-    this.object.quaternion.setFromRotationMatrix(lookAtMatrix);
-    this.object.quaternion.multiply(this.eyes.quaternion.clone().inverse());
-  },
-  handleInput: function()
-  {
-    for (var i = 0; i < this.controls.length; i++)
-    {
-      this.controls[i].update();
-    }
-  },
-  step: (function() {
-    var prevPosition   = new THREE.Vector3(),
-        newVelocity    = new THREE.Vector3(),
-        acceleration   = new THREE.Vector3(),
-        gravityVector  = new THREE.Vector3(),
-        direction      = new THREE.Vector3(),
-        intersection   = new THREE.Vector3(),
-        axis           = new THREE.Vector3(),
-        rotation       = new THREE.Quaternion(),
-        temp           = new THREE.Vector3(),
-        ray            = new THREE.Ray();
-    return function(delta) {
-      var wormholePosition = Simulation.wormholePositionSize,
-          wormholeSize = Simulation.wormholePositionSize.w,
-          wormholeGravityRatio = Simulation.wormholeGravityRatio,
-          wormholeSphere = new THREE.Sphere(wormholePosition, wormholeSize);
-      if (this.velocity.lengthSq() > 0.00001)
-      {
-        prevPosition.copy(this.object.position);
-        // 1. Compute wormhole curvature/gravity.
-        gravityVector.subVectors(wormholePosition, prevPosition);
-        var rayDistance = gravityVector.length() - wormholeSize * (1 - wormholeGravityRatio);
-        var amount = wormholeGravityRatio / rayDistance;
-        acceleration.copy(gravityVector.normalize()).multiplyScalar(wormholeSize * this.velocity.lengthSq() * amount * amount);
-        // Apply curvature to velocity
-        newVelocity.copy(this.velocity).add(acceleration.multiplyScalar(delta));
-        // Adjust new velocity (keep magnitude of old velocity)
-        newVelocity.normalize().multiplyScalar(this.velocity.length());
-        // Update the player accordingly
-        this.object.position.addVectors(prevPosition, newVelocity.multiplyScalar(delta));
-        // ...and orientation
-        rotation.setFromUnitVectors(this.velocity.normalize(), newVelocity.normalize());
-        this.object.quaternion.multiplyQuaternions(rotation, this.object.quaternion);
-        this.velocity.copy(newVelocity);
-        // 2. Check if we're going through the wormhole
-        direction.copy(this.velocity).normalize();
-        ray.set(prevPosition, direction);
-        var distanceTravelledSq = direction.subVectors(this.object.position, prevPosition).lengthSq();
-        var at = ray.intersectSphere(wormholeSphere, intersection);
-        if (at && at.distanceToSquared(prevPosition) <= distanceTravelledSq)
-        {
-          // Rotate 180 degrees around axis pointing at exit point
-          axis.subVectors(intersection, wormholePosition).normalize();
-          rotation.setFromAxisAngle(axis, Math.PI);
-          this.object.quaternion.multiplyQuaternions(rotation, this.object.quaternion);
-          this.velocity.reflect(axis).multiplyScalar(-1);
-          // Set new position a tiny bit outside mirrored intersection point
-          this.object.position.copy(wormholePosition).add(temp.subVectors(wormholePosition, intersection).multiplyScalar(1.0001));
-          this.galaxy = 1 - this.galaxy;
-        }
-      }
-      rotation.set( this.eyeAngularVelocity.x * delta, this.eyeAngularVelocity.y * delta, this.eyeAngularVelocity.z * delta, 1 ).normalize();
-      this.eyes.quaternion.multiply( rotation );
-    };
-  })(),
-  update: function(delta)
-  {
-    this.handleInput();
-    this.step(delta);
-    // Object isn't actually part of a rendered scene, so we need to call this manually
-    this.object.updateMatrixWorld(true);
-  },
-  getClosestTeleportIndex: function() {
-    var minDistance = Infinity;
-    var result = null;
-    for (var i = 0; i < this.teleportTargets.length; i++) {
-      var distance;
-      if (this.teleportTargets[i].galaxy != this.galaxy) {
-        distance =
-          this.object.position.distanceTo(Simulation.wormholePositionSize) +
-          this.teleportTargets[i].position.distanceTo(Simulation.wormholePositionSize);
-      } else {
-        distance = this.object.position.distanceTo(this.teleportTargets[i].position);
-      }
-      if (distance < minDistance) {
-        minDistance = distance;
-        result = i;
-      }
-    }
-    return result;
-  },
-  teleport: function() {
-    var nextIndex = (this.getClosestTeleportIndex() + 1) % this.teleportTargets.length;
-    var teleportTarget = this.teleportTargets[nextIndex];
-    this.object.position.copy(teleportTarget.position);
-    this.lookAt(teleportTarget.lookAt);
-    this.galaxy = teleportTarget.galaxy;
-  }
-};

js/Simulation.js DELETED Viewed

@@ -1,345 +0,0 @@
-var Simulation = {
-  init: function init()
-  {
-    this.initScene();
-    this.initGL();
-    this.initDom();
-    this.initPlayer();
-  },
-  initGL: function()
-  {
-    var self = this;
-    // Init THREE.js stuff
-    this.renderer = new THREE.WebGLRenderer();
-    this.renderer.setSize(window.innerWidth, window.innerHeight);
-    this.renderer.sortObjects = false;
-    this.renderer.autoClear = false;
-    this.quadScene = new THREE.Scene();
-    this.quadCam = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
-    this.quadScene.add(new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), new THREE.ShaderMaterial({
-      uniforms: this.uniforms,
-      vertexShader: document.getElementById("vertexShader").textContent,
-      fragmentShader: document.getElementById("fragmentShader").textContent,
-    })));
-    this.renderPasses = [
-      new THREE.RenderPass(this.quadScene, this.quadCam),
-      new THREE.BloomPass(1.25),
-      new THREE.ShaderPass(THREE.CopyShader)
-    ];
-    this.renderPasses[this.renderPasses.length - 1].renderToScreen = true;
-    this.composer = new THREE.EffectComposer(this.renderer);
-    this.renderPasses.forEach(function(pass) {
-      self.composer.addPass(pass);
-    });
-    this.rayMatrix = new THREE.Matrix4();
-  },
-  initDom: function()
-  {
-    var self = this;
-    // Init some DOM stuff
-    this.container = document.getElementById("container");
-    this.container.appendChild(this.renderer.domElement);
-    var uiToggle = document.querySelector(".ui-toggle input");
-    var onUIToggle = function() {
-      if (uiToggle.checked) {
-        document.body.classList.add("no-ui");
-      }
-      else {
-        document.body.classList.remove("no-ui");
-      }
-      uiToggle.blur();
-    };
-    uiToggle.addEventListener("change", onUIToggle);
-    onUIToggle();
-    var updateResolution = function()
-    {
-      var size = parseInt(document.querySelector("[name=resolution]:checked").value),
-          width = Math.floor(window.innerWidth / size),
-          height = Math.floor(window.innerHeight / size);
-      self.composer.setSize(width, height);
-    };
-    this.zoom = 1;
-    var onWindowResize = function()
-    {
-      self.renderer.setSize(window.innerWidth, window.innerHeight);
-      self.updateView();
-      updateResolution();
-    };
-    var onWheel = function(e) {
-      e.preventDefault();
-      var delta = e.delta || (e.deltaX + e.deltaY + e.deltaZ);
-      if (delta < 0)
-      {
-        self.zoom *= 1.06;
-      }
-      else
-      {
-        self.zoom /= 1.06;
-      }
-      self.updateView();
-    };
-    window.addEventListener("resize", onWindowResize, false);
-    onWindowResize();
-    document.querySelector("#resolution").addEventListener("change", function(event) {
-      updateResolution();
-      event.target.blur();
-    }, false);
-    window.addEventListener("wheel", onWheel, false);
-  },
-  initScene: function()
-  {
-    this.wormholePositionSize = new THREE.Vector4(10, 0.0, -32, 0.8);
-    this.blackholePositionSize = new THREE.Vector4(0.0, -250.0, 250.0, 12.5);
-    this.saturnPositionSize = new THREE.Vector4(-14, 5, -40, 8.0);
-    this.planetPositionSize = new THREE.Vector4(7.6, 62, -50, 0.08);
-    this.planetPositionSize.x += this.blackholePositionSize.x;
-    this.planetPositionSize.y += this.blackholePositionSize.y;
-    this.planetPositionSize.z += this.blackholePositionSize.z;
-    this.teleportTargets = [
-      { position: new THREE.Vector3(10, -307, 454), lookAt: this.blackholePositionSize, galaxy: 1 },
-      { position: new THREE.Vector3(7.2, -188, 199.6), lookAt: this.planetPositionSize, galaxy: 1 },
-      { position: new THREE.Vector3(12.4, 3.3, -35.1), lookAt: this.wormholePositionSize, galaxy: 1 },
-      { position: new THREE.Vector3(9.8, -4.6, -3.1), lookAt: this.wormholePositionSize, galaxy: 0 }
-    ];
-    // Ring definition - xyz is normal going through ring. Its magnitude determines inner radius.
-    // w component determines outer radius
-    this.blackholeDisk = new THREE.Vector4(-12, 12, 6, 150.0);
-    this.saturnRings = new THREE.Vector4(0, 9.22, 0, 17.1);
-    var numTexturesLoaded = 0;
-    var textureCount = 0;
-    var updateProgress = function() {
-      numTexturesLoaded++;
-      if (numTexturesLoaded == textureCount)
-      {
-        var el = document.getElementById("loading");
-        el.parentElement.removeChild(el);
-        Simulation.inited = true;
-      }
-    };
-    this.wormholeGravityRatio = 0.25;
-    this.uniforms = {
-      "wormhole": { type: "v4", value: this.wormholePositionSize },
-      "wormholeGravityRatio": { type: "f", value: this.wormholeGravityRatio },
-      // 1 = like a black hole but with the mouth at the event horizon (big gravitational well)
-      // 0 = completely flat space (no gravity at all)
-      "blackhole": { type: "v4", value: this.blackholePositionSize },
-      "saturn":  { type: "v4", value: this.saturnPositionSize },
-      "planet":  { type: "v4", value: this.planetPositionSize },
-      "blackholeDisk": { type: "v4", value: this.blackholeDisk },
-      "saturnRings": { type: "v4", value: this.saturnRings },
-      "planetDiffuse": { type: "v3", value: new THREE.Vector3(0.58,0.85,0.96) },
-      "planetSpecular": { type: "v3", value: new THREE.Vector3(0.1,0.1,0.1) },
-      "texSaturn": { type: "t", value: THREE.ImageUtils.loadTexture("saturn.jpg", null, updateProgress) },
-      "texSaturnRings": { type: "t", value: THREE.ImageUtils.loadTexture("saturnrings.png", null, updateProgress) },
-      "texGalaxy1":  { type: "t", value: THREE.ImageUtils.loadTexture("galaxy1.png", null, updateProgress) },
-      "texGalaxy2":  { type: "t", value: THREE.ImageUtils.loadTexture("galaxy2.png", null, updateProgress) },
-      "texAccretionDisk": { type: "t", value: THREE.ImageUtils.loadTexture("accretion_disk.png", null, updateProgress) },
-      "lightDirection": { type: "v3", value: (new THREE.Vector3(-4, 2, 3)).normalize() },
-      "rayMatrix": { type: "m4", value: new THREE.Matrix4() },
-      "startGalaxy": { type: "i", value: 0 },
-      "cameraPosition": { type: "v3" },
-    };
-    for (var uniform in this.uniforms)
-    {
-      if (this.uniforms[uniform].type == "t") textureCount++;
-    }
-    this.uniforms.texAccretionDisk.value.wrapS = THREE.RepeatWrapping
-    // Some entities to calculate with
-    this.wormholeSphere = new THREE.Sphere(this.wormholePositionSize, this.wormholePositionSize.w);
-  },
-  updateView: function()
-  {
-    var vx, vy;
-    if (window.innerWidth > window.innerHeight)
-    {
-      vx = 1;
-      vy = window.innerHeight / window.innerWidth;
-    }
-    else
-    {
-      vx = window.innerWidth / window.innerHeight;
-      vy = 1;
-    }
-    this.rayMatrix.set(vx, 0, 0, 0,
-                       0, vy, 0, 0,
-                       0, 0, -this.zoom, 0,
-                       0, 0, 0, 1);
-    if (this.mobileDeviceControls)
-    {
-      this.mobileDeviceControls.fovy = 2 * Math.atan(vy / this.zoom);
-    }
-    THREE.BloomPass.blurX.set( 1 / (512 * vx), 0.0 );
-    THREE.BloomPass.blurY.set( 0.0, 1 / (512 * vy) );
-  },
-  initPlayer: function()
-  {
-    var self = this;
-    this.player = new Player;
-    this.player.lookAt(this.wormholePositionSize);
-    for (var i = 0; i < this.teleportTargets.length; i++) {
-      this.player.addTeleportTarget(this.teleportTargets[i]);
-    }
-    // Add keyboard controls to the player
-    this.keyboardControls = new KeyboardControls(this.player, this.container);
-    this.keyboardControls.movementSpeed = 1;
-    this.keyboardControls.rollSpeed = Math.PI / 3;
-    this.keyboardControls.autoForward = false;
-    this.keyboardControls.dragToLook = false;
-    this.keyboardControls.connect();
-    this.player.controls.push(this.keyboardControls);
-    // Add mobile device controls (touch + accelerometer) to the player
-    this.mobileDeviceControls = new MobileDeviceControls(this.player, this.container);
-    this.mobileDeviceControls.movementSpeed = 1.3;
-    this.player.controls.push(this.mobileDeviceControls);
-    // Pretty sure we don't need mobile device controls when a keyboard event is triggered.
-    var keypress = function(event) {
-      if (event.charCode == 32)
-      {
-        self.keyboardControls.dragToLook = !self.keyboardControls.dragToLook;
-      }
-      else if (event.keyCode == 27)
-      {
-        self.keyboardControls.dragToLook = true;
-      }
-      if (self.keyboardControls.dragToLook)
-      {
-        self.keyboardControls.moveState.yawLeft = 0;
-        self.keyboardControls.moveState.pitchDown = 0;
-      }
-      self.mobileDeviceControls.disconnect();
-      document.body.classList.remove("mobile-device");
-    };
-    window.addEventListener("keypress", keypress, false);
-    var deviceListener = function(event) {
-      if (event.alpha === null) return;
-      self.mobileDeviceControls.connect();
-      // The player will probably not be looking with their device in the right direction, so fix that
-      requestAnimationFrame(function () {
-        self.player.object.quaternion.multiply(self.player.eyes.quaternion.clone().inverse())
-      })
-      window.removeEventListener("deviceorientation", deviceListener, false);
-      document.body.classList.add("mobile-device");
-    };
-    window.addEventListener("deviceorientation", deviceListener, false);
-    this.updateView();
-  },
-  step: function()
-  {
-    if (this.inited)
-    {
-      this.update();
-    }
-    this.render();
-  },
-  start: function()
-  {
-    var self = this;
-    this.clock = new THREE.Clock();
-    function animate()
-    {
-      requestAnimationFrame(animate);
-      self.step();
-    }
-    animate();
-  },
-  update: function()
-  {
-    var delta = this.clock.getDelta();
-    // TODO: figure out why delta can become so small
-    if (delta < 0.001)
-    {
-      delta = 0.001;
-    }
-    this.player.update(delta);
-  },
-  render: function()
-  {
-    this.uniforms.rayMatrix.value.makeRotationFromQuaternion(this.player.eyes.getWorldQuaternion());
-    this.uniforms.rayMatrix.value.multiply(this.rayMatrix);
-    this.uniforms.cameraPosition.value = this.player.eyes.getWorldPosition();
-    this.uniforms.startGalaxy.value = this.player.galaxy;
-    this.renderer.clear();
-    this.composer.render();
-  },
-};

js/controls/DeviceOrientationControls.js DELETED Viewed

@@ -1,88 +0,0 @@
-/**
- * @author richt / http://richt.me
- * @author WestLangley / http://github.com/WestLangley
- *
- * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)
- */
-THREE.DeviceOrientationControls = function ( object ) {
-	var scope = this;
-	this.object = object;
-	this.object.rotation.reorder( "YXZ" );
-	this.enabled = true;
-	var onDeviceOrientationChangeEvent = function ( event ) {
-		scope.deviceOrientation = event;
-	};
-	var onScreenOrientationChangeEvent = function () {
-		scope.screenOrientation = window.orientation || 0;
-	};
-	// The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
-	var setObjectQuaternion = function () {
-		var zee = new THREE.Vector3( 0, 0, 1 );
-		var euler = new THREE.Euler();
-		var q0 = new THREE.Quaternion();
-		var q1 = new THREE.Quaternion( - Math.sqrt( 0.5 ), 0, 0, Math.sqrt( 0.5 ) ); // - PI/2 around the x-axis
-		return function ( quaternion, alpha, beta, gamma, orient ) {
-			euler.set( beta, alpha, - gamma, 'YXZ' );                       // 'ZXY' for the device, but 'YXZ' for us
-			quaternion.setFromEuler( euler );                               // orient the device
-			quaternion.multiply( q1 );                                      // camera looks out the back of the device, not the top
-			quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) );    // adjust for screen orientation
-		}
-	}();
-	this.connect = function() {
-		onScreenOrientationChangeEvent(); // run once on load
-		window.addEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );
-		window.addEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );
-		scope.enabled = true;
-	};
-	this.disconnect = function() {
-		window.removeEventListener( 'orientationchange', onScreenOrientationChangeEvent, false );
-		window.removeEventListener( 'deviceorientation', onDeviceOrientationChangeEvent, false );
-		scope.enabled = false;
-	};
-	this.update = function () {
-		if ( scope.enabled === false || !scope.deviceOrientation || scope.deviceOrientation.alpha === null ) return;
-		var alpha  = scope.deviceOrientation.alpha ? THREE.Math.degToRad( scope.deviceOrientation.alpha ) : 0; // Z
-		var beta   = scope.deviceOrientation.beta  ? THREE.Math.degToRad( scope.deviceOrientation.beta  ) : 0; // X'
-		var gamma  = scope.deviceOrientation.gamma ? THREE.Math.degToRad( scope.deviceOrientation.gamma ) : 0; // Y''
-		var orient = scope.screenOrientation       ? THREE.Math.degToRad( scope.screenOrientation       ) : 0; // O
-		setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
-	};
-};

js/controls/KeyboardControls.js DELETED Viewed

@@ -1,324 +0,0 @@
-function KeyboardControls(player, element)
-{
-  this.player = player;
-  this.teleport = this.player.teleport.bind(this.player);
-  element.setAttribute('tabindex', -1);
-  this.movementSpeedMultiplier = 1;
-  this.movementSpeed = 1.0;
-  this.rollSpeed = 0.005;
-  this.dragToLook = false;
-  this.autoForward = false;
-  // Internals
-  this.tmpQuaternion = new THREE.Quaternion();
-  this.mouseStatus = 0;
-  this.moveState = {
-    up:        0,
-    down:      0,
-    left:      0,
-    right:     0,
-    forward:   0,
-    back:      0,
-    pitchUp:   0,
-    pitchDown: 0,
-    yawLeft:   0,
-    yawRight:  0,
-    rollLeft:  0,
-    rollRight: 0,
-  };
-  this.moveVector = new THREE.Vector3( 0, 0, 0 );
-  this.rotationVector = new THREE.Vector3( 0, 0, 0 );
-  var self = this;
-  function keydown(event)
-  {
-    if (event.altKey)
-    {
-      return;
-    }
-    switch (event.keyCode)
-    {
-      case 16: // Shift
-        self.movementSpeedMultiplier = 10;
-        break;
-      case 87: // W
-        self.moveState.forward = 1;
-        break;
-      case 83: // S
-        self.moveState.back = 1;
-        break;
-      case 65: // A
-        self.moveState.left = 1;
-        break;
-      case 68: // D
-        self.moveState.right = 1;
-        break;
-      case 82: // R
-        self.moveState.up = 1;
-        break;
-      case 70: // F
-        self.moveState.down = 1;
-        break;
-      case 38: // Up
-        self.moveState.pitchUp = 1;
-        break;
-      case 40: // Down
-        self.moveState.pitchDown = 1;
-        break;
-      case 37: // Left
-        self.moveState.yawLeft = 1;
-        break;
-      case 39: // Right
-        self.moveState.yawRight = 1;
-        break;
-      case 81: // Q
-        self.moveState.rollLeft = 1;
-        break;
-      case 69: // E
-        self.moveState.rollRight = 1;
-        break;
-      case 84: // T
-        self.teleport();
-        break;
-    }
-    updateMovementVector();
-    updateRotationVector();
-  };
-  function keyup(event)
-  {
-    switch (event.keyCode)
-    {
-      case 16: // Shift
-        self.movementSpeedMultiplier = 1;
-        break;
-      case 87: // W
-        self.moveState.forward = 0;
-        break;
-      case 83: // S
-        self.moveState.back = 0;
-        break;
-      case 65: // A
-        self.moveState.left = 0;
-        break;
-      case 68: // D
-        self.moveState.right = 0;
-        break;
-      case 82: // R
-        self.moveState.up = 0;
-        break;
-      case 70: // F
-        self.moveState.down = 0;
-        break;
-      case 38: // Up
-        self.moveState.pitchUp = 0;
-        break;
-      case 40: // Down
-        self.moveState.pitchDown = 0;
-        break;
-      case 37: // Left
-        self.moveState.yawLeft = 0;
-        break;
-      case 39: // Right
-        self.moveState.yawRight = 0;
-        break;
-      case 81: // Q
-        self.moveState.rollLeft = 0;
-        break;
-      case 69: // E
-        self.moveState.rollRight = 0;
-        break;
-    }
-    updateMovementVector();
-    updateRotationVector();
-  }
-  function mousedown(event)
-  {
-    if ( element !== document )
-    {
-      element.focus();
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    if (self.dragToLook)
-    {
-      self.mouseStatus++;
-    }
-    else
-    {
-      switch (event.button)
-      {
-        case 0:
-          self.moveState.forward = 1;
-          break;
-        case 2:
-          self.moveState.back = 1;
-          break;
-      }
-      updateMovementVector();
-    }
-  }
-  function mousemove(event)
-  {
-    if (self.dragToLook && self.mouseStatus == 0)
-    {
-      return;
-    }
-    var container = getContainerDimensions();
-    var halfWidth  = container.size[0] / 2;
-    var halfHeight = container.size[1] / 2;
-    self.moveState.yawLeft   = - ((event.pageX - container.offset[0]) - halfWidth ) / halfWidth;
-    self.moveState.pitchDown =   ((event.pageY - container.offset[1]) - halfHeight) / halfHeight;
-    updateRotationVector();
-  }
-  function mouseup(event)
-  {
-    event.preventDefault();
-    event.stopPropagation();
-    if ( self.dragToLook )
-    {
-      self.mouseStatus --;
-      self.moveState.yawLeft = self.moveState.pitchDown = 0;
-    }
-    else
-    {
-      switch (event.button)
-      {
-        case 0:
-          self.moveState.forward = 0;
-          break;
-        case 2:
-          self.moveState.back = 0;
-          break;
-      }
-      updateMovementVector();
-    }
-    updateRotationVector();
-  };
-  function updateMovementVector()
-  {
-    var forward = (self.moveState.forward || (self.autoForward && !self.moveState.back)) ? 1 : 0;
-    self.moveVector.x = ( -self.moveState.left    + self.moveState.right );
-    self.moveVector.y = ( -self.moveState.down    + self.moveState.up );
-    self.moveVector.z = ( -forward + self.moveState.back );
-  };
-  function updateRotationVector()
-  {
-    self.rotationVector.x = ( -self.moveState.pitchDown + self.moveState.pitchUp );
-    self.rotationVector.y = ( -self.moveState.yawRight  + self.moveState.yawLeft );
-    self.rotationVector.z = ( -self.moveState.rollRight + self.moveState.rollLeft );
-  };
-  function getContainerDimensions()
-  {
-    if (element != document)
-    {
-      return {
-        size: [element.offsetWidth, element.offsetHeight],
-        offset: [element.offsetLeft, element.offsetTop]
-      };
-    }
-    else
-    {
-      return {
-        size: [window.innerWidth, window.innerHeight],
-        offset: [0, 0]
-      };
-    }
-  }
-  function contextmenu(event)
-  {
-    event.preventDefault();
-  }
-  this.connect = function() {
-    updateMovementVector();
-    updateRotationVector();
-    element.addEventListener('contextmenu', contextmenu, false);
-    element.addEventListener('mousemove', mousemove, false);
-    element.addEventListener('mousedown', mousedown, false);
-    element.addEventListener('mouseup',   mouseup, false);
-    window.addEventListener('keydown', keydown, false);
-    window.addEventListener('keyup', keyup, false);
-    this.enabled = true;
-  };
-  this.disconnect = function() {
-    element.removeEventListener('contextmenu', contextmenu, false);
-    element.removeEventListener('mousemove', mousemove, false);
-    element.removeEventListener('mousedown', mousedown, false);
-    element.removeEventListener('mouseup',   mouseup, false);
-    window.removeEventListener('keydown', keydown, false);
-    window.removeEventListener('keyup', keyup, false);
-    this.enabled = false;
-  };
-  this.update = function()
-  {
-    var moveMult = this.movementSpeed * this.movementSpeedMultiplier;
-    var rotMult = this.rollSpeed;
-    this.player.velocity.copy(this.moveVector).multiplyScalar(moveMult).applyQuaternion(this.player.eyes.getWorldQuaternion());
-    this.player.eyeAngularVelocity.copy(this.rotationVector).multiplyScalar(rotMult);
-  };
-}

js/controls/MobileDeviceControls.js DELETED Viewed

@@ -1,89 +0,0 @@
-function MobileDeviceControls(player, element)
-{
-  this.deviceOrientationControls = new THREE.DeviceOrientationControls(player.eyes);
-  this.player = player;
-  this.velocity = new THREE.Vector3(0, 0, 0);
-  var self = this;
-  function teleport(event)
-  {
-    event.preventDefault();
-    player.teleport();
-  }
-  function onTouchEvent(event)
-  {
-    event.preventDefault();
-    var touches = event.touches;
-    if (touches.length == 0)
-    {
-      self.velocity.set(0, 0, 0);
-      return;
-    }
-    var avgX = 0, avgY = 0;
-    for (var i = 0; i < touches.length; i++)
-    {
-      avgX += touches[i].pageX;
-      avgY += touches[i].pageY;
-    }
-    avgX /= touches.length;
-    avgY /= touches.length;
-    var vy = Math.tan(0.5 * self.fovy);
-    var vx = window.innerWidth / window.innerHeight * vy;
-    self.velocity.set(
-      vx * (avgX * 2.0 / window.innerWidth - 1.0),
-      -vy * (avgY * 2.0 / window.innerHeight - 1.0),
-      -1
-    ).normalize();
-    self.velocity.multiplyScalar(touches.length > 1 ? 10 : 1);
-  }
-  this.connect = function() {
-    this.deviceOrientationControls.connect();
-    element.addEventListener( 'touchstart', onTouchEvent, false );
-    element.addEventListener( 'touchmove', onTouchEvent, false );
-    element.addEventListener( 'touchend', onTouchEvent, false );
-    document.querySelector( '#teleport' ).addEventListener(
-      'touchstart',
-      teleport,
-      false
-    );
-    this.enabled = true;
-  };
-  this.disconnect = function() {
-    this.deviceOrientationControls.disconnect();
-    element.removeEventListener( 'touchstart', onTouchEvent, false );
-    element.removeEventListener( 'touchmove', onTouchEvent, false );
-    element.removeEventListener( 'touchend', onTouchEvent, false );
-    document.querySelector( '#teleport' ).removeEventListener(
-      'touchstart',
-      teleport,
-      false
-    );
-    this.enabled = false;
-  };
-  this.update = function () {
-    if (this.enabled === false) return;
-    this.player.velocity.copy(this.velocity).applyQuaternion(this.player.eyes.getWorldQuaternion());
-    this.deviceOrientationControls.update();
-  };
-}

js/main.js DELETED Viewed

@@ -1,13 +0,0 @@
-(function() {
-  if (!Detector.webgl)
-  {
-    document.body.classList.add("no-ui");
-    Detector.addGetWebGLMessage({id: "webgl-error"});
-    return;
-  }
-  Simulation.init();
-  Simulation.start();
-})();

js/postprocessing/BloomPass.js DELETED Viewed

@@ -1,115 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {
-	strength = ( strength !== undefined ) ? strength : 1;
-	kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25;
-	sigma = ( sigma !== undefined ) ? sigma : 4.0;
-	resolution = ( resolution !== undefined ) ? resolution : 256;
-	// render targets
-	var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
-	this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars );
-	this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars );
-	// copy material
-	if ( THREE.CopyShader === undefined )
-		console.error( "THREE.BloomPass relies on THREE.CopyShader" );
-	var copyShader = THREE.CopyShader;
-	this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );
-	this.copyUniforms[ "opacity" ].value = strength;
-	this.materialCopy = new THREE.ShaderMaterial( {
-		uniforms: this.copyUniforms,
-		vertexShader: copyShader.vertexShader,
-		fragmentShader: copyShader.fragmentShader,
-		blending: THREE.AdditiveBlending,
-		transparent: true
-	} );
-	// convolution material
-	if ( THREE.ConvolutionShader === undefined )
-		console.error( "THREE.BloomPass relies on THREE.ConvolutionShader" );
-	var convolutionShader = THREE.ConvolutionShader;
-	this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );
-	this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurx;
-	this.convolutionUniforms[ "cKernel" ].value = THREE.ConvolutionShader.buildKernel( sigma );
-	this.materialConvolution = new THREE.ShaderMaterial( {
-		uniforms: this.convolutionUniforms,
-		vertexShader:  convolutionShader.vertexShader,
-		fragmentShader: convolutionShader.fragmentShader,
-		defines: {
-			"KERNEL_SIZE_FLOAT": kernelSize.toFixed( 1 ),
-			"KERNEL_SIZE_INT": kernelSize.toFixed( 0 )
-		}
-	} );
-	this.enabled = true;
-	this.needsSwap = false;
-	this.clear = false;
-	this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
-	this.scene  = new THREE.Scene();
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.scene.add( this.quad );
-};
-THREE.BloomPass.prototype = {
-	render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {
-		if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );
-		// Render quad with blured scene into texture (convolution pass 1)
-		this.quad.material = this.materialConvolution;
-		this.convolutionUniforms[ "tDiffuse" ].value = readBuffer;
-		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
-		renderer.render( this.scene, this.camera, this.renderTargetX, true );
-		// Render quad with blured scene into texture (convolution pass 2)
-		this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX;
-		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY;
-		renderer.render( this.scene, this.camera, this.renderTargetY, true );
-		// Render original scene with superimposed blur to texture
-		this.quad.material = this.materialCopy;
-		this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY;
-		if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
-		renderer.render( this.scene, this.camera, readBuffer, this.clear );
-	}
-};
-THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
-THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );

js/postprocessing/ConvolutionShader.js DELETED Viewed

@@ -1,101 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- *
- * Convolution shader
- * ported from o3d sample to WebGL / GLSL
- * http://o3d.googlecode.com/svn/trunk/samples/convolution.html
- */
-THREE.ConvolutionShader = {
-	defines: {
-		"KERNEL_SIZE_FLOAT": "25.0",
-		"KERNEL_SIZE_INT": "25",
-	},
-	uniforms: {
-		"tDiffuse":        { type: "t", value: null },
-		"uImageIncrement": { type: "v2", value: new THREE.Vector2( 0.001953125, 0.0 ) },
-		"cKernel":         { type: "fv1", value: [] }
-	},
-	vertexShader: [
-		"uniform vec2 uImageIncrement;",
-		"varying vec2 vUv;",
-		"void main() {",
-			"vUv = uv - ( ( KERNEL_SIZE_FLOAT - 1.0 ) / 2.0 ) * uImageIncrement;",
-			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-		"}"
-	].join("\n"),
-	fragmentShader: [
-		"uniform float cKernel[ KERNEL_SIZE_INT ];",
-		"uniform sampler2D tDiffuse;",
-		"uniform vec2 uImageIncrement;",
-		"varying vec2 vUv;",
-		"void main() {",
-			"vec2 imageCoord = vUv;",
-			"vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",
-			"for( int i = 0; i < KERNEL_SIZE_INT; i ++ ) {",
-				"sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
-				"imageCoord += uImageIncrement;",
-			"}",
-			"gl_FragColor = sum;",
-		"}"
-	].join("\n"),
-	buildKernel: function ( sigma ) {
-		// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.
-		function gauss( x, sigma ) {
-			return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) );
-		}
-		var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;
-		if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
-		halfWidth = ( kernelSize - 1 ) * 0.5;
-		values = new Array( kernelSize );
-		sum = 0.0;
-		for ( i = 0; i < kernelSize; ++i ) {
-			values[ i ] = gauss( i - halfWidth, sigma );
-			sum += values[ i ];
-		}
-		// normalize the kernel
-		for ( i = 0; i < kernelSize; ++i ) values[ i ] /= sum;
-		return values;
-	}
-};

js/postprocessing/CopyShader.js DELETED Viewed

@@ -1,46 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- *
- * Full-screen textured quad shader
- */
-THREE.CopyShader = {
-	uniforms: {
-		"tDiffuse": { type: "t", value: null },
-		"opacity":  { type: "f", value: 1.0 }
-	},
-	vertexShader: [
-		"varying vec2 vUv;",
-		"void main() {",
-			"vUv = uv;",
-			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
-		"}"
-	].join("\n"),
-	fragmentShader: [
-		"uniform float opacity;",
-		"uniform sampler2D tDiffuse;",
-		"varying vec2 vUv;",
-		"void main() {",
-			"vec4 texel = texture2D( tDiffuse, vUv );",
-			"gl_FragColor = opacity * texel;",
-		"}"
-	].join("\n")
-};

js/postprocessing/EffectComposer.js DELETED Viewed

@@ -1,135 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-THREE.EffectComposer = function ( renderer, renderTarget ) {
-	this.renderer = renderer;
-	if ( renderTarget === undefined ) {
-		var width = window.innerWidth || 1;
-		var height = window.innerHeight || 1;
-		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
-		renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
-	}
-	this.renderTarget1 = renderTarget;
-	this.renderTarget2 = renderTarget.clone();
-	this.writeBuffer = this.renderTarget1;
-	this.readBuffer = this.renderTarget2;
-	this.passes = [];
-	if ( THREE.CopyShader === undefined )
-		console.error( "THREE.EffectComposer relies on THREE.CopyShader" );
-	this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
-};
-THREE.EffectComposer.prototype = {
-	swapBuffers: function() {
-		var tmp = this.readBuffer;
-		this.readBuffer = this.writeBuffer;
-		this.writeBuffer = tmp;
-	},
-	addPass: function ( pass ) {
-		this.passes.push( pass );
-	},
-	insertPass: function ( pass, index ) {
-		this.passes.splice( index, 0, pass );
-	},
-	render: function ( delta ) {
-		this.writeBuffer = this.renderTarget1;
-		this.readBuffer = this.renderTarget2;
-		var maskActive = false;
-		var pass, i, il = this.passes.length;
-		for ( i = 0; i < il; i ++ ) {
-			pass = this.passes[ i ];
-			if ( !pass.enabled ) continue;
-			pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
-			if ( pass.needsSwap ) {
-				if ( maskActive ) {
-					var context = this.renderer.context;
-					context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
-					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
-					context.stencilFunc( context.EQUAL, 1, 0xffffffff );
-				}
-				this.swapBuffers();
-			}
-			if ( pass instanceof THREE.MaskPass ) {
-				maskActive = true;
-			} else if ( pass instanceof THREE.ClearMaskPass ) {
-				maskActive = false;
-			}
-		}
-	},
-	reset: function ( renderTarget ) {
-		if ( renderTarget === undefined ) {
-			renderTarget = this.renderTarget1.clone();
-			renderTarget.width = window.innerWidth;
-			renderTarget.height = window.innerHeight;
-		}
-		this.renderTarget1 = renderTarget;
-		this.renderTarget2 = renderTarget.clone();
-		this.writeBuffer = this.renderTarget1;
-		this.readBuffer = this.renderTarget2;
-	},
-	setSize: function ( width, height ) {
-		var renderTarget = this.renderTarget1.clone();
-		renderTarget.width = width;
-		renderTarget.height = height;
-		this.reset( renderTarget );
-	}
-};

js/postprocessing/MaskPass.js DELETED Viewed

@@ -1,86 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-THREE.MaskPass = function ( scene, camera ) {
-	this.scene = scene;
-	this.camera = camera;
-	this.enabled = true;
-	this.clear = true;
-	this.needsSwap = false;
-	this.inverse = false;
-};
-THREE.MaskPass.prototype = {
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
-		var context = renderer.context;
-		// don't update color or depth
-		context.colorMask( false, false, false, false );
-		context.depthMask( false );
-		// set up stencil
-		var writeValue, clearValue;
-		if ( this.inverse ) {
-			writeValue = 0;
-			clearValue = 1;
-		} else {
-			writeValue = 1;
-			clearValue = 0;
-		}
-		context.enable( context.STENCIL_TEST );
-		context.stencilOp( context.REPLACE, context.REPLACE, context.REPLACE );
-		context.stencilFunc( context.ALWAYS, writeValue, 0xffffffff );
-		context.clearStencil( clearValue );
-		// draw into the stencil buffer
-		renderer.render( this.scene, this.camera, readBuffer, this.clear );
-		renderer.render( this.scene, this.camera, writeBuffer, this.clear );
-		// re-enable update of color and depth
-		context.colorMask( true, true, true, true );
-		context.depthMask( true );
-		// only render where stencil is set to 1
-		context.stencilFunc( context.EQUAL, 1, 0xffffffff );  // draw if == 1
-		context.stencilOp( context.KEEP, context.KEEP, context.KEEP );
-	}
-};
-THREE.ClearMaskPass = function () {
-	this.enabled = true;
-};
-THREE.ClearMaskPass.prototype = {
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
-		var context = renderer.context;
-		context.disable( context.STENCIL_TEST );
-	}
-};

js/postprocessing/RenderPass.js DELETED Viewed

@@ -1,51 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {
-	this.scene = scene;
-	this.camera = camera;
-	this.overrideMaterial = overrideMaterial;
-	this.clearColor = clearColor;
-	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;
-	this.oldClearColor = new THREE.Color();
-	this.oldClearAlpha = 1;
-	this.enabled = true;
-	this.clear = true;
-	this.needsSwap = false;
-};
-THREE.RenderPass.prototype = {
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
-		this.scene.overrideMaterial = this.overrideMaterial;
-		if ( this.clearColor ) {
-			this.oldClearColor.copy( renderer.getClearColor() );
-			this.oldClearAlpha = renderer.getClearAlpha();
-			renderer.setClearColor( this.clearColor, this.clearAlpha );
-		}
-		renderer.render( this.scene, this.camera, readBuffer, this.clear );
-		if ( this.clearColor ) {
-			renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );
-		}
-		this.scene.overrideMaterial = null;
-	}
-};

js/postprocessing/ShaderPass.js DELETED Viewed

@@ -1,58 +0,0 @@
-/**
- * @author alteredq / http://alteredqualia.com/
- */
-THREE.ShaderPass = function ( shader, textureID ) {
-	this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";
-	this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-	this.material = new THREE.ShaderMaterial( {
-		uniforms: this.uniforms,
-		vertexShader: shader.vertexShader,
-		fragmentShader: shader.fragmentShader
-	} );
-	this.renderToScreen = false;
-	this.enabled = true;
-	this.needsSwap = true;
-	this.clear = false;
-	this.camera = new THREE.OrthographicCamera( -1, 1, 1, -1, 0, 1 );
-	this.scene  = new THREE.Scene();
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
-	this.scene.add( this.quad );
-};
-THREE.ShaderPass.prototype = {
-	render: function ( renderer, writeBuffer, readBuffer, delta ) {
-		if ( this.uniforms[ this.textureID ] ) {
-			this.uniforms[ this.textureID ].value = readBuffer;
-		}
-		this.quad.material = this.material;
-		if ( this.renderToScreen ) {
-			renderer.render( this.scene, this.camera );
-		} else {
-			renderer.render( this.scene, this.camera, writeBuffer, this.clear );
-		}
-	}
-};

js/three.min.js DELETED Viewed

The diff for this file is too large to render. See raw diff

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,50 @@

+{
+  "name": "interstellar-demo",
+  "version": "1.0.0",
+  "description": "Interstellar wormhole & blackhole simulator",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sirxemic/Interstellar.git"
+  },
+  "keywords": [
+    "interstellar",
+    "demo",
+    "black hole",
+    "wormhole"
+  ],
+  "author": "Pim Schreurs",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/sirxemic/Interstellar/issues"
+  },
+  "homepage": "https://github.com/sirxemic/Interstellar#readme",
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-stage-3": "^6.24.1",
+    "cross-env": "^5.1.5",
+    "eslint": "^4.19.1",
+    "eslint-config-standard": "^11.0.0",
+    "eslint-loader": "^2.0.0",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-node": "^6.0.1",
+    "eslint-plugin-promise": "^3.7.0",
+    "eslint-plugin-standard": "^3.1.0",
+    "raw-loader": "^0.5.1",
+    "three": "^0.92.0",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3",
+    "webpack-dev-server": "^3.1.4"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

src/Player.js ADDED Viewed

	@@ -0,0 +1,130 @@

+import {
+  Object3D,
+  PerspectiveCamera,
+  Vector3,
+  Quaternion,
+  Matrix4,
+  Ray,
+  Sphere
+} from 'three'
+import Simulation from './Simulation'
+// For improved performance, we initialize certain variables only once instead of in the step function
+const __prevPosition = new Vector3()
+const __newVelocity = new Vector3()
+const __acceleration = new Vector3()
+const __gravityVector = new Vector3()
+const __direction = new Vector3()
+const __intersection = new Vector3()
+const __axis = new Vector3()
+const __rotation = new Quaternion()
+const __temp = new Vector3()
+const __ray = new Ray()
+export default class Player {
+  constructor () {
+    this.object = new Object3D()
+    this.eyes = new PerspectiveCamera()
+    this.object.add(this.eyes)
+    this.velocity = new Vector3()
+    this.eyeAngularVelocity = new Vector3()
+    this.galaxy = 0
+    this.controllers = []
+  }
+  lookAt (position) {
+    // this.object.lookAt makes it look in the exact opposite __direction, for some reason
+    const lookAtMatrix = new Matrix4()
+    lookAtMatrix.lookAt(this.object.position, position, this.object.up)
+    this.object.quaternion.setFromRotationMatrix(lookAtMatrix)
+    this.object.quaternion.multiply(this.eyes.quaternion.clone().inverse())
+  }
+  addController (controller) {
+    this.controllers.push(controller)
+  }
+  handleInput () {
+    for (let i = 0; i < this.controllers.length; i++) {
+      this.controllers[i].update()
+    }
+  }
+  step (delta) {
+    const wormhole = Simulation.config.wormhole
+    const wormholeSphere = new Sphere(wormhole.position, wormhole.radius)
+    if (this.velocity.lengthSq() > 0.00001) {
+      __prevPosition.copy(this.object.position)
+      // 1. Compute wormhole curvature/gravity.
+      __gravityVector.subVectors(wormhole.position, __prevPosition)
+      const rayDistance = __gravityVector.length() - wormhole.radius * (1 - wormhole.gravityRatio)
+      const amount = wormhole.gravityRatio / rayDistance
+      __acceleration.copy(__gravityVector.normalize()).multiplyScalar(wormhole.radius * this.velocity.lengthSq() * amount * amount)
+      // Apply curvature to velocity
+      __newVelocity.copy(this.velocity).add(__acceleration.multiplyScalar(delta))
+      // Adjust new velocity (keep magnitude of old velocity)
+      __newVelocity.normalize().multiplyScalar(this.velocity.length())
+      // Update the player's position and orientation accordingly
+      this.object.position.addVectors(__prevPosition, __newVelocity.multiplyScalar(delta))
+      this.object.quaternion.multiplyQuaternions(
+        __rotation.setFromUnitVectors(this.velocity.normalize(), __newVelocity.normalize()),
+        this.object.quaternion
+      )
+      this.velocity.copy(__newVelocity)
+      // 2. Check if we're going through the wormhole
+      __direction.copy(this.velocity).normalize()
+      __ray.set(__prevPosition, __direction)
+      const distanceTravelledSq = __direction.subVectors(this.object.position, __prevPosition).lengthSq()
+      const at = __ray.intersectSphere(wormholeSphere, __intersection)
+      if (at && at.distanceToSquared(__prevPosition) <= distanceTravelledSq) {
+        // Rotate 180 degrees around __axis pointing at exit point
+        __axis.subVectors(__intersection, wormhole.position).normalize()
+        __rotation.setFromAxisAngle(__axis, Math.PI)
+        this.object.quaternion.multiplyQuaternions(__rotation, this.object.quaternion)
+        this.velocity.reflect(__axis).multiplyScalar(-1)
+        // Set new position a tiny bit outside mirrored __intersection point
+        this.object.position
+          .copy(wormhole.position)
+          .add(
+            __temp.subVectors(wormhole.position, __intersection)
+              .multiplyScalar(1.0001)
+          )
+        this.galaxy = 1 - this.galaxy
+      }
+    }
+    __rotation.set(
+      this.eyeAngularVelocity.x * delta,
+      this.eyeAngularVelocity.y * delta,
+      this.eyeAngularVelocity.z * delta,
+      1
+    ).normalize()
+    this.eyes.quaternion.multiply(__rotation)
+  }
+  update (delta) {
+    this.handleInput()
+    this.step(delta)
+    // Object isn't actually part of a rendered scene, so we need to call this manually
+    this.object.updateMatrixWorld(true)
+  }
+}

src/Simulation.js ADDED Viewed

	@@ -0,0 +1,192 @@

+import {
+  Vector3,
+  Vector4,
+  Clock
+} from 'three'
+import Ui from './Ui'
+import Player from './Player'
+import KeyboardControls from './controls/KeyboardControls'
+import MobileDeviceControls from './controls/MobileDeviceControls'
+import ControlsManager from './controls/ControlsManager'
+import SimulationRenderer from './SimulationRenderer'
+import Teleporter from './Teleporter'
+class Simulation {
+  init () {
+    this.config = {
+      wormhole: {
+        position: new Vector3(10, 0.0, -32),
+        radius: 0.8,
+        gravityRatio: 0.25
+      },
+      blackhole: {
+        position: new Vector3(0.0, -250.0, 250.0),
+        radius: 12.5,
+        // Ring definition - xyz is normal going through ring. Its magnitude determines inner radius.
+        // w component determines outer radius
+        disk: new Vector4(-12, 12, 6, 150.0),
+        diskTexture: 'assets/accretion_disk.png'
+      },
+      saturn: {
+        position: new Vector3(-14, 5, -40),
+        radius: 8.0,
+        // Ring definition - xyz is normal going through ring. Its magnitude determines inner radius.
+        // w component determines outer radius
+        rings: new Vector4(0, 9.22, 0, 17.1),
+        texture: 'assets/saturn.jpg',
+        ringsTexture: 'assets/saturnrings.png',
+        lightDirection: (new Vector3(-4, 2, 3)).normalize()
+      },
+      planet: {
+        position: new Vector3(7.6, -188.0, 200),
+        radius: 0.08,
+        diffuse: new Vector3(0.58, 0.85, 0.96),
+        specular: new Vector3(0.1, 0.1, 0.1)
+      },
+      galaxy1: { texture: 'assets/galaxy1.png' },
+      galaxy2: { texture: 'assets/galaxy2.png' }
+    }
+    this.teleportTargets = [
+      { position: new Vector3(10, -307, 454), lookAt: this.config.blackhole.position, galaxy: 1 },
+      { position: new Vector3(7.2, -188, 199.6), lookAt: this.config.planet.position, galaxy: 1 },
+      { position: new Vector3(12.4, 3.3, -35.1), lookAt: this.config.wormhole.position, galaxy: 1 },
+      { position: new Vector3(9.8, -4.6, -3.1), lookAt: this.config.wormhole.position, galaxy: 0 }
+    ]
+    this.initPlayer()
+    this.initTeleporter()
+    this.initRenderer()
+    this.initControls()
+  }
+  initRenderer () {
+    this.renderer = new SimulationRenderer(this.config, this.player)
+    this.renderer.onTexturesLoaded = () => {
+      Ui.removeLoadingScreen()
+      this.inited = true
+    }
+    this.container = document.getElementById('container')
+    this.container.appendChild(this.renderer.domElement)
+    Ui.onPixelSizeChange = pixelSize => {
+      this.renderer.setPixelSize(pixelSize)
+    }
+    window.addEventListener(
+      'resize', e => {
+        this.renderer.setSize(window.innerWidth, window.innerHeight)
+      },
+      false
+    )
+    this.renderer.setSize(window.innerWidth, window.innerHeight, Ui.getSelectedPixelSize())
+    window.addEventListener('wheel', e => {
+      e.preventDefault()
+      const delta = e.delta || (e.deltaX + e.deltaY + e.deltaZ)
+      if (delta < 0) {
+        this.renderer.setZoom(this.renderer.zoom * 1.06)
+      }
+      else {
+        this.renderer.setZoom(this.renderer.zoom / 1.06)
+      }
+    }, false)
+  }
+  initPlayer () {
+    this.player = new Player()
+    this.player.lookAt(this.config.wormhole.position)
+  }
+  initControls () {
+    // Add keyboard controls to the player
+    this.keyboardControls = new KeyboardControls(this.player, this.container)
+    this.keyboardControls.movementSpeed = 1
+    this.keyboardControls.rollSpeed = Math.PI / 3
+    this.keyboardControls.autoForward = false
+    this.keyboardControls.dragToLook = false
+    // Add mobile device controls (touch + accelerometer) to the player
+    this.mobileDeviceControls = new MobileDeviceControls(this.player, this.container)
+    this.controlsManager = new ControlsManager(this.keyboardControls, this.mobileDeviceControls)
+    this.controlsManager.onChange = device => {
+      if (device !== 'mobile') {
+        return
+      }
+      // The player will probably not be looking with their device in the right direction, so fix that
+      requestAnimationFrame(() => {
+        this.player.object.quaternion.multiply(this.player.eyes.quaternion.clone().inverse())
+      })
+    }
+    this.player.addController(this.keyboardControls)
+    this.player.addController(this.mobileDeviceControls)
+  }
+  initTeleporter () {
+    this.teleporter = new Teleporter(this.player)
+    this.teleportTargets.forEach(target => {
+      this.teleporter.addTarget(target)
+    })
+    Ui.onTeleportClick = () => {
+      this.teleporter.teleportNext()
+    }
+    document.addEventListener('keydown', e => {
+      if (e.keyCode === 84) {
+        e.preventDefault()
+        this.teleporter.teleportNext()
+      }
+    })
+  }
+  step () {
+    if (this.inited) {
+      this.update()
+    }
+    this.render()
+  }
+  start () {
+    this.clock = new Clock()
+    const animate = () => {
+      requestAnimationFrame(animate)
+      this.step()
+    }
+    animate()
+  }
+  update () {
+    const delta = Math.max(0.001, this.clock.getDelta())
+    this.player.update(delta)
+  }
+  render () {
+    this.renderer.render()
+  }
+}
+export default new Simulation()

src/SimulationRenderer.js ADDED Viewed

	@@ -0,0 +1,231 @@

+import vertexShader from './shaders/wormholeVertex.glsl'
+import fragmentShader from './shaders/wormholeFragment.glsl'
+import {
+  Math as MathExtra,
+  Scene,
+  OrthographicCamera,
+  Mesh,
+  PlaneBufferGeometry,
+  ShaderMaterial,
+  Vector3,
+  Vector4,
+  Quaternion,
+  Matrix4,
+  RepeatWrapping,
+  LinearFilter,
+  WebGLRenderer,
+  TextureLoader
+} from 'three'
+import EffectComposer from './postprocessing/EffectComposer'
+import RenderPass from './postprocessing/RenderPass'
+import BloomPass from './postprocessing/UnrealBloomPass'
+const textureLoader = new TextureLoader()
+export default class SimulationRenderer {
+  constructor (config, player) {
+    this.loadConfig(config)
+    this.player = player
+    this.zoom = 1
+    this.pixelSize = 4
+    this.width = window.innerWidth
+    this.height = window.innerHeight
+    this.renderer = new WebGLRenderer()
+    this.renderer.setSize(this.width, this.height)
+    this.renderer.sortObjects = false
+    this.renderer.autoClear = false
+    this.domElement = this.renderer.domElement
+    const material = new ShaderMaterial(
+      {
+        uniforms: this.uniforms,
+        vertexShader,
+        fragmentShader,
+        extensions: {
+          shaderTextureLOD: true
+        }
+      }
+    )
+    this.scene = new Scene()
+    this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    this.quad = new Mesh(new PlaneBufferGeometry(2, 2), material)
+    this.quad.frustumCulled = false
+    this.scene.add(this.quad)
+    this.renderPasses = [
+      new RenderPass(this.scene, this.camera),
+      new BloomPass(1024, 2.7, 0.7, 0.8)
+    ]
+    this.renderPasses[this.renderPasses.length - 1].renderToScreen = true
+    this.composer = new EffectComposer(this.renderer)
+    this.renderPasses.forEach(pass => {
+      this.composer.addPass(pass)
+    })
+  }
+  loadConfig (config) {
+    this.wormholePositionSize = new Vector4(
+      config.wormhole.position.x,
+      config.wormhole.position.y,
+      config.wormhole.position.z,
+      config.wormhole.radius
+    )
+    this.blackholePositionSize = new Vector4(
+      config.blackhole.position.x,
+      config.blackhole.position.y,
+      config.blackhole.position.z,
+      config.blackhole.radius
+    )
+    this.saturnPositionSize = new Vector4(
+      config.saturn.position.x,
+      config.saturn.position.y,
+      config.saturn.position.z,
+      config.saturn.radius
+    )
+    this.planetPositionSize = new Vector4(
+      config.planet.position.x,
+      config.planet.position.y,
+      config.planet.position.z,
+      config.planet.radius
+    )
+    this.blackholeDisk = config.blackhole.disk
+    this.saturnRings = config.saturn.rings
+    this.wormholeGravityRatio = config.wormhole.gravityRatio
+    this.uniforms = {
+      wormhole: { type: 'v4', value: this.wormholePositionSize },
+      wormholeGravityRatio: { type: 'f', value: this.wormholeGravityRatio },
+      blackhole: { type: 'v4', value: this.blackholePositionSize },
+      saturn: { type: 'v4', value: this.saturnPositionSize },
+      planet: { type: 'v4', value: this.planetPositionSize },
+      blackholeDisk: { type: 'v4', value: this.blackholeDisk },
+      saturnRings: { type: 'v4', value: this.saturnRings },
+      planetDiffuse: { type: 'v3', value: config.planet.diffuse },
+      planetSpecular: { type: 'v3', value: config.planet.specular },
+      texSaturn: { type: 't', value: this.loadTexture(config.saturn.texture) },
+      texSaturnRings: { type: 't', value: this.loadTexture(config.saturn.ringsTexture) },
+      texGalaxy1: { type: 't', value: this.loadTexture(config.galaxy1.texture) },
+      texGalaxy2: { type: 't', value: this.loadTexture(config.galaxy2.texture) },
+      texAccretionDisk: { type: 't', value: this.loadTexture(config.blackhole.diskTexture) },
+      lightDirection: { type: 'v3', value: config.saturn.lightDirection },
+      cameraMatrix: { type: 'm4', value: new Matrix4() },
+      cameraGalaxy: { type: 'i', value: 0 }
+    }
+    this.uniforms.texSaturnRings.value.wrapS = RepeatWrapping
+    this.uniforms.texAccretionDisk.value.wrapS = RepeatWrapping
+    this.uniforms.texSaturn.value.minFilter = LinearFilter
+    this.uniforms.texGalaxy1.value.minFilter = LinearFilter
+    this.uniforms.texGalaxy2.value.minFilter = LinearFilter
+  }
+  loadTexture (path) {
+    this._textureCount = (this._textureCount || 0) + 1
+    return textureLoader.load(path, () => {
+      this._loadedTexturesCount = (this._loadedTexturesCount || 0) + 1
+      if (this._loadedTexturesCount === this._textureCount) {
+        this.onTexturesLoaded && this.onTexturesLoaded()
+      }
+    })
+  }
+  updateEffectComposer () {
+    this.composer.setSize(
+      Math.floor(this.width / this.pixelSize),
+      Math.floor(this.height / this.pixelSize)
+    )
+  }
+  updateCamera () {
+    let vx, vy
+    if (this.width > this.height) {
+      vx = 1
+      vy = this.height / this.width
+    }
+    else {
+      vx = this.width / this.height
+      vy = 1
+    }
+    this.player.eyes.aspect = vx / vy
+    this.player.eyes.fov = MathExtra.RAD2DEG * 2 * Math.atan(vy / this.zoom)
+  }
+  setPixelSize (pixelSize) {
+    this.pixelSize = pixelSize
+    this.updateEffectComposer()
+  }
+  setZoom (zoom) {
+    this.zoom = zoom
+    this.updateCamera()
+  }
+  setSize (width, height, pixelSize = null) {
+    this.width = width
+    this.height = height
+    if (pixelSize) {
+      this.pixelSize = pixelSize
+    }
+    this.renderer.setSize(this.width, this.height)
+    this.updateCamera()
+    this.updateEffectComposer()
+  }
+  render () {
+    const rayScale = new Vector3(
+      this.player.eyes.aspect,
+      1,
+      1 / Math.tan(MathExtra.DEG2RAD * this.player.eyes.fov / 2)
+    )
+    const worldPosition = new Vector3()
+    const worldQuaternion = new Quaternion()
+    this.uniforms.cameraMatrix.value.compose(
+      this.player.eyes.getWorldPosition(worldPosition),
+      this.player.eyes.getWorldQuaternion(worldQuaternion),
+      rayScale
+    )
+    this.uniforms.cameraGalaxy.value = this.player.galaxy
+    this.renderer.clear()
+    this.composer.render()
+  }
+}

src/Teleporter.js ADDED Viewed

	@@ -0,0 +1,55 @@

+import Simulation from './Simulation'
+export default class Teleporter {
+  constructor (player) {
+    this.player = player
+    this.targets = []
+  }
+  addTarget ({ position, lookAt, galaxy }) {
+    this.targets.push({
+      position,
+      lookAt,
+      galaxy
+    })
+  }
+  getClosestTeleportIndex () {
+    let minDistance = Infinity
+    let result = null
+    for (let i = 0; i < this.targets.length; i++) {
+      let distance
+      if (this.targets[i].galaxy !== this.player.galaxy) {
+        distance =
+          this.player.object.position.distanceTo(Simulation.config.wormhole.position) +
+          this.targets[i].position.distanceTo(Simulation.config.wormhole.position)
+      }
+      else {
+        distance = this.player.object.position.distanceTo(this.targets[i].position)
+      }
+      if (distance < minDistance) {
+        minDistance = distance
+        result = i
+      }
+    }
+    return result
+  }
+  teleportNext () {
+    const nextIndex = (this.getClosestTeleportIndex() + 1) % this.targets.length
+    this.teleportTo(this.targets[nextIndex])
+  }
+  teleportTo (target) {
+    this.player.object.position.copy(target.position)
+    this.player.galaxy = target.galaxy
+    this.player.lookAt(target.lookAt)
+  }
+}

src/Ui.js ADDED Viewed

	@@ -0,0 +1,68 @@

+class UiController {
+  constructor () {
+    this.initUiToggle()
+    this.initTeleportButton()
+    this.initRadioButtons()
+  }
+  initUiToggle () {
+    const uiToggle = document.querySelector('.ui-toggle input')
+    const onUIToggle = () => {
+      if (uiToggle.checked) {
+        document.body.classList.add('no-ui')
+      }
+      else {
+        document.body.classList.remove('no-ui')
+      }
+      uiToggle.blur()
+    }
+    uiToggle.addEventListener('change', onUIToggle)
+    onUIToggle()
+  }
+  initTeleportButton () {
+    document.querySelector('#teleport')
+      .addEventListener('touchstart', () => {
+        this.onTeleportClick && this.onTeleportClick()
+      }, false)
+  }
+  initRadioButtons () {
+    document.querySelector('#resolution')
+      .addEventListener('change', event => {
+        event.target.blur()
+        const pixelSize = this.getSelectedPixelSize()
+        this.onPixelSizeChange && this.onPixelSizeChange(pixelSize)
+      }, false)
+  }
+  getSelectedPixelSize () {
+    return parseInt(document.querySelector('[name=resolution]:checked').value)
+  }
+  showWebGLError () {
+    document.querySelector('#webgl-error').style.display = 'block'
+    this.removeLoadingScreen()
+  }
+  removeLoadingScreen () {
+    const el = document.getElementById('loading')
+    el.parentElement.removeChild(el)
+  }
+  setUiForDesktop () {
+    document.body.classList.remove('mobile-device')
+  }
+  setUiForMobile () {
+    document.body.classList.add('mobile-device')
+  }
+}
+export default new UiController()

src/controls/ControlsBase.js ADDED Viewed

	@@ -0,0 +1,10 @@

+export default class ControlsBase {
+  constructor (player, element) {
+    this.player = player
+    this.element = element
+    this.enabled = false
+  }
+}

src/controls/ControlsManager.js ADDED Viewed

	@@ -0,0 +1,52 @@

+import Ui from '../Ui'
+export default class ControlsManager {
+  constructor (keyboardControls, mobileDeviceControls) {
+    this.keyboardControls = keyboardControls
+    this.mobileDeviceControls = mobileDeviceControls
+    this.onKeyPress = this.onKeyPress.bind(this)
+    this.onDeviceOrientation = this.onDeviceOrientation.bind(this)
+    this.setDesktop()
+  }
+  setDesktop () {
+    window.addEventListener('deviceorientation', this.onDeviceOrientation, false)
+    this.keyboardControls.enable()
+    this.mobileDeviceControls.disable()
+    Ui.setUiForDesktop()
+    this.onChange && this.onChange('desktop')
+  }
+  setMobile () {
+    this.controls = 'mobile'
+    window.addEventListener('keypress', this.onKeyPress, false)
+    window.removeEventListener('deviceorientation', this.onDeviceOrientation, false)
+    this.keyboardControls.disable()
+    this.mobileDeviceControls.enable()
+    Ui.setUiForMobile()
+    this.onChange && this.onChange('mobile')
+  }
+  onKeyPress (event) {
+    this.setDesktop()
+  }
+  onDeviceOrientation (event) {
+    if (event.alpha === null) {
+      return
+    }
+    this.setMobile()
+  }
+}

src/controls/DeviceOrientationControls.js ADDED Viewed

	@@ -0,0 +1,64 @@

+import {
+  Math as MathExtra,
+  Vector3,
+  Euler,
+  Quaternion
+} from 'three'
+import ControlsBase from './ControlsBase'
+const zee = new Vector3(0, 0, 1)
+const euler = new Euler()
+const q0 = new Quaternion()
+const q1 = new Quaternion(-Math.sqrt(0.5), 0, 0, Math.sqrt(0.5)) // - PI/2 around the x-axis
+export default class DeviceOrientationControls extends ControlsBase {
+  constructor (player) {
+    super(player, null)
+    this.object = player.eyes
+    this.object.rotation.reorder('YXZ')
+    // Let's always listen to orientation changes, even before it's enabled
+    // For some reason the orientation lags a few frames behind once we start listening
+    window.addEventListener('orientationchange', this.onScreenOrientationChangeEvent.bind(this), false)
+    window.addEventListener('deviceorientation', this.onDeviceOrientationChangeEvent.bind(this), false)
+  }
+  enable () {
+    this.onScreenOrientationChangeEvent()
+    this.enabled = true
+  }
+  disable () {
+    this.enabled = false
+  }
+  update () {
+    if (this.enabled === false || !this.deviceOrientation || this.deviceOrientation.alpha === null) {
+      return
+    }
+    const alpha = this.deviceOrientation.alpha ? MathExtra.degToRad(this.deviceOrientation.alpha) : 0 // Z
+    const beta = this.deviceOrientation.beta ? MathExtra.degToRad(this.deviceOrientation.beta) : 0 // X'
+    const gamma = this.deviceOrientation.gamma ? MathExtra.degToRad(this.deviceOrientation.gamma) : 0 // Y''
+    const orient = this.screenOrientation ? MathExtra.degToRad(this.screenOrientation) : 0 // O
+    euler.set(beta, alpha, -gamma, 'YXZ') // 'ZXY' for the device, but 'YXZ' for us
+    this.object.quaternion.setFromEuler(euler) // orient the device
+    this.object.quaternion.multiply(q1) // camera looks out the back of the device, not the top
+    this.object.quaternion.multiply(q0.setFromAxisAngle(zee, -orient)) // adjust for screen orientation
+  }
+  onDeviceOrientationChangeEvent (event) {
+    this.deviceOrientation = event
+  }
+  onScreenOrientationChangeEvent () {
+    this.screenOrientation = window.orientation || 0
+  }
+}

src/controls/KeyboardControls.js ADDED Viewed

	@@ -0,0 +1,333 @@

+import {
+  Vector3,
+  Quaternion
+} from 'three'
+import ControlsBase from './ControlsBase'
+export default class KeyboardControls extends ControlsBase {
+  constructor (player, element) {
+    super(player, element)
+    this.element.setAttribute('tabindex', -1)
+    this.movementSpeedMultiplier = 1
+    this.movementSpeed = 1.0
+    this.rollSpeed = 0.005
+    this.mouseStatus = 0
+    this.dragToLook = false
+    this.autoForward = false
+    this.moveState = {
+      up: 0,
+      down: 0,
+      left: 0,
+      right: 0,
+      forward: 0,
+      back: 0,
+      pitchUp: 0,
+      pitchDown: 0,
+      yawLeft: 0,
+      yawRight: 0,
+      rollLeft: 0,
+      rollRight: 0
+    }
+    this.moveVector = new Vector3(0, 0, 0)
+    this.rotationVector = new Vector3(0, 0, 0)
+    this.contextMenu = this.contextMenu.bind(this)
+    this.mouseMove = this.mouseMove.bind(this)
+    this.mouseDown = this.mouseDown.bind(this)
+    this.mouseUp = this.mouseUp.bind(this)
+    this.keyDown = this.keyDown.bind(this)
+    this.keyUp = this.keyUp.bind(this)
+  }
+  keyDown (event) {
+    if (event.altKey) {
+      return
+    }
+    switch (event.keyCode) {
+      case 16: // Shift
+        this.movementSpeedMultiplier = 10
+        break
+      case 87: // W
+        this.moveState.forward = 1
+        break
+      case 83: // S
+        this.moveState.back = 1
+        break
+      case 65: // A
+        this.moveState.left = 1
+        break
+      case 68: // D
+        this.moveState.right = 1
+        break
+      case 82: // R
+        this.moveState.up = 1
+        break
+      case 70: // F
+        this.moveState.down = 1
+        break
+      case 38: // Up
+        this.moveState.pitchUp = 1
+        break
+      case 40: // Down
+        this.moveState.pitchDown = 1
+        break
+      case 37: // Left
+        this.moveState.yawLeft = 1
+        break
+      case 39: // Right
+        this.moveState.yawRight = 1
+        break
+      case 81: // Q
+        this.moveState.rollLeft = 1
+        break
+      case 69: // E
+        this.moveState.rollRight = 1
+        break
+      // Control-scheme modifiers:
+      case 32:
+        this.dragToLook = !this.dragToLook
+        this.resetDragToLook()
+        break
+      case 27:
+        this.dragToLook = true
+        this.resetDragToLook()
+        break
+    }
+    this.updateMovementVector()
+    this.updateRotationVector()
+  }
+  keyUp (event) {
+    switch (event.keyCode) {
+      case 16: // Shift
+        this.movementSpeedMultiplier = 1
+        break
+      case 87: // W
+        this.moveState.forward = 0
+        break
+      case 83: // S
+        this.moveState.back = 0
+        break
+      case 65: // A
+        this.moveState.left = 0
+        break
+      case 68: // D
+        this.moveState.right = 0
+        break
+      case 82: // R
+        this.moveState.up = 0
+        break
+      case 70: // F
+        this.moveState.down = 0
+        break
+      case 38: // Up
+        this.moveState.pitchUp = 0
+        break
+      case 40: // Down
+        this.moveState.pitchDown = 0
+        break
+      case 37: // Left
+        this.moveState.yawLeft = 0
+        break
+      case 39: // Right
+        this.moveState.yawRight = 0
+        break
+      case 81: // Q
+        this.moveState.rollLeft = 0
+        break
+      case 69: // E
+        this.moveState.rollRight = 0
+        break
+    }
+    this.updateMovementVector()
+    this.updateRotationVector()
+  }
+  resetDragToLook () {
+    if (this.dragToLook) {
+      this.moveState.yawLeft = 0
+      this.moveState.pitchDown = 0
+    }
+  }
+  mouseDown (event) {
+    if (this.element !== document) {
+      this.element.focus()
+    }
+    event.preventDefault()
+    event.stopPropagation()
+    if (this.dragToLook) {
+      this.mouseStatus += 1
+    }
+    else {
+      switch (event.button) {
+        case 0:
+          this.moveState.forward = 1
+          break
+        case 2:
+          this.moveState.back = 1
+          break
+      }
+      this.updateMovementVector()
+    }
+  }
+  mouseMove (event) {
+    if (this.dragToLook && this.mouseStatus === 0) {
+      return
+    }
+    const container = this.getContainerDimensions()
+    const halfWidth = container.size[0] / 2
+    const halfHeight = container.size[1] / 2
+    this.moveState.yawLeft = -((event.pageX - container.offset[0]) - halfWidth) / halfWidth
+    this.moveState.pitchDown = ((event.pageY - container.offset[1]) - halfHeight) / halfHeight
+    this.updateRotationVector()
+  }
+  mouseUp (event) {
+    event.preventDefault()
+    event.stopPropagation()
+    if (this.dragToLook) {
+      this.mouseStatus -= 1
+      this.moveState.yawLeft = this.moveState.pitchDown = 0
+    }
+    else {
+      switch (event.button) {
+        case 0:
+          this.moveState.forward = 0
+          break
+        case 2:
+          this.moveState.back = 0
+          break
+      }
+      this.updateMovementVector()
+    }
+    this.updateRotationVector()
+  }
+  updateMovementVector () {
+    const forward = (this.moveState.forward || (this.autoForward && !this.moveState.back)) ? 1 : 0
+    this.moveVector.x = (-this.moveState.left + this.moveState.right)
+    this.moveVector.y = (-this.moveState.down + this.moveState.up)
+    this.moveVector.z = (-forward + this.moveState.back)
+  }
+  updateRotationVector () {
+    this.rotationVector.x = (-this.moveState.pitchDown + this.moveState.pitchUp)
+    this.rotationVector.y = (-this.moveState.yawRight + this.moveState.yawLeft)
+    this.rotationVector.z = (-this.moveState.rollRight + this.moveState.rollLeft)
+  }
+  getContainerDimensions () {
+    if (this.element !== document) {
+      return {
+        size: [this.element.offsetWidth, this.element.offsetHeight],
+        offset: [this.element.offsetLeft, this.element.offsetTop]
+      }
+    }
+    else {
+      return {
+        size: [window.innerWidth, window.innerHeight],
+        offset: [0, 0]
+      }
+    }
+  }
+  contextMenu (event) {
+    event.preventDefault()
+  }
+  enable () {
+    this.updateMovementVector()
+    this.updateRotationVector()
+    this.element.addEventListener('contextmenu', this.contextMenu, false)
+    this.element.addEventListener('mousemove', this.mouseMove, false)
+    this.element.addEventListener('mousedown', this.mouseDown, false)
+    this.element.addEventListener('mouseup', this.mouseUp, false)
+    window.addEventListener('keydown', this.keyDown, false)
+    window.addEventListener('keyup', this.keyUp, false)
+    this.enabled = true
+  }
+  disable () {
+    this.element.removeEventListener('contextmenu', this.contextMenu, false)
+    this.element.removeEventListener('mousemove', this.mouseMove, false)
+    this.element.removeEventListener('mousedown', this.mouseDown, false)
+    this.element.removeEventListener('mouseup', this.mouseUp, false)
+    window.removeEventListener('keydown', this.keyDown, false)
+    window.removeEventListener('keyup', this.keyUp, false)
+    this.enabled = false
+  }
+  update () {
+    const moveMult = this.movementSpeed * this.movementSpeedMultiplier
+    const rotMult = this.rollSpeed
+    const worldQuaternion = new Quaternion()
+    this.player.eyes.getWorldQuaternion(worldQuaternion)
+    this.player.velocity
+      .copy(this.moveVector)
+      .multiplyScalar(moveMult)
+      .applyQuaternion(worldQuaternion)
+    this.player.eyeAngularVelocity
+      .copy(this.rotationVector)
+      .multiplyScalar(rotMult)
+  }
+}

src/controls/MobileDeviceControls.js ADDED Viewed

	@@ -0,0 +1,37 @@

+import DeviceOrientationControls from './DeviceOrientationControls'
+import TouchControls from './TouchControls'
+import ControlsBase from './ControlsBase'
+export default class MobileDeviceControls extends ControlsBase {
+  constructor (player, element) {
+    super(player, element)
+    this.deviceOrientationControls = new DeviceOrientationControls(player)
+    this.touchControls = new TouchControls(player, element)
+  }
+  enable () {
+    this.deviceOrientationControls.enable()
+    this.touchControls.enable()
+    this.enabled = true
+  }
+  disable () {
+    this.deviceOrientationControls.disable()
+    this.touchControls.disable()
+    this.enabled = false
+  }
+  update () {
+    if (this.enabled === false) {
+      return
+    }
+    this.deviceOrientationControls.update()
+    this.touchControls.update()
+  }
+}

src/controls/TouchControls.js ADDED Viewed

	@@ -0,0 +1,80 @@

+import {
+  Math as MathExtra,
+  Vector3,
+  Quaternion
+} from 'three'
+import ControlsBase from './ControlsBase'
+export default class TouchControls extends ControlsBase {
+  constructor (player, element) {
+    super(player, element)
+    this.velocity = new Vector3(0, 0, 0)
+    this.onTouchEvent = this.onTouchEvent.bind(this)
+  }
+  onTouchEvent (event) {
+    event.preventDefault()
+    const touches = event.touches
+    if (touches.length === 0) {
+      this.velocity.set(0, 0, 0)
+      return
+    }
+    let avgX = 0
+    let avgY = 0
+    for (let i = 0; i < touches.length; i++) {
+      avgX += touches[i].pageX
+      avgY += touches[i].pageY
+    }
+    avgX /= touches.length
+    avgY /= touches.length
+    const vy = Math.tan(0.5 * MathExtra.DEG2RAD * this.player.eyes.fov)
+    const vx = this.player.eyes.aspect * vy
+    this.velocity.set(
+      vx * (avgX * 2.0 / window.innerWidth - 1.0),
+      -vy * (avgY * 2.0 / window.innerHeight - 1.0),
+      -1
+    ).normalize()
+    this.velocity.multiplyScalar(touches.length > 1 ? 10 : 1)
+  }
+  enable () {
+    this.element.addEventListener('touchstart', this.onTouchEvent, false)
+    this.element.addEventListener('touchmove', this.onTouchEvent, false)
+    this.element.addEventListener('touchend', this.onTouchEvent, false)
+    this.enabled = true
+  }
+  disable () {
+    this.element.removeEventListener('touchstart', this.onTouchEvent, false)
+    this.element.removeEventListener('touchmove', this.onTouchEvent, false)
+    this.element.removeEventListener('touchend', this.onTouchEvent, false)
+    this.enabled = false
+  }
+  update () {
+    if (this.enabled === false) {
+      return
+    }
+    const worldQuaternion = new Quaternion()
+    this.player.eyes.getWorldQuaternion(worldQuaternion)
+    this.player.velocity
+      .copy(this.velocity)
+      .applyQuaternion(worldQuaternion)
+  }
+}

src/main.js ADDED Viewed

	@@ -0,0 +1,11 @@

+import Simulation from './Simulation'
+import Ui from './Ui'
+import { isWebGlSupported } from './utils'
+if (!isWebGlSupported()) {
+  Ui.showWebGLError()
+}
+else {
+  Simulation.init()
+  Simulation.start()
+}

src/postprocessing/CopyShader.js ADDED Viewed

	@@ -0,0 +1,14 @@

+import simpleVertexCode from '../shaders/simpleVertex.glsl'
+import copyCode from '../shaders/copy.glsl'
+export default {
+  uniforms: {
+    tDiffuse: { value: null },
+    opacity: { value: 1.0 }
+  },
+  vertexShader: simpleVertexCode,
+  fragmentShader: copyCode
+}

src/postprocessing/EffectComposer.js ADDED Viewed

	@@ -0,0 +1,66 @@

+/**
+ * The source code of this file is heavily based on
+ * https://github.com/mrdoob/three.js/blob/dev/examples/js/postprocessing/EffectComposer.js
+ */
+import { WebGLRenderTarget, LinearFilter, RGBAFormat } from 'three'
+export default class EffectComposer {
+  constructor (renderer, renderTarget) {
+    this.renderer = renderer
+    if (renderTarget === undefined) {
+      const parameters = {
+        minFilter: LinearFilter,
+        magFilter: LinearFilter,
+        format: RGBAFormat,
+        stencilBuffer: false
+      }
+      const size = renderer.getDrawingBufferSize()
+      renderTarget = new WebGLRenderTarget(size.width, size.height, parameters)
+      renderTarget.texture.name = 'EffectComposer.rt1'
+    }
+    this.renderTarget1 = renderTarget
+    this.renderTarget2 = renderTarget.clone()
+    this.renderTarget2.texture.name = 'EffectComposer.rt2'
+    this.writeBuffer = this.renderTarget1
+    this.readBuffer = this.renderTarget2
+    this.passes = []
+  }
+  swapBuffers () {
+    const tmp = this.readBuffer
+    this.readBuffer = this.writeBuffer
+    this.writeBuffer = tmp
+  }
+  addPass (pass) {
+    this.passes.push(pass)
+    const size = this.renderer.getDrawingBufferSize()
+    pass.setSize(size.width, size.height)
+  }
+  render () {
+    for (let i = 0; i < this.passes.length; i++) {
+      let pass = this.passes[i]
+      pass.render(this.renderer, this.writeBuffer, this.readBuffer)
+    }
+  }
+  setSize (width, height) {
+    this.renderTarget1.setSize(width, height)
+    this.renderTarget2.setSize(width, height)
+    for (let i = 0; i < this.passes.length; i++) {
+      this.passes[i].setSize(width, height)
+    }
+  }
+}

src/postprocessing/LuminosityHighPassShader.js ADDED Viewed

	@@ -0,0 +1,21 @@

+import { Color } from 'three'
+import simpleVertexCode from '../shaders/simpleVertex.glsl'
+import luminosityHighPassCode from '../shaders/luminosityHighPass.glsl'
+export default {
+  shaderID: 'luminosityHighPass',
+  uniforms: {
+    tDiffuse: { type: 't', value: null },
+    luminosityThreshold: { type: 'f', value: 1.0 },
+    smoothWidth: { type: 'f', value: 1.0 },
+    defaultColor: { type: 'c', value: new Color(0x000000) },
+    defaultOpacity: { type: 'f', value: 0.0 }
+  },
+  vertexShader: simpleVertexCode,
+  fragmentShader: luminosityHighPassCode
+}

src/postprocessing/Pass.js ADDED Viewed

	@@ -0,0 +1,30 @@

+import {
+  OrthographicCamera,
+  Scene,
+  Mesh,
+  PlaneBufferGeometry
+} from 'three'
+export default class Pass {
+  constructor () {
+    this.clear = false
+    this.renderToScreen = false
+    this.camera = new OrthographicCamera(-1, 1, 1, -1, 0, 1)
+    this.scene = new Scene()
+    this.quad = new Mesh(new PlaneBufferGeometry(2, 2), null)
+    this.quad.frustumCulled = false // Avoid getting clipped
+    this.scene.add(this.quad)
+  }
+  setSize (width, height) {
+  }
+  render (renderer, writeBuffer, readBuffer) {
+  }
+}

src/postprocessing/RenderPass.js ADDED Viewed

	@@ -0,0 +1,23 @@

+import Pass from './Pass'
+export default class RenderPass extends Pass {
+  constructor (scene, camera) {
+    super()
+    this.scene = scene
+    this.camera = camera
+  }
+  render (renderer, writeBuffer, readBuffer) {
+    const oldAutoClear = renderer.autoClear
+    renderer.autoClear = false
+    this.scene.overrideMaterial = this.overrideMaterial
+    renderer.render(this.scene, this.camera, this.renderToScreen ? null : readBuffer, true)
+    this.scene.overrideMaterial = null
+    renderer.autoClear = oldAutoClear
+  }
+}

src/postprocessing/UnrealBloomPass.js ADDED Viewed

	@@ -0,0 +1,298 @@

+/**
+ * The source code of this file is heavily based on
+ * https://github.com/mrdoob/three.js/blob/dev/examples/js/postprocessing/UnrealBloomPass.js
+ */
+import {
+  Vector2,
+  Vector3,
+  Color,
+  ShaderMaterial,
+  MeshBasicMaterial,
+  LinearFilter,
+  RGBAFormat,
+  AdditiveBlending,
+  UniformsUtils,
+  WebGLRenderTarget
+} from 'three'
+import Pass from './Pass'
+import CopyShader from './CopyShader'
+import LuminosityHighPassShader from './LuminosityHighPassShader'
+import simpleVertexCode from '../shaders/simpleVertex.glsl'
+import seperableBlurCode from '../shaders/seperableBlur.glsl'
+import bloomCompositeCode from '../shaders/bloomComposite.glsl'
+export default class UnrealBloomPass extends Pass {
+  constructor (resolution, strength, radius, threshold) {
+    super()
+    this.strength = strength
+    this.radius = radius
+    this.threshold = threshold
+    this.resolution = new Vector2(resolution.x, resolution.y)
+    // render targets
+    const pars = {
+      minFilter: LinearFilter,
+      magFilter: LinearFilter,
+      format: RGBAFormat
+    }
+    this.renderTargetsHorizontal = []
+    this.renderTargetsVertical = []
+    this.nMips = 5
+    let resx = Math.round(this.resolution.x / 2)
+    let resy = Math.round(this.resolution.y / 2)
+    this.renderTargetBright = new WebGLRenderTarget(resx, resy, pars)
+    this.renderTargetBright.texture.name = 'UnrealBloomPass.bright'
+    this.renderTargetBright.texture.generateMipmaps = false
+    for (let i = 0; i < this.nMips; i++) {
+      let renderTarget = new WebGLRenderTarget(resx, resy, pars)
+      renderTarget.texture.name = `UnrealBloomPass.h${i}`
+      renderTarget.texture.generateMipmaps = false
+      this.renderTargetsHorizontal.push(renderTarget)
+      renderTarget = new WebGLRenderTarget(resx, resy, pars)
+      renderTarget.texture.name = `UnrealBloomPass.v${i}`
+      renderTarget.texture.generateMipmaps = false
+      this.renderTargetsVertical.push(renderTarget)
+      resx = Math.round(resx / 2)
+      resy = Math.round(resy / 2)
+    }
+    this.highPassUniforms = UniformsUtils.clone(LuminosityHighPassShader.uniforms)
+    this.highPassUniforms.luminosityThreshold.value = threshold
+    this.highPassUniforms.smoothWidth.value = 0.01
+    this.materialHighPassFilter = new ShaderMaterial(
+      {
+        uniforms: this.highPassUniforms,
+        vertexShader: LuminosityHighPassShader.vertexShader,
+        fragmentShader: LuminosityHighPassShader.fragmentShader,
+        defines: {}
+      }
+    )
+    // Gaussian Blur Materials
+    this.separableBlurMaterials = []
+    const kernelSizeArray = [3, 5, 7, 9, 11]
+    resx = Math.round(this.resolution.x / 2)
+    resy = Math.round(this.resolution.y / 2)
+    for (let i = 0; i < this.nMips; i++) {
+      this.separableBlurMaterials.push(this.getSeperableBlurMaterial(kernelSizeArray[i]))
+      this.separableBlurMaterials[i].uniforms.texSize.value = new Vector2(resx, resy)
+      resx = Math.round(resx / 2)
+      resy = Math.round(resy / 2)
+    }
+    // Composite material
+    this.compositeMaterial = this.getCompositeMaterial(this.nMips)
+    this.compositeMaterial.uniforms.blurTexture1.value = this.renderTargetsVertical[0].texture
+    this.compositeMaterial.uniforms.blurTexture2.value = this.renderTargetsVertical[1].texture
+    this.compositeMaterial.uniforms.blurTexture3.value = this.renderTargetsVertical[2].texture
+    this.compositeMaterial.uniforms.blurTexture4.value = this.renderTargetsVertical[3].texture
+    this.compositeMaterial.uniforms.blurTexture5.value = this.renderTargetsVertical[4].texture
+    this.compositeMaterial.uniforms.bloomStrength.value = strength
+    this.compositeMaterial.uniforms.bloomRadius.value = 0.1
+    this.compositeMaterial.needsUpdate = true
+    const bloomFactors = [1.0, 0.8, 0.6, 0.4, 0.2]
+    this.compositeMaterial.uniforms.bloomFactors.value = bloomFactors
+    this.bloomTintColors = [
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1),
+      new Vector3(1, 1, 1)
+    ]
+    this.compositeMaterial.uniforms.bloomTintColors.value = this.bloomTintColors
+    this.copyUniforms = UniformsUtils.clone(CopyShader.uniforms)
+    this.copyUniforms.opacity.value = 1.0
+    this.materialCopy = new ShaderMaterial(
+      {
+        uniforms: this.copyUniforms,
+        vertexShader: CopyShader.vertexShader,
+        fragmentShader: CopyShader.fragmentShader,
+        blending: AdditiveBlending,
+        depthTest: false,
+        depthWrite: false,
+        transparent: true
+      }
+    )
+    this.oldClearColor = new Color()
+    this.oldClearAlpha = 1
+    this.basic = new MeshBasicMaterial()
+  }
+  dispose () {
+    for (let i = 0; i < this.renderTargetsHorizontal.length; i++) {
+      this.renderTargetsHorizontal[i].dispose()
+    }
+    for (let i = 0; i < this.renderTargetsVertical.length; i++) {
+      this.renderTargetsVertical[i].dispose()
+    }
+    this.renderTargetBright.dispose()
+  }
+  setSize (width, height) {
+    let resx = Math.round(width / 2)
+    let resy = Math.round(height / 2)
+    this.renderTargetBright.setSize(resx, resy)
+    for (let i = 0; i < this.nMips; i++) {
+      this.renderTargetsHorizontal[i].setSize(resx, resy)
+      this.renderTargetsVertical[i].setSize(resx, resy)
+      this.separableBlurMaterials[i].uniforms.texSize.value = new Vector2(resx, resy)
+      resx = Math.round(resx / 2)
+      resy = Math.round(resy / 2)
+    }
+  }
+  render (renderer, writeBuffer, readBuffer) {
+    this.oldClearColor.copy(renderer.getClearColor())
+    this.oldClearAlpha = renderer.getClearAlpha()
+    const oldAutoClear = renderer.autoClear
+    renderer.autoClear = false
+    renderer.setClearColor(new Color(0, 0, 0), 0)
+    // Render input to screen
+    if (this.renderToScreen) {
+      this.quad.material = this.basic
+      this.basic.map = readBuffer.texture
+      renderer.render(this.scene, this.camera, undefined, true)
+    }
+    // 1. Extract Bright Areas
+    this.highPassUniforms.tDiffuse.value = readBuffer.texture
+    this.highPassUniforms.luminosityThreshold.value = this.threshold
+    this.quad.material = this.materialHighPassFilter
+    renderer.render(this.scene, this.camera, this.renderTargetBright, true)
+    // 2. Blur All the mips progressively
+    let inputRenderTarget = this.renderTargetBright
+    for (let i = 0; i < this.nMips; i++) {
+      this.quad.material = this.separableBlurMaterials[i]
+      this.separableBlurMaterials[i].uniforms.colorTexture.value = inputRenderTarget.texture
+      this.separableBlurMaterials[i].uniforms.direction.value = UnrealBloomPass.BlurDirectionX
+      renderer.render(this.scene, this.camera, this.renderTargetsHorizontal[i], true)
+      this.separableBlurMaterials[i].uniforms.colorTexture.value = this.renderTargetsHorizontal[i].texture
+      this.separableBlurMaterials[i].uniforms.direction.value = UnrealBloomPass.BlurDirectionY
+      renderer.render(this.scene, this.camera, this.renderTargetsVertical[i], true)
+      inputRenderTarget = this.renderTargetsVertical[i]
+    }
+    // Composite All the mips
+    this.quad.material = this.compositeMaterial
+    this.compositeMaterial.uniforms.bloomStrength.value = this.strength
+    this.compositeMaterial.uniforms.bloomRadius.value = this.radius
+    this.compositeMaterial.uniforms.bloomTintColors.value = this.bloomTintColors
+    renderer.render(this.scene, this.camera, this.renderTargetsHorizontal[0], true)
+    // Blend it additively over the input texture
+    this.quad.material = this.materialCopy
+    this.copyUniforms.tDiffuse.value = this.renderTargetsHorizontal[0].texture
+    if (this.renderToScreen) {
+      renderer.render(this.scene, this.camera, undefined, false)
+    }
+    else {
+      renderer.render(this.scene, this.camera, readBuffer, false)
+    }
+    // Restore renderer settings
+    renderer.setClearColor(this.oldClearColor, this.oldClearAlpha)
+    renderer.autoClear = oldAutoClear
+  }
+  getSeperableBlurMaterial (kernelRadius) {
+    return new ShaderMaterial(
+      {
+        defines: {
+          KERNEL_RADIUS: kernelRadius,
+          SIGMA: kernelRadius
+        },
+        uniforms: {
+          colorTexture: { value: null },
+          texSize: { value: new Vector2(0.5, 0.5) },
+          direction: { value: new Vector2(0.5, 0.5) }
+        },
+        vertexShader: simpleVertexCode,
+        fragmentShader: seperableBlurCode
+      }
+    )
+  }
+  getCompositeMaterial (nMips) {
+    return new ShaderMaterial(
+      {
+        defines: {
+          NUM_MIPS: nMips
+        },
+        uniforms: {
+          blurTexture1: { value: null },
+          blurTexture2: { value: null },
+          blurTexture3: { value: null },
+          blurTexture4: { value: null },
+          blurTexture5: { value: null },
+          dirtTexture: { value: null },
+          bloomStrength: { value: 1.0 },
+          bloomFactors: { value: null },
+          bloomTintColors: { value: null },
+          bloomRadius: { value: 0.0 }
+        },
+        vertexShader: simpleVertexCode,
+        fragmentShader: bloomCompositeCode
+      }
+    )
+  }
+}
+UnrealBloomPass.BlurDirectionX = new Vector2(1, 0)
+UnrealBloomPass.BlurDirectionY = new Vector2(0, 1)

src/shaders/bloomComposite.glsl ADDED Viewed

	@@ -0,0 +1,24 @@

+varying vec2 vUv;
+uniform sampler2D blurTexture1;
+uniform sampler2D blurTexture2;
+uniform sampler2D blurTexture3;
+uniform sampler2D blurTexture4;
+uniform sampler2D blurTexture5;
+uniform sampler2D dirtTexture;
+uniform float bloomStrength;
+uniform float bloomRadius;
+uniform float bloomFactors[NUM_MIPS];
+uniform vec3 bloomTintColors[NUM_MIPS];
+float lerpBloomFactor(const in float factor) {
+  float mirrorFactor = 1.2 - factor;
+  return mix(factor, mirrorFactor, bloomRadius);
+}
+void main() {
+  gl_FragColor = bloomStrength * ( lerpBloomFactor(bloomFactors[0]) * vec4(bloomTintColors[0], 1.0) * texture2D(blurTexture1, vUv) +
+                  lerpBloomFactor(bloomFactors[1]) * vec4(bloomTintColors[1], 1.0) * texture2D(blurTexture2, vUv) +
+                  lerpBloomFactor(bloomFactors[2]) * vec4(bloomTintColors[2], 1.0) * texture2D(blurTexture3, vUv) +
+                  lerpBloomFactor(bloomFactors[3]) * vec4(bloomTintColors[3], 1.0) * texture2D(blurTexture4, vUv) +
+                  lerpBloomFactor(bloomFactors[4]) * vec4(bloomTintColors[4], 1.0) * texture2D(blurTexture5, vUv) );
+}

src/shaders/copy.glsl ADDED Viewed

	@@ -0,0 +1,9 @@

+uniform float opacity;
+uniform sampler2D tDiffuse;
+varying vec2 vUv;
+void main() {
+  vec4 texel = texture2D( tDiffuse, vUv );
+  gl_FragColor = opacity * texel;
+}

src/shaders/luminosityHighPass.glsl ADDED Viewed

	@@ -0,0 +1,20 @@

+uniform sampler2D tDiffuse;
+uniform vec3 defaultColor;
+uniform float defaultOpacity;
+uniform float luminosityThreshold;
+uniform float smoothWidth;
+varying vec2 vUv;
+void main() {
+  vec4 texel = texture2D( tDiffuse, vUv );
+  vec3 luma = vec3( 0.299, 0.587, 0.114 );
+  float v = dot( texel.xyz, luma );
+  vec4 outputColor = vec4( defaultColor.rgb, defaultOpacity );
+  float alpha = smoothstep( luminosityThreshold, luminosityThreshold + smoothWidth, v );
+  gl_FragColor = mix( outputColor, texel, alpha );
+}

src/shaders/seperableBlur.glsl ADDED Viewed

	@@ -0,0 +1,26 @@

+#include <common>
+varying vec2 vUv;
+uniform sampler2D colorTexture;
+uniform vec2 texSize;
+uniform vec2 direction;
+float gaussianPdf(in float x, in float sigma) {
+  return 0.39894 * exp( -0.5 * x * x/( sigma * sigma))/sigma;
+}
+void main() {
+  vec2 invSize = 1.0 / texSize;
+  float fSigma = float(SIGMA);
+  float weightSum = gaussianPdf(0.0, fSigma);
+  vec3 diffuseSum = texture2D( colorTexture, vUv).rgb * weightSum;
+  for( int i = 1; i < KERNEL_RADIUS; i ++ ) {
+    float x = float(i);
+    float w = gaussianPdf(x, fSigma);
+    vec2 uvOffset = direction * invSize * x;
+    vec3 sample1 = texture2D( colorTexture, vUv + uvOffset).rgb;
+    vec3 sample2 = texture2D( colorTexture, vUv - uvOffset).rgb;
+    diffuseSum += (sample1 + sample2) * w;
+    weightSum += 2.0 * w;
+  }
+  gl_FragColor = vec4(diffuseSum/weightSum, 1.0);
+}