From 618af6682e6de7662da961abd7e7de3a2f996bac Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 27 Jan 2019 19:10:16 +0100 Subject: render smaller tag cloud --- client/splash/face/index.js | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 client/splash/face/index.js (limited to 'client/splash/face/index.js') 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(); -- cgit v1.2.3-70-g09d2 From 93a7fae69e5c3a45515a309cfcd96a0fa90a602b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 27 Jan 2019 19:38:08 +0100 Subject: add mesh of your typical everyman --- .gitignore | 3 + client/splash/face/faces.js | 3 + client/splash/face/geometry.js | 67 +++++++++++ client/splash/face/index.js | 11 +- client/splash/face/markers.js | 101 +++++++++++++++++ client/splash/face/mesh.js | 2 - client/splash/old/faceMarkers.js | 236 --------------------------------------- client/splash/renderer.js | 1 - site/assets/data/faces/putin.drc | Bin 0 -> 188140 bytes 9 files changed, 181 insertions(+), 243 deletions(-) create mode 100644 client/splash/face/faces.js create mode 100644 client/splash/face/geometry.js delete mode 100644 client/splash/old/faceMarkers.js create mode 100644 site/assets/data/faces/putin.drc (limited to 'client/splash/face/index.js') diff --git a/.gitignore b/.gitignore index 79b0646b..8c5b15f6 100644 --- a/.gitignore +++ b/.gitignore @@ -161,3 +161,6 @@ scraper/reports/papers/ site/assets/js/dist/ site/public/user_content +*.obj +*.ply + diff --git a/client/splash/face/faces.js b/client/splash/face/faces.js new file mode 100644 index 00000000..28de0cdc --- /dev/null +++ b/client/splash/face/faces.js @@ -0,0 +1,3 @@ +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 diff --git a/client/splash/face/geometry.js b/client/splash/face/geometry.js new file mode 100644 index 00000000..a6a97946 --- /dev/null +++ b/client/splash/face/geometry.js @@ -0,0 +1,67 @@ + +import { Geometry } from 'three' + +export 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) => { + const geometry = new Geometry() + a.forEach(p => geometry.vertices.push(p)) + if (i > 4) { + geometry.vertices.push(a[0]) + } + return geometry + }) +} + +export function updateLineGeometry(points, meshes) { + getLineGeometry(points).forEach((geometry, i) => { + const [line, mesh] = meshes[i] + line.setGeometry(geometry, () => 1.5) + mesh.geometry.vertices = line.geometry.vertices + mesh.geometry.verticesNeedUpdate = true + }) +} + +export function lerp(n, a, b) { + return (b - a) * n + a +} + +export 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) +} + +export function lerpPoints(n, A, B, C) { + for (let i = 0, len = A.length; i < len; i++) { + lerpPoint(n, A[i], B[i], C[i]) + } +} + +export function updateCubeGeometry(points, cubes) { + cubes.forEach((cube, i) => { + const p = points[i] + cube.position.set(p.x, p.y, p.z) + }) +} + +export 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]) +} diff --git a/client/splash/face/index.js b/client/splash/face/index.js index fe21f52b..f52ac57b 100644 --- a/client/splash/face/index.js +++ b/client/splash/face/index.js @@ -1,5 +1,8 @@ -import DRACOLoader from '../../util/vendor/DRACOLoader' -import GeometryHelper from '../../util/vendor/geometryHelper' +import faces from './faces' -DRACOLoader.setDecoderPath('/assets/js/vendor/draco/') -var dracoLoader = new THREE.DRACOLoader(); +const names = Object.keys(faces) + +function load(){ + const name = choice(names) + +} \ No newline at end of file diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js index a71f5a82..5fdf1777 100644 --- a/client/splash/face/markers.js +++ b/client/splash/face/markers.js @@ -1 +1,102 @@ +import * as THREE from 'three' import { MeshLine, MeshLineMaterial } from 'three.meshline' + +import oktween from '../../util/vendor/oktween' +import { scene } from '../renderer' + +import { getLineGeometry, updateLineGeometry, lerpPoints, updateCubeGeometry, getBounds } from './geometry' + +const POINT_SCALE = 1.8 +const FACE_POINT_COUNT = 68 + +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) => { + let geometry = new THREE.BoxBufferGeometry() + let position = new THREE.Vector3(p[0], p[1], p[2]) + let rotation = new THREE.Euler() + let scale = new THREE.Vector3() + let color = new THREE.Color() + scale.x = POINT_SCALE + scale.y = POINT_SCALE + scale.z = POINT_SCALE + quaternion.setFromEuler(rotation, false) + matrix.compose(position, quaternion, scale) + geometry.applyMatrix(matrix) + let material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) }) + let cube = new THREE.Mesh(geometry, material) + scene.add(cube) + return cube + }) + + meshes = getLineGeometry(points).map((geometry, i) => { + const color = new THREE.Color() + const material = new MeshLineMaterial({ + color: color.setHex(colors[i % colors.length]), + }) + const line = new MeshLine() + line.setGeometry(geometry, _ => 1.5) + const mesh = new THREE.Mesh(line.geometry, material) + mesh.geometry.dynamic = true + scene.add(mesh) + return [line, mesh] + }) +} + +export function swap() { + oktween.add({ + from: { n: 0 }, + to: { n: 1 }, + duration: 1000, + easing: oktween.easing.quad_in_out, + update: (obj) => { + lerpPoints(obj.n, swapFrom, swapTo, faceBuffer) + updateFace(faceBuffer) + }, + 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 14aa7e6e..82e7fa6a 100644 --- a/client/splash/face/mesh.js +++ b/client/splash/face/mesh.js @@ -2,7 +2,5 @@ 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/old/faceMarkers.js b/client/splash/old/faceMarkers.js deleted file mode 100644 index e413173d..00000000 --- a/client/splash/old/faceMarkers.js +++ /dev/null @@ -1,236 +0,0 @@ -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 index 0c21f964..8d2a3393 100644 --- a/client/splash/renderer.js +++ b/client/splash/renderer.js @@ -28,7 +28,6 @@ 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() diff --git a/site/assets/data/faces/putin.drc b/site/assets/data/faces/putin.drc new file mode 100644 index 00000000..d50fb2ca Binary files /dev/null and b/site/assets/data/faces/putin.drc differ -- cgit v1.2.3-70-g09d2 From bd0bb81ee5d1856f3b3e86b43ac7ff7312472dfe Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 28 Jan 2019 00:12:14 +0100 Subject: moar constants etc --- client/splash/cloud/index.js | 27 +++++++-- client/splash/constants.js | 40 ++++++++++++++ client/splash/face/faces.js | 14 ++++- client/splash/face/geometry.js | 67 ---------------------- client/splash/face/index.js | 20 +++++-- client/splash/face/markers.js | 49 ++++------------- client/splash/face/mesh.js | 122 +++++++++++++++++++++++++++++++++++++++++ client/splash/face/util.js | 86 +++++++++++++++++++++++++++++ client/splash/index.js | 3 + client/splash/old/draco.js | 17 ------ client/splash/renderer.js | 6 +- 11 files changed, 314 insertions(+), 137 deletions(-) create mode 100644 client/splash/constants.js delete mode 100644 client/splash/face/geometry.js create mode 100644 client/splash/face/util.js (limited to 'client/splash/face/index.js') 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/geometry.js b/client/splash/face/geometry.js deleted file mode 100644 index a6a97946..00000000 --- a/client/splash/face/geometry.js +++ /dev/null @@ -1,67 +0,0 @@ - -import { Geometry } from 'three' - -export 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) => { - const geometry = new Geometry() - a.forEach(p => geometry.vertices.push(p)) - if (i > 4) { - geometry.vertices.push(a[0]) - } - return geometry - }) -} - -export function updateLineGeometry(points, meshes) { - getLineGeometry(points).forEach((geometry, i) => { - const [line, mesh] = meshes[i] - line.setGeometry(geometry, () => 1.5) - mesh.geometry.vertices = line.geometry.vertices - mesh.geometry.verticesNeedUpdate = true - }) -} - -export function lerp(n, a, b) { - return (b - a) * n + a -} - -export 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) -} - -export function lerpPoints(n, A, B, C) { - for (let i = 0, len = A.length; i < len; i++) { - lerpPoint(n, A[i], B[i], C[i]) - } -} - -export function updateCubeGeometry(points, cubes) { - cubes.forEach((cube, i) => { - const p = points[i] - cube.position.set(p.x, p.y, p.z) - }) -} - -export 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]) -} 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 ', + '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/util.js b/client/splash/face/util.js new file mode 100644 index 00000000..e6237316 --- /dev/null +++ b/client/splash/face/util.js @@ -0,0 +1,86 @@ + +import { Vector3, Geometry } from 'three' +import { FACE_SCALE, LINE_THICKNESS } from '../constants' + +export 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) => { + const geometry = new Geometry() + a.forEach(p => geometry.vertices.push(p)) + if (i > 4) { + geometry.vertices.push(a[0]) + } + return geometry + }) +} + +export function updateLineGeometry(points, meshes) { + getLineGeometry(points).forEach((geometry, i) => { + const [line, mesh] = meshes[i] + line.setGeometry(geometry, () => LINE_THICKNESS) + mesh.geometry.vertices = line.geometry.vertices + mesh.geometry.verticesNeedUpdate = true + }) +} + +export function lerp(n, a, b) { + return (b - a) * n + a +} + +export 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) +} + +export function lerpPoints(n, A, B, C) { + for (let i = 0, len = A.length; i < len; i++) { + lerpPoint(n, A[i], B[i], C[i]) + } +} + +export function updateCubeGeometry(points, cubes) { + cubes.forEach((cube, i) => { + const p = points[i] + cube.position.set(p.x, p.y, p.z) + }) +} + +export function updateFace(buf, cubes, meshes) { + updateCubeGeometry(buf, cubes) + updateLineGeometry(buf, meshes) +} + +export 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]) +} + +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) -- cgit v1.2.3-70-g09d2 From 80c592a33ca8f1e2e3da9d050df4119e434b7aae Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 28 Jan 2019 02:14:58 +0100 Subject: more edits --- client/splash/face/index.js | 4 ++ client/splash/face/markers.js | 17 +++-- client/splash/face/mesh.js | 114 ++++++++++++++---------------- client/splash/index.js | 1 + client/util/vendor/geometryHelper.js | 132 +++++++++++++++++------------------ 5 files changed, 136 insertions(+), 132 deletions(-) (limited to 'client/splash/face/index.js') diff --git a/client/splash/face/index.js b/client/splash/face/index.js index 49246e10..157a51cf 100644 --- a/client/splash/face/index.js +++ b/client/splash/face/index.js @@ -16,3 +16,7 @@ export function load() { markers.swap(face) mesh.load(name) } + +export function update(){ + markers.update() +} \ No newline at end of file diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js index 6e226228..1832824c 100644 --- a/client/splash/face/markers.js +++ b/client/splash/face/markers.js @@ -8,11 +8,12 @@ import { getLineGeometry, updateFace, lerpPoints } from './util' 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 group = new THREE.Object3D() +let cubes +let meshes + let swapFrom let swapTo @@ -36,7 +37,7 @@ export function build(points) { geometry.applyMatrix(matrix) let material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) }) let cube = new THREE.Mesh(geometry, material) - scene.add(cube) + group.add(cube) return cube }) @@ -49,10 +50,12 @@ export function build(points) { line.setGeometry(geometry, () => LINE_THICKNESS) const mesh = new THREE.Mesh(line.geometry, material) mesh.geometry.dynamic = true - scene.add(mesh) + group.add(mesh) return [line, mesh] }) + scene.add(group) + updateFace(points, cubes, meshes) } @@ -73,3 +76,7 @@ export function swap(face) { } }) } + +export function update() { + group.rotation.y += 0.005 +} \ No newline at end of file diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js index de8cd28c..61c4e498 100644 --- a/client/splash/face/mesh.js +++ b/client/splash/face/mesh.js @@ -1,4 +1,4 @@ -import { Mesh, MeshBasicMaterial, VertexColors, TrianglesDrawMode } from 'three' +import { Points, Mesh, MeshBasicMaterial, VertexColors, TrianglesDrawMode } from 'three' import { scene } from '../renderer' @@ -28,101 +28,93 @@ export function update(name) { } function setDequantizationForMaterial(material, bufferGeometry) { - material.onBeforeCompile = function(shader) { + material.onBeforeCompile = (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 }; + 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 = shader.vertexShader.replace( - '#include ', - 'vec3 transformed = minPos + position * normConstant;' - ); + '#include ', + 'vec3 transformed = minPos + position * normConstant;' + ) } } -export function loadFromPath() { +export function loadFromFile(buf) { // Enable logging to console output. dracoLoader.setVerbosity(1) // To use triangle strips use: // dracoLoader.setDrawMode(THREE.TriangleStripDrawMode) - dracoLoader.setDrawMode(THREE.TrianglesDrawMode) + dracoLoader.setDrawMode(TrianglesDrawMode) // Skip dequantization of the position attribute. It will be done on the GPU. dracoLoader.setSkipDequantization('position', true) - dracoLoader.decodeDracoFile(reader.result, function(bufferGeometry) { + dracoLoader.decodeDracoFile(buf, (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 }) + const material = new 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) { + if (bufferGeometry.attributes.position.isQuantized) { setDequantizationForMaterial(material, bufferGeometry) } - var geometry; + let geometry // Point cloud does not have face indices. - if (bufferGeometry.index == null) { - geometry = new THREE.Points(bufferGeometry, material); + if (bufferGeometry.index === null) { + geometry = new Points(bufferGeometry, material) } else { if (bufferGeometry.attributes.normal === undefined) { - var geometryHelper = new GeometryHelper(); - geometryHelper.computeVertexNormals(bufferGeometry); + const geometryHelper = new GeometryHelper() + geometryHelper.computeVertexNormals(bufferGeometry) } - geometry = new THREE.Mesh(bufferGeometry, material); - geometry.drawMode = dracoLoader.drawMode; + geometry = new Mesh(bufferGeometry, material) + geometry.drawMode = dracoLoader.drawMode } // Compute range of the geometry coordinates for proper rendering. - bufferGeometry.computeBoundingBox(); - if (bufferGeometry.attributes['position'].isQuantized) { + 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; + const posAttribute = bufferGeometry.attributes.position + const normConstant = posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) + const 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); - }); + const sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x + const sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y + const sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z + const diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ) + const scale = 1.0 / diagonalSize + const midX = (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2 + const midY = (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2 + const 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 + + const selectedObject = scene.getObjectByName("my_mesh") + scene.remove(selectedObject) + geometry.name = "my_mesh" + scene.add(geometry) + }) } diff --git a/client/splash/index.js b/client/splash/index.js index 76c84ec0..24561b80 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -24,6 +24,7 @@ function animate() { controls.update() cloud.update() + face.update() let cameraTarget = new Vector3(0, 0, 0) camera.lookAt(cameraTarget) diff --git a/client/util/vendor/geometryHelper.js b/client/util/vendor/geometryHelper.js index 1ac88f3b..7f699722 100644 --- a/client/util/vendor/geometryHelper.js +++ b/client/util/vendor/geometryHelper.js @@ -23,84 +23,84 @@ import * as THREE from 'three'; function GeometryHelper() {} GeometryHelper.prototype = { - constructor: GeometryHelper, + constructor: GeometryHelper, - // Computes vertex normals on THREE.js buffer geometry, even when the mesh - // uses triangle strip connectivity. - computeVertexNormals: function (bufferGeometry) { - if (bufferGeometry.drawMode === THREE.TrianglesDrawMode) { - bufferGeometry.computeVertexNormals(); + // Computes vertex normals on THREE.js buffer geometry, even when the mesh + // uses triangle strip connectivity. + computeVertexNormals: function (bufferGeometry) { + if (bufferGeometry.drawMode === THREE.TrianglesDrawMode) { + bufferGeometry.computeVertexNormals(); + return; + } else if (bufferGeometry.drawMode === THREE.TriangleStripDrawMode) { + if (bufferGeometry.attributes.position === undefined) { return; - } else if (bufferGeometry.drawMode === THREE.TriangleStripDrawMode) { - if (bufferGeometry.attributes.position === undefined) { - return; - } - const inPositions = bufferGeometry.attributes.position.array; - if (bufferGeometry.attributes.normal === undefined) { - bufferGeometry.addAttribute( - 'normal', - new THREE.BufferAttribute(new Float32Array(inPositions.length), - 3)); - } else { - // Reset existing normals to zero. - const array = bufferGeometry.attributes.normal.array; - for (let i = 0; i < array.length; ++i) { - array[ i ] = 0; - } + } + const inPositions = bufferGeometry.attributes.position.array; + if (bufferGeometry.attributes.normal === undefined) { + bufferGeometry.addAttribute( + 'normal', + new THREE.BufferAttribute(new Float32Array(inPositions.length), + 3)); + } else { + // Reset existing normals to zero. + const array = bufferGeometry.attributes.normal.array; + for (let i = 0; i < array.length; ++i) { + array[ i ] = 0; } - let outNormals = bufferGeometry.attributes.normal.array; + } + let outNormals = bufferGeometry.attributes.normal.array; - let pos0 = new THREE.Vector3(); - let pos1 = new THREE.Vector3(); - let pos2 = new THREE.Vector3(); - let posDif0 = new THREE.Vector3(), posDif1 = new THREE.Vector3(); - let localNormal = new THREE.Vector3(); + let pos0 = new THREE.Vector3(); + let pos1 = new THREE.Vector3(); + let pos2 = new THREE.Vector3(); + let posDif0 = new THREE.Vector3(), posDif1 = new THREE.Vector3(); + let localNormal = new THREE.Vector3(); - const stripIndices = bufferGeometry.index.array; - for (let i = 2; i < stripIndices.length; ++i) { - let index0 = stripIndices[i - 2] * 3; - let index1 = stripIndices[i - 1] * 3; - let index2 = stripIndices[i] * 3; - // Skip degenerate triangles. - if (index0 === index1 || index0 === index2 || index1 === index2) { - continue; - } - if ((i & 1) !== 0) { - // Swap index 1 and 0 on odd indexed triangles. - const tmpIndex = index1; - index1 = index2; - index2 = tmpIndex; - } + const stripIndices = bufferGeometry.index.array; + for (let i = 2; i < stripIndices.length; ++i) { + let index0 = stripIndices[i - 2] * 3; + let index1 = stripIndices[i - 1] * 3; + let index2 = stripIndices[i] * 3; + // Skip degenerate triangles. + if (index0 === index1 || index0 === index2 || index1 === index2) { + continue; + } + if ((i & 1) !== 0) { + // Swap index 1 and 0 on odd indexed triangles. + const tmpIndex = index1; + index1 = index2; + index2 = tmpIndex; + } - // Get position values. - pos0.fromArray(inPositions, index0); - pos1.fromArray(inPositions, index1); - pos2.fromArray(inPositions, index2); + // Get position values. + pos0.fromArray(inPositions, index0); + pos1.fromArray(inPositions, index1); + pos2.fromArray(inPositions, index2); - // Position differences - posDif0.subVectors(pos2, pos0); - posDif1.subVectors(pos1, pos0); + // Position differences + posDif0.subVectors(pos2, pos0); + posDif1.subVectors(pos1, pos0); - // Weighted normal. - localNormal.crossVectors(posDif1, posDif0); + // Weighted normal. + localNormal.crossVectors(posDif1, posDif0); - // Update normals on vertices - outNormals[index0] += localNormal.x; - outNormals[index0 + 1] += localNormal.y; - outNormals[index0 + 2] += localNormal.z; + // Update normals on vertices + outNormals[index0] += localNormal.x; + outNormals[index0 + 1] += localNormal.y; + outNormals[index0 + 2] += localNormal.z; - outNormals[index1] += localNormal.x; - outNormals[index1 + 1] += localNormal.y; - outNormals[index1 + 2] += localNormal.z; + outNormals[index1] += localNormal.x; + outNormals[index1 + 1] += localNormal.y; + outNormals[index1 + 2] += localNormal.z; - outNormals[index2] += localNormal.x; - outNormals[index2 + 1] += localNormal.y; - outNormals[index2 + 2] += localNormal.z; - } - bufferGeometry.normalizeNormals(); - bufferGeometry.attributes.normal.needsUpdate = true; + outNormals[index2] += localNormal.x; + outNormals[index2 + 1] += localNormal.y; + outNormals[index2 + 2] += localNormal.z; } - }, + bufferGeometry.normalizeNormals(); + bufferGeometry.attributes.normal.needsUpdate = true; + } + }, }; export default GeometryHelper -- cgit v1.2.3-70-g09d2 From c6da699f18426079435ad4664e7c715386ff82c0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 28 Jan 2019 17:57:38 +0100 Subject: display a random face --- .eslintrc.js | 3 ++ client/splash/cloud/index.js | 3 +- client/splash/constants.js | 22 +++++++-- client/splash/face/faces.js | 6 ++- client/splash/face/index.js | 10 ++--- client/splash/face/markers.js | 45 +++++++++++++------ client/splash/face/mesh.js | 49 +++++--------------- client/splash/face/util.js | 83 +++++++++++++++++++--------------- client/splash/index.js | 20 ++++----- client/splash/old/draco.js | 102 ------------------------------------------ client/splash/renderer.js | 17 ++++--- 11 files changed, 140 insertions(+), 220 deletions(-) delete mode 100644 client/splash/old/draco.js (limited to 'client/splash/face/index.js') diff --git a/.eslintrc.js b/.eslintrc.js index 1d5aed90..dcf8aa76 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -23,6 +23,7 @@ module.exports = { "semi": ["error", "never"], "prefer-const": "off", "no-plusplus": "off", + "no-bitwise": "off", "no-param-reassign": 0, "no-return-assign": 0, "global-require": 0, @@ -31,6 +32,7 @@ module.exports = { "no-nested-ternary": 0, "no-mixed-operators": 0, "no-confusing-arrow": 0, + "no-use-before-define": ["error", "nofunc"], "prefer-arrow-callback": 0, "prefer-arrow-callback": 0, "func-names": 0, @@ -38,6 +40,7 @@ module.exports = { "class-methods-use-this": 0, "quotes": "off", "no-console": "off", + "operator-linebreak": "off", }, "env": { "browser": true, diff --git a/client/splash/cloud/index.js b/client/splash/cloud/index.js index f753e77c..d0a39d8c 100644 --- a/client/splash/cloud/index.js +++ b/client/splash/cloud/index.js @@ -6,6 +6,7 @@ import datasetList from './datasetList' import { choice } from '../../util' import { + CLOUD_SCALE, CLOUD_COLORS, CLOUD_ROTATION_SPEED, CLOUD_MAX_COUNT, @@ -38,7 +39,7 @@ export function init() { .setZ(Math.random()) .subScalar(1 / 2) .setLength(1 + Math.random()) - .multiplyScalar(1) + .multiplyScalar(CLOUD_SCALE) cloud.add(sprite) return sprite }) diff --git a/client/splash/constants.js b/client/splash/constants.js index 5b7309b4..a3724b72 100644 --- a/client/splash/constants.js +++ b/client/splash/constants.js @@ -1,4 +1,11 @@ -/* global constants */ +/* renderer */ + +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 FOG_COLOR = 0x191919 @@ -12,6 +19,7 @@ export const CLOUD_COLORS = [ 0x888896, ] +export const CLOUD_SCALE = 1 export const CLOUD_ROTATION_SPEED = 0.001 export const CLOUD_MAX_COUNT = 80 export const CLOUD_TEXT_MIN_SIZE = 0.01 @@ -19,10 +27,16 @@ export const CLOUD_TEXT_MAX_SIZE = 0.04 /* face */ -export const FACE_SCALE = 0.00038 +export const FACE_SCALE = 1 /* face markers */ +export const FACE_MARKERS_SCALE = 0.82 +export const FACE_OFFSET_X = 0 +export const FACE_OFFSET_Y = -0.0295 +export const FACE_OFFSET_Z = 0.0275 + +export const MARKER_POINT_COLOR = 0xffffff export const MARKER_COLORS = [ 0xff3333, 0xff8833, @@ -35,6 +49,6 @@ export const MARKER_COLORS = [ 0xffffff, ] -export const POINT_SCALE = 0.009 -export const LINE_THICKNESS = 0.009 +export const POINT_SCALE = 0.01 +export const LINE_THICKNESS = 0.0075 export const FACE_POINT_COUNT = 68 diff --git a/client/splash/face/faces.js b/client/splash/face/faces.js index d5ba5320..bab50c97 100644 --- a/client/splash/face/faces.js +++ b/client/splash/face/faces.js @@ -2,10 +2,12 @@ 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]], + xi: [[1.581475713243671350e02, 2.509900304577397208e02, 1.024322662353515625e02], [1.602838203130983743e02, 2.899340435970530621e02, 9.691181182861328125e01], [1.677042909659591032e02, 3.286639095949659009e02, 9.189924621582031250e01], [1.748665216932109558e02, 3.625784639964384155e02, 9.149455261230468750e01], [1.847612098245059542e02, 3.980092255955116229e02, 1.006391220092773438e02], [2.038414167516371549e02, 4.305498111620136115e02, 1.265865783691406250e02], [2.267264444687787091e02, 4.546917949123007929e02, 1.604735412597656250e02], [2.612276697794596316e02, 4.780719417916091629e02, 1.935450286865234375e02], [3.090068905699486663e02, 4.907490536080154016e02, 2.012679595947265625e02], [3.518451845056870297e02, 4.797107582361557547e02, 1.910112304687500000e02], [3.847857219621247395e02, 4.564630420879288408e02, 1.558248138427734375e02], [4.103254317339729482e02, 4.305017980957030659e02, 1.197048492431640625e02], [4.318702770756740392e02, 3.973330254169538307e02, 9.420705413818359375e01], [4.422064956365847479e02, 3.622428712253944241e02, 8.656275177001953125e01], [4.490620300891353054e02, 3.271828325578277941e02, 8.970116424560546875e01], [4.560659534529144139e02, 2.910778101423675253e02, 9.644176483154296875e01], [4.601242073208678676e02, 2.548580883071001892e02, 1.051369400024414062e02], [1.962528726615157666e02, 2.332017434931736375e02, 2.350029449462890625e02], [2.121071722591624393e02, 2.262617082603305221e02, 2.581283569335937500e02], [2.337514653224571362e02, 2.251718836885340238e02, 2.734199218750000000e02], [2.531733047485351449e02, 2.294949851660634863e02, 2.820414123535156250e02], [2.699339236988740822e02, 2.343355223233092204e02, 2.848821716308593750e02], [3.455108120787377857e02, 2.358723006125057395e02, 2.856489868164062500e02], [3.613513837627336329e02, 2.322616238283643497e02, 2.837029724121093750e02], [3.815044319900812297e02, 2.292742164881089195e02, 2.767124328613281250e02], [4.047670535218482541e02, 2.327066104784198899e02, 2.606012268066406250e02], [4.217962602802351739e02, 2.402466705142750527e02, 2.363506011962890625e02], [3.089879679361979470e02, 2.760715659167719878e02, 2.821576232910156250e02], [3.093649245318244425e02, 3.046348659859451118e02, 2.941600341796875000e02], [3.114766959994447006e02, 3.293608332435757120e02, 3.046447143554687500e02], [3.122007153080958801e02, 3.512138293816061605e02, 3.057337951660156250e02], [2.828070219152114078e02, 3.584083089312384800e02, 2.589963073730468750e02], [2.940082791197533538e02, 3.623387865373199475e02, 2.662980346679687500e02], [3.092972130868948852e02, 3.668293242331112083e02, 2.692637634277343750e02], [3.198154823452819073e02, 3.628364545754824917e02, 2.664876708984375000e02], [3.327329919553270656e02, 3.587899754064222861e02, 2.584887084960937500e02], [2.224500400618010758e02, 2.660715080829695012e02, 2.413853302001953125e02], [2.361075687184053322e02, 2.595814741366517637e02, 2.553526916503906250e02], [2.531863677380131890e02, 2.604359155512790949e02, 2.575644531250000000e02], [2.701898918002259506e02, 2.695448503202550228e02, 2.497847900390625000e02], [2.550828977098652217e02, 2.744724371337890716e02, 2.524707183837890625e02], [2.360909179089115923e02, 2.732695200422698463e02, 2.497717590332031250e02], [3.453027739281748154e02, 2.714797381053251684e02, 2.498313293457031250e02], [3.623781652113971177e02, 2.630507298607919893e02, 2.577862548828125000e02], [3.801104738721660965e02, 2.626405963194604283e02, 2.570069580078125000e02], [3.942162860945159650e02, 2.698504937983494187e02, 2.416210479736328125e02], [3.801208079020182709e02, 2.762396809117934140e02, 2.497300720214843750e02], [3.607991919424019898e02, 2.768305075970818052e02, 2.518104248046875000e02], [2.491371596093271137e02, 3.952959470980774768e02, 2.243894042968750000e02], [2.708619362027037027e02, 3.908969472967409047e02, 2.487248382568359375e02], [2.956859382180606417e02, 3.884492228908164293e02, 2.622833557128906250e02], [3.090222115310967865e02, 3.917322305836396481e02, 2.625950012207031250e02], [3.181707092883540327e02, 3.897191172401577433e02, 2.624730224609375000e02], [3.430552471086090804e02, 3.928625462670419211e02, 2.471974639892578125e02], [3.613266984528186754e02, 3.978334362673291480e02, 2.215844879150390625e02], [3.386838139552696134e02, 4.127940916293274540e02, 2.407136993408203125e02], [3.237892077277688827e02, 4.194459653487859327e02, 2.482334289550781250e02], [3.079967322256050579e02, 4.202518811513862715e02, 2.512642974853515625e02], [2.868524067299038620e02, 4.193043642051546840e02, 2.499754791259765625e02], [2.717448862412396693e02, 4.119777032710056233e02, 2.416939392089843750e02], [2.543327108644971304e02, 3.948142095348881071e02, 2.252314910888671875e02], [2.901215895409677614e02, 3.978477875473919880e02, 2.505760803222656250e02], [3.087859695135378502e02, 3.988037545716528598e02, 2.547194671630859375e02], [3.235175030876608844e02, 3.988561727606081035e02, 2.500653839111328125e02], [3.580007754456763678e02, 3.984504858996821213e02, 2.228356323242187500e02], [3.221863525989008963e02, 4.030397094247854852e02, 2.482552185058593750e02], [3.081756245332605317e02, 4.048862038526347646e02, 2.513024139404296875e02], [2.894371609257716500e02, 4.031360126091451548e02, 2.486108093261718750e02]], + may: [[2.382511024026309201e02, 2.801454149852079922e02, 5.214575576782226562e01], [2.493454499637378774e02, 3.064797704180549545e02, 5.088167190551757812e01], [2.639089957742129400e02, 3.319260479018267915e02, 5.266226196289062500e01], [2.761821218154009330e02, 3.563184045051126532e02, 5.502143859863281250e01], [2.895152865241554991e02, 3.809634247544232721e02, 6.649546051025390625e01], [3.060860955631030720e02, 4.000378012982537257e02, 9.035191345214843750e01], [3.213366342881146238e02, 4.128964293356502822e02, 1.197938156127929688e02], [3.427375466739429157e02, 4.230581409050437287e02, 1.479590148925781250e02], [3.741586932014016043e02, 4.234630673397289229e02, 1.611701660156250000e02], [4.023389876421759936e02, 4.080303395708870084e02, 1.599018707275390625e02], [4.257357296214383950e02, 3.868248218132467855e02, 1.410530548095703125e02], [4.422483188404756334e02, 3.651947661276425379e02, 1.185040130615234375e02], [4.545492390352137022e02, 3.384910384952321465e02, 1.011212463378906250e02], [4.562152171415440876e02, 3.097211315199908768e02, 9.170339202880859375e01], [4.545628575942095608e02, 2.840973517743279331e02, 8.920196533203125000e01], [4.518868203555836089e02, 2.565134695434570631e02, 8.989577484130859375e01], [4.476127057243795662e02, 2.289923642596077116e02, 9.148764801025390625e01], [2.440917306787826817e02, 2.537266974774529444e02, 1.485117950439453125e02], [2.505385673074160877e02, 2.449884134449678754e02, 1.672230224609375000e02], [2.629362676283892029e02, 2.388631448005227753e02, 1.830232696533203125e02], [2.764214070039636226e02, 2.376199662870519660e02, 1.927939453125000000e02], [2.886053881476906895e02, 2.378487686426499863e02, 1.978783874511718750e02], [3.423349636302274348e02, 2.245833317745433533e02, 2.082518310546875000e02], [3.541764831542968750e02, 2.182193829974006576e02, 2.078261871337890625e02], [3.692832874971277306e02, 2.125500047392004035e02, 2.033292694091796875e02], [3.884832659553078429e02, 2.116430788197237121e02, 1.939130706787109375e02], [4.040244427849264639e02, 2.158026554152545202e02, 1.781080627441406250e02], [3.225035565544576457e02, 2.592519715971105825e02, 2.056854705810546875e02], [3.248514710370232024e02, 2.779033468627930006e02, 2.160809936523437500e02], [3.270475357055663608e02, 2.946293671372358176e02, 2.269593200683593750e02], [3.308855010986327443e02, 3.100248983764648756e02, 2.303575286865234375e02], [3.207017386043772831e02, 3.250651369700713076e02, 1.937343902587890625e02], [3.269732386869542324e02, 3.255231738640280810e02, 2.018161010742187500e02], [3.372413344439337948e02, 3.264521555103975743e02, 2.067531127929687500e02], [3.444994117288027837e02, 3.217518894689223998e02, 2.058569641113281250e02], [3.539391475901883837e02, 3.172060759420955947e02, 2.011738739013671875e02], [2.669883459652170927e02, 2.717859535486558116e02, 1.602029724121093750e02], [2.727741014368393166e02, 2.638736764167337014e02, 1.725038604736328125e02], [2.851500773710362182e02, 2.613269290520163395e02, 1.773946533203125000e02], [2.994385292502009861e02, 2.645952199419807584e02, 1.756203308105468750e02], [2.895026475794174416e02, 2.709050594374713228e02, 1.749083251953125000e02], [2.761346585442037735e02, 2.735916131232767157e02, 1.694635925292968750e02], [3.532332682890050251e02, 2.518493531889074291e02, 1.864256134033203125e02], [3.633393915512982630e02, 2.427597525921990211e02, 1.922457427978515625e02], [3.761221859202665314e02, 2.392758025045956174e02, 1.929562835693359375e02], [3.890149852079503034e02, 2.427061907420439297e02, 1.852474365234375000e02], [3.783926052317899575e02, 2.491870305498908920e02, 1.901230163574218750e02], [3.645112599092370829e02, 2.528680367682962356e02, 1.894682617187500000e02], [3.149588652666876669e02, 3.656840930534812060e02, 1.685671386718750000e02], [3.209378256405100274e02, 3.546107831887638326e02, 1.896470184326171875e02], [3.335197990866267901e02, 3.465708392693014730e02, 2.029352569580078125e02], [3.426302308924057343e02, 3.463943742460363637e02, 2.055313262939453125e02], [3.487268890380859148e02, 3.431470490220013971e02, 2.064477233886718750e02], [3.683972360049976942e02, 3.438066943718405355e02, 1.994532775878906250e02], [3.876000764734604331e02, 3.492489317770565549e02, 1.836993255615234375e02], [3.744968906178193038e02, 3.656988448917164760e02, 1.932265167236328125e02], [3.646742408303653065e02, 3.739269323730468955e02, 1.959875488281250000e02], [3.539474262910730431e02, 3.774166064812155810e02, 1.956282958984375000e02], [3.400370959113625418e02, 3.795127504954618871e02, 1.915529479980468750e02], [3.295073663150562311e02, 3.757046441291360566e02, 1.844334564208984375e02], [3.180933715820311818e02, 3.644562714341108176e02, 1.699502258300781250e02], [3.342565650491152951e02, 3.568250763657514426e02, 1.932405548095703125e02], [3.456540888169232062e02, 3.534686874210133283e02, 1.999556121826171875e02], [3.567734405517577443e02, 3.518089711626838607e02, 1.987718353271484375e02], [3.853768515194162774e02, 3.501925692210478473e02, 1.839606781005859375e02], [3.596766138413372573e02, 3.610454082533892688e02, 1.959595794677734375e02], [3.495193201401654051e02, 3.635478616871553754e02, 1.955101776123046875e02], [3.382061392391428853e02, 3.660274766630285512e02, 1.905125427246093750e02]], } export const names = Object.keys(rawFaces) -export const faces = {} +export const faces = rawFaces -names.map(name => faces[name] = recenter(rawFaces[name])) +// names.map(name => faces[name] = recenter(rawFaces[name])) diff --git a/client/splash/face/index.js b/client/splash/face/index.js index 157a51cf..4090a9fa 100644 --- a/client/splash/face/index.js +++ b/client/splash/face/index.js @@ -4,7 +4,7 @@ import * as markers from './markers' import * as mesh from './mesh' export function init() { - const name = names[0] + const name = choice(names) const face = faces[name] markers.build(face) mesh.load(name) @@ -14,9 +14,9 @@ export function load() { const name = choice(names) const face = faces[name] markers.swap(face) - mesh.load(name) + // mesh.load(name) } -export function update(){ - markers.update() -} \ No newline at end of file +export function update() { + // markers.update() +} diff --git a/client/splash/face/markers.js b/client/splash/face/markers.js index 1636349c..22b9966c 100644 --- a/client/splash/face/markers.js +++ b/client/splash/face/markers.js @@ -4,9 +4,12 @@ import { MeshLine, MeshLineMaterial } from 'three.meshline' import oktween from '../../util/vendor/oktween' import { scene } from '../renderer' -import { getLineGeometry, updateFace, lerpPoints } from './util' +import { getLineGeometry, updateFace, lerpPoints, getBboxForPoints, getBboxScaleAndCentroid } from './util' -import { POINT_SCALE, LINE_THICKNESS, FACE_POINT_COUNT, MARKER_COLORS } from '../constants' +import { + POINT_SCALE, LINE_THICKNESS, FACE_POINT_COUNT, MARKER_COLORS, MARKER_POINT_COLOR, + FACE_SCALE, FACE_MARKERS_SCALE, FACE_OFFSET_X, FACE_OFFSET_Y, FACE_OFFSET_Z, +} from '../constants' const faceBuffer = Array.from({ length: FACE_POINT_COUNT }, () => new THREE.Vector3()) @@ -23,25 +26,37 @@ export function build(points) { const matrix = new THREE.Matrix4() const quaternion = new THREE.Quaternion() - cubes = points.map((p) => { + 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) => { let geometry = new THREE.BoxBufferGeometry() - let position = new THREE.Vector3(p[0], p[1], p[2]) let rotation = new THREE.Euler() - let scale = new THREE.Vector3() - let color = new THREE.Color() - scale.x = POINT_SCALE - scale.y = POINT_SCALE - scale.z = POINT_SCALE + let boxScale = new THREE.Vector3() + boxScale.x = POINT_SCALE + boxScale.y = POINT_SCALE + boxScale.z = POINT_SCALE quaternion.setFromEuler(rotation, false) - matrix.compose(position, quaternion, scale) + matrix.compose(position, quaternion, boxScale) geometry.applyMatrix(matrix) - let material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) }) + let material = new THREE.MeshBasicMaterial({ color: boxColor }) let cube = new THREE.Mesh(geometry, material) group.add(cube) return cube }) - meshes = getLineGeometry(points).map((geometry, i) => { + meshes = getLineGeometry(scaledPoints).map((geometry, i) => { const color = new THREE.Color() const material = new MeshLineMaterial({ color: color.setHex(MARKER_COLORS[i % MARKER_COLORS.length]), @@ -50,13 +65,17 @@ 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] }) + group.frustumCulled = false scene.add(group) - updateFace(points, cubes, meshes) + updateFace(scaledPoints, cubes, meshes) } export function swap(face) { diff --git a/client/splash/face/mesh.js b/client/splash/face/mesh.js index efa9530e..69a40900 100644 --- a/client/splash/face/mesh.js +++ b/client/splash/face/mesh.js @@ -5,7 +5,12 @@ import { scene } from '../renderer' import DRACOLoader from '../../util/vendor/DRACOLoader' import GeometryHelper from '../../util/vendor/geometryHelper' +import { getBboxScaleAndCentroid } from './util' + +import { FACE_SCALE } from '../constants' + DRACOLoader.setDecoderPath('/assets/js/vendor/draco/') + const dracoLoader = new DRACOLoader() DRACOLoader.getDecoderModule() @@ -14,17 +19,6 @@ export function load(name) { dracoLoader.setDrawMode(TrianglesDrawMode) dracoLoader.setSkipDequantization('position', true) dracoLoader.load('/assets/data/faces/' + name + '.drc', dracoDidLoad) - // 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) { @@ -49,11 +43,7 @@ function setDequantizationForMaterial(material, bufferGeometry) { } } -export function dracoDidLoad(bufferGeometry) { - // if (dracoLoader.decode_time !== undefined) { - // fileDisplayArea.innerText = 'Decode time = ' + dracoLoader.decode_time + '\n' + - // 'Import time = ' + dracoLoader.import_time - // } +function dracoDidLoad(bufferGeometry) { const material = new MeshBasicMaterial({ vertexColors: VertexColors }) material.wireframe = true // If the position attribute is quantized, modify the material to perform @@ -77,32 +67,13 @@ export function dracoDidLoad(bufferGeometry) { // 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. - const posAttribute = bufferGeometry.attributes.position - const normConstant = posAttribute.maxRange / (1 << posAttribute.numQuantizationBits) - const 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 - } - const sizeX = bufferGeometry.boundingBox.max.x - bufferGeometry.boundingBox.min.x - const sizeY = bufferGeometry.boundingBox.max.y - bufferGeometry.boundingBox.min.y - const sizeZ = bufferGeometry.boundingBox.max.z - bufferGeometry.boundingBox.min.z - const diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ) - const scale = 1.0 / diagonalSize - const midX = (bufferGeometry.boundingBox.min.x + bufferGeometry.boundingBox.max.x) / 2 - const midY = (bufferGeometry.boundingBox.min.y + bufferGeometry.boundingBox.max.y) / 2 - const midZ = (bufferGeometry.boundingBox.min.z + bufferGeometry.boundingBox.max.z) / 2 - - geometry.scale.multiplyScalar(scale) + const bbox = bufferGeometry.boundingBox + const { scale, midX, midY, midZ } = getBboxScaleAndCentroid(bbox, bufferGeometry.attributes.position) + geometry.scale.multiplyScalar(scale * FACE_SCALE) geometry.position.x = -midX * scale geometry.position.y = -midY * scale geometry.position.z = -midZ * scale + geometry.frustumCulled = false // geometry.castShadow = true // geometry.receiveShadow = true diff --git a/client/splash/face/util.js b/client/splash/face/util.js index e6237316..38b1e376 100644 --- a/client/splash/face/util.js +++ b/client/splash/face/util.js @@ -1,6 +1,6 @@ -import { Vector3, Geometry } from 'three' -import { FACE_SCALE, LINE_THICKNESS } from '../constants' +import { Geometry } from 'three' +import { LINE_THICKNESS } from '../constants' export function getLineGeometry(points) { return [ @@ -22,6 +22,11 @@ export function getLineGeometry(points) { }) } +export function updateFace(buf, cubes, meshes) { + updateCubeGeometry(buf, cubes) + updateLineGeometry(buf, meshes) +} + export function updateLineGeometry(points, meshes) { getLineGeometry(points).forEach((geometry, i) => { const [line, mesh] = meshes[i] @@ -31,6 +36,13 @@ export function updateLineGeometry(points, meshes) { }) } +export function updateCubeGeometry(points, cubes) { + cubes.forEach((cube, i) => { + const p = points[i] + cube.position.set(p.x, p.y, p.z) + }) +} + export function lerp(n, a, b) { return (b - a) * n + a } @@ -47,40 +59,41 @@ export function lerpPoints(n, A, B, C) { } } -export function updateCubeGeometry(points, cubes) { - cubes.forEach((cube, i) => { - const p = points[i] - cube.position.set(p.x, p.y, p.z) +export function getBboxForPoints(points) { + return points.reduce((a, p) => { + a.min.x = Math.min(a.min.x, p[0]) + a.max.x = Math.max(a.max.x, p[0]) + a.min.y = Math.min(a.min.y, p[1]) + a.max.y = Math.max(a.max.y, p[1]) + a.min.z = Math.min(a.min.z, p[2]) + a.max.z = Math.max(a.max.z, p[2]) + return a + }, { + min: { x: Infinity, y: Infinity, z: Infinity }, + max: { x: -Infinity, y: -Infinity, z: -Infinity } }) } -export function updateFace(buf, cubes, meshes) { - updateCubeGeometry(buf, cubes) - updateLineGeometry(buf, meshes) -} - -export 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]) -} - -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) - }) +export function getBboxScaleAndCentroid(bbox, position) { + if (position && position.isQuantized) { + // If the geometry is quantized, transform the bounding box to the dequantized + // coordinates. + const normConstant = position.maxRange / (1 << position.numQuantizationBits) + const minPos = position.minValues + bbox.max.x = minPos[0] + bbox.max.x * normConstant + bbox.max.y = minPos[1] + bbox.max.y * normConstant + bbox.max.z = minPos[2] + bbox.max.z * normConstant + bbox.min.x = minPos[0] + bbox.min.x * normConstant + bbox.min.y = minPos[1] + bbox.min.y * normConstant + bbox.min.z = minPos[2] + bbox.min.z * normConstant + } + const sizeX = bbox.max.x - bbox.min.x + const sizeY = bbox.max.y - bbox.min.y + const sizeZ = bbox.max.z - bbox.min.z + const diagonalSize = Math.sqrt(sizeX * sizeX + sizeY * sizeY + sizeZ * sizeZ) + const scale = 1.0 / diagonalSize + const midX = (bbox.min.x + bbox.max.x) / 2 + const midY = (bbox.min.y + bbox.max.y) / 2 + const midZ = (bbox.min.z + bbox.max.z) / 2 + return { scale, midX, midY, midZ } } diff --git a/client/splash/index.js b/client/splash/index.js index 24561b80..b559f5ee 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -1,4 +1,4 @@ -import oktween from '../util/vendor/oktween' +// import oktween from '../util/vendor/oktween' import { Vector3 } from 'three' import OrbitControls from 'three-orbitcontrols' @@ -16,11 +16,18 @@ controls.rotateSpeed = 1 / 4 controls.zoomSpeed = 1 controls.keyPanSpeed = 1 / 2 +function build() { + init() + cloud.init() + face.init() + animate() +} + function animate() { requestAnimationFrame(animate) - camera.position.z += -0.0025 - camera.rotation.y += 0.00001 + // camera.position.z += -0.0025 + // camera.rotation.y += 0.00001 controls.update() cloud.update() @@ -32,11 +39,4 @@ function animate() { render() } -function build() { - init() - cloud.init() - face.init() - animate() -} - document.addEventListener('DOMContentLoaded', build) diff --git a/client/splash/old/draco.js b/client/splash/old/draco.js deleted file mode 100644 index 3f9bfad8..00000000 --- a/client/splash/old/draco.js +++ /dev/null @@ -1,102 +0,0 @@ -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 ', - 'vec3 transformed = minPos + position * normConstant;' - ); - } -} diff --git a/client/splash/renderer.js b/client/splash/renderer.js index e71a4526..ad111f1a 100644 --- a/client/splash/renderer.js +++ b/client/splash/renderer.js @@ -1,21 +1,15 @@ import * as THREE from 'three' -import { FOG_COLOR } from './constants' +import { FOG_COLOR, CAMERA_NEAR, CAMERA_FAR, CAMERA_X, CAMERA_Y, CAMERA_Z } from './constants' export const scene = new THREE.Scene() scene.fog = new THREE.Fog(FOG_COLOR, 2, 15) -export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.001, 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 +export const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, CAMERA_NEAR, CAMERA_FAR) +camera.position.set(CAMERA_X, CAMERA_Y, CAMERA_Z) 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) @@ -40,3 +34,8 @@ export function init() { export function render() { renderer.render(scene, camera) } + + +window.scene = scene +window.THREE = THREE + -- cgit v1.2.3-70-g09d2