From 2036b60992bcd28d585d237fd0f57243f7675e5f Mon Sep 17 00:00:00 2001 From: skal Date: Fri, 6 Feb 2026 17:27:57 +0100 Subject: feat(particles): Implement transparent circular particles with alpha blending (Task #53) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Visual Improvements - Particles now render as smooth fading circles instead of squares - Added UV coordinates to vertex shader output - Fragment shader applies circular falloff (smoothstep 1.0 to 0.5) - Lifetime-based fade: alpha multiplied by particle.pos.w (1.0 → 0.0) ## Pipeline Changes - Enabled alpha blending for particle shaders (auto-detected via strstr) - Blend mode: SrcAlpha + OneMinusSrcAlpha (standard alpha blending) - Alpha channel: One + OneMinusSrcAlpha for proper compositing ## Demo Integration - Added 5 ParticleSprayEffect instances at key moments (6b, 12b, 17b, 24b, 56b) - Increased particle presence throughout demo - Particles now more visually impactful with transparency ## Files Modified - assets/final/shaders/particle_render.wgsl: Circular fade logic - src/gpu/gpu.cc: Auto-enable blending for particle shaders - assets/demo.seq: Added ParticleSprayEffect at multiple sequences ## Testing - All 23 tests pass (100%) - Verified with demo64k visual inspection --- assets/demo.seq | 33 ++++++++++++++++++------------- assets/final/shaders/particle_render.wgsl | 19 +++++++++++++++--- 2 files changed, 35 insertions(+), 17 deletions(-) (limited to 'assets') diff --git a/assets/demo.seq b/assets/demo.seq index b30dd68..79872d3 100644 --- a/assets/demo.seq +++ b/assets/demo.seq @@ -33,8 +33,9 @@ SEQUENCE 4b 0 EFFECT + FlashEffect 0.0 0.2 # Priority 0 (was 4, now contiguous) SEQUENCE 6b 1 - EFFECT + ParticlesEffect 0 4 # Priority 0 - EFFECT = GaussianBlurEffect 0 8 # Priority 0 (same layer) + EFFECT + ParticleSprayEffect 0 4 # Priority 0 (spray particles) + EFFECT + ParticlesEffect 0 4 # Priority 1 + EFFECT = GaussianBlurEffect 0 8 # Priority 1 (same layer) SEQUENCE 7b 0 EFFECT + HeptagonEffect 0.0 .2 # Priority 0 @@ -52,7 +53,8 @@ SEQUENCE 8b 3 SEQUENCE 12b 2 EFFECT - FlashCubeEffect .2 3 # Priority -1 (background) EFFECT + HeptagonEffect 0 4 # Priority 0 - EFFECT + ParticlesEffect 0 4 # Priority 1 + EFFECT + ParticleSprayEffect 0 4 # Priority 1 (spray particles) + EFFECT + ParticlesEffect 0 4 # Priority 2 SEQUENCE 15b 2 EFFECT - FlashCubeEffect .2 3 # Priority -1 (background) @@ -67,18 +69,20 @@ SEQUENCE 16b 10 SEQUENCE 17b 2 EFFECT + ThemeModulationEffect 0 4 # Priority 0 EFFECT + HeptagonEffect 0.2 2.0 # Priority 1 - EFFECT = ParticlesEffect 0 4 # Priority 1 (same layer) - EFFECT + Hybrid3DEffect 0 4 # Priority 2 - EFFECT + GaussianBlurEffect 0 8 # Priority 3 - EFFECT + ChromaAberrationEffect 0 6 # Priority 4 + EFFECT + ParticleSprayEffect 0 4 # Priority 2 (spray particles) + EFFECT = ParticlesEffect 0 4 # Priority 2 (same layer) + EFFECT + Hybrid3DEffect 0 4 # Priority 3 + EFFECT + GaussianBlurEffect 0 8 # Priority 4 + EFFECT + ChromaAberrationEffect 0 6 # Priority 5 SEQUENCE 24b 1 EFFECT + ThemeModulationEffect 0 8 # Priority 0 EFFECT + HeptagonEffect 0.2 2.0 # Priority 1 - EFFECT + Hybrid3DEffect 0 20 # Priority 2 - EFFECT + GaussianBlurEffect 0 8 # Priority 3 - EFFECT + ChromaAberrationEffect 0 10 # Priority 4 - EFFECT + SolarizeEffect 0 10 # Priority 5 + EFFECT + ParticleSprayEffect 0 8 # Priority 2 (spray particles - longer duration) + EFFECT + Hybrid3DEffect 0 20 # Priority 3 + EFFECT + GaussianBlurEffect 0 8 # Priority 4 + EFFECT + ChromaAberrationEffect 0 10 # Priority 5 + EFFECT + SolarizeEffect 0 10 # Priority 6 SEQUENCE 32b 0 EFFECT + ThemeModulationEffect 0 4 # Priority 0 @@ -96,9 +100,10 @@ SEQUENCE 56b 0 EFFECT + ThemeModulationEffect 0 8 # Priority 0 EFFECT = HeptagonEffect 0.2 2.0 # Priority 0 (same layer) EFFECT + Hybrid3DEffect 0 4 # Priority 1 - EFFECT + HeptagonEffect 0 16 # Priority 2 - EFFECT + ChromaAberrationEffect 0 16 # Priority 3 - EFFECT + GaussianBlurEffect 0 8 # Priority 4 + EFFECT + ParticleSprayEffect 0 8 # Priority 2 (spray particles) + EFFECT + HeptagonEffect 0 16 # Priority 3 + EFFECT + ChromaAberrationEffect 0 16 # Priority 4 + EFFECT + GaussianBlurEffect 0 8 # Priority 5 SEQUENCE 62b 0 EFFECT + ThemeModulationEffect 0 3 # Priority 0 diff --git a/assets/final/shaders/particle_render.wgsl b/assets/final/shaders/particle_render.wgsl index 6f115ec..6a955f0 100644 --- a/assets/final/shaders/particle_render.wgsl +++ b/assets/final/shaders/particle_render.wgsl @@ -18,6 +18,7 @@ struct Uniforms { struct VSOut { @builtin(position) pos: vec4, @location(0) color: vec4, + @location(1) uv: vec2, }; @vertex fn vs_main(@builtin(vertex_index) vi: u32, @builtin(instance_index) ii: u32) -> VSOut { @@ -36,9 +37,21 @@ struct VSOut { let s = sin(p.rot.x); let rotated_offset = vec2(offset.x * c - offset.y * s, offset.x * s + offset.y * c); let pos = vec2(p.pos.x + rotated_offset.x * size / uniforms.aspect_ratio, p.pos.y + rotated_offset.y * size); - return VSOut(vec4(pos, 0.0, 1.0), p.color * (0.5 + 0.5 * uniforms.audio_peak)); + + // Fade based on lifetime (p.pos.w goes from 1.0 to 0.0) + let lifetime_fade = p.pos.w; + let color_with_fade = vec4(p.color.rgb * (0.5 + 0.5 * uniforms.audio_peak), p.color.a * lifetime_fade); + + return VSOut(vec4(pos, 0.0, 1.0), color_with_fade, offset); } -@fragment fn fs_main(@location(0) color: vec4) -> @location(0) vec4 { - return color; +@fragment fn fs_main(@location(0) color: vec4, @location(1) uv: vec2) -> @location(0) vec4 { + // Calculate distance from center for circular shape + let dist = length(uv); + + // Smooth circular falloff (1.0 at center, 0.0 at edge) + let circle_alpha = smoothstep(1.0, 0.5, dist); + + // Apply circular fade to alpha channel + return vec4(color.rgb, color.a * circle_alpha); } -- cgit v1.2.3