render smaller tag cloud

11 files changed, 477 insertions, 347 deletions

diff --git a/client/splash/datasetList.js b/client/splash/cloud/datasetList.js
index 88058de7..88058de7 100644
--- a/client/splash/datasetList.js
+++ b/client/splash/cloud/datasetList.js
diff --git a/client/splash/cloud/index.js b/client/splash/cloud/index.js
new file mode 100644
index 00000000..7bbc56c9
--- /dev/null
+++ b/client/splash/cloud/index.js
@@ -0,0 +1,34 @@
+import TextSprite from 'three.textsprite'
+
+import datasetList from './datasetList'
+import { choice } from '../../util'
+
+import { scene } from '../renderer'
+
+export const fontFamily = 'Helvetica, Arial, sans-serif'
+
+export function init() {
+  let sprites = Array.from({ length: Math.min(datasetList.length, 80) }, (t, i) => {
+    const sprite = new TextSprite({
+      textSize: 0.03 + Math.random() * 0.04,
+      redrawInterval: 1,
+      material: {
+        color: choice([ 0xffffff, 0xffffff, 0xffffff, 0xdddde6, 0x888896 ]),
+      },
+      texture: {
+        text: datasetList[i],
+        fontFamily,
+      },
+    })
+    sprite.position
+      .setX(Math.random())
+      .setY(Math.random())
+      .setZ(Math.random())
+      .subScalar(1 / 2)
+      .setLength(1 + Math.random())
+      .multiplyScalar(1)
+    scene.add(sprite)
+    return sprite
+  })
+  return sprites
+}
diff --git a/client/splash/datasets.js b/client/splash/datasets.js
deleted file mode 100644
index e7842511..00000000
--- a/client/splash/datasets.js
+++ /dev/null
@@ -1,86 +0,0 @@
-
-import datasetList from './datasetList'
-import { choice } from '../util'
-
-// var getRandomText = function() {
-//   return choice(datasets)
-// };
-// var getRandomFontFamily = function() {
-//   return 'Helvetica, Arial, sans-serif'
-//   // return choice([
-//     // 'Georgia, serif',
-//     // '"Palatino Linotype", "Book Antiqua", Palatino, serif',
-//     // '"Times New Roman", Times, serif',
-//     // 'Helvetica, Arial, sans-serif',
-//     // '"Arial Black", Gadget, sans-serif',
-//     // '"Comic Sans MS", cursive, sans-serif',
-//     // 'Impact, Charcoal, sans-serif',
-//     // '"Lucida Sans Unicode", "Lucida Grande", sans-serif',
-//     // 'Tahoma, Geneva, sans-serif',
-//     // '"Trebuchet MS", Helvetica, sans-serif',
-//     // 'Verdana, Geneva, sans-serif',
-//     // '"Courier New", Courier, monospace',
-//     // '"Lucida Console", Monaco, monospace',
-//   // ]);
-// };
-// var getRandomColor = function() {
-//   return choice([ 0xffffff, 0xffffff, 0xffffff, 0xdddde6, 0x888896 ])
-// };
-// var getRandomTextSize = function() {
-//   return (1 + Math.random()) * 1/8;
-// };
-// var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
-// renderer.setPixelRatio(devicePixelRatio);
-// renderer.setClearColor(0x000000, 0);
-// document.body.appendChild(renderer.domElement);
-// var scene = new THREE.Scene();
-// var camera = new THREE.PerspectiveCamera(75, 1, 1/128, 128);
-// camera.position.set(4, 0, 10);
-// var redrawInterval = 1;
-// var sprites = Array.from({length: datasets.length}, function(t, i) {
-//   // console.log(i)
-//   var sprite = new THREE.TextSprite({
-//     textSize: getRandomTextSize(),
-//     redrawInterval: redrawInterval,
-//     material: {
-//       color: getRandomColor(),
-//     },
-//     texture: {
-//       text: datasets[i],
-//       fontFamily: getRandomFontFamily(),
-//     },
-//   });
-//   sprite.position
-//     .setX(Math.random())
-//     .setY(Math.random())
-//     .setZ(Math.random())
-//     .subScalar(1/2)
-//     .setLength(1 + Math.random())
-//     .multiplyScalar(6);
-//   scene.add(sprite);
-//   return sprite;
-// });
-// var controls = new THREE.OrbitControls(camera, renderer.domElement);
-// controls.maxDistance = camera.far/2;
-// controls.enableDamping = true;
-// controls.dampingFactor = 1/8;
-// controls.rotateSpeed = 1/4;
-// controls.zoomSpeed = 1;
-// controls.keyPanSpeed = 1/2;
-// var renderScene = function() {
-//   renderer.setSize(document.body.offsetWidth, document.body.offsetHeight);
-//   camera.aspect = renderer.domElement.width / renderer.domElement.height;
-//   camera.updateProjectionMatrix();
-//   // controls.update();
-//   camera.position.z += -0.0025
-//   camera.rotation.y += 0.00001
-//   renderer.render(scene, camera);
-// };
-// window.addEventListener('resize', renderScene, false);
-// var startSceneRenderer = function() {
-//   requestAnimationFrame(function() {
-//     setTimeout(startSceneRenderer, 1000/60);
-//   });
-//   renderScene();
-// };
-// startSceneRenderer();
diff --git a/client/splash/face/index.js b/client/splash/face/index.js
new file mode 100644
index 00000000..fe21f52b
--- /dev/null
+++ b/client/splash/face/index.js
@@ -0,0 +1,5 @@
+import DRACOLoader from '../../util/vendor/DRACOLoader'
+import GeometryHelper from '../../util/vendor/geometryHelper'
+
+DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
+var dracoLoader = new THREE.DRACOLoader();
diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
new file mode 100644
index 00000000..a71f5a82
--- /dev/null
+++ b/client/splash/face/markers.js
@@ -0,0 +1 @@
+import { MeshLine, MeshLineMaterial } from 'three.meshline'
diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js
new file mode 100644
index 00000000..14aa7e6e
--- /dev/null
+++ b/client/splash/face/mesh.js
@@ -0,0 +1,8 @@
+import DRACOLoader from '../../util/vendor/DRACOLoader'
+import GeometryHelper from '../../util/vendor/geometryHelper'
+
+DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
+
+const dracoLoader = new DRACOLoader()
+
+DRACOLoader.getDecoderModule()
diff --git a/client/splash/faceMarkers.js b/client/splash/faceMarkers.js
deleted file mode 100644
index 0a87d2b2..00000000
--- a/client/splash/faceMarkers.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/* eslint-disable */
-var faceInit = function () {
-  var container = document.querySelector("#face_container")
-  var camera, controls, scene, renderer
-  var mouse = new THREE.Vector2(0.5, 0.5)
-  var mouseTarget = new THREE.Vector2(0.5, 0.5)
-  var POINT_SCALE = 1.8
-  var FACE_POINT_COUNT = 68
-  var SWAP_TIME = 500
-  var cubes = [], meshes = []
-  var currentFace = document.querySelector('.currentFace')
-  var introEl = document.querySelector('.intro')
-  var faceBuffer = (function () {
-    var a = new Array(FACE_POINT_COUNT)
-    for (let i = 0; i < FACE_POINT_COUNT; i++) {
-      a[i] = new THREE.Vector3()
-    }
-    return a
-  })()
-  var lastSprite
-  var last_t = 0, start_t = 0
-  var bgColor = 0x000000 // 0x191919
-  var colors = [
-    0xff3333,
-    0xff8833,
-    0xffff33,
-    0x338833,
-    0x3388ff,
-    0x3333ff,
-    0x8833ff,
-    0xff3388,
-    0xffffff,
-  ]
-  var swapping = false, swap_count = 0, swapFrom, swapTo, face_names, faces
-  init()
-
-  function init() {
-    fetch("/assets/data/3dlm_0_10.json")
-      .then(req => req.json())
-      .then(data => {
-        face_names = Object.keys(data)
-        faces = face_names.map(name => recenter(data[name]))
-        setup()
-        build(faces[0])
-        updateFace(faces[0])
-        setCurrentFace(face_names[0])
-        swapTo = faces[0]
-        animate()
-      })
-  }
-  function setup() {
-    var w = window.innerWidth * 2/3
-    var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7)
-    camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000)
-    camera.position.x = 0
-    camera.position.y = 0
-    camera.position.z = 200
-
-    scene = new THREE.Scene()
-    // scene.background = new THREE.Color(bgColor)
-
-    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
-    renderer.setPixelRatio(window.devicePixelRatio)
-    renderer.setSize(w, h)
-    renderer.setClearColor(0x000000, 0);
-    container.appendChild(renderer.domElement)
-    document.body.addEventListener('mousemove', onMouseMove)
-    // renderer.domElement.addEventListener('mousedown', swap)
-    // oktween.add({
-    //   obj: el.style,
-    //   units: "px",
-    //   from: { left: 0 },
-    //   to: { left: 100 },
-    //   duration: 1000,
-    //   easing: oktween.easing.circ_out,
-    //   update: function(obj){
-    //     console.log(obj.left)
-    //   }
-    //   finished: function(){
-    //     console.log("done")
-    //   }
-    // })
-    swap()
-  }
-  function build(points) {
-    var matrix = new THREE.Matrix4()
-    var quaternion = new THREE.Quaternion()
-
-    for (var i = 0; i < FACE_POINT_COUNT; i++) {
-      var p = points[i]
-      var geometry = new THREE.BoxBufferGeometry()
-      var position = new THREE.Vector3(p[0], p[1], p[2])
-      var rotation = new THREE.Euler()
-      var scale = new THREE.Vector3()
-      var color = new THREE.Color()
-      scale.x = scale.y = scale.z = POINT_SCALE
-      quaternion.setFromEuler(rotation, false)
-      matrix.compose(position, quaternion, scale)
-      geometry.applyMatrix(matrix)
-      material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) })
-      cube = new THREE.Mesh(geometry, material)
-      scene.add(cube)
-      cubes.push(cube)
-    }
-
-    meshes = getLineGeometry(points).map((geometry, i) => {
-      var color = new THREE.Color()
-      var material = new MeshLineMaterial({
-        color: color.setHex(colors[i % colors.length]),
-      })
-      var line = new MeshLine()
-      line.setGeometry(geometry, _ => 1.5)
-      var mesh = new THREE.Mesh(line.geometry, material)
-      mesh.geometry.dynamic = true
-      scene.add(mesh)
-      return [line, mesh]
-    })
-  }
-  function lerpPoints(n, A, B, C) {
-    for (let i = 0, len = A.length; i < len; i++) {
-      lerpPoint(n, A[i], B[i], C[i])
-    }
-  }
-  function lerpPoint(n, A, B, C) {
-    C.x = lerp(n, A.x, B.x)
-    C.y = lerp(n, A.y, B.y)
-    C.z = lerp(n, A.z, B.z)
-  }
-  function lerp(n, a, b) {
-    return (b-a) * n + a
-  }
-  function swap(){
-    swap_count = (swap_count + 1) % faces.length
-    swapFrom = swapTo || faces[0]
-    swapTo = faces[swap_count]
-    setCurrentFace(face_names[swap_count])
-    oktween.add({
-      from: { n: 0 },
-      to: { n: 1 },
-      duration: 1000,
-      easing: oktween.easing.quad_in_out,
-      update: function(obj){
-        lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
-        updateFace(faceBuffer)
-      },
-      finished: function(){
-        setTimeout(swap, 2000)
-      }
-    })
-  }
-  function setCurrentFace(name) {
-    name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ')
-    currentFace.innerHTML = name
-    // if (lastSprite) {
-    //   scene.remove(lastSprite)
-    // }
-    // var sprite = new THREE.TextSprite({
-    //   textSize: 12,
-    //   redrawInterval: 1000,
-    //   material: {
-    //     color: 0xcccccc,
-    //   },
-    //   texture: {
-    //     text: name,
-    //     fontFamily: '"Roboto", "Helvetica", sans-serif',
-    //   },
-    // });
-    // sprite.position
-    //   .setX(0)
-    //   .setY(0)
-    //   .setZ(0)
-    // scene.add(sprite);
-    // lastSprite = sprite
-  }
-  function updateFace(points) {
-    updateCubeGeometry(points)
-    updateLineGeometry(points)
-  }
-  function updateCubeGeometry(points) {
-    cubes.forEach((cube, i) => {
-      const p = points[i]
-      cube.position.set(p.x, p.y, p.z)
-    })
-  }
-  function updateLineGeometry(points) {
-    getLineGeometry(points).map((geometry, i) => {
-      var [line, mesh] = meshes[i]
-      line.setGeometry(geometry, _ => 1.5)
-      mesh.geometry.vertices = line.geometry.vertices
-      mesh.geometry.verticesNeedUpdate = true
-    })
-  }
-  function getLineGeometry(points) {
-    return [
-      points.slice(0, 17),
-      points.slice(17, 22),
-      points.slice(22, 27),
-      points.slice(27, 31),
-      points.slice(31, 36),
-      points.slice(36, 42),
-      points.slice(42, 48),
-      points.slice(48)
-    ].map((a, i) => {
-      var geometry = new THREE.Geometry()
-      a.forEach(p => geometry.vertices.push(p))
-      if (i > 4) {
-        geometry.vertices.push(a[0])
-      }
-      return geometry
-    })
-  }
-  function getBounds(obj) {
-    return obj.reduce((a, p) => {
-      return [
-        Math.min(a[0], p[0]),
-        Math.max(a[1], p[0]),
-        Math.min(a[2], p[1]),
-        Math.max(a[3], p[1]),
-        Math.min(a[4], p[2]),
-        Math.max(a[5], p[2]),
-      ]
-    }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity])
-  }
-  function recenter(obj) {
-    const bounds = getBounds(obj)
-    const x_width = (bounds[1] - bounds[0]) / 2
-    const y_width = (bounds[3] - bounds[2]) / -3
-    const z_width = (bounds[5] - bounds[4]) / 2
-    return obj.map(p => {
-      p[0] = p[0] - bounds[0] - x_width
-      p[1] = -p[1] + bounds[1] + y_width
-      p[2] = p[2] - bounds[2] + z_width
-      return new THREE.Vector3(p[0], p[1], p[2])
-    })
-  }
-  //
-  function onMouseMove(e) {
-    mouse.x = e.clientX / window.innerWidth
-    mouse.y = e.clientY / window.innerHeight
-  }
-  function animate(t) {
-    requestAnimationFrame(animate)
-    renderer.render(scene, camera)
-    // scene.rotation.y += 0.01 * Math.PI
-    mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1
-    mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1
-    scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2
-    scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI
-    currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)"
-    // scene.rotation.y += 0.01
-    last_t = t
-  }
-}
-faceInit()
\ No newline at end of file
diff --git a/client/splash/index.js b/client/splash/index.js
index aee394bf..4e168354 100644
--- a/client/splash/index.js
+++ b/client/splash/index.js
@@ -1,10 +1,34 @@
-import * as THREE from 'three'
-import { MeshLine, MeshLineMaterial } from 'three.meshline'
-import TextSprite from 'three.textsprite'
-
 import oktween from '../util/vendor/oktween'
-import DRACOLoader from '../util/vendor/DRACOLoader'
-import GeometryHelper from '../util/vendor/geometryHelper'
 
-DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
+import OrbitControls from 'three-orbitcontrols'
+
+import { init, render, camera, renderer } from './renderer'
+
+import * as cloud from './cloud'
+
+const controls = new OrbitControls(camera, renderer.domElement)
+controls.maxDistance = camera.far / 2
+controls.enableDamping = true
+controls.dampingFactor = 1 / 8
+controls.rotateSpeed = 1 / 4
+controls.zoomSpeed = 1
+controls.keyPanSpeed = 1 / 2
+
+function animate() {
+  requestAnimationFrame(animate)
+
+  camera.position.z += -0.0025
+  camera.rotation.y += 0.00001
+
+  controls.update()
+
+  render()
+}
+
+function build() {
+  init()
+  cloud.init()
+  animate()
+}
 
+document.addEventListener('DOMContentLoaded', build)
diff --git a/client/splash/old/draco.js b/client/splash/old/draco.js
new file mode 100644
index 00000000..11c2463b
--- /dev/null
+++ b/client/splash/old/draco.js
@@ -0,0 +1,119 @@
+/*
+  dracoLoader.load( 'models/putin_2.drc', function ( geometry ) {
+
+    geometry.computeVertexNormals();
+
+    var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.VertexColors } );
+    var mesh = new THREE.Mesh( geometry, material );
+    mesh.castShadow = true;
+    mesh.receiveShadow = true;
+    scene.add( mesh );
+
+    // Release the cached decoder module.
+    THREE.DRACOLoader.releaseDecoderModule();
+
+  } );
+*/
+
+function load() {
+  // Enable logging to console output.
+  dracoLoader.setVerbosity(1);
+
+  // To use triangle strips use:
+  //   dracoLoader.setDrawMode(THREE.TriangleStripDrawMode);
+  dracoLoader.setDrawMode(THREE.TrianglesDrawMode);
+
+  // Skip dequantization of the position attribute. It will be done on the GPU.
+  dracoLoader.setSkipDequantization('position', true);
+  dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) {
+    if (dracoLoader.decode_time !== undefined) {
+      fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' +
+                                  'Import time = ' + dracoLoader.import_time;
+    }
+    var material = new THREE.MeshBasicMaterial({vertexColors: THREE.VertexColors});
+    material.wireframe = true
+    // If the position attribute is quantized, modify the material to perform
+    // dequantization on the GPU.
+    if (bufferGeometry.attributes['position'].isQuantized) {
+      setDequantizationForMaterial(material, bufferGeometry);
+    }
+
+    var geometry;
+    // Point cloud does not have face indices.
+    if (bufferGeometry.index == null) {
+      geometry = new THREE.Points(bufferGeometry, material);
+    } else {
+      if (bufferGeometry.attributes.normal === undefined) {
+        var geometryHelper = new GeometryHelper();
+        geometryHelper.computeVertexNormals(bufferGeometry);
+      }
+      geometry = new THREE.Mesh(bufferGeometry, material);
+      geometry.drawMode = dracoLoader.drawMode;
+    }
+
+    // Compute range of the geometry coordinates for proper rendering.
+    bufferGeometry.computeBoundingBox();
+    if (bufferGeometry.attributes['position'].isQuantized) {
+      // If the geometry is quantized, transform the bounding box to the dequantized
+      // coordinates.
+      var posAttribute = bufferGeometry.attributes['position'];
+      var normConstant =
+          posAttribute.maxRange / (1 << posAttribute.numQuantizationBits);
+      var minPos = posAttribute.minValues;
+      bufferGeometry.boundingBox.max.x =
+          minPos[0] + bufferGeometry.boundingBox.max.x * normConstant;
+      bufferGeometry.boundingBox.max.y =
+          minPos[1] + bufferGeometry.boundingBox.max.y * normConstant;
+      bufferGeometry.boundingBox.max.z =
+          minPos[2] + bufferGeometry.boundingBox.max.z * normConstant;
+      bufferGeometry.boundingBox.min.x =
+          minPos[0] + bufferGeometry.boundingBox.min.x * normConstant;
+      bufferGeometry.boundingBox.min.y =
+          minPos[1] + bufferGeometry.boundingBox.min.y * normConstant;
+      bufferGeometry.boundingBox.min.z =
+          minPos[2] + bufferGeometry.boundingBox.min.z * normConstant;
+    }
+    var sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x;
+    var sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y;
+    var sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z;
+    var diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ);
+    var scale = 1.0 / diagonalSize;
+    var midX =
+      (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2;
+    var midY =
+      (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2;
+    var midZ =
+      (bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2;
+
+    geometry.scale.multiplyScalar(scale);
+    geometry.position.x = -midX * scale;
+    geometry.position.y = -midY * scale;
+    geometry.position.z = -midZ * scale;
+    // geometry.castShadow = true;
+    // geometry.receiveShadow = true;
+
+    var selectedObject = scene.getObjectByName("my_mesh");
+    scene.remove(selectedObject);
+    geometry.name = "my_mesh";
+    scene.add(geometry);
+  });
+}
+
+function setDequantizationForMaterial(material, bufferGeometry) {
+  material.onBeforeCompile = function(shader) {
+    // Add uniform variables needed for dequantization.
+    var posAttribute = bufferGeometry.attributes['position'];
+    shader.uniforms.normConstant =
+      { value: posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) };
+    shader.uniforms.minPos = { value: posAttribute.minValues };
+
+    shader.vertexShader = 'uniform float maxRange;\n' +
+                          'uniform float normConstant;\n' +
+                          'uniform vec3 minPos;\n' +
+                          shader.vertexShader;
+    shader.vertexShader = shader.vertexShader.replace(
+        '#include <begin_vertex>',
+        'vec3 transformed = minPos + position * normConstant;'
+    );
+  }
+}
diff --git a/client/splash/old/faceMarkers.js b/client/splash/old/faceMarkers.js
new file mode 100644
index 00000000..e413173d
--- /dev/null
+++ b/client/splash/old/faceMarkers.js
@@ -0,0 +1,236 @@
+var mouse = new THREE.Vector2(0.5, 0.5)
+var mouseTarget = new THREE.Vector2(0.5, 0.5)
+var POINT_SCALE = 1.8
+var FACE_POINT_COUNT = 68
+var SWAP_TIME = 500
+var cubes = [], meshes = []
+var currentFace = document.querySelector('.currentFace')
+var introEl = document.querySelector('.intro')
+var faceBuffer = (function () {
+  var a = new Array(FACE_POINT_COUNT)
+  for (let i = 0; i < FACE_POINT_COUNT; i++) {
+    a[i] = new THREE.Vector3()
+  }
+  return a
+})()
+var lastSprite
+var last_t = 0, start_t = 0
+var bgColor = 0x000000 // 0x191919
+var colors = [
+  0xff3333,
+  0xff8833,
+  0xffff33,
+  0x338833,
+  0x3388ff,
+  0x3333ff,
+  0x8833ff,
+  0xff3388,
+  0xffffff,
+]
+var swapping = false, swap_count = 0, swapFrom, swapTo, face_names, faces
+init()
+
+function init() {
+  fetch("/assets/data/3dlm_0_10.json")
+    .then(req => req.json())
+    .then(data => {
+      face_names = Object.keys(data)
+      faces = face_names.map(name => recenter(data[name]))
+      setup()
+      build(faces[0])
+      updateFace(faces[0])
+      setCurrentFace(face_names[0])
+      swapTo = faces[0]
+      animate()
+    })
+}
+function setup() {
+  var w = window.innerWidth * 2/3
+  var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7)
+
+  // renderer.domElement.addEventListener('mousedown', swap)
+  // oktween.add({
+  //   obj: el.style,
+  //   units: "px",
+  //   from: { left: 0 },
+  //   to: { left: 100 },
+  //   duration: 1000,
+  //   easing: oktween.easing.circ_out,
+  //   update: function(obj){
+  //     console.log(obj.left)
+  //   }
+  //   finished: function(){
+  //     console.log("done")
+  //   }
+  // })
+  swap()
+}
+function build(points) {
+  var matrix = new THREE.Matrix4()
+  var quaternion = new THREE.Quaternion()
+
+  for (var i = 0; i < FACE_POINT_COUNT; i++) {
+    var p = points[i]
+    var geometry = new THREE.BoxBufferGeometry()
+    var position = new THREE.Vector3(p[0], p[1], p[2])
+    var rotation = new THREE.Euler()
+    var scale = new THREE.Vector3()
+    var color = new THREE.Color()
+    scale.x = scale.y = scale.z = POINT_SCALE
+    quaternion.setFromEuler(rotation, false)
+    matrix.compose(position, quaternion, scale)
+    geometry.applyMatrix(matrix)
+    material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) })
+    cube = new THREE.Mesh(geometry, material)
+    scene.add(cube)
+    cubes.push(cube)
+  }
+
+  meshes = getLineGeometry(points).map((geometry, i) => {
+    var color = new THREE.Color()
+    var material = new MeshLineMaterial({
+      color: color.setHex(colors[i % colors.length]),
+    })
+    var line = new MeshLine()
+    line.setGeometry(geometry, _ => 1.5)
+    var mesh = new THREE.Mesh(line.geometry, material)
+    mesh.geometry.dynamic = true
+    scene.add(mesh)
+    return [line, mesh]
+  })
+}
+function lerpPoints(n, A, B, C) {
+  for (let i = 0, len = A.length; i < len; i++) {
+    lerpPoint(n, A[i], B[i], C[i])
+  }
+}
+function lerpPoint(n, A, B, C) {
+  C.x = lerp(n, A.x, B.x)
+  C.y = lerp(n, A.y, B.y)
+  C.z = lerp(n, A.z, B.z)
+}
+function lerp(n, a, b) {
+  return (b-a) * n + a
+}
+function swap(){
+  swap_count = (swap_count + 1) % faces.length
+  swapFrom = swapTo || faces[0]
+  swapTo = faces[swap_count]
+  setCurrentFace(face_names[swap_count])
+  oktween.add({
+    from: { n: 0 },
+    to: { n: 1 },
+    duration: 1000,
+    easing: oktween.easing.quad_in_out,
+    update: function(obj){
+      lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
+      updateFace(faceBuffer)
+    },
+    finished: function(){
+      setTimeout(swap, 2000)
+    }
+  })
+}
+function setCurrentFace(name) {
+  name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ')
+  currentFace.innerHTML = name
+  // if (lastSprite) {
+  //   scene.remove(lastSprite)
+  // }
+  // var sprite = new THREE.TextSprite({
+  //   textSize: 12,
+  //   redrawInterval: 1000,
+  //   material: {
+  //     color: 0xcccccc,
+  //   },
+  //   texture: {
+  //     text: name,
+  //     fontFamily: '"Roboto", "Helvetica", sans-serif',
+  //   },
+  // });
+  // sprite.position
+  //   .setX(0)
+  //   .setY(0)
+  //   .setZ(0)
+  // scene.add(sprite);
+  // lastSprite = sprite
+}
+function updateFace(points) {
+  updateCubeGeometry(points)
+  updateLineGeometry(points)
+}
+function updateCubeGeometry(points) {
+  cubes.forEach((cube, i) => {
+    const p = points[i]
+    cube.position.set(p.x, p.y, p.z)
+  })
+}
+function updateLineGeometry(points) {
+  getLineGeometry(points).map((geometry, i) => {
+    var [line, mesh] = meshes[i]
+    line.setGeometry(geometry, _ => 1.5)
+    mesh.geometry.vertices = line.geometry.vertices
+    mesh.geometry.verticesNeedUpdate = true
+  })
+}
+function getLineGeometry(points) {
+  return [
+    points.slice(0, 17),
+    points.slice(17, 22),
+    points.slice(22, 27),
+    points.slice(27, 31),
+    points.slice(31, 36),
+    points.slice(36, 42),
+    points.slice(42, 48),
+    points.slice(48)
+  ].map((a, i) => {
+    var geometry = new THREE.Geometry()
+    a.forEach(p => geometry.vertices.push(p))
+    if (i > 4) {
+      geometry.vertices.push(a[0])
+    }
+    return geometry
+  })
+}
+function getBounds(obj) {
+  return obj.reduce((a, p) => {
+    return [
+      Math.min(a[0], p[0]),
+      Math.max(a[1], p[0]),
+      Math.min(a[2], p[1]),
+      Math.max(a[3], p[1]),
+      Math.min(a[4], p[2]),
+      Math.max(a[5], p[2]),
+    ]
+  }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity])
+}
+function recenter(obj) {
+  const bounds = getBounds(obj)
+  const x_width = (bounds[1] - bounds[0]) / 2
+  const y_width = (bounds[3] - bounds[2]) / -3
+  const z_width = (bounds[5] - bounds[4]) / 2
+  return obj.map(p => {
+    p[0] = p[0] - bounds[0] - x_width
+    p[1] = -p[1] + bounds[1] + y_width
+    p[2] = p[2] - bounds[2] + z_width
+    return new THREE.Vector3(p[0], p[1], p[2])
+  })
+}
+//
+function onMouseMove(e) {
+  mouse.x = e.clientX / window.innerWidth
+  mouse.y = e.clientY / window.innerHeight
+}
+function animate(t) {
+  requestAnimationFrame(animate)
+  renderer.render(scene, camera)
+  // scene.rotation.y += 0.01 * Math.PI
+  mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1
+  mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1
+  scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2
+  scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI
+  currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)"
+  // scene.rotation.y += 0.01
+  last_t = t
+}
+
diff --git a/client/splash/renderer.js b/client/splash/renderer.js
new file mode 100644
index 00000000..75a0fd0e
--- /dev/null
+++ b/client/splash/renderer.js
@@ -0,0 +1,43 @@
+import * as THREE from 'three'
+
+export const scene = new THREE.Scene()
+scene.fog = new THREE.Fog(0x191919, 2, 15)
+
+export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15)
+camera.position.set(3, 0.15, 3)
+
+// export const camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000)
+// camera.position.x = 0
+// camera.position.y = 0
+// camera.position.z = 200
+
+// let cameraTarget = new THREE.Vector3(0, 0, 0)
+
+export const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+renderer.setClearColor(scene.fog.color)
+// renderer.setClearColor(0x000000, 0)
+renderer.setPixelRatio(window.devicePixelRatio)
+renderer.setSize(window.innerWidth, window.innerHeight)
+
+let lights = [
+  new THREE.DirectionalLight(0xefefff, 1.5),
+  new THREE.DirectionalLight(0xefefff, 1.5),
+]
+lights[0].position.set(1, 1, 1).normalize()
+lights[1].position.set(-1, -1, -1).normalize()
+lights.forEach(light => scene.add(light))
+
+export function init() {
+  const container = document.querySelector('#three_container')
+  container.appendChild(renderer.domElement)
+  console.log('rednerer init')
+  window.addEventListener('resize', () => {
+    camera.aspect = window.innerWidth / window.innerHeight
+    camera.updateProjectionMatrix()
+    renderer.setSize(window.innerWidth, window.innerHeight)
+  }, false)
+}
+
+export function render() {
+  renderer.render(scene, camera)
+}