function AudioSystem() {
var listener = new THREE.AudioListener();
var sound = new THREE.Audio(listener);
var loader = new THREE.AudioLoader();
var FFT_SIZE = 2048;
var MASTER_VOLUME = .8;
var audioContext = sound.context;
var analyser = audioContext.createAnalyser();
listener.setMasterVolume(MASTER_VOLUME);
loader.load(URL, function(buffer) {
console.log('audio loaded.')
sound.setBuffer(buffer);
sound.setLoop(false);
sound.setVolume(.5);
sound.getOutput().connect(analyser);
// sound.play();
document.querySelector('#play-btn').style.display = 'block';
soundwave.transitionShowSoundwave();
});
this.waveform = new Uint8Array(analyser.frequencyBinCount);
this.frequency = new Uint8Array(analyser.frequencyBinCount);
this.sound = sound;
this.analyser = analyser;
audioUniforms.waveform.value = new THREE.DataTexture(this.waveform, FFT_SIZE / 2, 1, THREE.LuminanceFormat);
audioUniforms.frequency.value = new THREE.DataTexture(this.frequency, FFT_SIZE / 2, 1, THREE.LuminanceFormat);
}
AudioSystem.prototype.start = function() {
this.sound.play();
}
AudioSystem.prototype.update = function() {
this.analyser.getByteTimeDomainData(this.waveform);
this.analyser.getByteFrequencyData(this.frequency);
}
AudioSystem.prototype.play = function() {
this.sound.play();
}
// =====================================================
THREE.ShaderChunk.app = "\n\nuniform vec2 screen;\nuniform vec2 mouse;\nuniform float dt;\nuniform float time;\n\n";
THREE.ShaderChunk.audio = "\n\nuniform sampler2D waveform;\nuniform sampler2D frequency;\n\nuniform float instantVolume;\nuniform float smoothedVolume;\n\nfloat sampleAudioTexture(sampler2D tex, float coord) {\n\n return texture2D(tex, vec2(coord, 0.0)).r;\n\n}\n\nfloat averageAudioTexture(sampler2D tex, float coord, float width) {\n\n float result = 0.0;\n\n for (int i = 0; i < 4; ++i) {\n \n result += sampleAudioTexture(tex, coord + width * (float(i) - 2.0)) / 4.0;\n \n }\n \n return result;\n \n}\n\n";
THREE.ShaderChunk.rotation_matrix = "\n\nmat4 createRotationMatrix(vec3 axis, float angle) {\n \n axis = normalize(axis);\n float s = sin(angle);\n float c = cos(angle);\n float oc = 1.0 - c;\n\n return mat4(oc * axis.x * axis.x + c, oc * axis.x * axis.y - axis.z * s, oc * axis.z * axis.x + axis.y * s, 0.0,\n oc * axis.x * axis.y + axis.z * s, oc * axis.y * axis.y + c, oc * axis.y * axis.z - axis.x * s, 0.0,\n oc * axis.z * axis.x - axis.y * s, oc * axis.y * axis.z + axis.x * s, oc * axis.z * axis.z + c, 0.0,\n 0.0, 0.0, 0.0, 1.0);\n\n}\n\n";
THREE.ShaderChunk.hash = "\n\n// Pseudorandom hash functions\n// https://www.shadertoy.com/view/4djSRW\n\n// Use these for integer stepped ranges, ie Value-Noise/Perlin noise functions.\n#define HASHSCALE1 0.1031\n#define HASHSCALE3 vec3(0.1031, 0.1030, 0.0973)\n#define HASHSCALE4 vec4(1031, 0.1030, 0.0973, 0.1099)\n\n// Use these for smaller input rangers like audio tick or 0-1 UVs.\n// #define HASHSCALE1 443.8975\n// #define HASHSCALE3 vec3(443.897, 441.423, 437.195)\n// #define HASHSCALE4 vec4(443.897, 441.423, 437.195, 444.129)\n\nfloat hash11(float p)\n{\n vec3 o = fract(vec3(p,p,p) * HASHSCALE1);\n o += dot(o, o.yzx + 19.19);\n return fract((o.x + o.y) * o.z);\n}\n\nfloat hash12(vec2 p)\n{\n vec3 o = fract(p.xyx * HASHSCALE1);\n o += dot(o, o.yzx + 19.19);\n return fract((o.x + o.y) * o.z);\n}\n\nfloat hash13(vec3 p)\n{\n vec3 o = fract(p.xyz * HASHSCALE1);\n o += dot(o, o.yzx + 19.19);\n return fract((o.x + o.y) * o.z);\n}\n\nvec2 hash21(float p)\n{\n vec3 o = fract(vec3(p,p,p) * HASHSCALE3);\n o += dot(o, o.yzx + 19.19);\n return fract((o.xx + o.yz) * o.zy);\n}\n\nvec2 hash22(vec2 p)\n{\n vec3 o = fract(p.xyx * HASHSCALE3);\n o += dot(o, o.yzx + 19.19);\n return fract((o.xx + o.yz) * o.zy);\n\n}\n\nvec2 hash23(vec3 p)\n{\n vec3 o = fract(p.xyz * HASHSCALE3);\n o += dot(o, o.yzx + 19.19);\n return fract((o.xx+o.yz) * o.zy);\n}\n\nvec3 hash31(float p)\n{\n vec3 o = fract(vec3(p,p,p) * HASHSCALE3);\n o += dot(o, o.yzx + 19.19);\n return fract((o.xxy + o.yzz) * o.zyx); \n}\n\nvec3 hash32(vec2 p)\n{\n vec3 o = fract(p.xyx * HASHSCALE3);\n o += dot(o, o.yxz + 19.19);\n return fract((o.xxy + o.yzz) * o.zyx);\n}\n\nvec3 hash33(vec3 p)\n{\n vec3 o = fract(p.xyz * HASHSCALE3);\n o += dot(o, o.yxz + 19.19);\n return fract((o.xxy + o.yxx) * o.zyx);\n}\n\nvec4 hash41(float p)\n{\n vec4 o = fract(vec4(p,p,p,p) * HASHSCALE4);\n o += dot(o, o.wzxy + 19.19);\n return fract((o.xxyz + o.yzzw) * o.zywx);\n}\n\nvec4 hash42(vec2 p)\n{\n vec4 o = fract(p.xyxy * HASHSCALE4);\n o += dot(o, o.wzxy + 19.19);\n return fract((o.xxyz + o.yzzw) * o.zywx);\n}\n\nvec4 hash43(vec3 p)\n{\n vec4 o = fract(p.xyzx * HASHSCALE4);\n o += dot(o, o.wzxy + 19.19);\n return fract((o.xxyz + o.yzzw) * o.zywx);\n}\n\nvec4 hash44(vec4 p)\n{\n vec4 o = fract(p.xyzw * HASHSCALE4);\n o += dot(o, o.wzxy + 19.19);\n return fract((o.xxyz + o.yzzw) * o.zywx);\n}\n\n";
THREE.ShaderChunk.noise = "\n\n#include <hash>\n\n// http://iquilezles.org/www/articles/gradientnoise/gradientnoise.htm\n\n// returns 3D value noise\nfloat noise(in vec3 x)\n{\n // grid\n vec3 p = floor(x);\n vec3 w = fract(x);\n \n // quintic interpolant\n vec3 u = w*w*w*(w*(w*6.0-15.0)+10.0);\n \n // gradients\n vec3 ga = hash33( p+vec3(0.0,0.0,0.0) );\n vec3 gb = hash33( p+vec3(1.0,0.0,0.0) );\n vec3 gc = hash33( p+vec3(0.0,1.0,0.0) );\n vec3 gd = hash33( p+vec3(1.0,1.0,0.0) );\n vec3 ge = hash33( p+vec3(0.0,0.0,1.0) );\n vec3 gf = hash33( p+vec3(1.0,0.0,1.0) );\n vec3 gg = hash33( p+vec3(0.0,1.0,1.0) );\n vec3 gh = hash33( p+vec3(1.0,1.0,1.0) );\n \n // projections\n float va = dot( ga, w-vec3(0.0,0.0,0.0) );\n float vb = dot( gb, w-vec3(1.0,0.0,0.0) );\n float vc = dot( gc, w-vec3(0.0,1.0,0.0) );\n float vd = dot( gd, w-vec3(1.0,1.0,0.0) );\n float ve = dot( ge, w-vec3(0.0,0.0,1.0) );\n float vf = dot( gf, w-vec3(1.0,0.0,1.0) );\n float vg = dot( gg, w-vec3(0.0,1.0,1.0) );\n float vh = dot( gh, w-vec3(1.0,1.0,1.0) );\n\t\n // interpolation\n return va + \n u.x*(vb-va) + \n u.y*(vc-va) + \n u.z*(ve-va) + \n u.x*u.y*(va-vb-vc+vd) + \n u.y*u.z*(va-vc-ve+vg) + \n u.z*u.x*(va-vb-ve+vf) + \n u.x*u.y*u.z*(-va+vb+vc-vd+ve-vf-vg+vh);\n}\n\n// returns 3D value noise (in .x) and its derivatives (in .yzw)\nvec4 noised( in vec3 x )\n{\n // grid\n vec3 p = floor(x);\n vec3 w = fract(x);\n \n // quintic interpolant\n vec3 u = w*w*w*(w*(w*6.0-15.0)+10.0);\n vec3 du = 30.0*w*w*(w*(w-2.0)+1.0);\n \n // gradients\n vec3 ga = hash33( p+vec3(0.0,0.0,0.0) );\n vec3 gb = hash33( p+vec3(1.0,0.0,0.0) );\n vec3 gc = hash33( p+vec3(0.0,1.0,0.0) );\n vec3 gd = hash33( p+vec3(1.0,1.0,0.0) );\n vec3 ge = hash33( p+vec3(0.0,0.0,1.0) );\n vec3 gf = hash33( p+vec3(1.0,0.0,1.0) );\n vec3 gg = hash33( p+vec3(0.0,1.0,1.0) );\n vec3 gh = hash33( p+vec3(1.0,1.0,1.0) );\n \n // projections\n float va = dot( ga, w-vec3(0.0,0.0,0.0) );\n float vb = dot( gb, w-vec3(1.0,0.0,0.0) );\n float vc = dot( gc, w-vec3(0.0,1.0,0.0) );\n float vd = dot( gd, w-vec3(1.0,1.0,0.0) );\n float ve = dot( ge, w-vec3(0.0,0.0,1.0) );\n float vf = dot( gf, w-vec3(1.0,0.0,1.0) );\n float vg = dot( gg, w-vec3(0.0,1.0,1.0) );\n float vh = dot( gh, w-vec3(1.0,1.0,1.0) );\n\t\n // interpolation\n float v = va + \n u.x*(vb-va) + \n u.y*(vc-va) + \n u.z*(ve-va) + \n u.x*u.y*(va-vb-vc+vd) + \n u.y*u.z*(va-vc-ve+vg) + \n u.z*u.x*(va-vb-ve+vf) + \n u.x*u.y*u.z*(-va+vb+vc-vd+ve-vf-vg+vh);\n \n vec3 d = ga + \n u.x*(gb-ga) + \n u.y*(gc-ga) + \n u.z*(ge-ga) + \n u.x*u.y*(ga-gb-gc+gd) + \n u.y*u.z*(ga-gc-ge+gg) + \n u.z*u.x*(ga-gb-ge+gf) + \n u.x*u.y*u.z*(-ga+gb+gc-gd+ge-gf-gg+gh) + \n \n du * (vec3(vb-va,vc-va,ve-va) + \n u.yzx*vec3(va-vb-vc+vd,va-vc-ve+vg,va-vb-ve+vf) + \n u.zxy*vec3(va-vb-ve+vf,va-vb-vc+vd,va-vc-ve+vg) + \n u.yzx*u.zxy*(-va+vb+vc-vd+ve-vf-vg+vh));\n \n return vec4( v, d ); \n}\n";
THREE.ShaderChunk.project_billboard = "\n\n#include <rotation_matrix>\n\n/**\n * Project a vertex as a billboard in camera-space.\n */\nvec3 projectBillboardVertex(vec3 vertex, float scale) {\n\n vec3 cameraRight = vec3(viewMatrix[0][0], viewMatrix[1][0], viewMatrix[2][0]);\n vec3 cameraUp = vec3(viewMatrix[0][1], viewMatrix[1][1], viewMatrix[2][1]);\n\n return (cameraRight * vertex.x * scale) + (cameraUp * vertex.y * scale);\n}\n\n/**\n * Project a vertex as a billboard in camera-space, at an angle.\n */\nvec3 projectBillboardVertex(vec3 vertex, float angle, float scale) {\n \n vec3 cameraForward = vec3(viewMatrix[0][2], viewMatrix[1][2], viewMatrix[2][2]);\n vec3 cameraRight = vec3(viewMatrix[0][0], viewMatrix[1][0], viewMatrix[2][0]);\n vec3 cameraUp = vec3(viewMatrix[0][1], viewMatrix[1][1], viewMatrix[2][1]);\n\n mat4 billboardRotation = createRotationMatrix(cameraForward, angle);\n vec3 billboardRight = (billboardRotation * vec4(cameraRight, 1.0)).xyz;\n vec3 billboardUp = (billboardRotation * vec4(cameraUp, 1.0)).xyz;\n \n return (billboardRight * vertex.x * scale) + (billboardUp * vertex.y * scale);\n\n}\n \n";
var SoundwaveTrampolineShader = {};
SoundwaveTrampolineShader.vertex = "\n\n#include <project_billboard>\n#include <common>\n#include <app>\n#include <audio>\n#include <noise>\n\nuniform float radius;\nuniform float radiusMultiplier;\nuniform float rotation;\nuniform float perturbMultiplier;\n\nuniform float audioFrequencyFactor;\nuniform float audioVolumeFactor;\nuniform float audioScaleFactor;\nuniform float audioScaleExponent;\n\nuniform float particleScale;\nuniform float particleCount;\n\nattribute float pid;\nattribute vec3 seed;\n\nvoid main() {\n \n float norm = pid / particleCount;\n float theta = norm * PI2;\n \n // arrange the particles in a circle\n vec2 circle = vec2(sin(theta + rotation * PI2), cos(theta + rotation * PI2));\n \n #ifdef USE_FREQUENCY_OFFSET\n \n float frequencyCoord = seed.x; // the trampoline uses random frequency coordinates\n \n frequencyCoord *= 0.6; // ignore upper (boring) frequencies\n \n float frequencySample = sampleAudioTexture(frequency, frequencyCoord);\n float frequencyOffset = frequencySample * audioFrequencyFactor;\n \n frequencyOffset *= seed.y;\n \n #endif\n \n #ifdef USE_VOLUME_OFFSET\n \n float volumeOffset = smoothedVolume * audioVolumeFactor;\n \n volumeOffset *= seed.y; \n \n #endif\n \n // Sum offsets and perturb the particle position.\n \n float offset = 0.0;\n \n #ifdef USE_FREQUENCY_OFFSET\n offset += frequencyOffset;\n #endif\n \n #ifdef USE_VOLUME_OFFSET\n offset += volumeOffset;\n #endif\n \n vec3 particlePosition = vec3(circle, 0) * radius * radiusMultiplier + vec3(0, 0, -1) * offset * perturbMultiplier;\n \n // Compute the particle scale.\n \n float scale = particleScale;\n scale += pow(max(0.0, offset * audioScaleFactor), audioScaleExponent);\n scale /= length(cameraPosition - particlePosition);\n \n // Project the vertex as a billboard in model space, then add it to the particle position in\n // world space. We don't need to use the model matrix here because the particle's position\n // is always computed in world space.\n \n vec3 worldPosition = particlePosition + projectBillboardVertex(position, scale);\n \n gl_Position = projectionMatrix * viewMatrix * vec4(worldPosition, 1.0);\n \n}\n\n";
SoundwaveTrampolineShader.fragment = "\n\nuniform vec3 color;\n\nvoid main() {\n\n gl_FragColor = vec4(color, 1.0);\n\n}\n\n";
var SoundwaveRingShader = {};
SoundwaveRingShader.vertex = "\n\n#include <project_billboard>\n#include <common>\n#include <app>\n#include <audio>\n#include <noise>\n\nuniform float radius;\nuniform float radiusMultiplier;\nuniform float rotation;\nuniform float dampenExponent;\nuniform float perturbMultiplier;\n\nuniform float audioFrequencyFactor;\nuniform float audioVolumeFactor;\nuniform float audioScaleFactor;\nuniform float audioScaleExponent;\n\nuniform vec3 noiseParams;\n\nuniform float sineFrequency;\nuniform float sineAmplitude;\nuniform float sineTimescale;\n\nuniform float particleScale;\nuniform float particleCount;\n\nattribute float pid;\nattribute vec3 seed;\n\nvoid main() {\n \n float norm = pid / particleCount;\n float theta = norm * PI2;\n \n // arrange the particles in a circle\n vec2 circle = vec2(sin(theta + rotation * PI2), cos(theta + rotation * PI2));\n \n // dampen values when norm is close to 0 or 1\n float dampen = pow(abs(sin(norm * PI)), dampenExponent);\n \n #ifdef USE_FREQUENCY_OFFSET\n \n float frequencyCoord = norm;\n \n #ifdef USE_MIRRORED_FREQUENCY\n frequencyCoord = abs(frequencyCoord * 2.0 - 1.0);\n #endif\n \n frequencyCoord *= 0.6; // ignore upper (boring) frequencies\n \n float frequencySample = sampleAudioTexture(frequency, frequencyCoord);\n float frequencyOffset = frequencySample * audioFrequencyFactor;\n \n #endif\n \n #ifdef USE_VOLUME_OFFSET\n \n float volumeOffset = smoothedVolume * audioVolumeFactor;\n \n #endif\n \n #ifdef USE_SINE_OFFSET\n \n float sineOffset = sin(theta * sineFrequency + time * sineTimescale) * sineAmplitude * smoothedVolume * dampen;\n \n #endif\n \n #ifdef USE_NOISE_OFFSET\n \n // Compute some gradient noise using the circle coordinates and the application time. We use the\n // absolute value of the x coordinate to make the noise horizontally symmetrical. Unfortunately\n // this makes the offset discontinuous around x == 0. Fortunately the x derivative *is*\n // continuous there, so we mix the value noise with the x derivative.\n \n vec3 noiseCoord = vec3(0.0);\n \n noiseCoord.x = max(0.25, smoothedVolume) * noiseParams.x * abs(circle.x);\n noiseCoord.y = max(0.25, smoothedVolume) * noiseParams.y * circle.y;\n noiseCoord.z = max(0.10, smoothedVolume) * noiseParams.z * sin(time);\n \n vec4 noiseDerivatives = noised(noiseCoord);\n float noiseOffset = mix(noiseDerivatives.x, noiseDerivatives.y * 0.2, dampen) * max(0.1, dampen); \n \n #endif\n \n // Sum offsets and perturb the particle position.\n \n float offset = 0.0;\n \n #ifdef USE_FREQUENCY_OFFSET\n offset += frequencyOffset;\n #endif\n \n #ifdef USE_VOLUME_OFFSET\n offset += volumeOffset;\n #endif\n \n #ifdef USE_NOISE_OFFSET\n offset += noiseOffset;\n #endif\n \n #ifdef USE_SINE_OFFSET\n offset += sineOffset;\n #endif\n \n vec3 particlePosition = vec3(circle, 0) * radius * radiusMultiplier + vec3(circle, 0) * offset * perturbMultiplier;\n \n // Compute the particle scale.\n \n float scale = particleScale;\n scale += pow(max(0.0, offset * audioScaleFactor), audioScaleExponent);\n scale /= length(cameraPosition - particlePosition);\n \n vec3 transformed = particlePosition + projectBillboardVertex(position, scale);\n \n #include <project_vertex>\n \n}\n\n";
SoundwaveRingShader.fragment = "\n\nuniform vec3 color;\n\nvoid main() {\n\n gl_FragColor = vec4(color, 1.0);\n\n}\n\n"
// =====================================================
var audioUniforms = {
waveform: {
value: null,
type: "t"
},
frequency: {
value: null,
type: "t"
},
instantVolume: {
value: 0
},
smoothedVolume: {
value: 0
}
}
// =====================================================
var appUniforms = {
screen: {
value: new THREE.Vector2
},
mouse: {
value: new THREE.Vector2
},
time: {
value: 0
},
dt: {
value: 0
}
};
// =====================================================
function ParticleBufferGeometry(options) {
options = Object.assign({
particleCount: 1e3
}, options);
if (!options.particleGeometry) throw new Error("You must provide a particle geometry.");
var t = void 0;
if (typeof options.particleGeometry == 'function') {
t = options.particleGeometry;
} else if (Array.isArray(options.particleGeometry)) {
t = function() {
return options.particleGeometry[THREE.Math.randInt(0, options.particleGeometry.length - 1)];
}
} else {
t = function() {
return options.particleGeometry;
}
}
for (var i = [], n = [], r = [], o = [], a = 0; a < options.particleCount; a++) {
for (var s = t(), l = s.indexArray.length, h = o.length / 3, u = 0; u < l; u++) r.push(s.indexArray[u] + h);
for (var p = Math.random(), d = Math.random(), f = Math.random(), m = s.vertexArray.length / 3, v = 0; v < m; v++) {
i.push(a), n.push(p, d, f);
var g = s.vertexArray[3 * v + 0],
y = s.vertexArray[3 * v + 1],
_ = s.vertexArray[3 * v + 2];
o.push(g, y, _)
}
}
var b = new Uint32Array(r),
w = new THREE.BufferAttribute(b, 1),
x = new Float32Array(i),
T = new THREE.BufferAttribute(x, 1),
S = new Float32Array(n),
E = new THREE.BufferAttribute(S, 3),
P = new Float32Array(o),
M = new THREE.BufferAttribute(P, 3),
A = new THREE.BufferGeometry;
A.setIndex(w);
A.addAttribute("pid", T);
A.addAttribute("seed", E);
A.addAttribute("position", M);
Object.defineProperties(A, {
particleCount: {
value: options.particleCount,
writable: !1
}
});
return A;
}
function FannedCircleParticleGeometry() {
for (var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 3, t = [], i = [], n = 0; n < e; n++) {
var r = 2 * n * Math.PI / e;
i.push(Math.sin(r), Math.cos(r), 0)
}
for (var o = 0; o < e - 2; o++) t.push(o + 2, o + 1, 0);
return {
indexArray: t,
vertexArray: i
}
}
function TetrahedronParticleGeometry() {
return {
indexArray: [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1],
vertexArray: [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1]
}
}
// =====================================================
function SoundwaveTrampoline(options) {
options = Object.assign({
radius: 2,
audioFrequencyFactor: .5,
audioVolumeFactor: .2,
audioScaleFactor: .35,
audioScaleExponent: 2
}, options);
var geometry = ParticleBufferGeometry({
particleCount: 1e3,
// particleCount: 100,
particleGeometry: FannedCircleParticleGeometry(18)
// particleGeometry: TetrahedronParticleGeometry(18)
});
var uniforms = Object.assign({
color: {
value: options.color
},
radius: {
value: options.radius
},
radiusMultiplier: {
value: 1
// value: .2
},
perturbMultiplier: {
value: 1
// value: .2
},
audioFrequencyFactor: {
value: options.audioFrequencyFactor
},
audioVolumeFactor: {
value: options.audioVolumeFactor
},
audioScaleFactor: {
value: options.audioScaleFactor
},
audioScaleExponent: {
value: options.audioScaleExponent
},
particleCount: {
value: geometry.particleCount
},
particleScale: {
value: .05
// value: 0
}
}, audioUniforms, appUniforms);
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
defines: {
USE_FREQUENCY_OFFSET: !0,
USE_VOLUME_OFFSET: !0
},
vertexShader: SoundwaveTrampolineShader.vertex,
fragmentShader: SoundwaveTrampolineShader.fragment
});
var mesh = new THREE.Mesh(geometry, material);
mesh.name = "Soundwave Trampoline";
mesh.frustumCulled = !1;
mesh.matrixAutoUpdate = !1;
this.object3D = mesh;
}
// =====================================================
function createSoundwaveRing(options) {
options = Object.assign({
radius: 1.2,
radiusMultiplier: 1,
rotation: .5,
dampenExponent: 2.5,
audioFrequencyFactor: .5,
audioVolumeFactor: .2,
audioScaleFactor: .35,
audioScaleExponent: 2,
noiseParams: new THREE.Vector3(9, 7, 17),
sineFrequency: 30,
sineAmplitude: .09,
sineTimescale: 10
}, options);
var geometry = ParticleBufferGeometry({
particleCount: 800,
// particleCount: 80,
particleGeometry: FannedCircleParticleGeometry(3)
});
var uniforms = Object.assign({
color: {
value: options.color
},
radius: {
value: options.radius
},
radiusMultiplier: {
value: options.radiusMultiplier
},
rotation: {
value: options.rotation
},
dampenExponent: {
value: options.dampenExponent
},
perturbMultiplier: {
value: 1
},
audioFrequencyFactor: {
value: options.audioFrequencyFactor
},
audioVolumeFactor: {
value: options.audioVolumeFactor
},
audioScaleFactor: {
value: options.audioScaleFactor
},
audioScaleExponent: {
value: options.audioScaleExponent
},
noiseParams: {
value: options.noiseParams
},
sineFrequency: {
value: options.sineFrequency
},
sineAmplitude: {
value: options.sineAmplitude
},
sineTimescale: {
value: options.sineTimescale
},
particleCount: {
value: geometry.particleCount
},
particleScale: {
value: options.particleScale
}
}, audioUniforms, appUniforms);
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
defines: {
USE_MIRRORED_FREQUENCY: !0,
USE_FREQUENCY_OFFSET: !0,
USE_VOLUME_OFFSET: !0,
USE_NOISE_OFFSET: !0,
USE_SINE_OFFSET: !0
},
vertexShader: SoundwaveRingShader.vertex,
fragmentShader: SoundwaveRingShader.fragment,
transparent: true
});
var mesh = new THREE.Mesh(geometry, material);
mesh.name = "Soundwave Ring";
mesh.frustumCulled = !1;
mesh.matrixAutoUpdate = !1;
return mesh;
}
function SoundwaveRing(options) {
this.index = options.index;
this.object3D = createSoundwaveRing(options);
}
// =====================================================
function Soundwave() {
this.object3D = new THREE.Object3D;
var children = [
new SoundwaveRing({
index: 0,
color: new THREE.Color(16711680),
radius: 1.6,
rotation: .6,
dampenExponent: .6,
audioFrequencyFactor: .35,
audioVolumeFactor: 0,
audioScaleFactor: .68,
audioScaleExponent: 2.2,
noiseParams: new THREE.Vector3(9.6, 7.3, 9),
// noiseParams: new THREE.Vector3(0, 0, 0),
sineFrequency: 13,
sineAmplitude: .33,
sineTimescale: 19,
particleScale: .07
}),
new SoundwaveRing({
index: 1,
color: new THREE.Color(13379233),
radius: 1.2,
rotation: .6,
dampenExponent: .6,
audioFrequencyFactor: .6,
audioVolumeFactor: .55,
audioScaleFactor: .35,
audioScaleExponent: 2,
noiseParams: new THREE.Vector3(9, 7, 17),
sineFrequency: 31,
sineAmplitude: .09,
sineTimescale: 10,
particleScale: .06
}),
// new SoundwaveRing({
// index: 1,
// color: new THREE.Color(13379233),
// radius: 1.2,
// rotation: .6,
// dampenExponent: .6,
// audioFrequencyFactor: .6,
// audioVolumeFactor: .55,
// audioScaleFactor: .35,
// audioScaleExponent: 2,
// noiseParams: new THREE.Vector3(9, 7, 17),
// sineFrequency: 31,
// sineAmplitude: .09,
// sineTimescale: 10,
// // particleScale: .06
// particleScale: .2
// }),
new SoundwaveRing({
index: 2,
color: new THREE.Color(4595886),
radius: 1.3,
rotation: .18,
dampenExponent: 2.5,
audioFrequencyFactor: .5,
audioVolumeFactor: .2,
audioScaleFactor: .35,
audioScaleExponent: 2,
noiseParams: new THREE.Vector3(9, 7, 17),
sineFrequency: 30,
sineAmplitude: .09,
sineTimescale: 10,
particleScale: .06
}),
new SoundwaveRing({
index: 3,
color: new THREE.Color(4490999),
radius: 1.2,
rotation: 1,
dampenExponent: 9,
audioFrequencyFactor: .5,
audioVolumeFactor: .2,
audioScaleFactor: .35,
audioScaleExponent: 2,
noiseParams: new THREE.Vector3(9, 7, 17),
sineFrequency: 30,
sineAmplitude: .09,
sineTimescale: 10,
particleScale: .06
}),
new SoundwaveTrampoline({
color: new THREE.Color(16711680),
radius: 1.6,
// radius: 3,
audioFrequencyFactor: 3.4,
audioVolumeFactor: 9.7,
audioScaleFactor: .15,
// audioScaleFactor: .1,
audioScaleExponent: 5.5
// audioScaleExponent: 10
})];
children.forEach(child => {
this.object3D.add(child.object3D);
});
}
Soundwave.prototype.transitionShowSoundwave = function() {
var timeline = new TimelineMax();
var object3D = this.object3D;
object3D.visible = true;
app.camera.target.set(0, 0, 0);
app.camera.position.set(0, 0, -10);
// app.camera.position.set(0, 0, -12);
object3D.children.forEach(child => {
timeline.from(child.material.uniforms.particleScale, 1, {
value: 0,
ease: Power3.easeOut
}, 0);
timeline.from(child.material.uniforms.radiusMultiplier, .4, {
value: .2,
ease: Power3.easeOut
}, 0);
timeline.from(child.material.uniforms.perturbMultiplier, .4, {
value: .2,
ease: Power3.easeOut
}, 0);
});
// object3D.translateY(100)
// XXX 模拟线分开
// var props = {
// r: 1.2,
// noiseX: 9,
// noiseY: 7,
// noiseZ: 17,
// particleScale: .2
// };
// var line2 = object3D.children[1];
// // line2.material.uniforms.particleScale.value = .7;
// TweenMax.to(props, 1, {
// r: 1.5,
// noiseX: 9.6,
// noiseY: 7.3,
// noiseZ: 9,
// particleScale: .06,
// delay: 2,
// onUpdate: function() {
// // line2.material.uniforms.radius.value = props.r;
// line2.material.uniforms.particleScale.value = props.particleScale;
// line2.material.uniforms.noiseParams.value = new THREE.Vector3(props.noiseX, props.noiseY, props.noiseZ);
// }
// })
}
Soundwave.prototype.transitionExplodeSoundwave = function() {
var timeline = new TimelineMax();
var object3D = this.object3D;
object3D.visible = true;
object3D.children.forEach((child, index) => {
var delay = .01 * index;
timeline.add([
TweenLite.to(child.material.uniforms.radiusMultiplier, .4, {
value: .7,
ease: Power2.easeOut
}),
TweenLite.to(child.material.uniforms.radiusMultiplier, .8, {
value: 4,
ease: Power3.easeOut
})
], delay, "sequence");
timeline.add([
TweenLite.to(child.material.uniforms.perturbMultiplier, .4, {
value: .4,
ease: Power2.easeOut
}),
TweenLite.to(child.material.uniforms.perturbMultiplier, .8, {
value: 1,
ease: Power3.easeOut
})
], delay, "sequence");
});
timeline.call(() => {
return object3D.visible = !1
})
}
// =====================================================
function CameraDolly() {
this.object3D = new THREE.Object3D;
this.parallaxScale = .15;
this.parallaxSpeed = .1;
this.fixedTarget = !0;
this.fixedTargetVector = new THREE.Vector3;
}
CameraDolly.prototype.start = function() {
this.object3D.add(app.camera);
app.camera.target = new THREE.Vector3
}
CameraDolly.prototype.update = function() {
// var t = app.mouse,
var t = new THREE.Vector3,
i = new THREE.Vector3;
i.x = +t.x * this.parallaxScale;
i.y = -t.y * this.parallaxScale;
if (this.fixedTarget && app.camera.target) {
this.fixedTargetVector.copy(app.camera.target).sub(this.object3D.position);
app.camera.lookAt(this.fixedTargetVector);
} else if (app.camera.target) {
app.camera.lookAt(app.camera.target)
}
this.object3D.position.lerp(i, this.parallaxSpeed)
}
// =====================================================
function Application() {
var scene, camera, renderer, clock;
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true
});
camera = new THREE.PerspectiveCamera(45, 1, .1, 1e3);
scene = new THREE.Scene();
scene.camera = camera;
clock = new THREE.Clock(false);
this.renderer = renderer;
this.camera = camera;
this.scene = scene;
this.canvas = renderer.domElement;
this.clock = clock;
this.animate = this.animate.bind(this);
}
Application.prototype.setup = function() {
var e = window.innerWidth,
t = window.innerHeight,
i = window.devicePixelRatio || 1;
this.renderer.setPixelRatio(i);
this.renderer.setSize(e, t, !0);
if (this.scene.camera === this.camera) {
this.camera.aspect = e / t;
this.camera.updateProjectionMatrix();
}
}
Application.prototype.animate = function() {
requestAnimationFrame(this.animate);
// dispatch update
onUpdate();
this.render();
}
Application.prototype.start = function() {
// dispatch start
this.setup();
this.clock.start();
onStart();
this.animate();
}
Application.prototype.render = function() {
this.renderer.render(this.scene, this.camera);
}
Application.prototype.getTime = function() {
return this.clock.elapsedTime;
}
Application.prototype.getDelta = function() {
return this.clock.getDelta();
}
// =====================================================
var app, audio, dolly, soundwave;
function RewindApplication(options) {
app = new Application();
var renderer = app.renderer;
var scene = app.scene;
var camera = app.camera;
// renderer.setClearColor(16185078);
camera.fov = 40;
camera.far = 1e3;
camera.near = .01;
camera.updateProjectionMatrix();
dolly = new CameraDolly();
soundwave = new Soundwave();
var children = [dolly, soundwave];
children.forEach(child => {
scene.add(child.object3D);
child.object3D.visible = true;
});
renderer.compile(scene, camera);
return app;
}
// =====================================================
var renderWebGL = (function() {
function start() {
app.start();
// audio.start();
}
function transition() {
}
return function(container, options) {
RewindApplication(options);
container.appendChild(app.canvas);
return {
start: start,
transition: transition
}
}
})();
// =====================================================
function avg(arr) {
for (var t = 0, i = 0; i < arr.length; i++) t += arr[i];
return t / arr.length;
}
function onStart() {
dolly.start();
// soundwave.transitionShowSoundwave();
}
function onUpdate() {
// bindApplicationUniforms
appUniforms.time.value = app.getTime();
appUniforms.dt.value = app.getDelta();
// appUniforms.time.value = 0;
// appUniforms.dt.value = 0;
// bindAudioUniforms
var e = avg(audio.frequency) / 256;
audioUniforms.instantVolume.value = e;
audioUniforms.smoothedVolume.value += .1 * (e - audioUniforms.smoothedVolume.value);
audioUniforms.waveform.value.needsUpdate = true;
audioUniforms.frequency.value.needsUpdate = true;
audio.update();
dolly.update();
}
// =====================================================
var URL = 'https://m8.music.126.net/21180815163607/04976f67866d4b4d11575ab418904467/ymusic/515a/5508/520b/f0cf47930abbbb0562c9ea61707c4c0b.mp3?infoId=92001';
var bridge = renderWebGL(document.body, {
audioSrc: URL
});
audio = new AudioSystem();
bridge.start();
var btn = document.getElementById("play-btn");
btn.onclick = function() {
btn.style.display = "none";
audio.play();
};
!
