reze-engine 0.3.11 → 0.3.12

package/README.md

@@ -1,66 +1,66 @@
-# Reze Engine
-
-A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
-
-## Features
-
-- Physics
-- Alpha blending
-- Post alpha eye rendering
-- Rim lighting
-- Bloom
-- Outlines
-- MSAA 4x anti-aliasing
-- Bone and morph api
-- VMD animation
-- Ik solver
-
-## Usage
-
-```javascript
-export default function Scene() {
-  const canvasRef = useRef < HTMLCanvasElement > null
-  const engineRef = useRef < Engine > null
-
-  const initEngine = useCallback(async () => {
-    if (canvasRef.current) {
-      try {
-        const engine = new Engine(canvasRef.current)
-        engineRef.current = engine
-        await engine.init()
-        await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx")
-
-        engine.runRenderLoop(() => {})
-      } catch (error) {
-        console.error(error)
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    void (async () => {
-      initEngine()
-    })()
-
-    return () => {
-      if (engineRef.current) {
-        engineRef.current.dispose()
-      }
-    }
-  }, [initEngine])
-
-  return <canvas ref={canvasRef} className="w-full h-full" />
-}
-```
-
-## Projects Using This Engine
-
-- **[MiKaPo](https://mikapo.vercel.app)** - Online real-time motion capture for MMD using webcam and MediaPipe
-- **[Popo](https://popo.love)** - Fine-tuned LLM that generates MMD poses from natural language descriptions
-- **[MPL](https://mmd-mpl.vercel.app)** - Semantic motion programming language for scripting MMD animations with intuitive syntax
-
-## Tutorial
-
-Learn WebGPU from scratch by building an anime character renderer in incremental steps. The tutorial covers the complete rendering pipeline from a simple triangle to fully textured, skeletal-animated characters.
-
-[How to Render an Anime Character with WebGPU](https://reze.one/tutorial)
+# Reze Engine
+
+A lightweight engine built with WebGPU and TypeScript for real-time 3D anime character MMD model rendering.
+
+## Features
+
+- Physics
+- Alpha blending
+- Post alpha eye rendering
+- Rim lighting
+- Bloom
+- Outlines
+- MSAA 4x anti-aliasing
+- Bone and morph api
+- VMD animation
+- Ik solver
+
+## Usage
+
+```javascript
+export default function Scene() {
+  const canvasRef = useRef < HTMLCanvasElement > null
+  const engineRef = useRef < Engine > null
+
+  const initEngine = useCallback(async () => {
+    if (canvasRef.current) {
+      try {
+        const engine = new Engine(canvasRef.current)
+        engineRef.current = engine
+        await engine.init()
+        await engine.loadModel("/models/塞尔凯特/塞尔凯特.pmx")
+
+        engine.runRenderLoop(() => {})
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }, [])
+
+  useEffect(() => {
+    void (async () => {
+      initEngine()
+    })()
+
+    return () => {
+      if (engineRef.current) {
+        engineRef.current.dispose()
+      }
+    }
+  }, [initEngine])
+
+  return <canvas ref={canvasRef} className="w-full h-full" />
+}
+```
+
+## Projects Using This Engine
+
+- **[MiKaPo](https://mikapo.vercel.app)** - Online real-time motion capture for MMD using webcam and MediaPipe
+- **[Popo](https://popo.love)** - Fine-tuned LLM that generates MMD poses from natural language descriptions
+- **[MPL](https://mmd-mpl.vercel.app)** - Semantic motion programming language for scripting MMD animations with intuitive syntax
+
+## Tutorial
+
+Learn WebGPU from scratch by building an anime character renderer in incremental steps. The tutorial covers the complete rendering pipeline from a simple triangle to fully textured, skeletal-animated characters.
+
+[How to Render an Anime Character with WebGPU](https://reze.one/tutorial)

package/dist/audio.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Audio system for generating procedural explosion sounds
+ * Based on Web Audio API synthesis
+ */
+export declare class AudioSystem {
+    private ctx;
+    private enabled;
+    private volume;
+    private limiter;
+    /**
+     * Initialize audio context and compressor
+     * Must be called after user interaction (browser requirement)
+     */
+    init(): void;
+    /**
+     * Play deep bass explosion sound (firework burst)
+     * Combines sub-bass, noise, and crack sounds for realistic explosion
+     */
+    playExplosion(): void;
+    /**
+     * Play lighter "whoosh" sound for rocket launch
+     */
+    playRocketLaunch(): void;
+    setVolume(volume: number): void;
+    getVolume(): number;
+    isEnabled(): boolean;
+    setEnabled(enabled: boolean): void;
+}
+//# sourceMappingURL=audio.d.ts.map

package/dist/audio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"audio.d.ts","sourceRoot":"","sources":["../src/audio.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,GAAG,CAA4B;IACvC,OAAO,CAAC,OAAO,CAAiB;IAChC,OAAO,CAAC,MAAM,CAAY;IAC1B,OAAO,CAAC,OAAO,CAAsC;IAErD;;;OAGG;IACH,IAAI,IAAI,IAAI;IAiBZ;;;OAGG;IACH,aAAa,IAAI,IAAI;IA8DrB;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAsBxB,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI/B,SAAS,IAAI,MAAM;IAInB,SAAS,IAAI,OAAO;IAIpB,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;CAGnC"}

package/dist/audio.js

@@ -0,0 +1,116 @@
+/**
+ * Audio system for generating procedural explosion sounds
+ * Based on Web Audio API synthesis
+ */
+export class AudioSystem {
+    constructor() {
+        this.ctx = null;
+        this.enabled = false;
+        this.volume = 1;
+        this.limiter = null;
+    }
+    /**
+     * Initialize audio context and compressor
+     * Must be called after user interaction (browser requirement)
+     */
+    init() {
+        if (!this.ctx) {
+            this.ctx = new (window.AudioContext || window.webkitAudioContext)();
+            this.limiter = this.ctx.createDynamicsCompressor();
+            this.limiter.threshold.value = -10;
+            this.limiter.knee.value = 40;
+            this.limiter.ratio.value = 12;
+            this.limiter.connect(this.ctx.destination);
+            this.enabled = true;
+        }
+        // Resume if suspended (iOS/Safari requirement)
+        if (this.ctx.state === "suspended") {
+            this.ctx.resume();
+        }
+    }
+    /**
+     * Play deep bass explosion sound (firework burst)
+     * Combines sub-bass, noise, and crack sounds for realistic explosion
+     */
+    playExplosion() {
+        if (!this.enabled || !this.ctx || !this.limiter)
+            return;
+        const t = this.ctx.currentTime;
+        // --- 1. SUB-BASS KICK (deep rumble) ---
+        const osc = this.ctx.createOscillator();
+        const oscGain = this.ctx.createGain();
+        osc.type = "sine";
+        osc.frequency.setValueAtTime(50, t); // Start at 50Hz
+        osc.frequency.exponentialRampToValueAtTime(20, t + 2.5); // Drop to 20Hz
+        oscGain.gain.setValueAtTime(this.volume * 1.5, t);
+        oscGain.gain.exponentialRampToValueAtTime(0.01, t + 5.0); // Long decay
+        osc.connect(oscGain);
+        oscGain.connect(this.limiter);
+        osc.start(t);
+        osc.stop(t + 5.0);
+        // --- 2. NOISE (crackling/rumble texture) ---
+        const bufferSize = this.ctx.sampleRate * 5.0;
+        const buffer = this.ctx.createBuffer(1, bufferSize, this.ctx.sampleRate);
+        const data = buffer.getChannelData(0);
+        for (let i = 0; i < bufferSize; i++) {
+            data[i] = Math.random() * 2 - 1;
+        }
+        const noise = this.ctx.createBufferSource();
+        noise.buffer = buffer;
+        const noiseFilter = this.ctx.createBiquadFilter();
+        noiseFilter.type = "lowpass";
+        noiseFilter.frequency.setValueAtTime(150, t);
+        noiseFilter.frequency.exponentialRampToValueAtTime(30, t + 4.0);
+        const noiseGain = this.ctx.createGain();
+        noiseGain.gain.setValueAtTime(this.volume * 1.0, t);
+        noiseGain.gain.exponentialRampToValueAtTime(0.01, t + 4.5);
+        noise.connect(noiseFilter);
+        noiseFilter.connect(noiseGain);
+        noiseGain.connect(this.limiter);
+        noise.start(t);
+        // --- 3. CRACK (sharp attack) ---
+        const crack = this.ctx.createOscillator();
+        crack.type = "triangle";
+        const crackGain = this.ctx.createGain();
+        crack.frequency.setValueAtTime(200, t);
+        crack.frequency.exponentialRampToValueAtTime(50, t + 0.1);
+        crackGain.gain.setValueAtTime(this.volume * 0.3, t);
+        crackGain.gain.exponentialRampToValueAtTime(0.01, t + 0.1);
+        crack.connect(crackGain);
+        crackGain.connect(this.limiter);
+        crack.start(t);
+        crack.stop(t + 0.1);
+    }
+    /**
+     * Play lighter "whoosh" sound for rocket launch
+     */
+    playRocketLaunch() {
+        if (!this.enabled || !this.ctx || !this.limiter)
+            return;
+        const t = this.ctx.currentTime;
+        // Rising tone
+        const osc = this.ctx.createOscillator();
+        const oscGain = this.ctx.createGain();
+        osc.type = "sawtooth";
+        osc.frequency.setValueAtTime(100, t);
+        osc.frequency.exponentialRampToValueAtTime(400, t + 0.5);
+        oscGain.gain.setValueAtTime(this.volume * 0.3, t);
+        oscGain.gain.exponentialRampToValueAtTime(0.01, t + 0.5);
+        osc.connect(oscGain);
+        oscGain.connect(this.limiter);
+        osc.start(t);
+        osc.stop(t + 0.5);
+    }
+    setVolume(volume) {
+        this.volume = Math.max(0, Math.min(1, volume));
+    }
+    getVolume() {
+        return this.volume;
+    }
+    isEnabled() {
+        return this.enabled;
+    }
+    setEnabled(enabled) {
+        this.enabled = enabled;
+    }
+}

package/dist/engine.js

@@ -250,12 +250,12 @@ export class Engine {
 
           let lightAccum = light.ambientColor;
           
-          // Rim light calculation
+          // Rim light calculation - proper Fresnel for edge-only highlights
           let viewDir = normalize(camera.viewPos - input.worldPos);
-          var rimFactor = 1.0 - max(dot(n, viewDir), 0.0);
-          rimFactor = rimFactor * rimFactor; // Optimized: direct multiply instead of pow(x, 2.0)
+          let fresnel = 1.0 - abs(dot(n, viewDir));
+          let rimFactor = pow(fresnel, 4.0); // Higher power for sharper edge-only effect
           let rimLight = material.rimColor * material.rimIntensity * rimFactor;
-          
+
           let color = albedo * lightAccum + rimLight;
           
           return vec4f(color, finalAlpha);

package/dist/particles.d.ts

@@ -0,0 +1,67 @@
+import { Vec3 } from "./math";
+export interface ParticleSystemConfig {
+    particleCount: number;
+    particleSize: number;
+    fadeSpeed: number;
+    explosionForce: number;
+    hoverDuration: number;
+    gravity: number;
+    friction: number;
+    rocketSpeed: number;
+    rocketSize: number;
+}
+export declare const DEFAULT_PARTICLE_CONFIG: ParticleSystemConfig;
+interface ParticleData {
+    positions: Float32Array;
+    velocities: Float32Array;
+    colors: Float32Array;
+    lifetimes: Float32Array;
+    count: number;
+}
+export declare class Firework {
+    private startX;
+    private config;
+    private phase;
+    private timer;
+    private pos;
+    private vel;
+    private targetY;
+    private colors;
+    private rocketAlive;
+    private rocketLifetime;
+    private justExploded;
+    private particles;
+    private baseColors;
+    constructor(startX: number, config: ParticleSystemConfig);
+    private hslToRgb;
+    update(deltaTime: number): void;
+    private smoothstep;
+    private explode;
+    isDead(): boolean;
+    isRocket(): boolean;
+    getRocketPosition(): Vec3;
+    getRocketColor(): Vec3;
+    getParticleData(): ParticleData | null;
+    hasJustExploded(): boolean;
+    clearExplosionFlag(): void;
+}
+export declare class ParticleSystem {
+    private fireworks;
+    private config;
+    private maxConcurrentFireworks;
+    private autoLaunch;
+    private launchInterval;
+    private lastLaunchTime;
+    private nextLaunchDelay;
+    constructor(config?: Partial<ParticleSystemConfig>);
+    update(deltaTime: number): void;
+    spawnFirework(x?: number): void;
+    getFireworks(): Firework[];
+    setAutoLaunch(enabled: boolean): void;
+    setConfig(config: Partial<ParticleSystemConfig>): void;
+    getConfig(): ParticleSystemConfig;
+    setMaxConcurrentFireworks(max: number): void;
+    getMaxConcurrentFireworks(): number;
+}
+export {};
+//# sourceMappingURL=particles.d.ts.map

package/dist/particles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"particles.d.ts","sourceRoot":"","sources":["../src/particles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAI7B,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,MAAM,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,MAAM,CAAA;IACtB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,uBAAuB,EAAE,oBAUrC,CAAA;AAED,UAAU,YAAY;IACpB,SAAS,EAAE,YAAY,CAAA;IACvB,UAAU,EAAE,YAAY,CAAA;IACxB,MAAM,EAAE,YAAY,CAAA;IACpB,SAAS,EAAE,YAAY,CAAA;IACvB,KAAK,EAAE,MAAM,CAAA;CACd;AAED,qBAAa,QAAQ;IAeP,OAAO,CAAC,MAAM;IAAU,OAAO,CAAC,MAAM;IAdlD,OAAO,CAAC,KAAK,CAA0C;IACvD,OAAO,CAAC,KAAK,CAAY;IACzB,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,GAAG,CAAM;IACjB,OAAO,CAAC,OAAO,CAAQ;IACvB,OAAO,CAAC,MAAM,CAAa;IAC3B,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,YAAY,CAAiB;IAGrC,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,UAAU,CAA4B;gBAE1B,MAAM,EAAE,MAAM,EAAU,MAAM,EAAE,oBAAoB;IA4BxE,OAAO,CAAC,QAAQ;IAsBhB,MAAM,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAgE/B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,OAAO;IAwDf,MAAM,IAAI,OAAO;IAIjB,QAAQ,IAAI,OAAO;IAInB,iBAAiB,IAAI,IAAI;IAIzB,cAAc,IAAI,IAAI;IAItB,eAAe,IAAI,YAAY,GAAG,IAAI;IAItC,eAAe,IAAI,OAAO;IAI1B,kBAAkB,IAAI,IAAI;CAG3B;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,MAAM,CAAuD;IACrE,OAAO,CAAC,sBAAsB,CAAY;IAG1C,OAAO,CAAC,UAAU,CAAiB;IACnC,OAAO,CAAC,cAAc,CAAe;IACrC,OAAO,CAAC,cAAc,CAAY;IAClC,OAAO,CAAC,eAAe,CAAY;gBAEvB,MAAM,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAMlD,MAAM,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;IAoB/B,aAAa,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAS/B,YAAY,IAAI,QAAQ,EAAE;IAI1B,aAAa,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAQrC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,IAAI;IAItD,SAAS,IAAI,oBAAoB;IAIjC,yBAAyB,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAI5C,yBAAyB,IAAI,MAAM;CAGpC"}

package/dist/particles.js

@@ -0,0 +1,266 @@
+import { Vec3 } from "./math";
+const MAX_PARTICLES = 30000;
+export const DEFAULT_PARTICLE_CONFIG = {
+    particleCount: 5000, // Reduced from 23000 for better performance
+    particleSize: 0.1, // Smaller particles
+    fadeSpeed: 0.008, // Faster fade = particles die sooner
+    explosionForce: 0.6, // Smaller explosion radius
+    hoverDuration: 1.2, // Shorter hover
+    gravity: 0.00265,
+    friction: 0.95494,
+    rocketSpeed: 1.0,
+    rocketSize: 0.4, // Smaller rocket trail
+};
+export class Firework {
+    constructor(startX, config) {
+        this.startX = startX;
+        this.config = config;
+        this.phase = "rocket";
+        this.timer = 0;
+        this.colors = [];
+        this.rocketAlive = true;
+        this.rocketLifetime = 1.0;
+        this.justExploded = false; // Flag for triggering audio
+        // Explosion particle data
+        this.particles = null;
+        this.baseColors = null;
+        // Generate color palette (mono, dual, or tri-color)
+        const rand = Math.random();
+        const baseHue = Math.random();
+        if (rand < 0.33) {
+            // MONO (1 Color)
+            this.colors.push(this.hslToRgb(baseHue, 1.0, 0.6));
+        }
+        else if (rand < 0.66) {
+            // DUAL (2 Colors - Complementary)
+            this.colors.push(this.hslToRgb(baseHue, 1.0, 0.6));
+            this.colors.push(this.hslToRgb((baseHue + 0.5) % 1.0, 1.0, 0.5));
+        }
+        else {
+            // TRI (3 Colors - Triad)
+            this.colors.push(this.hslToRgb(baseHue, 1.0, 0.6));
+            this.colors.push(this.hslToRgb((baseHue + 0.33) % 1.0, 1.0, 0.6));
+            this.colors.push(this.hslToRgb((baseHue + 0.66) % 1.0, 1.0, 0.6));
+        }
+        this.pos = new Vec3(startX, -50, (Math.random() - 0.5) * 30);
+        this.vel = new Vec3((Math.random() - 0.5) * 0.5, config.rocketSpeed * (0.9 + Math.random() * 0.3), (Math.random() - 0.5) * 0.5);
+        this.targetY = 10 + Math.random() * 20; // Higher explosion point
+    }
+    hslToRgb(h, s, l) {
+        let r, g, b;
+        if (s === 0) {
+            r = g = b = l;
+        }
+        else {
+            const hue2rgb = (p, q, t) => {
+                if (t < 0)
+                    t += 1;
+                if (t > 1)
+                    t -= 1;
+                if (t < 1 / 6)
+                    return p + (q - p) * 6 * t;
+                if (t < 1 / 2)
+                    return q;
+                if (t < 2 / 3)
+                    return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            };
+            const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            const p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return new Vec3(r, g, b);
+    }
+    update(deltaTime) {
+        if (this.phase === "rocket") {
+            this.pos.x += this.vel.x;
+            this.pos.y += this.vel.y;
+            this.pos.z += this.vel.z;
+            this.vel.y *= 0.99;
+            this.rocketLifetime -= deltaTime * 0.5;
+            if (this.vel.y < 0.2 || this.pos.y >= this.targetY || this.rocketLifetime <= 0) {
+                this.explode();
+            }
+        }
+        else if (this.phase === "explode") {
+            this.timer += deltaTime;
+            if (!this.particles)
+                return;
+            const isHovering = this.timer < this.config.hoverDuration;
+            const gravityFactor = this.smoothstep(this.timer, this.config.hoverDuration, this.config.hoverDuration + 0.5);
+            let aliveCount = 0;
+            const positions = this.particles.positions;
+            const velocities = this.particles.velocities;
+            const colors = this.particles.colors;
+            const lifetimes = this.particles.lifetimes;
+            for (let i = 0; i < this.particles.count; i++) {
+                if (lifetimes[i] > 0) {
+                    aliveCount++;
+                    const i3 = i * 3;
+                    // Update position
+                    positions[i3] += velocities[i3];
+                    positions[i3 + 1] += velocities[i3 + 1];
+                    positions[i3 + 2] += velocities[i3 + 2];
+                    if (isHovering) {
+                        // Hovering phase - apply friction
+                        velocities[i3] *= this.config.friction;
+                        velocities[i3 + 1] *= this.config.friction;
+                        velocities[i3 + 2] *= this.config.friction;
+                    }
+                    else {
+                        // Falling phase - apply gravity and fade
+                        velocities[i3 + 1] -= this.config.gravity * gravityFactor;
+                        velocities[i3] *= 0.98;
+                        velocities[i3 + 1] *= 0.98;
+                        velocities[i3 + 2] *= 0.98;
+                        lifetimes[i] -= this.config.fadeSpeed;
+                    }
+                    // Update color alpha
+                    const alpha = Math.max(0, lifetimes[i]);
+                    if (this.baseColors) {
+                        colors[i3] = this.baseColors[i3] * alpha * 1.5;
+                        colors[i3 + 1] = this.baseColors[i3 + 1] * alpha * 1.5;
+                        colors[i3 + 2] = this.baseColors[i3 + 2] * alpha * 1.5;
+                    }
+                }
+            }
+            if (aliveCount === 0) {
+                this.phase = "dead";
+            }
+        }
+    }
+    smoothstep(x, edge0, edge1) {
+        const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+        return t * t * (3 - 2 * t);
+    }
+    explode() {
+        this.phase = "explode";
+        this.timer = 0;
+        this.rocketAlive = false;
+        this.justExploded = true; // Mark for audio trigger
+        const particleCount = Math.min(this.config.particleCount, MAX_PARTICLES);
+        const positions = new Float32Array(particleCount * 3);
+        const velocities = new Float32Array(particleCount * 3);
+        const colors = new Float32Array(particleCount * 3);
+        const lifetimes = new Float32Array(particleCount);
+        this.baseColors = new Float32Array(particleCount * 3);
+        const baseSpeed = this.config.explosionForce * (0.8 + Math.random() * 0.4);
+        for (let i = 0; i < particleCount; i++) {
+            const i3 = i * 3;
+            // Set initial position to explosion center
+            positions[i3] = this.pos.x;
+            positions[i3 + 1] = this.pos.y;
+            positions[i3 + 2] = this.pos.z;
+            // Generate spherical velocity distribution
+            const theta = Math.random() * Math.PI * 2;
+            const phi = Math.acos(2 * Math.random() - 1);
+            const speed = baseSpeed * (0.8 + Math.random() * 0.4);
+            velocities[i3] = speed * Math.sin(phi) * Math.cos(theta);
+            velocities[i3 + 1] = speed * Math.sin(phi) * Math.sin(theta);
+            velocities[i3 + 2] = speed * Math.cos(phi);
+            // Pick color from palette and vary brightness
+            const targetColor = this.colors[Math.floor(Math.random() * this.colors.length)];
+            const brightness = 0.5 + Math.random() * 0.8;
+            this.baseColors[i3] = targetColor.x * brightness;
+            this.baseColors[i3 + 1] = targetColor.y * brightness;
+            this.baseColors[i3 + 2] = targetColor.z * brightness;
+            colors[i3] = this.baseColors[i3];
+            colors[i3 + 1] = this.baseColors[i3 + 1];
+            colors[i3 + 2] = this.baseColors[i3 + 2];
+            lifetimes[i] = 1.0;
+        }
+        this.particles = {
+            positions,
+            velocities,
+            colors,
+            lifetimes,
+            count: particleCount,
+        };
+    }
+    isDead() {
+        return this.phase === "dead";
+    }
+    isRocket() {
+        return this.phase === "rocket" && this.rocketAlive;
+    }
+    getRocketPosition() {
+        return this.pos;
+    }
+    getRocketColor() {
+        return this.colors[0];
+    }
+    getParticleData() {
+        return this.particles;
+    }
+    hasJustExploded() {
+        return this.justExploded;
+    }
+    clearExplosionFlag() {
+        this.justExploded = false;
+    }
+}
+export class ParticleSystem {
+    constructor(config) {
+        this.fireworks = [];
+        this.config = { ...DEFAULT_PARTICLE_CONFIG };
+        this.maxConcurrentFireworks = 5; // Limit concurrent fireworks for performance
+        // Auto-launch settings
+        this.autoLaunch = false;
+        this.launchInterval = 3000; // ms
+        this.lastLaunchTime = 0;
+        this.nextLaunchDelay = 0;
+        if (config) {
+            this.config = { ...this.config, ...config };
+        }
+    }
+    update(deltaTime) {
+        // Update existing fireworks
+        for (let i = this.fireworks.length - 1; i >= 0; i--) {
+            this.fireworks[i].update(deltaTime);
+            if (this.fireworks[i].isDead()) {
+                this.fireworks.splice(i, 1);
+            }
+        }
+        // Auto-launch
+        if (this.autoLaunch) {
+            const now = performance.now();
+            if (now - this.lastLaunchTime > this.nextLaunchDelay) {
+                this.lastLaunchTime = now;
+                this.nextLaunchDelay = this.launchInterval + Math.random() * 1000;
+                this.spawnFirework();
+            }
+        }
+    }
+    spawnFirework(x) {
+        // Don't spawn if we're at the limit (for performance)
+        if (this.fireworks.length >= this.maxConcurrentFireworks) {
+            return;
+        }
+        const startX = x !== undefined ? x : (Math.random() - 0.5) * 5;
+        this.fireworks.push(new Firework(startX, this.config));
+    }
+    getFireworks() {
+        return this.fireworks;
+    }
+    setAutoLaunch(enabled) {
+        this.autoLaunch = enabled;
+        if (enabled) {
+            this.lastLaunchTime = performance.now();
+            this.nextLaunchDelay = 0;
+        }
+    }
+    setConfig(config) {
+        this.config = { ...this.config, ...config };
+    }
+    getConfig() {
+        return { ...this.config };
+    }
+    setMaxConcurrentFireworks(max) {
+        this.maxConcurrentFireworks = Math.max(1, max);
+    }
+    getMaxConcurrentFireworks() {
+        return this.maxConcurrentFireworks;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "reze-engine",
-    "version": "0.3.11",
+    "version": "0.3.12",
     "description": "A WebGPU-based MMD model renderer",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",