From e74528bb9e7a86d4241560cef1f6bacd0741e386 Mon Sep 17 00:00:00 2001 From: Aroganta <294500027@qq.com> Date: Mon, 12 May 2025 14:28:59 +0800 Subject: [PATCH 1/4] 'add effects and add music genres classify' --- examples/demos/alienorb.ts | 25 + examples/demos/bifurcation.ts | 69 + examples/demos/blackhole.ts | 2 +- examples/demos/flame.ts | 65 + examples/demos/galaxy.ts | 49 + examples/demos/index.ts | 9 + examples/demos/lightingstorm.ts | 69 + examples/demos/plasmacoil.ts | 65 + examples/demos/sine.ts | 10 +- examples/demos/sprialA.ts | 41 + examples/demos/sprialB.ts | 33 + examples/demos/stardust.ts | 2 +- examples/demos/universe.ts | 25 + examples/index.html | 5 + examples/main.ts | 28 + package.json | 4 +- pnpm-lock.yaml | 8667 +++++++++++++++----------- src/Audio.ts | 94 + src/classifyWorker.ts | 62 + src/effects/Effect.ts | 2 +- src/effects/gpu/AlienOrb.ts | 337 + src/effects/gpu/Bifurcation.ts | 437 ++ src/effects/gpu/BlackHole.ts | 4 +- src/effects/gpu/Flame.ts | 463 ++ src/effects/gpu/GPUParticleEffect.ts | 4 +- src/effects/gpu/Galaxy.ts | 442 ++ src/effects/gpu/LightingStorm.ts | 464 ++ src/effects/gpu/PlasmaCoil.ts | 459 ++ src/effects/gpu/Sine.ts | 17 +- src/effects/gpu/SpiralB.ts | 241 + src/effects/gpu/SprialA.ts | 252 + src/effects/gpu/Stardust.ts | 10 +- src/effects/gpu/Universe.ts | 261 + src/effects/gpu/index.ts | 9 + src/effects/utils.ts | 95 +- 35 files changed, 9174 insertions(+), 3647 deletions(-) create mode 100644 examples/demos/alienorb.ts create mode 100644 examples/demos/bifurcation.ts create mode 100644 examples/demos/flame.ts create mode 100644 examples/demos/galaxy.ts create mode 100644 examples/demos/lightingstorm.ts create mode 100644 examples/demos/plasmacoil.ts create mode 100644 examples/demos/sprialA.ts create mode 100644 examples/demos/sprialB.ts create mode 100644 examples/demos/universe.ts create mode 100644 src/classifyWorker.ts create mode 100644 src/effects/gpu/AlienOrb.ts create mode 100644 src/effects/gpu/Bifurcation.ts create mode 100644 src/effects/gpu/Flame.ts create mode 100644 src/effects/gpu/Galaxy.ts create mode 100644 src/effects/gpu/LightingStorm.ts create mode 100644 src/effects/gpu/PlasmaCoil.ts create mode 100644 src/effects/gpu/SpiralB.ts create mode 100644 src/effects/gpu/SprialA.ts create mode 100644 src/effects/gpu/Universe.ts diff --git a/examples/demos/alienorb.ts b/examples/demos/alienorb.ts new file mode 100644 index 0000000..bc07028 --- /dev/null +++ b/examples/demos/alienorb.ts @@ -0,0 +1,25 @@ +import * as lil from 'lil-gui'; +import { Audio, AlienOrb } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new AlienOrb(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + fft: 1.00, + exposure: 0.20, + }; + + folder.add(config, 'fft', 0, 1).onChange((fft: number) => { + audio.style({ fft }); + }); + folder.add(config, 'exposure', 0, 1).onChange((exposure: number) => { + audio.style({ exposure }); + }); + + return [effect, folder]; +} diff --git a/examples/demos/bifurcation.ts b/examples/demos/bifurcation.ts new file mode 100644 index 0000000..7b09128 --- /dev/null +++ b/examples/demos/bifurcation.ts @@ -0,0 +1,69 @@ +import * as lil from 'lil-gui'; +import { Audio, Bifurcation } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new Bifurcation(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + radius: 0.306, + samples: 0.226, + accumulation: 0.890, + noiseAnimation: 1, + exposure: 0.238, + beta: 0.425, + alpha: 0.301, + betaAnim: 0.019, + betaS: 0.430, + gamma: 1, + epsilon: 0.224, + betaA: 0.325, + betaB: 0.301, + }; + + folder.add(config, 'radius', 0, 1).onChange((radius: number) => { + audio.style({ radius }); + }); + folder.add(config, 'samples', 0, 1).onChange((samples: number) => { + audio.style({ samples }); + }); + folder.add(config, 'accumulation', 0, 1).onChange((accumulation: number) => { + audio.style({ accumulation }); + }); + folder.add(config, 'noiseAnimation', 0, 1).onChange((noiseAnimation: number) => { + audio.style({ noiseAnimation }); + }); + folder.add(config, 'exposure', 0, 1).onChange((exposure: number) => { + audio.style({ exposure }); + }); + folder.add(config, 'beta', 0, 1).onChange((beta: number) => { + audio.style({ beta }); + }); + folder.add(config, 'alpha', 0, 1).onChange((alpha: number) => { + audio.style({ alpha }); + }); + folder.add(config, 'betaAnim', 0, 1).onChange((betaAnim: number) => { + audio.style({ betaAnim }); + }); + folder.add(config, 'betaS', 0, 1).onChange((betaS: number) => { + audio.style({ betaS }); + }); + folder.add(config, 'gamma', 0, 1).onChange((gamma: number) => { + audio.style({ gamma }); + }); + folder.add(config, 'epsilon', 0, 1).onChange((epsilon: number) => { + audio.style({ epsilon }); + }); + folder.add(config, 'betaA', 0, 1).onChange((betaA: number) => { + audio.style({ betaA }); + }); + folder.add(config, 'betaB', 0, 1).onChange((betaB: number) => { + audio.style({ betaB }); + }); + + return [effect, folder]; +} diff --git a/examples/demos/blackhole.ts b/examples/demos/blackhole.ts index de33fa5..c1be42f 100644 --- a/examples/demos/blackhole.ts +++ b/examples/demos/blackhole.ts @@ -8,7 +8,7 @@ export function render(audio: Audio, gui: lil.GUI) { ).href; const effect = new BlackHole(shaderCompilerPath); - const folder = gui.addFolder('effect'); + const folder = gui.addFolder('style'); const config = { radius: 1, timeStep: 0.039, diff --git a/examples/demos/flame.ts b/examples/demos/flame.ts new file mode 100644 index 0000000..4aa8eb8 --- /dev/null +++ b/examples/demos/flame.ts @@ -0,0 +1,65 @@ +import * as lil from 'lil-gui'; +import { Audio, Flame } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new Flame(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + radius: 0.220, + samples: 2.198, + accumulation: 0.791, + noiseAnimation: 1, + exposure: 1.532, + pa: 0, + pb: 0.55, + pc: 0.1, + pd: 4.718, + pe: 0.761, + pf: 0.945, + dt: 0.170, + }; + + folder.add(config, 'radius', 0, 1).onChange((radius: number) => { + audio.style({ radius }); + }); + folder.add(config, 'samples', 0, 32).onChange((samples: number) => { + audio.style({ samples }); + }); + folder.add(config, 'accumulation', 0, 1).onChange((accumulation: number) => { + audio.style({ accumulation }); + }); + folder.add(config, 'noiseAnimation', 0, 1).onChange((noiseAnimation: number) => { + audio.style({ noiseAnimation }); + }); + folder.add(config, 'exposure', 0, 2).onChange((exposure: number) => { + audio.style({ exposure }); + }); + folder.add(config, 'pa', 0, 1).onChange((pa: number) => { + audio.style({ pa }); + }); + folder.add(config, 'pb', 0, 1).onChange((pb: number) => { + audio.style({ pb }); + }); + folder.add(config, 'pc', 0, 1).onChange((pc: number) => { + audio.style({ pc }); + }); + folder.add(config, 'pd', 0, 6).onChange((pd: number) => { + audio.style({ pd }); + }); + folder.add(config, 'pe', 0, 5).onChange((pe: number) => { + audio.style({ pe }); + }); + folder.add(config, 'pf', 0, 1).onChange((pf: number) => { + audio.style({ pf }); + }); + folder.add(config, 'dt', 0, 1).onChange((dt: number) => { + audio.style({ dt }); + }); + + return [effect, folder]; +} \ No newline at end of file diff --git a/examples/demos/galaxy.ts b/examples/demos/galaxy.ts new file mode 100644 index 0000000..7bc3f5b --- /dev/null +++ b/examples/demos/galaxy.ts @@ -0,0 +1,49 @@ +import * as lil from 'lil-gui'; +import { Audio, Galaxy } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new Galaxy(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + radius: 0.45, + samples: 0, + noiseAnimation: 0.627, + bulbPower: 0.503, + exposure: 0.182, + powerDelta: 0.9, + gamma: 0.9, + animationSpeed: 1, + }; + + folder.add(config, 'radius', 0, 1).onChange((radius: number) => { + audio.style({ radius }); + }); + folder.add(config, 'samples', 0, 1).onChange((samples: number) => { + audio.style({ samples }); + }); + folder.add(config, 'noiseAnimation', 0, 1).onChange((noiseAnimation: number) => { + audio.style({ noiseAnimation }); + }); + folder.add(config, 'bulbPower', 0, 1).onChange((bulbPower: number) => { + audio.style({ bulbPower }); + }); + folder.add(config, 'exposure', 0, 1).onChange((exposure: number) => { + audio.style({ exposure }); + }); + folder.add(config, 'powerDelta', 0, 1).onChange((powerDelta: number) => { + audio.style({ powerDelta }); + }); + folder.add(config, 'gamma', 0, 1).onChange((gamma: number) => { + audio.style({ gamma }); + }); + folder.add(config, 'animationSpeed', 0, 1).onChange((animationSpeed: number) => { + audio.style({ animationSpeed }); + }); + + return [effect, folder]; +} diff --git a/examples/demos/index.ts b/examples/demos/index.ts index bc7712e..310b4b3 100644 --- a/examples/demos/index.ts +++ b/examples/demos/index.ts @@ -1,3 +1,12 @@ export { render as GPUSine } from './sine'; export { render as GPUStardust } from './stardust'; export { render as GPUBlackHole } from './blackhole'; +export { render as GPUBifurcation } from './bifurcation'; +export { render as GPUFlame } from './flame'; +export { render as GPUPlasmaCoil } from './plasmacoil'; +export { render as GPULightingStorm } from './lightingstorm'; +export { render as GPUGalaxy } from './galaxy'; +export { render as GPUSpiralA } from './sprialA'; +export { render as GPUSprialB } from './sprialB'; +export { render as GPUUniverse } from './universe'; +export { render as GPUAlienOrb } from './alienorb'; diff --git a/examples/demos/lightingstorm.ts b/examples/demos/lightingstorm.ts new file mode 100644 index 0000000..7b4442f --- /dev/null +++ b/examples/demos/lightingstorm.ts @@ -0,0 +1,69 @@ +import * as lil from 'lil-gui'; +import { Audio, LightingStorm } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new LightingStorm(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + radius: 0.220, + samples: 2.198, + accumulation: 0.791, + noiseAnimation: 1, + exposure: 1.532, + pa: 0, + pb: 0.55, + pc: 0.1, + pd: 4.718, + pe: 0.761, + pf: 0.945, + dt: 0.170, + time: 5.000, + }; + + folder.add(config, 'radius', 0, 1).onChange((radius: number) => { + audio.style({ radius }); + }); + folder.add(config, 'samples', 0, 32).onChange((samples: number) => { + audio.style({ samples }); + }); + folder.add(config, 'accumulation', 0, 1).onChange((accumulation: number) => { + audio.style({ accumulation }); + }); + folder.add(config, 'noiseAnimation', 0, 1).onChange((noiseAnimation: number) => { + audio.style({ noiseAnimation }); + }); + folder.add(config, 'exposure', 0, 2).onChange((exposure: number) => { + audio.style({ exposure }); + }); + folder.add(config, 'pa', 0, 1).onChange((pa: number) => { + audio.style({ pa }); + }); + folder.add(config, 'pb', 0, 1).onChange((pb: number) => { + audio.style({ pb }); + }); + folder.add(config, 'pc', 0, 1).onChange((pc: number) => { + audio.style({ pc }); + }); + folder.add(config, 'pd', 0, 6).onChange((pd: number) => { + audio.style({ pd }); + }); + folder.add(config, 'pe', 0, 5).onChange((pe: number) => { + audio.style({ pe }); + }); + folder.add(config, 'pf', 0, 1).onChange((pf: number) => { + audio.style({ pf }); + }); + folder.add(config, 'dt', 0, 1).onChange((dt: number) => { + audio.style({ dt }); + }); + folder.add(config, 'time', 0, 10).onChange((time: number) => { + audio.style({ time }); + }); + + return [effect, folder]; +} \ No newline at end of file diff --git a/examples/demos/plasmacoil.ts b/examples/demos/plasmacoil.ts new file mode 100644 index 0000000..bae89c0 --- /dev/null +++ b/examples/demos/plasmacoil.ts @@ -0,0 +1,65 @@ +import * as lil from 'lil-gui'; +import { Audio, PlasmaCoil } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new PlasmaCoil(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + radius: 0.220, + samples: 2.198, + accumulation: 0.791, + noiseAnimation: 1, + exposure: 1.532, + pa: 0, + pb: 0.55, + pc: 0.1, + pd: 4.718, + pe: 0.761, + pf: 0.945, + dt: 0.170, + }; + + folder.add(config, 'radius', 0, 1).onChange((radius: number) => { + audio.style({ radius }); + }); + folder.add(config, 'samples', 0, 32).onChange((samples: number) => { + audio.style({ samples }); + }); + folder.add(config, 'accumulation', 0, 1).onChange((accumulation: number) => { + audio.style({ accumulation }); + }); + folder.add(config, 'noiseAnimation', 0, 1).onChange((noiseAnimation: number) => { + audio.style({ noiseAnimation }); + }); + folder.add(config, 'exposure', 0, 2).onChange((exposure: number) => { + audio.style({ exposure }); + }); + folder.add(config, 'pa', 0, 1).onChange((pa: number) => { + audio.style({ pa }); + }); + folder.add(config, 'pb', 0, 1).onChange((pb: number) => { + audio.style({ pb }); + }); + folder.add(config, 'pc', 0, 1).onChange((pc: number) => { + audio.style({ pc }); + }); + folder.add(config, 'pd', 0, 6).onChange((pd: number) => { + audio.style({ pd }); + }); + folder.add(config, 'pe', 0, 5).onChange((pe: number) => { + audio.style({ pe }); + }); + folder.add(config, 'pf', 0, 1).onChange((pf: number) => { + audio.style({ pf }); + }); + folder.add(config, 'dt', 0, 1).onChange((dt: number) => { + audio.style({ dt }); + }); + + return [effect, folder]; +} \ No newline at end of file diff --git a/examples/demos/sine.ts b/examples/demos/sine.ts index bb2ab6f..763a2b8 100644 --- a/examples/demos/sine.ts +++ b/examples/demos/sine.ts @@ -8,18 +8,19 @@ export function render(audio: Audio, gui: lil.GUI) { ).href; const effect = new Sine(shaderCompilerPath); - const folder = gui.addFolder('effect'); + const folder = gui.addFolder('style'); const config = { - radius: 6, + radius: 0.2, sinea: 1, sineb: 1, speed: 0.885, blur: 0, samples: 0.001, mode: 0, + exposure: 0.200, }; - folder.add(config, 'radius', 0, 10).onChange((radius: number) => { + folder.add(config, 'radius', 0, 1).onChange((radius: number) => { audio.style({ radius }); }); folder.add(config, 'sinea', 0, 1).onChange((sinea: number) => { @@ -34,6 +35,9 @@ export function render(audio: Audio, gui: lil.GUI) { folder.add(config, 'blur', 0, 1).onChange((blur: number) => { audio.style({ blur }); }); + folder.add(config, 'exposure', 0, 1).onChange((exposure: number) => { + audio.style({ exposure }); + }); return [effect, folder]; } diff --git a/examples/demos/sprialA.ts b/examples/demos/sprialA.ts new file mode 100644 index 0000000..39edff2 --- /dev/null +++ b/examples/demos/sprialA.ts @@ -0,0 +1,41 @@ +import * as lil from 'lil-gui'; +import { Audio, SpiralA } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new SpiralA(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + timeSpeed: 0.4, + loopCount: 0.4, + zWarpSize: 0.2, + objectSize: 0.4, + waveSize: 0.4, + exposure: 0.3, + }; + + folder.add(config, 'timeSpeed', 0, 1).onChange((timeSpeed: number) => { + audio.style({ timeSpeed }); + }); + folder.add(config, 'loopCount', 0, 1).onChange((loopCount: number) => { + audio.style({ loopCount }); + }); + folder.add(config, 'zWarpSize', 0, 1).onChange((zWarpSize: number) => { + audio.style({ zWarpSize }); + }); + folder.add(config, 'objectSize', 0, 1).onChange((objectSize: number) => { + audio.style({ objectSize }); + }); + folder.add(config, 'waveSize', 0, 1).onChange((waveSize: number) => { + audio.style({ waveSize }); + }); + folder.add(config, 'exposure', 0, 1).onChange((exposure: number) => { + audio.style({ exposure }); + }); + + return [effect, folder]; +} diff --git a/examples/demos/sprialB.ts b/examples/demos/sprialB.ts new file mode 100644 index 0000000..5088c89 --- /dev/null +++ b/examples/demos/sprialB.ts @@ -0,0 +1,33 @@ +import * as lil from 'lil-gui'; +import { Audio, SpiralB } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new SpiralB(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + speed: 0.500, + objectSize: 0.700, + waveSize: 0.500, + exposure: 0.200, + }; + + folder.add(config, 'speed', 0, 1).onChange((speed: number) => { + audio.style({ speed }); + }); + folder.add(config, 'objectSize', 0, 1).onChange((objectSize: number) => { + audio.style({ objectSize }); + }); + folder.add(config, 'waveSize', 0, 1).onChange((waveSize: number) => { + audio.style({ waveSize }); + }); + folder.add(config, 'exposure', 0, 1).onChange((exposure: number) => { + audio.style({ exposure }); + }); + + return [effect, folder]; +} diff --git a/examples/demos/stardust.ts b/examples/demos/stardust.ts index 0458add..cd83d36 100644 --- a/examples/demos/stardust.ts +++ b/examples/demos/stardust.ts @@ -8,7 +8,7 @@ export function render(audio: Audio, gui: lil.GUI) { ).href; const effect = new Stardust(shaderCompilerPath); - const folder = gui.addFolder('effect'); + const folder = gui.addFolder('style'); const config = { radius: 2.27, blurRadius: 0.053, diff --git a/examples/demos/universe.ts b/examples/demos/universe.ts new file mode 100644 index 0000000..58d1ae6 --- /dev/null +++ b/examples/demos/universe.ts @@ -0,0 +1,25 @@ +import * as lil from 'lil-gui'; +import { Audio, Universe } from '../../src'; + +export function render(audio: Audio, gui: lil.GUI) { + const shaderCompilerPath = new URL( + '/public/glsl_wgsl_compiler_bg.wasm', + import.meta.url, + ).href; + const effect = new Universe(shaderCompilerPath); + + const folder = gui.addFolder('style'); + const config = { + fft: 1.00, + exposure: 0.30, + }; + + folder.add(config, 'fft', 0, 1).onChange((fft: number) => { + audio.style({ fft }); + }); + folder.add(config, 'exposure', 0, 1).onChange((exposure: number) => { + audio.style({ exposure }); + }); + + return [effect, folder]; +} diff --git a/examples/index.html b/examples/index.html index 53e693f..60d5132 100644 --- a/examples/index.html +++ b/examples/index.html @@ -210,6 +210,11 @@
+