summaryrefslogtreecommitdiff
path: root/client/splash/face
diff options
context:
space:
mode:
Diffstat (limited to 'client/splash/face')
-rw-r--r--client/splash/face/index.js67
-rw-r--r--client/splash/face/markers.js48
-rw-r--r--client/splash/face/mesh.js91
-rw-r--r--client/splash/face/util.js6
4 files changed, 161 insertions, 51 deletions
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) {
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 16:14:57 +0000