diff options
Diffstat (limited to 'client/splash')
| -rw-r--r-- | client/splash/index.js | 4 | ||||
| -rw-r--r-- | client/splash/vendor/oktween.js | 159 | ||||
| -rw-r--r-- | client/splash/vendor/three.meshline.js | 486 |
3 files changed, 646 insertions, 3 deletions
diff --git a/client/splash/index.js b/client/splash/index.js index 4fc7609c..6253098e 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -1,3 +1 @@ -/* teaser page */ - -console.log('hey..') +import oktween from './vendor/oktween'
\ No newline at end of file diff --git a/client/splash/vendor/oktween.js b/client/splash/vendor/oktween.js new file mode 100644 index 00000000..cbf5d835 --- /dev/null +++ b/client/splash/vendor/oktween.js @@ -0,0 +1,159 @@ +/* + 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") + } + }) +*/ + +import { lerp } from '../../util/math' + +const oktween = {} +let tweens = [] + +let last_t = 0 +let id = 0 + +oktween.speed = 1 +oktween.add = (tween) => { + tween.id = id++ + tween.obj = tween.obj || {} + if (tween.easing) { + if (typeof tween.easing === "string") { + tween.easing = oktween.easing[tween.easing] + } + } else { + tween.easing = oktween.easing.linear + } + if (!('from' in tween) && !('to' in tween)) { + tween.keys = [] + } else if (!('from' in tween)) { + tween.from = {} + tween.keys = Object.keys(tween.to) + tween.keys.forEach(function(prop) { + tween.from[prop] = parseFloat(tween.obj[prop]) + }) + } else { + tween.keys = Object.keys(tween.from) + } + tween.delay = tween.delay || 0 + tween.start = last_t + tween.delay + tween.done = false + tween.after = tween.after || [] + tween.then = (fn) => { tween.after.push(fn); return tween } + tween.tick = 0 + tween.skip = tween.skip || 1 + tween.dt = 0 + tweens.push(tween) + return tween +} +oktween.update = (t) => { + let done = false + requestAnimationFrame(oktween.update) + last_t = t * oktween.speed + if (tweens.length === 0) return + tweens.forEach((tween, i) => { + const dt = Math.min(1.0, (t - tween.start) / tween.duration) + tween.tick++ + if (dt < 0 || (dt < 1 && (tween.tick % tween.skip != 0))) return + const ddt = tween.easing(dt) + tween.dt = ddt + tween.keys.forEach((prop) => { + let val = lerp(ddt, tween.from[prop], tween.to[prop]) + if (tween.round) val = Math.round(val) + if (tween.units) val = (Math.round(val)) + tween.units + tween.obj[prop] = val + }) + tween.update && tween.update(tween.obj, dt) + if (dt == 1) { + tween.finished && tween.finished(tween) + if (tween.after.length) { + var twn = tween.after.shift() + twn.obj = twn.obj || tween.obj + twn.after = tween.after + oktween.add(twn) + } + if (tween.loop) { + tween.start = t + tween.delay + } + else { + done = true + tween.done = true + } + } + }) + if (done) { + tweens = tweens.filter(function(tween){ return ! tween.done }) + } +} + +requestAnimationFrame(oktween.update) + +oktween.easing = { + linear: (t) => { + return t + }, + circ_out: (t) => { + return Math.sqrt(1 - (t = t - 1) * t) + }, + circ_in: (t) => { + return -(Math.sqrt(1 - (t * t)) - 1) + }, + circ_in_out: (t) => { + return ((t*=2) < 1) ? -0.5 * (Math.sqrt(1 - t * t) - 1) : 0.5 * (Math.sqrt(1 - (t -= 2) * t) + 1) + }, + quad_in: (n) => { + return Math.pow(n, 2) + }, + quad_out: (n) => { + return n * (n - 2) * -1 + }, + quad_in_out: (n) => { + n = n * 2 + if (n < 1) { return Math.pow(n, 2) / 2 } + return -1 * ((--n) * (n - 2) - 1) / 2 + }, + cubic_bezier: (mX1, mY1, mX2, mY2) => { + function A(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1 } + function B(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1 } + function C(aA1) { return 3.0 * aA1 } + + // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. + function CalcBezier(aT, aA1, aA2) { + return ((A(aA1, aA2)*aT + B(aA1, aA2))*aT + C(aA1))*aT + } + + // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2. + function GetSlope(aT, aA1, aA2) { + return 3.0 * A(aA1, aA2)*aT*aT + 2.0 * B(aA1, aA2) * aT + C(aA1) + } + + function GetTForX(aX) { + // Newton raphson iteration + let aGuessT = aX + for (let i = 0; i < 10; ++i) { + const currentSlope = GetSlope(aGuessT, mX1, mX2) + if (currentSlope == 0.0) return aGuessT + const currentX = CalcBezier(aGuessT, mX1, mX2) - aX + aGuessT -= currentX / currentSlope + } + return aGuessT + } + + return function (aX) { + if (mX1 == mY1 && mX2 == mY2) return aX // linear + return CalcBezier(aX, mY1, mY2) + } + } +} + +export default oktween diff --git a/client/splash/vendor/three.meshline.js b/client/splash/vendor/three.meshline.js new file mode 100644 index 00000000..c6e998e3 --- /dev/null +++ b/client/splash/vendor/three.meshline.js @@ -0,0 +1,486 @@ +;(function() { + +"use strict"; + +var root = this + +var has_require = typeof require !== 'undefined' + +var THREE = root.THREE || has_require && require('three') +if( !THREE ) + throw new Error( 'MeshLine requires three.js' ) + +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; + +}; + +if( typeof exports !== 'undefined' ) { + if( typeof module !== 'undefined' && module.exports ) { + exports = module.exports = { MeshLine: MeshLine, MeshLineMaterial: MeshLineMaterial }; + } + exports.MeshLine = MeshLine; + exports.MeshLineMaterial = MeshLineMaterial; +} +else { + root.MeshLine = MeshLine; + root.MeshLineMaterial = MeshLineMaterial; +} + +}).call(this);
\ No newline at end of file |