moar constants etc

10 files changed, 249 insertions, 72 deletions

diff --git a/client/splash/cloud/index.js b/client/splash/cloud/index.js
index 7bbc56c9..f753e77c 100644
--- a/client/splash/cloud/index.js
+++ b/client/splash/cloud/index.js
@@ -1,19 +1,31 @@
+import { Object3D } from 'three'
+
 import TextSprite from 'three.textsprite'
 
 import datasetList from './datasetList'
 import { choice } from '../../util'
 
+import {
+  CLOUD_COLORS,
+  CLOUD_ROTATION_SPEED,
+  CLOUD_MAX_COUNT,
+  CLOUD_TEXT_MIN_SIZE,
+  CLOUD_TEXT_MAX_SIZE,
+} from '../constants'
+
 import { scene } from '../renderer'
 
 export const fontFamily = 'Helvetica, Arial, sans-serif'
 
+let cloud = new Object3D()
+
 export function init() {
-  let sprites = Array.from({ length: Math.min(datasetList.length, 80) }, (t, i) => {
+  let sprites = Array.from({ length: Math.min(datasetList.length, CLOUD_MAX_COUNT) }, (t, i) => {
     const sprite = new TextSprite({
-      textSize: 0.03 + Math.random() * 0.04,
+      textSize: CLOUD_TEXT_MIN_SIZE + Math.random() * (CLOUD_TEXT_MAX_SIZE - CLOUD_TEXT_MIN_SIZE),
       redrawInterval: 1,
       material: {
-        color: choice([ 0xffffff, 0xffffff, 0xffffff, 0xdddde6, 0x888896 ]),
+        color: choice(CLOUD_COLORS),
       },
       texture: {
         text: datasetList[i],
@@ -27,8 +39,13 @@ export function init() {
       .subScalar(1 / 2)
       .setLength(1 + Math.random())
       .multiplyScalar(1)
-    scene.add(sprite)
+    cloud.add(sprite)
     return sprite
   })
-  return sprites
+  scene.add(cloud)
+  return cloud
+}
+
+export function update() {
+  cloud.rotation.y += CLOUD_ROTATION_SPEED
 }
diff --git a/client/splash/constants.js b/client/splash/constants.js
new file mode 100644
index 00000000..c250ea4a
--- /dev/null
+++ b/client/splash/constants.js
@@ -0,0 +1,40 @@
+/* global constants */
+
+export const FOG_COLOR = 0x191919
+
+/* tag cloud */
+
+export const CLOUD_COLORS = [
+  0xffffff,
+  0xffffff,
+  0xffffff,
+  0xdddde6,
+  0x888896,
+]
+
+export const CLOUD_ROTATION_SPEED = 0.001
+export const CLOUD_MAX_COUNT = 80
+export const CLOUD_TEXT_MIN_SIZE = 0.01
+export const CLOUD_TEXT_MAX_SIZE = 0.04
+
+/* face */
+
+export const FACE_SCALE = 0.0008
+
+/* face markers */
+
+export const MARKER_COLORS = [
+  0xff3333,
+  0xff8833,
+  0xffff33,
+  0x338833,
+  0x3388ff,
+  0x3333ff,
+  0x8833ff,
+  0xff3388,
+  0xffffff,
+]
+
+export const POINT_SCALE = 0.009
+export const LINE_THICKNESS = 0.009
+export const FACE_POINT_COUNT = 68
diff --git a/client/splash/face/faces.js b/client/splash/face/faces.js
index 28de0cdc..d5ba5320 100644
--- a/client/splash/face/faces.js
+++ b/client/splash/face/faces.js
@@ -1,3 +1,11 @@
-export default {
-  putin: [6.229589182834997700e+02,1.237765302967744901e+03,4.134526977539062500e+02],[6.376896424835800872e+02,1.410526376450482758e+03,3.891479492187500000e+02],[6.739611274719236462e+02,1.582250497753667105e+03,3.769988098144531250e+02],[7.100658831128885140e+02,1.741763669768688942e+03,3.758922424316406250e+02],[7.536649862551219030e+02,1.917029460341510003e+03,4.252069091796875000e+02],[8.298141803217866936e+02,2.059907416716931493e+03,5.431895141601562500e+02],[9.258791576609889944e+02,2.164709160946117208e+03,7.162614746093750000e+02],[1.070414319266524672e+03,2.251194729721967633e+03,8.754176635742187500e+02],[1.274411328424191879e+03,2.298006267580519307e+03,9.157481689453125000e+02],[1.458846686449237723e+03,2.247376503427543867e+03,8.904161376953125000e+02],[1.613419451724781766e+03,2.154859059460210574e+03,7.340153198242187500e+02],[1.719510602704216581e+03,2.046877580339021051e+03,5.658121948242187500e+02],[1.802992956004423377e+03,1.898674323395374358e+03,4.472657165527343750e+02],[1.839803416592467329e+03,1.728563973209157211e+03,4.044224853515625000e+02],[1.867230816650390807e+03,1.567819041550580550e+03,4.134500732421875000e+02],[1.892678734334310093e+03,1.401836273899452635e+03,4.331260375976562500e+02],[1.900552931542490114e+03,1.223502216072830606e+03,4.526267700195312500e+02],[7.511424780752142851e+02,1.160890923207600963e+03,1.001351135253906250e+03],[8.158950379315542705e+02,1.135870041375253777e+03,1.114991333007812500e+03],[9.076874701406441091e+02,1.127822704063864421e+03,1.194016601562500000e+03],[9.926902658799115216e+02,1.143210580432368261e+03,1.233907104492187500e+03],[1.063656488096947669e+03,1.162017750208237658e+03,1.248264404296875000e+03],[1.395103497613645231e+03,1.151143294423421366e+03,1.261149414062500000e+03],[1.466387226179534309e+03,1.130542678432090725e+03,1.248993530273437500e+03],[1.552676099051681376e+03,1.115153013015447868e+03,1.213308837890625000e+03],[1.652305108762255031e+03,1.120968661861045803e+03,1.146292236328125000e+03],[1.727642721019071814e+03,1.143332434488932449e+03,1.041585449218750000e+03],[1.244122246476715645e+03,1.334647129869648325e+03,1.250885375976562500e+03],[1.249189824721392597e+03,1.465660963816923413e+03,1.309278930664062500e+03],[1.252202780570235745e+03,1.585706690278895167e+03,1.358756103515625000e+03],[1.259493648693608066e+03,1.685694304749732282e+03,1.360432617187500000e+03],[1.148455034173703552e+03,1.740496228553921810e+03,1.155312866210937500e+03],[1.194674198315190097e+03,1.755804119561887546e+03,1.196942993164062500e+03],[1.258795422961665054e+03,1.777236518698300188e+03,1.212644042968750000e+03],[1.305280558926451249e+03,1.757635707289752190e+03,1.198189453125000000e+03],[1.356348142915613380e+03,1.737675595379997958e+03,1.164412109375000000e+03],[8.664502087162989028e+02,1.296397628532858562e+03,1.039572875976562500e+03],[9.217092343199485640e+02,1.262228697521733466e+03,1.107280639648437500e+03],[9.986516724530387137e+02,1.265434423307531233e+03,1.120204345703125000e+03],[1.074714246772317438e+03,1.306653943337833425e+03,1.091015014648437500e+03],[1.007696155622893571e+03,1.330022539822447698e+03,1.095014892578125000e+03],[9.264212392470415125e+02,1.326119930090810840e+03,1.079521362304687500e+03],[1.405216489784390433e+03,1.300602885574640140e+03,1.104635620117187500e+03],[1.476379755775601325e+03,1.256362955328249654e+03,1.138428955078125000e+03],[1.554564041795917774e+03,1.249119944242589781e+03,1.133978515625000000e+03],[1.616356373027726704e+03,1.280854080128389342e+03,1.071557495117187500e+03],[1.554167071892233480e+03,1.313725106410606259e+03,1.107841308593750000e+03],[1.472497819489123913e+03,1.322406412808287541e+03,1.114204223632812500e+03],[1.037582353868671362e+03,1.936206664907418599e+03,1.033433837890625000e+03],[1.116472667858647128e+03,1.915096195044424576e+03,1.131442626953125000e+03],[1.209116239719764735e+03,1.900456612907858926e+03,1.186649047851562500e+03],[1.263021651623295838e+03,1.914385048409256797e+03,1.188636718750000000e+03],[1.300469609698127215e+03,1.904690494719861135e+03,1.189560302734375000e+03],[1.398002848905675364e+03,1.918324532410865231e+03,1.142420776367187500e+03],[1.480066685814951143e+03,1.930527828548656316e+03,1.061488159179687500e+03],[1.389899255969477508e+03,1.978273845885034234e+03,1.124004760742187500e+03],[1.327246293191348741e+03,2.005233211071538562e+03,1.142569091796875000e+03],[1.262139949065563542e+03,2.009971803241804992e+03,1.149364868164062500e+03],[1.180817821697160070e+03,2.011372329759785316e+03,1.134800781250000000e+03],[1.120554480578852463e+03,1.984728334003523742e+03,1.106011474609375000e+03],[1.061098198954264262e+03,1.933346772066004633e+03,1.042356811523437500e+03],[1.192023425322887761e+03,1.945863449802773175e+03,1.133595458984375000e+03],[1.264533596083696921e+03,1.947978800443761884e+03,1.155409667968750000e+03],[1.322869685094496617e+03,1.947868674591663421e+03,1.140181640625000000e+03],[1.466934774301566449e+03,1.932516156771791202e+03,1.067155761718750000e+03],[1.321161541688208445e+03,1.941148711607690529e+03,1.139805419921875000e+03],[1.264645510983934400e+03,1.947900976849724657e+03,1.145079345703125000e+03],[1.191629635949228032e+03,1.946293020139208465e+03,1.132726318359375000e+03]]
-}
\ No newline at end of file
+import { recenter } from './util'
+
+const rawFaces = {
+  putin: [[6.229589182834997700e02, 1.237765302967744901e03, 4.134526977539062500e02], [6.376896424835800872e02, 1.410526376450482758e03, 3.891479492187500000e02], [6.739611274719236462e02, 1.582250497753667105e03, 3.769988098144531250e02], [7.100658831128885140e02, 1.741763669768688942e03, 3.758922424316406250e02], [7.536649862551219030e02, 1.917029460341510003e03, 4.252069091796875000e02], [8.298141803217866936e02, 2.059907416716931493e03, 5.431895141601562500e02], [9.258791576609889944e02, 2.164709160946117208e03, 7.162614746093750000e02], [1.070414319266524672e03, 2.251194729721967633e03, 8.754176635742187500e02], [1.274411328424191879e03, 2.298006267580519307e03, 9.157481689453125000e02], [1.458846686449237723e03, 2.247376503427543867e03, 8.904161376953125000e02], [1.613419451724781766e03, 2.154859059460210574e03, 7.340153198242187500e02], [1.719510602704216581e03, 2.046877580339021051e03, 5.658121948242187500e02], [1.802992956004423377e03, 1.898674323395374358e03, 4.472657165527343750e02], [1.839803416592467329e03, 1.728563973209157211e03, 4.044224853515625000e02], [1.867230816650390807e03, 1.567819041550580550e03, 4.134500732421875000e02], [1.892678734334310093e03, 1.401836273899452635e03, 4.331260375976562500e02], [1.900552931542490114e03, 1.223502216072830606e03, 4.526267700195312500e02], [7.511424780752142851e02, 1.160890923207600963e03, 1.001351135253906250e03], [8.158950379315542705e02, 1.135870041375253777e03, 1.114991333007812500e03], [9.076874701406441091e02, 1.127822704063864421e03, 1.194016601562500000e03], [9.926902658799115216e02, 1.143210580432368261e03, 1.233907104492187500e03], [1.063656488096947669e03, 1.162017750208237658e03, 1.248264404296875000e03], [1.395103497613645231e03, 1.151143294423421366e03, 1.261149414062500000e03], [1.466387226179534309e03, 1.130542678432090725e03, 1.248993530273437500e03], [1.552676099051681376e03, 1.115153013015447868e03, 1.213308837890625000e03], [1.652305108762255031e03, 1.120968661861045803e03, 1.146292236328125000e03], [1.727642721019071814e03, 1.143332434488932449e03, 1.041585449218750000e03], [1.244122246476715645e03, 1.334647129869648325e03, 1.250885375976562500e03], [1.249189824721392597e03, 1.465660963816923413e03, 1.309278930664062500e03], [1.252202780570235745e03, 1.585706690278895167e03, 1.358756103515625000e03], [1.259493648693608066e03, 1.685694304749732282e03, 1.360432617187500000e03], [1.148455034173703552e03, 1.740496228553921810e03, 1.155312866210937500e03], [1.194674198315190097e03, 1.755804119561887546e03, 1.196942993164062500e03], [1.258795422961665054e03, 1.777236518698300188e03, 1.212644042968750000e03], [1.305280558926451249e03, 1.757635707289752190e03, 1.198189453125000000e03], [1.356348142915613380e03, 1.737675595379997958e03, 1.164412109375000000e03], [8.664502087162989028e02, 1.296397628532858562e03, 1.039572875976562500e03], [9.217092343199485640e02, 1.262228697521733466e03, 1.107280639648437500e03], [9.986516724530387137e02, 1.265434423307531233e03, 1.120204345703125000e03], [1.074714246772317438e03, 1.306653943337833425e03, 1.091015014648437500e03], [1.007696155622893571e03, 1.330022539822447698e03, 1.095014892578125000e03], [9.264212392470415125e02, 1.326119930090810840e03, 1.079521362304687500e03], [1.405216489784390433e03, 1.300602885574640140e03, 1.104635620117187500e03], [1.476379755775601325e03, 1.256362955328249654e03, 1.138428955078125000e03], [1.554564041795917774e03, 1.249119944242589781e03, 1.133978515625000000e03], [1.616356373027726704e03, 1.280854080128389342e03, 1.071557495117187500e03], [1.554167071892233480e03, 1.313725106410606259e03, 1.107841308593750000e03], [1.472497819489123913e03, 1.322406412808287541e03, 1.114204223632812500e03], [1.037582353868671362e03, 1.936206664907418599e03, 1.033433837890625000e03], [1.116472667858647128e03, 1.915096195044424576e03, 1.131442626953125000e03], [1.209116239719764735e03, 1.900456612907858926e03, 1.186649047851562500e03], [1.263021651623295838e03, 1.914385048409256797e03, 1.188636718750000000e03], [1.300469609698127215e03, 1.904690494719861135e03, 1.189560302734375000e03], [1.398002848905675364e03, 1.918324532410865231e03, 1.142420776367187500e03], [1.480066685814951143e03, 1.930527828548656316e03, 1.061488159179687500e03], [1.389899255969477508e03, 1.978273845885034234e03, 1.124004760742187500e03], [1.327246293191348741e03, 2.005233211071538562e03, 1.142569091796875000e03], [1.262139949065563542e03, 2.009971803241804992e03, 1.149364868164062500e03], [1.180817821697160070e03, 2.011372329759785316e03, 1.134800781250000000e03], [1.120554480578852463e03, 1.984728334003523742e03, 1.106011474609375000e03], [1.061098198954264262e03, 1.933346772066004633e03, 1.042356811523437500e03], [1.192023425322887761e03, 1.945863449802773175e03, 1.133595458984375000e03], [1.264533596083696921e03, 1.947978800443761884e03, 1.155409667968750000e03], [1.322869685094496617e03, 1.947868674591663421e03, 1.140181640625000000e03], [1.466934774301566449e03, 1.932516156771791202e03, 1.067155761718750000e03], [1.321161541688208445e03, 1.941148711607690529e03, 1.139805419921875000e03], [1.264645510983934400e03, 1.947900976849724657e03, 1.145079345703125000e03], [1.191629635949228032e03, 1.946293020139208465e03, 1.132726318359375000e03]],
+}
+
+export const names = Object.keys(rawFaces)
+
+export const faces = {}
+
+names.map(name => faces[name] = recenter(rawFaces[name]))
diff --git a/client/splash/face/index.js b/client/splash/face/index.js
index f52ac57b..49246e10 100644
--- a/client/splash/face/index.js
+++ b/client/splash/face/index.js
@@ -1,8 +1,18 @@
-import faces from './faces'
+import { choice } from '../../util'
+import { faces, names } from './faces'
+import * as markers from './markers'
+import * as mesh from './mesh'
 
-const names = Object.keys(faces)
+export function init() {
+  const name = names[0]
+  const face = faces[name]
+  markers.build(face)
+  mesh.load(name)
+}
 
-function load(){
+export function load() {
   const name = choice(names)
-  
-}
\ No newline at end of file
+  const face = faces[name]
+  markers.swap(face)
+  mesh.load(name)
+}
diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
index 5fdf1777..6e226228 100644
--- a/client/splash/face/markers.js
+++ b/client/splash/face/markers.js
@@ -4,38 +4,25 @@ import { MeshLine, MeshLineMaterial } from 'three.meshline'
 import oktween from '../../util/vendor/oktween'
 import { scene } from '../renderer'
 
-import { getLineGeometry, updateLineGeometry, lerpPoints, updateCubeGeometry, getBounds } from './geometry'
+import { getLineGeometry, updateFace, lerpPoints } from './util'
 
-const POINT_SCALE = 1.8
-const FACE_POINT_COUNT = 68
+import { POINT_SCALE, LINE_THICKNESS, FACE_POINT_COUNT, MARKER_COLORS } from '../constants'
 
 let cubes
 let meshes = []
 
 const faceBuffer = Array.from({ length: FACE_POINT_COUNT }, () => new THREE.Vector3())
 
-let colors = [
-  0xff3333,
-  0xff8833,
-  0xffff33,
-  0x338833,
-  0x3388ff,
-  0x3333ff,
-  0x8833ff,
-  0xff3388,
-  0xffffff,
-]
 let swapFrom
 let swapTo
 
 export function build(points) {
-  swapFrom = points
   swapTo = points
 
   const matrix = new THREE.Matrix4()
   const quaternion = new THREE.Quaternion()
 
-  cubes = points.map((p, i) => {
+  cubes = points.map((p) => {
     let geometry = new THREE.BoxBufferGeometry()
     let position = new THREE.Vector3(p[0], p[1], p[2])
     let rotation = new THREE.Euler()
@@ -56,18 +43,22 @@ export function build(points) {
   meshes = getLineGeometry(points).map((geometry, i) => {
     const color = new THREE.Color()
     const material = new MeshLineMaterial({
-      color: color.setHex(colors[i % colors.length]),
+      color: color.setHex(MARKER_COLORS[i % MARKER_COLORS.length]),
     })
     const line = new MeshLine()
-    line.setGeometry(geometry, _ => 1.5)
+    line.setGeometry(geometry, () => LINE_THICKNESS)
     const mesh = new THREE.Mesh(line.geometry, material)
     mesh.geometry.dynamic = true
     scene.add(mesh)
     return [line, mesh]
   })
+
+  updateFace(points, cubes, meshes)
 }
 
-export function swap() {
+export function swap(face) {
+  swapFrom = swapTo
+  swapTo = face
   oktween.add({
     from: { n: 0 },
     to: { n: 1 },
@@ -75,28 +66,10 @@ export function swap() {
     easing: oktween.easing.quad_in_out,
     update: (obj) => {
       lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
-      updateFace(faceBuffer)
+      updateFace(faceBuffer, cubes, meshes)
     },
     finished: () => {
       setTimeout(swap, 2000)
     }
   })
 }
-
-export function updateFace(buf) {
-  updateCubeGeometry(buf, cubes)
-  updateLineGeometry(buf, meshes)
-}
-
-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])
-  })
-}
diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js
index 82e7fa6a..de8cd28c 100644
--- a/client/splash/face/mesh.js
+++ b/client/splash/face/mesh.js
@@ -1,6 +1,128 @@
+import { Mesh, MeshBasicMaterial, VertexColors, TrianglesDrawMode } from 'three'
+
+import { scene } from '../renderer'
+
 import DRACOLoader from '../../util/vendor/DRACOLoader'
 import GeometryHelper from '../../util/vendor/geometryHelper'
 
 DRACOLoader.setDecoderPath('/assets/js/vendor/draco/')
 const dracoLoader = new DRACOLoader()
 DRACOLoader.getDecoderModule()
+
+export function load(name) {
+  dracoLoader.load('/assets/data/faces/' + name + '.drc', (geometry) => {
+    geometry.computeVertexNormals()
+
+    const material = new MeshBasicMaterial({ vertexColors: VertexColors })
+    const mesh = new Mesh(geometry, material)
+    scene.add(mesh)
+    console.log(name)
+
+    // Release the cached decoder module.
+    DRACOLoader.releaseDecoderModule()
+  })
+}
+
+export function update(name) {
+  load(name)
+}
+
+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;'
+    );
+  }
+}
+
+export function loadFromPath() {
+  // 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: 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);
+  });
+}
diff --git a/client/splash/face/geometry.js b/client/splash/face/util.js
index a6a97946..e6237316 100644
--- a/client/splash/face/geometry.js
+++ b/client/splash/face/util.js
@@ -1,5 +1,6 @@
 
-import { Geometry } from 'three'
+import { Vector3, Geometry } from 'three'
+import { FACE_SCALE, LINE_THICKNESS } from '../constants'
 
 export function getLineGeometry(points) {
   return [
@@ -24,7 +25,7 @@ export function getLineGeometry(points) {
 export function updateLineGeometry(points, meshes) {
   getLineGeometry(points).forEach((geometry, i) => {
     const [line, mesh] = meshes[i]
-    line.setGeometry(geometry, () => 1.5)
+    line.setGeometry(geometry, () => LINE_THICKNESS)
     mesh.geometry.vertices = line.geometry.vertices
     mesh.geometry.verticesNeedUpdate = true
   })
@@ -53,6 +54,11 @@ export function updateCubeGeometry(points, cubes) {
   })
 }
 
+export function updateFace(buf, cubes, meshes) {
+  updateCubeGeometry(buf, cubes)
+  updateLineGeometry(buf, meshes)
+}
+
 export function getBounds(obj) {
   return obj.reduce((a, p) => {
     return [
@@ -65,3 +71,16 @@ export function getBounds(obj) {
     ]
   }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity])
 }
+
+export function recenter(obj) {
+  const bounds = getBounds(obj)
+  const xWidth = (bounds[1] - bounds[0]) / 2
+  const yWidth = (bounds[3] - bounds[2]) / -3
+  const zWidth = (bounds[5] - bounds[4]) / 2
+  return obj.map(p => {
+    p[0] = p[0] - bounds[0] - xWidth
+    p[1] = -p[1] + bounds[1] + yWidth
+    p[2] = p[2] - bounds[2] + zWidth
+    return new Vector3(p[0] * FACE_SCALE, p[1] * FACE_SCALE, p[2] * FACE_SCALE)
+  })
+}
diff --git a/client/splash/index.js b/client/splash/index.js
index caa1d497..76c84ec0 100644
--- a/client/splash/index.js
+++ b/client/splash/index.js
@@ -6,6 +6,7 @@ import OrbitControls from 'three-orbitcontrols'
 import { init, render, camera, renderer } from './renderer'
 
 import * as cloud from './cloud'
+import * as face from './face'
 
 const controls = new OrbitControls(camera, renderer.domElement)
 controls.maxDistance = camera.far / 2
@@ -22,6 +23,7 @@ function animate() {
   camera.rotation.y += 0.00001
 
   controls.update()
+  cloud.update()
 
   let cameraTarget = new Vector3(0, 0, 0)
   camera.lookAt(cameraTarget)
@@ -32,6 +34,7 @@ function animate() {
 function build() {
   init()
   cloud.init()
+  face.init()
   animate()
 }
 
diff --git a/client/splash/old/draco.js b/client/splash/old/draco.js
index 11c2463b..3f9bfad8 100644
--- a/client/splash/old/draco.js
+++ b/client/splash/old/draco.js
@@ -1,20 +1,3 @@
-/*
-  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);
diff --git a/client/splash/renderer.js b/client/splash/renderer.js
index 8d2a3393..369d02fa 100644
--- a/client/splash/renderer.js
+++ b/client/splash/renderer.js
@@ -1,9 +1,11 @@
 import * as THREE from 'three'
 
+import { FOG_COLOR } from './constants'
+
 export const scene = new THREE.Scene()
-scene.fog = new THREE.Fog(0x191919, 2, 15)
+scene.fog = new THREE.Fog(FOG_COLOR, 2, 15)
 
-export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 15)
+export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.01, 15)
 camera.position.set(3, 0.15, 3)
 
 // export const camera = new THREE.PerspectiveCamera(70, w / h, 1, 10000)