transitions

8 files changed, 181 insertions, 66 deletions

diff --git a/client/splash/constants.js b/client/splash/constants.js
index a3724b72..520da350 100644
--- a/client/splash/constants.js
+++ b/client/splash/constants.js
@@ -4,8 +4,8 @@ export const CAMERA_NEAR = 0.001
 export const CAMERA_FAR = 1000
 
 export const CAMERA_X = 0
-export const CAMERA_Y = 0.2
-export const CAMERA_Z = 2
+export const CAMERA_Y = 0
+export const CAMERA_Z = 1.5
 
 export const FOG_COLOR = 0x191919
 
@@ -31,10 +31,10 @@ export const FACE_SCALE = 1
 
 /* face markers */
 
-export const FACE_MARKERS_SCALE = 0.82
+export const FACE_MARKERS_SCALE = 0.83
 export const FACE_OFFSET_X = 0
-export const FACE_OFFSET_Y = -0.0295
-export const FACE_OFFSET_Z = 0.0275
+export const FACE_OFFSET_Y = -0.058
+export const FACE_OFFSET_Z = 0.0525
 
 export const MARKER_POINT_COLOR = 0xffffff
 export const MARKER_COLORS = [
diff --git a/client/splash/face/index.js b/client/splash/face/index.js
index 4090a9fa..5e7792d3 100644
--- a/client/splash/face/index.js
+++ b/client/splash/face/index.js
@@ -1,3 +1,4 @@
+import oktween from '../../util/vendor/oktween'
 import { choice } from '../../util'
 import { faces, names } from './faces'
 import * as markers from './markers'
@@ -7,16 +8,70 @@ export function init() {
   const name = choice(names)
   const face = faces[name]
   markers.build(face)
-  mesh.load(name)
+  // mesh.load(name)
+  startAnimation()
 }
 
-export function load() {
+export function startAnimation() {
   const name = choice(names)
   const face = faces[name]
-  markers.swap(face)
-  // mesh.load(name)
+  mesh.remove()
+  mesh.load(name).then(meshes => {
+    meshes.wireframe.position.z -= 0.01
+    markers.swap(face)
+      .then({
+        from: { n: 0 },
+        to: { n: 1 },
+        duration: 500,
+        easing: oktween.easing.quad_in_out,
+        update: (obj) => {
+          meshes.blank.material.opacity = obj.n
+        },
+      })
+      .then({
+        from: { n: 0 },
+        to: { n: 1 },
+        duration: 500,
+        easing: oktween.easing.quad_in,
+        update: (obj) => {
+          meshes.blank.material.opacity = 1 - obj.n
+          meshes.solid.material.opacity = obj.n
+        },
+      })
+      .then({
+        from: { n: 0 },
+        to: { n: 1 },
+        delay: 500,
+        duration: 500,
+        easing: oktween.easing.quad_in_out,
+        update: (obj) => {
+          meshes.solid.material.opacity = 1 - obj.n
+          meshes.wireframe.material.opacity = obj.n
+        },
+        finished: () => {
+          mesh.removeMesh('solid')
+        }
+      })
+      .then({
+        from: { n: 1 },
+        to: { n: 0 },
+        delay: 5000,
+        duration: 500,
+        easing: oktween.easing.quad_in_out,
+        update: (obj) => {
+          meshes.wireframe.material.opacity = obj.n
+        },
+      })
+      .then({
+        obj: {},
+        duration: 0,
+        finished: () => {
+          startAnimation()
+        }
+      })
+  })
 }
 
-export function update() {
+// export function update() {
   // markers.update()
-}
+// }
diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js
index 22b9966c..20a96fb6 100644
--- a/client/splash/face/markers.js
+++ b/client/splash/face/markers.js
@@ -25,22 +25,14 @@ export function build(points) {
 
   const matrix = new THREE.Matrix4()
   const quaternion = new THREE.Quaternion()
-
-  const bbox = getBboxForPoints(points)
-  let { scale, midX, midY, midZ } = getBboxScaleAndCentroid(bbox)
-
-  scale /= 2
-  scale *= FACE_SCALE * FACE_MARKERS_SCALE
-
   const boxColor = new THREE.Color()
   boxColor.setHex(MARKER_POINT_COLOR)
-  const scaledPoints = points.map((p) => new THREE.Vector3(
-    (p[0] - midX) * scale + FACE_OFFSET_X,
-    (p[1] - midY) * scale * -1 + FACE_OFFSET_Y,
-    (p[2] - midZ) * scale + FACE_OFFSET_Z
-  ))
 
-  cubes = scaledPoints.map((position) => {
+  const scaledPoints = scalePoints(points)
+  swapTo = scaledPoints
+
+  cubes = scaledPoints.map(() => {
+    let position = new THREE.Vector3()
     let geometry = new THREE.BoxBufferGeometry()
     let rotation = new THREE.Euler()
     let boxScale = new THREE.Vector3()
@@ -48,7 +40,7 @@ export function build(points) {
     boxScale.y = POINT_SCALE
     boxScale.z = POINT_SCALE
     quaternion.setFromEuler(rotation, false)
-    matrix.compose(position, quaternion, boxScale)
+    matrix.compose(position.clone(), quaternion, boxScale)
     geometry.applyMatrix(matrix)
     let material = new THREE.MeshBasicMaterial({ color: boxColor })
     let cube = new THREE.Mesh(geometry, material)
@@ -65,9 +57,6 @@ export function build(points) {
     line.setGeometry(geometry, () => LINE_THICKNESS)
     const mesh = new THREE.Mesh(line.geometry, material)
     mesh.geometry.dynamic = true
-    mesh.scale.x = 2
-    mesh.scale.y = 2
-    mesh.scale.z = 2
     group.add(mesh)
     return [line, mesh]
   })
@@ -78,20 +67,35 @@ export function build(points) {
   updateFace(scaledPoints, cubes, meshes)
 }
 
-export function swap(face) {
+function scalePoints(points) {
+  const bbox = getBboxForPoints(points)
+  let { scale, midX, midY, midZ } = getBboxScaleAndCentroid(bbox)
+
+  scale *= FACE_SCALE * FACE_MARKERS_SCALE
+
+  const scaledPoints = points.map((p) => new THREE.Vector3(
+    (p[0] - midX) * scale + FACE_OFFSET_X,
+    (p[1] - midY) * scale * -1 + FACE_OFFSET_Y,
+    (p[2] - midZ) * scale + FACE_OFFSET_Z
+  ))
+  return scaledPoints
+}
+
+export function swap(points) {
+  const scaledPoints = scalePoints(points)
   swapFrom = swapTo
-  swapTo = face
-  oktween.add({
+  swapTo = scaledPoints
+  return oktween.add({
     from: { n: 0 },
     to: { n: 1 },
-    duration: 1000,
+    duration: 2000,
     easing: oktween.easing.quad_in_out,
     update: (obj) => {
       lerpPoints(obj.n, swapFrom, swapTo, faceBuffer)
       updateFace(faceBuffer, cubes, meshes)
     },
     finished: () => {
-      setTimeout(swap, 2000)
+      // setTimeout(swap, 2000)
     }
   })
 }
diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js
index 69a40900..92aff020 100644
--- a/client/splash/face/mesh.js
+++ b/client/splash/face/mesh.js
@@ -1,4 +1,4 @@
-import { Points, Mesh, MeshBasicMaterial, VertexColors, TrianglesDrawMode } from 'three'
+import { Points, Mesh, MeshBasicMaterial, MeshStandardMaterial, VertexColors, TrianglesDrawMode, DoubleSide } from 'three'
 
 import { scene } from '../renderer'
 
@@ -18,34 +18,65 @@ export function load(name) {
   dracoLoader.setVerbosity(1)
   dracoLoader.setDrawMode(TrianglesDrawMode)
   dracoLoader.setSkipDequantization('position', true)
-  dracoLoader.load('/assets/data/faces/' + name + '.drc', dracoDidLoad)
+  return new Promise((resolve, reject) => {
+    dracoLoader.load('/assets/data/faces/' + name + '.drc', (geometry) => {
+      resolve(createFaceMeshes(geometry))
+    })
+  })
 }
 
 export function update(name) {
   load(name)
 }
 
-function setDequantizationForMaterial(material, bufferGeometry) {
-  material.onBeforeCompile = (shader) => {
-    // Add uniform variables needed for dequantization.
-    const 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;'
-    )
+function createFaceMeshes(geometry) {
+  return {
+    blank: createBlankFace(geometry),
+    wireframe: createWireframeFace(geometry),
+    solid: createSolidFace(geometry),
   }
 }
+export function remove() {
+  removeMesh('blank')
+  removeMesh('wireframe')
+  removeMesh('solid')
+}
 
-function dracoDidLoad(bufferGeometry) {
+export function removeMesh(name) {
+  const selectedObject = scene.getObjectByName(name)
+  scene.remove(selectedObject)
+}
+
+function createBlankFace(geometry) {
+  const material = new MeshStandardMaterial({
+    color: 0xFFFFFF,
+    metalness: 0.2,
+    roughness: 0.5,
+  })
+  material.wireframe = false
+  material.transparent = true
+  material.opacity = 0
+  material.side = DoubleSide
+  return appendFace('blank', geometry, material)
+}
+
+function createWireframeFace(geometry) {
   const material = new MeshBasicMaterial({ vertexColors: VertexColors })
   material.wireframe = true
+  material.transparent = true
+  material.opacity = 0
+  return appendFace('wireframe', geometry, material)
+}
+
+function createSolidFace(geometry) {
+  const material = new MeshBasicMaterial({ vertexColors: VertexColors })
+  material.transparent = true
+  material.opacity = 0
+  material.side = DoubleSide
+  return appendFace('solid', geometry, material)
+}
+
+function appendFace(name, bufferGeometry, material) {
   // If the position attribute is quantized, modify the material to perform
   // dequantization on the GPU.
   if (bufferGeometry.attributes.position.isQuantized) {
@@ -77,8 +108,28 @@ function dracoDidLoad(bufferGeometry) {
   // geometry.castShadow = true
   // geometry.receiveShadow = true
 
-  const selectedObject = scene.getObjectByName("my_mesh")
+  const selectedObject = scene.getObjectByName(name)
   scene.remove(selectedObject)
-  geometry.name = "my_mesh"
+  geometry.name = name
   scene.add(geometry)
+  return geometry
+}
+
+function setDequantizationForMaterial(material, bufferGeometry) {
+  material.onBeforeCompile = (shader) => {
+    // Add uniform variables needed for dequantization.
+    const 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/face/util.js b/client/splash/face/util.js
index 38b1e376..ee286152 100644
--- a/client/splash/face/util.js
+++ b/client/splash/face/util.js
@@ -22,9 +22,9 @@ export function getLineGeometry(points) {
   })
 }
 
-export function updateFace(buf, cubes, meshes) {
-  updateCubeGeometry(buf, cubes)
-  updateLineGeometry(buf, meshes)
+export function updateFace(points, cubes, meshes) {
+  updateCubeGeometry(points, cubes)
+  updateLineGeometry(points, meshes)
 }
 
 export function updateLineGeometry(points, meshes) {
diff --git a/client/splash/index.js b/client/splash/index.js
index b559f5ee..88211337 100644
--- a/client/splash/index.js
+++ b/client/splash/index.js
@@ -1,5 +1,3 @@
-// import oktween from '../util/vendor/oktween'
-
 import { Vector3 } from 'three'
 import OrbitControls from 'three-orbitcontrols'
 
@@ -31,7 +29,7 @@ function animate() {
 
   controls.update()
   cloud.update()
-  face.update()
+  // face.update()
 
   let cameraTarget = new Vector3(0, 0, 0)
   camera.lookAt(cameraTarget)
diff --git a/client/splash/renderer.js b/client/splash/renderer.js
index ad111f1a..5e973d77 100644
--- a/client/splash/renderer.js
+++ b/client/splash/renderer.js
@@ -17,10 +17,13 @@ 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[0].position.set(3, 3, 3).normalize()
+lights[1].position.set(-3, -3, -3).normalize()
 lights.forEach(light => scene.add(light))
 
+var ambient = new THREE.AmbientLight( 0x555555 );
+scene.add(ambient);
+
 export function init() {
   const container = document.querySelector('#three_container')
   container.appendChild(renderer.domElement)
diff --git a/client/util/vendor/oktween.js b/client/util/vendor/oktween.js
index cbf5d835..2d787db2 100644
--- a/client/util/vendor/oktween.js
+++ b/client/util/vendor/oktween.js
@@ -73,11 +73,15 @@ oktween.update = (t) => {
       if (tween.units) val = (Math.round(val)) + tween.units
       tween.obj[prop] = val
     })
-    tween.update && tween.update(tween.obj, dt)
-    if (dt == 1) {
-      tween.finished && tween.finished(tween)
+    if (tween.update) {
+      tween.update(tween.obj, dt)
+    }
+    if (dt === 1) {
+      if (tween.finished) {
+        tween.finished(tween)
+      }
       if (tween.after.length) {
-        var twn = tween.after.shift()
+        const twn = tween.after.shift()
         twn.obj = twn.obj || tween.obj
         twn.after = tween.after
         oktween.add(twn)
@@ -92,7 +96,7 @@ oktween.update = (t) => {
     }
   })
   if (done) {
-    tweens = tweens.filter(function(tween){ return ! tween.done })
+    tweens = tweens.filter(tween => !tween.done)
   }
 }