diff options
| -rw-r--r-- | client/splash/datasetList.js | 1 | ||||
| -rw-r--r-- | client/splash/datasets.js | 86 | ||||
| -rw-r--r-- | client/splash/faceMarkers.js | 254 | ||||
| -rw-r--r-- | client/splash/index.js | 13 | ||||
| -rw-r--r-- | client/splash/vendor/three.meshline.js | 467 | ||||
| -rw-r--r-- | client/util/vendor/DRACOLoader.js (renamed from client/splash/vendor/DRACOLoader.js) | 2 | ||||
| -rw-r--r-- | client/util/vendor/geometryHelper.js (renamed from client/splash/vendor/geometryHelper.js) | 0 | ||||
| -rw-r--r-- | client/util/vendor/oktween.js (renamed from client/splash/vendor/oktween.js) | 0 | ||||
| -rw-r--r-- | package-lock.json | 18 | ||||
| -rw-r--r-- | package.json | 4 |
10 files changed, 370 insertions, 475 deletions
diff --git a/client/splash/datasetList.js b/client/splash/datasetList.js new file mode 100644 index 00000000..88058de7 --- /dev/null +++ b/client/splash/datasetList.js @@ -0,0 +1 @@ +export default ["10K US Adult Faces","3D-RMA","3D Dynamic","3DPeS","4DFAB","50 People One Question","aPascal","Aberdeen","Adience","AFAD","AFEW-VA","AffectNet","AFLW","AFW","AgeDB","ALERT Airport","AM-FED","APiS1.0","AR Face","AWE Ears","B3D(AC)","BBC Pose","BPAD","BFM","BioID Face","BJUT-3D","The Bosphorus","BP4D+","BP4D-Spontanous","Brainwash","BU-3DFE","BUHMAP-DB ","CAFE","Caltech 10K Web Faces","Caltech Faces","Caltech Pedestrians","CAMEL","CAS-PEAL","Casablanca","CASIA Webface","CAVIAR4REID","CelebA","CelebFaces+","CFD","ChaLearn","ChokePoint","Cityscapes","CCP","CMDP","CMU PIE","COCO","COCO-a","COCO QA","COFW","CK","CK+","Columbia Gaze","Ongoing Complex Activities","CUHK01","CUHK02","CUHK03","CVC-01","UFI","D3DFACS","Dartmouth Children","Data61 Pedestrian","DeepFashion","DISFA","Long Distance Heterogeneous Face","Duke MTMC","EmotioNet Database","ETHZ Pedestrian","EuroCity Persons","ExpW","Face Research Lab London","FaceScrub","FaceTracer","SFC","Facebook100","Face Place","Faces94","Faces95","Faces96","FIW","FDDB","FEI","FERET","FER+","CMU FiA","300-W","Florida Inmate","FRAV2D","FRAV3D","GRIMACE","FRGC","Gallagher","Gavab","GeoFaces","Georgia Tech Face","Google Makeup","Google (private)","Graz Pedestrian","H3D","HDA+","Helen","Hi4D-ADSIP","HID","Hipsterwars","HollywoodHeads","HRT Transgender","IFAD","IFDB","IIT Dehli Ear","IJB-A","IJB-B","IJB-C","","iLIDS-VID","Images of Groups","IMDB","IMFDB","IMM Face Dataset","Immediacy","imSitu","INRIA Pedestrian","iQIYI-VID dataset ","JAFFE","Jiku Mobile Video Dataset","JPL-Interaction dataset","Karpathy Instagram","KDEF","UB KinFace","KinectFaceDB","KITTI","LAG","Large Scale Person Search","Leeds Sports Pose","Leeds Sports Pose Extended","LFW","LFW-a","LFWP","m2vts","xm2vtsdb","MAFL","MALF","Mapillary","Market 1501","Market 1203","MARS","McGill Real World","Multiple Encounter Dataset","MegaAge","MegaFace","MIFS","MIKKI dataset","MIT CBCL","CBCL","CBCLSS","MIW","MMI Facial Expression Dataset","Moments in Time","MORPH Commercial","MORPH Non-Commercial","MOT","Large MPI Facial Expression","Small MPI Facial Expression","MPIIGaze","MPII Human Pose","MR2","MRP Drone","MsCeleb","MSMT17","MUCT","MUG Faces","MULTIPIE","MTFL","News Dataset","ND-2006","MID","Novaemötions Dataset","Nude Detection","ORL","Penn Fudan","PETA","PETS 2017","PPB","PIPA","PKU","PKU-Reid","Pornography DB","Precarious","PRID","PRW","PSU","PubFig","pubfig83","Put Face","GRID","QMUL-iLIDS","QMUL-SurvFace","RaFD","RAiD","RAP","ReSEED","SAIVT SoftBio","SAMM","Sarc3D","SCface","SCUT-FBP","SCUT HEAD","SDU-VID","SED Dataset","Sheffield Face","Shinpuhkan 2014","Social Relation","SOTON HiD","SVW","STAIR Action","Stanford Drone","Buffy Stickmen","We Are Family Stickmen","Stickmen PASCAL","Stirling/ESRC 3D Face","SUN","SVS","Texas 3DFRD","TinyFace","Tiny Images","TownCenter","TUD-Brussels","TUD-Campus","TUD-Crossing","TUD-Motionparis","TUD-Multiview","TUD-Pedestrian","TUD-Stadtmitte","TVHI","ND-TWINS-2009-2010","UCCS","UCF101","UCF-CC-50","UCF Selfie","UFDD","UMB","UMD","UNBC-McMaster Pain","Urban Tribes","USED Social Event Dataset","UTKFace","V47","VADANA","CIP","VGG Face","VGG Face2","Violent Flows","VIPeR","Phrasal Recognition","VMU","VOC","VQA","WARD","WGT","WIDER","WIDER FACE","WIDER Attribute","WildTrack","YaleFaces","Yale Face Database B","Extended Yale Face Database B ","YawDD","YFCC100M","UOY 3D Face Database","YouTubeFaces","YMU","YouTube Pose","WLFDB","SAL","Semaine","Belfast naturalistic","Belfast induced","VAM-faces","MAHNOB-HCI","DEAP","AMFED","Recola","AVEC13","AVEC14","Mimicry","Meissner Caucasian and African American","Nottingham Scans","Nottingham Originals","Stirling Pain","Utrecht ECVP","Mooney","Visual Commonsense Reasoning","HUFRD Pilgrims Dataset"] diff --git a/client/splash/datasets.js b/client/splash/datasets.js new file mode 100644 index 00000000..e7842511 --- /dev/null +++ b/client/splash/datasets.js @@ -0,0 +1,86 @@ + +import datasetList from './datasetList' +import { choice } from '../util' + +// var getRandomText = function() { +// return choice(datasets) +// }; +// var getRandomFontFamily = function() { +// return 'Helvetica, Arial, sans-serif' +// // return choice([ +// // 'Georgia, serif', +// // '"Palatino Linotype", "Book Antiqua", Palatino, serif', +// // '"Times New Roman", Times, serif', +// // 'Helvetica, Arial, sans-serif', +// // '"Arial Black", Gadget, sans-serif', +// // '"Comic Sans MS", cursive, sans-serif', +// // 'Impact, Charcoal, sans-serif', +// // '"Lucida Sans Unicode", "Lucida Grande", sans-serif', +// // 'Tahoma, Geneva, sans-serif', +// // '"Trebuchet MS", Helvetica, sans-serif', +// // 'Verdana, Geneva, sans-serif', +// // '"Courier New", Courier, monospace', +// // '"Lucida Console", Monaco, monospace', +// // ]); +// }; +// var getRandomColor = function() { +// return choice([ 0xffffff, 0xffffff, 0xffffff, 0xdddde6, 0x888896 ]) +// }; +// var getRandomTextSize = function() { +// return (1 + Math.random()) * 1/8; +// }; +// var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true}); +// renderer.setPixelRatio(devicePixelRatio); +// renderer.setClearColor(0x000000, 0); +// document.body.appendChild(renderer.domElement); +// var scene = new THREE.Scene(); +// var camera = new THREE.PerspectiveCamera(75, 1, 1/128, 128); +// camera.position.set(4, 0, 10); +// var redrawInterval = 1; +// var sprites = Array.from({length: datasets.length}, function(t, i) { +// // console.log(i) +// var sprite = new THREE.TextSprite({ +// textSize: getRandomTextSize(), +// redrawInterval: redrawInterval, +// material: { +// color: getRandomColor(), +// }, +// texture: { +// text: datasets[i], +// fontFamily: getRandomFontFamily(), +// }, +// }); +// sprite.position +// .setX(Math.random()) +// .setY(Math.random()) +// .setZ(Math.random()) +// .subScalar(1/2) +// .setLength(1 + Math.random()) +// .multiplyScalar(6); +// scene.add(sprite); +// return sprite; +// }); +// var controls = new THREE.OrbitControls(camera, renderer.domElement); +// controls.maxDistance = camera.far/2; +// controls.enableDamping = true; +// controls.dampingFactor = 1/8; +// controls.rotateSpeed = 1/4; +// controls.zoomSpeed = 1; +// controls.keyPanSpeed = 1/2; +// var renderScene = function() { +// renderer.setSize(document.body.offsetWidth, document.body.offsetHeight); +// camera.aspect = renderer.domElement.width / renderer.domElement.height; +// camera.updateProjectionMatrix(); +// // controls.update(); +// camera.position.z += -0.0025 +// camera.rotation.y += 0.00001 +// renderer.render(scene, camera); +// }; +// window.addEventListener('resize', renderScene, false); +// var startSceneRenderer = function() { +// requestAnimationFrame(function() { +// setTimeout(startSceneRenderer, 1000/60); +// }); +// renderScene(); +// }; +// startSceneRenderer(); diff --git a/client/splash/faceMarkers.js b/client/splash/faceMarkers.js new file mode 100644 index 00000000..0a87d2b2 --- /dev/null +++ b/client/splash/faceMarkers.js @@ -0,0 +1,254 @@ +/* eslint-disable */ +var faceInit = function () { + var container = document.querySelector("#face_container") + var camera, controls, scene, renderer + var mouse = new THREE.Vector2(0.5, 0.5) + var mouseTarget = new THREE.Vector2(0.5, 0.5) + var POINT_SCALE = 1.8 + var FACE_POINT_COUNT = 68 + var SWAP_TIME = 500 + var cubes = [], meshes = [] + var currentFace = document.querySelector('.currentFace') + var introEl = document.querySelector('.intro') + var faceBuffer = (function () { + var a = new Array(FACE_POINT_COUNT) + for (let i = 0; i < FACE_POINT_COUNT; i++) { + a[i] = new THREE.Vector3() + } + return a + })() + var lastSprite + var last_t = 0, start_t = 0 + var bgColor = 0x000000 // 0x191919 + var colors = [ + 0xff3333, + 0xff8833, + 0xffff33, + 0x338833, + 0x3388ff, + 0x3333ff, + 0x8833ff, + 0xff3388, + 0xffffff, + ] + var swapping = false, swap_count = 0, swapFrom, swapTo, face_names, faces + init() + + function init() { + fetch("/assets/data/3dlm_0_10.json") + .then(req => req.json()) + .then(data => { + face_names = Object.keys(data) + faces = face_names.map(name => recenter(data[name])) + setup() + build(faces[0]) + updateFace(faces[0]) + setCurrentFace(face_names[0]) + swapTo = faces[0] + animate() + }) + } + function setup() { + var w = window.innerWidth * 2/3 + var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7) + camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000) + camera.position.x = 0 + camera.position.y = 0 + camera.position.z = 200 + + scene = new THREE.Scene() + // scene.background = new THREE.Color(bgColor) + + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) + renderer.setPixelRatio(window.devicePixelRatio) + renderer.setSize(w, h) + renderer.setClearColor(0x000000, 0); + container.appendChild(renderer.domElement) + document.body.addEventListener('mousemove', onMouseMove) + // renderer.domElement.addEventListener('mousedown', swap) + // oktween.add({ + // obj: el.style, + // units: "px", + // from: { left: 0 }, + // to: { left: 100 }, + // duration: 1000, + // easing: oktween.easing.circ_out, + // update: function(obj){ + // console.log(obj.left) + // } + // finished: function(){ + // console.log("done") + // } + // }) + swap() + } + function build(points) { + var matrix = new THREE.Matrix4() + var quaternion = new THREE.Quaternion() + + for (var i = 0; i < FACE_POINT_COUNT; i++) { + var p = points[i] + var geometry = new THREE.BoxBufferGeometry() + var position = new THREE.Vector3(p[0], p[1], p[2]) + var rotation = new THREE.Euler() + var scale = new THREE.Vector3() + var color = new THREE.Color() + scale.x = scale.y = scale.z = POINT_SCALE + quaternion.setFromEuler(rotation, false) + matrix.compose(position, quaternion, scale) + geometry.applyMatrix(matrix) + material = new THREE.MeshBasicMaterial({ color: color.setHex(0xffffff) }) + cube = new THREE.Mesh(geometry, material) + scene.add(cube) + cubes.push(cube) + } + + meshes = getLineGeometry(points).map((geometry, i) => { + var color = new THREE.Color() + var material = new MeshLineMaterial({ + color: color.setHex(colors[i % colors.length]), + }) + var line = new MeshLine() + line.setGeometry(geometry, _ => 1.5) + var mesh = new THREE.Mesh(line.geometry, material) + mesh.geometry.dynamic = true + scene.add(mesh) + return [line, mesh] + }) + } + function lerpPoints(n, A, B, C) { + for (let i = 0, len = A.length; i < len; i++) { + lerpPoint(n, A[i], B[i], C[i]) + } + } + function lerpPoint(n, A, B, C) { + C.x = lerp(n, A.x, B.x) + C.y = lerp(n, A.y, B.y) + C.z = lerp(n, A.z, B.z) + } + function lerp(n, a, b) { + return (b-a) * n + a + } + function swap(){ + swap_count = (swap_count + 1) % faces.length + swapFrom = swapTo || faces[0] + swapTo = faces[swap_count] + setCurrentFace(face_names[swap_count]) + oktween.add({ + from: { n: 0 }, + to: { n: 1 }, + duration: 1000, + easing: oktween.easing.quad_in_out, + update: function(obj){ + lerpPoints(obj.n, swapFrom, swapTo, faceBuffer) + updateFace(faceBuffer) + }, + finished: function(){ + setTimeout(swap, 2000) + } + }) + } + function setCurrentFace(name) { + name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ') + currentFace.innerHTML = name + // if (lastSprite) { + // scene.remove(lastSprite) + // } + // var sprite = new THREE.TextSprite({ + // textSize: 12, + // redrawInterval: 1000, + // material: { + // color: 0xcccccc, + // }, + // texture: { + // text: name, + // fontFamily: '"Roboto", "Helvetica", sans-serif', + // }, + // }); + // sprite.position + // .setX(0) + // .setY(0) + // .setZ(0) + // scene.add(sprite); + // lastSprite = sprite + } + function updateFace(points) { + updateCubeGeometry(points) + updateLineGeometry(points) + } + function updateCubeGeometry(points) { + cubes.forEach((cube, i) => { + const p = points[i] + cube.position.set(p.x, p.y, p.z) + }) + } + function updateLineGeometry(points) { + getLineGeometry(points).map((geometry, i) => { + var [line, mesh] = meshes[i] + line.setGeometry(geometry, _ => 1.5) + mesh.geometry.vertices = line.geometry.vertices + mesh.geometry.verticesNeedUpdate = true + }) + } + function getLineGeometry(points) { + return [ + points.slice(0, 17), + points.slice(17, 22), + points.slice(22, 27), + points.slice(27, 31), + points.slice(31, 36), + points.slice(36, 42), + points.slice(42, 48), + points.slice(48) + ].map((a, i) => { + var geometry = new THREE.Geometry() + a.forEach(p => geometry.vertices.push(p)) + if (i > 4) { + geometry.vertices.push(a[0]) + } + return geometry + }) + } + function getBounds(obj) { + return obj.reduce((a, p) => { + return [ + Math.min(a[0], p[0]), + Math.max(a[1], p[0]), + Math.min(a[2], p[1]), + Math.max(a[3], p[1]), + Math.min(a[4], p[2]), + Math.max(a[5], p[2]), + ] + }, [Infinity, -Infinity, Infinity, -Infinity, Infinity, -Infinity]) + } + function recenter(obj) { + const bounds = getBounds(obj) + const x_width = (bounds[1] - bounds[0]) / 2 + const y_width = (bounds[3] - bounds[2]) / -3 + const z_width = (bounds[5] - bounds[4]) / 2 + return obj.map(p => { + p[0] = p[0] - bounds[0] - x_width + p[1] = -p[1] + bounds[1] + y_width + p[2] = p[2] - bounds[2] + z_width + return new THREE.Vector3(p[0], p[1], p[2]) + }) + } + // + function onMouseMove(e) { + mouse.x = e.clientX / window.innerWidth + mouse.y = e.clientY / window.innerHeight + } + function animate(t) { + requestAnimationFrame(animate) + renderer.render(scene, camera) + // scene.rotation.y += 0.01 * Math.PI + mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1 + mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1 + scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2 + scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI + currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)" + // scene.rotation.y += 0.01 + last_t = t + } +} +faceInit()
\ No newline at end of file diff --git a/client/splash/index.js b/client/splash/index.js index e32df29f..aee394bf 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -1,9 +1,10 @@ -import oktween from './vendor/oktween' - -import { MeshLine, MeshLineMaterial } from './vendor/three.meshline' - -import DRACOLoader from './vendor/DRACOLoader' -import GeometryHelper from './vendor/geometryHelper' +import * as THREE from 'three' +import { MeshLine, MeshLineMaterial } from 'three.meshline' +import TextSprite from 'three.textsprite' +import oktween from '../util/vendor/oktween' +import DRACOLoader from '../util/vendor/DRACOLoader' +import GeometryHelper from '../util/vendor/geometryHelper' DRACOLoader.setDecoderPath('/assets/js/vendor/draco/') + diff --git a/client/splash/vendor/three.meshline.js b/client/splash/vendor/three.meshline.js deleted file mode 100644 index 00096f58..00000000 --- a/client/splash/vendor/three.meshline.js +++ /dev/null @@ -1,467 +0,0 @@ -import * as THREE from 'three'; - -function MeshLine() { - - this.positions = []; - - this.previous = []; - this.next = []; - this.side = []; - this.width = []; - this.indices_array = []; - this.uvs = []; - this.counters = []; - this.geometry = new THREE.BufferGeometry(); - - this.widthCallback = null; - -} - -MeshLine.prototype.setGeometry = function( g, c ) { - - this.widthCallback = c; - - this.positions = []; - this.counters = []; - - if( g instanceof THREE.Geometry ) { - for( var j = 0; j < g.vertices.length; j++ ) { - var v = g.vertices[ j ]; - var c = j/g.vertices.length; - this.positions.push( v.x, v.y, v.z ); - this.positions.push( v.x, v.y, v.z ); - this.counters.push(c); - this.counters.push(c); - } - } - - if( g instanceof THREE.BufferGeometry ) { - // read attribute positions ? - } - - if( g instanceof Float32Array || g instanceof Array ) { - for( var j = 0; j < g.length; j += 3 ) { - var c = j/g.length; - this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] ); - this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] ); - this.counters.push(c); - this.counters.push(c); - } - } - - this.process(); - -} - -MeshLine.prototype.compareV3 = function( a, b ) { - - var aa = a * 6; - var ab = b * 6; - return ( this.positions[ aa ] === this.positions[ ab ] ) && ( this.positions[ aa + 1 ] === this.positions[ ab + 1 ] ) && ( this.positions[ aa + 2 ] === this.positions[ ab + 2 ] ); - -} - -MeshLine.prototype.copyV3 = function( a ) { - - var aa = a * 6; - return [ this.positions[ aa ], this.positions[ aa + 1 ], this.positions[ aa + 2 ] ]; - -} - -MeshLine.prototype.process = function() { - - var l = this.positions.length / 6; - - this.previous = []; - this.next = []; - this.side = []; - this.width = []; - this.indices_array = []; - this.uvs = []; - - for( var j = 0; j < l; j++ ) { - this.side.push( 1 ); - this.side.push( -1 ); - } - - var w; - for( var j = 0; j < l; j++ ) { - if( this.widthCallback ) w = this.widthCallback( j / ( l -1 ) ); - else w = 1; - this.width.push( w ); - this.width.push( w ); - } - - for( var j = 0; j < l; j++ ) { - this.uvs.push( j / ( l - 1 ), 0 ); - this.uvs.push( j / ( l - 1 ), 1 ); - } - - var v; - - if( this.compareV3( 0, l - 1 ) ){ - v = this.copyV3( l - 2 ); - } else { - v = this.copyV3( 0 ); - } - this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - for( var j = 0; j < l - 1; j++ ) { - v = this.copyV3( j ); - this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - this.previous.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - } - - for( var j = 1; j < l; j++ ) { - v = this.copyV3( j ); - this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - } - - if( this.compareV3( l - 1, 0 ) ){ - v = this.copyV3( 1 ); - } else { - v = this.copyV3( l - 1 ); - } - this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - this.next.push( v[ 0 ], v[ 1 ], v[ 2 ] ); - - for( var j = 0; j < l - 1; j++ ) { - var n = j * 2; - this.indices_array.push( n, n + 1, n + 2 ); - this.indices_array.push( n + 2, n + 1, n + 3 ); - } - - if (!this.attributes) { - this.attributes = { - position: new THREE.BufferAttribute( new Float32Array( this.positions ), 3 ), - previous: new THREE.BufferAttribute( new Float32Array( this.previous ), 3 ), - next: new THREE.BufferAttribute( new Float32Array( this.next ), 3 ), - side: new THREE.BufferAttribute( new Float32Array( this.side ), 1 ), - width: new THREE.BufferAttribute( new Float32Array( this.width ), 1 ), - uv: new THREE.BufferAttribute( new Float32Array( this.uvs ), 2 ), - index: new THREE.BufferAttribute( new Uint16Array( this.indices_array ), 1 ), - counters: new THREE.BufferAttribute( new Float32Array( this.counters ), 1 ) - } - } else { - this.attributes.position.copyArray(new Float32Array(this.positions)); - this.attributes.position.needsUpdate = true; - this.attributes.previous.copyArray(new Float32Array(this.previous)); - this.attributes.previous.needsUpdate = true; - this.attributes.next.copyArray(new Float32Array(this.next)); - this.attributes.next.needsUpdate = true; - this.attributes.side.copyArray(new Float32Array(this.side)); - this.attributes.side.needsUpdate = true; - this.attributes.width.copyArray(new Float32Array(this.width)); - this.attributes.width.needsUpdate = true; - this.attributes.uv.copyArray(new Float32Array(this.uvs)); - this.attributes.uv.needsUpdate = true; - this.attributes.index.copyArray(new Uint16Array(this.indices_array)); - this.attributes.index.needsUpdate = true; - } - - this.geometry.addAttribute( 'position', this.attributes.position ); - this.geometry.addAttribute( 'previous', this.attributes.previous ); - this.geometry.addAttribute( 'next', this.attributes.next ); - this.geometry.addAttribute( 'side', this.attributes.side ); - this.geometry.addAttribute( 'width', this.attributes.width ); - this.geometry.addAttribute( 'uv', this.attributes.uv ); - this.geometry.addAttribute( 'counters', this.attributes.counters ); - - this.geometry.setIndex( this.attributes.index ); - -} - -function memcpy (src, srcOffset, dst, dstOffset, length) { - var i - - src = src.subarray || src.slice ? src : src.buffer - dst = dst.subarray || dst.slice ? dst : dst.buffer - - src = srcOffset ? src.subarray ? - src.subarray(srcOffset, length && srcOffset + length) : - src.slice(srcOffset, length && srcOffset + length) : src - - if (dst.set) { - dst.set(src, dstOffset) - } else { - for (i=0; i<src.length; i++) { - dst[i + dstOffset] = src[i] - } - } - - return dst -} - -/** - * Fast method to advance the line by one position. The oldest position is removed. - * @param position - */ -MeshLine.prototype.advance = function(position) { - - var positions = this.attributes.position.array; - var previous = this.attributes.previous.array; - var next = this.attributes.next.array; - var l = positions.length; - - // PREVIOUS - memcpy( positions, 0, previous, 0, l ); - - // POSITIONS - memcpy( positions, 6, positions, 0, l - 6 ); - - positions[l - 6] = position.x; - positions[l - 5] = position.y; - positions[l - 4] = position.z; - positions[l - 3] = position.x; - positions[l - 2] = position.y; - positions[l - 1] = position.z; - - // NEXT - memcpy( positions, 6, next, 0, l - 6 ); - - next[l - 6] = position.x; - next[l - 5] = position.y; - next[l - 4] = position.z; - next[l - 3] = position.x; - next[l - 2] = position.y; - next[l - 1] = position.z; - - this.attributes.position.needsUpdate = true; - this.attributes.previous.needsUpdate = true; - this.attributes.next.needsUpdate = true; - -}; - -function MeshLineMaterial( parameters ) { - - var vertexShaderSource = [ -'precision highp float;', -'', -'attribute vec3 position;', -'attribute vec3 previous;', -'attribute vec3 next;', -'attribute float side;', -'attribute float width;', -'attribute vec2 uv;', -'attribute float counters;', -'', -'uniform mat4 projectionMatrix;', -'uniform mat4 modelViewMatrix;', -'uniform vec2 resolution;', -'uniform float lineWidth;', -'uniform vec3 color;', -'uniform float opacity;', -'uniform float near;', -'uniform float far;', -'uniform float sizeAttenuation;', -'', -'varying vec2 vUV;', -'varying vec4 vColor;', -'varying float vCounters;', -'', -'vec2 fix( vec4 i, float aspect ) {', -'', -' vec2 res = i.xy / i.w;', -' res.x *= aspect;', -' vCounters = counters;', -' return res;', -'', -'}', -'', -'void main() {', -'', -' float aspect = resolution.x / resolution.y;', -' float pixelWidthRatio = 1. / (resolution.x * projectionMatrix[0][0]);', -'', -' vColor = vec4( color, opacity );', -' vUV = uv;', -'', -' mat4 m = projectionMatrix * modelViewMatrix;', -' vec4 finalPosition = m * vec4( position, 1.0 );', -' vec4 prevPos = m * vec4( previous, 1.0 );', -' vec4 nextPos = m * vec4( next, 1.0 );', -'', -' vec2 currentP = fix( finalPosition, aspect );', -' vec2 prevP = fix( prevPos, aspect );', -' vec2 nextP = fix( nextPos, aspect );', -'', -' float pixelWidth = finalPosition.w * pixelWidthRatio;', -' float w = 1.8 * pixelWidth * lineWidth * width;', -'', -' if( sizeAttenuation == 1. ) {', -' w = 1.8 * lineWidth * width;', -' }', -'', -' vec2 dir;', -' if( nextP == currentP ) dir = normalize( currentP - prevP );', -' else if( prevP == currentP ) dir = normalize( nextP - currentP );', -' else {', -' vec2 dir1 = normalize( currentP - prevP );', -' vec2 dir2 = normalize( nextP - currentP );', -' dir = normalize( dir1 + dir2 );', -'', -' vec2 perp = vec2( -dir1.y, dir1.x );', -' vec2 miter = vec2( -dir.y, dir.x );', -' //w = clamp( w / dot( miter, perp ), 0., 4. * lineWidth * width );', -'', -' }', -'', -' //vec2 normal = ( cross( vec3( dir, 0. ), vec3( 0., 0., 1. ) ) ).xy;', -' vec2 normal = vec2( -dir.y, dir.x );', -' normal.x /= aspect;', -' normal *= .5 * w;', -'', -' vec4 offset = vec4( normal * side, 0.0, 1.0 );', -' finalPosition.xy += offset.xy;', -'', -' gl_Position = finalPosition;', -'', -'}' ]; - - var fragmentShaderSource = [ - '#extension GL_OES_standard_derivatives : enable', -'precision mediump float;', -'', -'uniform sampler2D map;', -'uniform sampler2D alphaMap;', -'uniform float useMap;', -'uniform float useAlphaMap;', -'uniform float useDash;', -'uniform float dashArray;', -'uniform float dashOffset;', -'uniform float dashRatio;', -'uniform float visibility;', -'uniform float alphaTest;', -'uniform vec2 repeat;', -'', -'varying vec2 vUV;', -'varying vec4 vColor;', -'varying float vCounters;', -'', -'void main() {', -'', -' vec4 c = vColor;', -' if( useMap == 1. ) c *= texture2D( map, vUV * repeat );', -' if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV * repeat ).a;', -' if( c.a < alphaTest ) discard;', -' if( useDash == 1. ){', -' c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));', -' }', -' gl_FragColor = c;', -' gl_FragColor.a *= step(vCounters, visibility);', -'}' ]; - - function check( v, d ) { - if( v === undefined ) return d; - return v; - } - - THREE.Material.call( this ); - - parameters = parameters || {}; - - this.lineWidth = check( parameters.lineWidth, 1 ); - this.map = check( parameters.map, null ); - this.useMap = check( parameters.useMap, 0 ); - this.alphaMap = check( parameters.alphaMap, null ); - this.useAlphaMap = check( parameters.useAlphaMap, 0 ); - this.color = check( parameters.color, new THREE.Color( 0xffffff ) ); - this.opacity = check( parameters.opacity, 1 ); - this.resolution = check( parameters.resolution, new THREE.Vector2( 1, 1 ) ); - this.sizeAttenuation = check( parameters.sizeAttenuation, 1 ); - this.near = check( parameters.near, 1 ); - this.far = check( parameters.far, 1 ); - this.dashArray = check( parameters.dashArray, 0 ); - this.dashOffset = check( parameters.dashOffset, 0 ); - this.dashRatio = check( parameters.dashRatio, 0.5 ); - this.useDash = ( this.dashArray !== 0 ) ? 1 : 0; - this.visibility = check( parameters.visibility, 1 ); - this.alphaTest = check( parameters.alphaTest, 0 ); - this.repeat = check( parameters.repeat, new THREE.Vector2( 1, 1 ) ); - - var material = new THREE.RawShaderMaterial( { - uniforms:{ - lineWidth: { type: 'f', value: this.lineWidth }, - map: { type: 't', value: this.map }, - useMap: { type: 'f', value: this.useMap }, - alphaMap: { type: 't', value: this.alphaMap }, - useAlphaMap: { type: 'f', value: this.useAlphaMap }, - color: { type: 'c', value: this.color }, - opacity: { type: 'f', value: this.opacity }, - resolution: { type: 'v2', value: this.resolution }, - sizeAttenuation: { type: 'f', value: this.sizeAttenuation }, - near: { type: 'f', value: this.near }, - far: { type: 'f', value: this.far }, - dashArray: { type: 'f', value: this.dashArray }, - dashOffset: { type: 'f', value: this.dashOffset }, - dashRatio: { type: 'f', value: this.dashRatio }, - useDash: { type: 'f', value: this.useDash }, - visibility: {type: 'f', value: this.visibility}, - alphaTest: {type: 'f', value: this.alphaTest}, - repeat: { type: 'v2', value: this.repeat } - }, - vertexShader: vertexShaderSource.join( '\r\n' ), - fragmentShader: fragmentShaderSource.join( '\r\n' ) - }); - - delete parameters.lineWidth; - delete parameters.map; - delete parameters.useMap; - delete parameters.alphaMap; - delete parameters.useAlphaMap; - delete parameters.color; - delete parameters.opacity; - delete parameters.resolution; - delete parameters.sizeAttenuation; - delete parameters.near; - delete parameters.far; - delete parameters.dashArray; - delete parameters.dashOffset; - delete parameters.dashRatio; - delete parameters.visibility; - delete parameters.alphaTest; - delete parameters.repeat; - - material.type = 'MeshLineMaterial'; - - material.setValues( parameters ); - - return material; - -}; - -MeshLineMaterial.prototype = Object.create( THREE.Material.prototype ); -MeshLineMaterial.prototype.constructor = MeshLineMaterial; - -MeshLineMaterial.prototype.copy = function ( source ) { - - THREE.Material.prototype.copy.call( this, source ); - - this.lineWidth = source.lineWidth; - this.map = source.map; - this.useMap = source.useMap; - this.alphaMap = source.alphaMap; - this.useAlphaMap = source.useAlphaMap; - this.color.copy( source.color ); - this.opacity = source.opacity; - this.resolution.copy( source.resolution ); - this.sizeAttenuation = source.sizeAttenuation; - this.near = source.near; - this.far = source.far; - this.dashArray.copy( source.dashArray ); - this.dashOffset.copy( source.dashOffset ); - this.dashRatio.copy( source.dashRatio ); - this.useDash = source.useDash; - this.visibility = source.visibility; - this.alphaTest = source.alphaTest; - this.repeat.copy( source.repeat ); - - return this; - -}; - -export default { - MeshLine, - MeshLineMaterial, -}; diff --git a/client/splash/vendor/DRACOLoader.js b/client/util/vendor/DRACOLoader.js index 64e6d801..67c18dcf 100644 --- a/client/splash/vendor/DRACOLoader.js +++ b/client/util/vendor/DRACOLoader.js @@ -18,7 +18,7 @@ import * as THREE from 'three'; /** * @param {THREE.LoadingManager} manager */ -DRACOLoader = function(manager) { +const DRACOLoader = function(manager) { this.timeLoaded = 0; this.manager = manager || THREE.DefaultLoadingManager; this.materials = null; diff --git a/client/splash/vendor/geometryHelper.js b/client/util/vendor/geometryHelper.js index 1ac88f3b..1ac88f3b 100644 --- a/client/splash/vendor/geometryHelper.js +++ b/client/util/vendor/geometryHelper.js diff --git a/client/splash/vendor/oktween.js b/client/util/vendor/oktween.js index cbf5d835..cbf5d835 100644 --- a/client/splash/vendor/oktween.js +++ b/client/util/vendor/oktween.js diff --git a/package-lock.json b/package-lock.json index 432f49c6..5f0cd9bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8721,6 +8721,24 @@ "resolved": "https://registry.npmjs.org/three/-/three-0.100.0.tgz", "integrity": "sha512-/lN2rdE1OqIwJr4/HcSaOisiCY0uVA0sqPpbCG5nil2uICEdS0LfGwSVYTtZDsIpR76r3++h5H3Hzg5D+SJBRQ==" }, + "three.meshline": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/three.meshline/-/three.meshline-1.1.0.tgz", + "integrity": "sha512-YJmFMKP9udGMCNIxx6ntTu6qMti3y2a8w/Z2Ado/n8N837YAqm5kkJX55E8jGRyc0IWahlRkO+B2i+XXZluVGw==" + }, + "three.textsprite": { + "version": "18.10.24", + "resolved": "https://registry.npmjs.org/three.textsprite/-/three.textsprite-18.10.24.tgz", + "integrity": "sha512-TZhIqJW7rKv/CnzT/GJ9ujlLFeKYdQuMJygy/E7OKf93C5v/VZelEntvRkPKdqb9DpgEGzoZ441mULsS0Tbl0g==", + "requires": { + "three.texttexture": "^18.10.24" + } + }, + "three.texttexture": { + "version": "18.10.24", + "resolved": "https://registry.npmjs.org/three.texttexture/-/three.texttexture-18.10.24.tgz", + "integrity": "sha512-Narq1VtdQWlz9lmZaO5OahUOoDTgVTb9pIbM4Qiq2vWosTGVyt5wLEZ7FWp10rMMOcpqNfRYDwEJ8wnRxnlKHg==" + }, "through": { "version": "2.3.8", "resolved": "http://registry.npmjs.org/through/-/through-2.3.8.tgz", diff --git a/package.json b/package.json index 3705efc7..c4554893 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,9 @@ "snapsvg": "^0.5.1", "store2": "^2.7.0", "tabulator-tables": "^4.1.3", - "three": "^0.100.0" + "three": "^0.100.0", + "three.meshline": "^1.1.0", + "three.textsprite": "^18.10.24" }, "devDependencies": { "babel-cli": "^6.24.1", |