web: HDR+bloom post, new waves.wgsl layered velvet waves with gold wireframe; strong audio↔visual coupling; drag swirl; smoother pulses; higher contrast

Author: rgilks

crates/app-core/shaders/post.wgsl

@@ -0,0 +1,127 @@
+// Fullscreen post-processing: HDR bright pass, separable blur, composite with
+// filmic tonemapping, vignette, gentle chroma shift and film grain.
+
+struct VsOut {
+    @builtin(position) pos: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+};
+
+// Common uniforms used by all post passes
+struct PostUniforms {
+    resolution: vec2<f32>,
+    time: f32,
+    ambient: f32,
+    // For blur
+    blur_dir: vec2<f32>,
+    bloom_strength: f32,
+    threshold: f32,
+};
+
+@group(0) @binding(0) var hdr_tex: texture_2d<f32>;
+@group(0) @binding(1) var hdr_sampler: sampler;
+@group(0) @binding(2) var<uniform> u_post: PostUniforms;
+
+// Optional second texture (used by composite for blurred bloom)
+@group(1) @binding(0) var blur_tex: texture_2d<f32>;
+@group(1) @binding(1) var blur_sampler: sampler;
+
+@vertex
+fn vs_fullscreen(@builtin(vertex_index) vid: u32) -> VsOut {
+    // Fullscreen triangle (no vertex buffer)
+    var pos = array<vec2<f32>, 3>(
+        vec2<f32>(-1.0, -3.0),
+        vec2<f32>(-1.0, 1.0),
+        vec2<f32>(3.0, 1.0),
+    );
+    var uv = array<vec2<f32>, 3>(
+        vec2<f32>(0.0, 2.0),
+        vec2<f32>(0.0, 0.0),
+        vec2<f32>(2.0, 0.0),
+    );
+    var out: VsOut;
+    out.pos = vec4<f32>(pos[vid], 0.0, 1.0);
+    out.uv = uv[vid];
+    return out;
+}
+
+fn luminance(c: vec3<f32>) -> f32 {
+    return dot(c, vec3<f32>(0.2126, 0.7152, 0.0722));
+}
+
+// BRIGHT PASS: keep only highlights above threshold
+@fragment
+fn fs_bright(inp: VsOut) -> @location(0) vec4<f32> {
+    let col = textureSample(hdr_tex, hdr_sampler, inp.uv).rgb;
+    let thr = u_post.threshold;
+    let l = luminance(col);
+    let k = max(l - thr, 0.0);
+    let outc = col * (k / max(l, 1e-5));
+    return vec4<f32>(outc, 1.0);
+}
+
+// BLUR PASS: simple 9-tap gaussian along blur_dir
+@fragment
+fn fs_blur(inp: VsOut) -> @location(0) vec4<f32> {
+    let texel = u_post.blur_dir / u_post.resolution;
+    let w0 = 0.05;
+    let w1 = 0.09;
+    let w2 = 0.12;
+    let w3 = 0.15;
+    var acc: vec3<f32> = vec3<f32>(0.0);
+    acc += textureSample(hdr_tex, hdr_sampler, inp.uv - texel * 3.0).rgb * w0;
+    acc += textureSample(hdr_tex, hdr_sampler, inp.uv - texel * 2.0).rgb * w1;
+    acc += textureSample(hdr_tex, hdr_sampler, inp.uv - texel * 1.0).rgb * w2;
+    acc += textureSample(hdr_tex, hdr_sampler, inp.uv).rgb * w3;
+    acc += textureSample(hdr_tex, hdr_sampler, inp.uv + texel * 1.0).rgb * w2;
+    acc += textureSample(hdr_tex, hdr_sampler, inp.uv + texel * 2.0).rgb * w1;
+    acc += textureSample(hdr_tex, hdr_sampler, inp.uv + texel * 3.0).rgb * w0;
+    return vec4<f32>(acc, 1.0);
+}
+
+fn aces_tonemap(x: vec3<f32>) -> vec3<f32> {
+    let a = 2.51;
+    let b = 0.03;
+    let c = 2.43;
+    let d = 0.59;
+    let e = 0.14;
+    return clamp((x * (a * x + b)) / (x * (c * x + d) + e), vec3<f32>(0.0), vec3<f32>(1.0));
+}
+
+fn vignette(uv: vec2<f32>) -> f32 {
+    let r = length(uv - 0.5);
+    return smoothstep(0.95, 0.45, r);
+}
+
+fn hash2(p: vec2<f32>) -> f32 {
+    let h = dot(p, vec2<f32>(127.1, 311.7));
+    return fract(sin(h) * 43758.5453123);
+}
+
+// COMPOSITE: tone-map HDR + add bloom + color grading and grain
+@fragment
+fn fs_composite(inp: VsOut) -> @location(0) vec4<f32> {
+    var base = textureSample(hdr_tex, hdr_sampler, inp.uv).rgb;
+    let bloom = textureSample(blur_tex, blur_sampler, inp.uv).rgb * u_post.bloom_strength;
+    base += bloom;
+
+    // Subtle hue warp based on ambient and time
+    let t = u_post.time * 0.15;
+    let ambient = u_post.ambient;
+    let hue = vec3<f32>(sin(t * 1.2) + 1.0, sin(t * 1.5 + 2.0) + 1.0, sin(t * 1.8 + 4.0) + 1.0) * 0.05 * ambient;
+    base *= (vec3<f32>(1.0) + hue);
+
+    // Tonemap
+    var mapped = aces_tonemap(base);
+
+    // Vignette
+    let vig = vignette(inp.uv);
+    mapped *= mix(1.0, 0.85, vig);
+
+    // Film grain
+    let noise = hash2(inp.uv * u_post.resolution + u_post.time);
+    mapped += (noise - 0.5) * 0.02;
+
+    return vec4<f32>(mapped, 1.0);
+}
+
+

crates/app-core/shaders/scene.wgsl

@@ -27,25 +27,60 @@ fn vs_main(
     return out;
 }
 
+// Cheap hash and helpers for micro-detail
+fn hash(p: vec2<f32>) -> f32 {
+    let h = dot(p, vec2<f32>(127.1, 311.7));
+    return fract(sin(h) * 43758.5453);
+}
+
 @fragment
 fn fs_main(inf: VsOut) -> @location(0) vec4<f32> {
-    // Circular mask within the quad (unit circle of radius 0.5)
-    let r = length(inf.local);
-    let shape_alpha = 1.0 - smoothstep(0.48, 0.5, r);
+    // Local in [-0.5,0.5] → map to unit disk coordinates
+    let p = inf.local * 2.0;
+    let r = length(p);
+    let alpha = 1.0 - smoothstep(0.48, 0.5, r); // soft circle mask
+    if alpha <= 0.0 {
+        return vec4<f32>(0.0, 0.0, 0.0, 0.0);
+    }
+
+    // Fake sphere normal from signed distance to unit circle
+    let zz = sqrt(max(1.0 - clamp(r, 0.0, 1.0) * clamp(r, 0.0, 1.0), 0.0));
+    let n = normalize(vec3<f32>(p, zz));
+    let light1 = normalize(vec3<f32>(-0.4, 0.2, 0.9));
+    let light2 = normalize(vec3<f32>(0.6, -0.3, 0.7));
+    let base_col = inf.color.rgb;
+
+    // Diffuse + warm/cool split lighting
+    let diff1 = max(dot(n, light1), 0.0);
+    let diff2 = max(dot(n, light2), 0.0);
+    var col = base_col * (0.25 + 0.9 * diff1) + vec3<f32>(0.9, 0.95, 1.0) * (0.15 * diff2);
+
+    // Specular highlights
+    let view = vec3<f32>(0.0, 0.0, 1.0);
+    let h1 = normalize(light1 + view);
+    let spec = pow(max(dot(n, h1), 0.0), 64.0);
+    col += vec3<f32>(1.0) * (0.25 * spec);
+
+    // Pulse-driven inner bloom and moving ring
+    let pulse = clamp(inf.pulse, 0.0, 1.5);
+    let core = smoothstep(0.55, 0.0, r) * (0.6 + 1.8 * pulse);
+    let ring = exp(-40.0 * pow(r - (0.25 + 0.2 * pulse), 2.0)) * (0.3 + 1.2 * pulse);
+    col *= 0.6 + core;
+    col += base_col * ring;
 
-    // Emissive pulse boosts brightness subtly
-    let emissive = 0.7 * clamp(inf.pulse, 0.0, 1.5);
-    var rgb = inf.color.rgb * (1.0 + emissive);
+    // Iridescent rim
+    let rim = pow(1.0 - clamp(dot(n, view), 0.0, 1.0), 3.0);
+    col += vec3<f32>(0.9, 0.8, 1.2) * rim * (0.4 + 0.8 * pulse);
 
-    // Subtle outer glow/halo based on radius
-    let halo = smoothstep(0.75, 0.55, r) * 0.12; // outer ring brightness
-    rgb += halo * inf.color.rgb;
+    // Micro sparkle texture
+    let g = hash(p * 120.0) - 0.5;
+    col += (0.02 + 0.08 * pulse) * g;
 
-    // Add vignette-like radial darkening for ambient mood
-    let vignette = smoothstep(0.0, 0.7, r);
-    rgb *= mix(1.0, 0.85, vignette);
+    // Outer halo beyond the mask for smoother edges (relies on HDR post bloom)
+    let halo = smoothstep(0.55, 0.45, r) * (0.4 + 1.5 * pulse);
+    col += base_col * halo;
 
-    return vec4<f32>(rgb, shape_alpha * inf.color.a);
+    return vec4<f32>(col, alpha * inf.color.a);
 }
 
 

crates/app-core/shaders/waves.wgsl

@@ -0,0 +1,185 @@
+// Audio-reactive ribbon/heightfield aesthetic rendered in a single fullscreen pass.
+// Inspired by smooth velvet waves with golden accents.
+
+struct VsOut {
+    @builtin(position) pos: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+};
+
+struct Voice {
+    // xyz position (x,z used), w = pulse (0..1.5)
+    pos_pulse: vec4<f32>,
+    // rgb base, a unused
+    color: vec4<f32>,
+};
+
+struct WaveUniforms {
+    resolution: vec2<f32>,
+    time: f32,
+    ambient: f32,
+    voices: array<Voice, 3>,
+    swirl_uv: vec2<f32>,
+    swirl_strength: f32,
+    swirl_active: f32,
+};
+
+@group(0) @binding(0) var<uniform> u: WaveUniforms;
+
+@vertex
+fn vs_fullscreen(@builtin(vertex_index) vid: u32) -> VsOut {
+    var pos = array<vec2<f32>, 3>(
+        vec2<f32>(-1.0, -3.0),
+        vec2<f32>(-1.0, 1.0),
+        vec2<f32>(3.0, 1.0),
+    );
+    var uv = array<vec2<f32>, 3>(
+        vec2<f32>(0.0, 2.0),
+        vec2<f32>(0.0, 0.0),
+        vec2<f32>(2.0, 0.0),
+    );
+    var out: VsOut;
+    out.pos = vec4<f32>(pos[vid], 0.0, 1.0);
+    out.uv = uv[vid];
+    return out;
+}
+
+fn hash2(p: vec2<f32>) -> f32 {
+    let h = dot(p, vec2<f32>(127.1, 311.7));
+    return fract(sin(h) * 43758.5453123);
+}
+
+fn fbm(p: vec2<f32>) -> f32 {
+    var a = 0.0;
+    var b = 0.5;
+    var f = p;
+    for (var i = 0; i < 5; i = i + 1) {
+        a += b * sin(f.x) * cos(f.y);
+        f *= 2.17;
+        b *= 0.55;
+    }
+    return a;
+}
+
+// --- Wireframe helpers and layered waves version ---
+fn sd_segment(p: vec2<f32>, a: vec2<f32>, b: vec2<f32>) -> f32 {
+    let pa = p - a;
+    let ba = b - a;
+    let h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
+    return length(pa - ba * h);
+}
+
+fn wireframe_bg(p: vec2<f32>) -> f32 {
+    var d = 1e9;
+    let centers = array<vec2<f32>, 3>(
+        vec2<f32>(0.62, 0.28),
+        vec2<f32>(0.80, 0.44),
+        vec2<f32>(0.70, 0.72),
+    );
+    let radii = array<f32, 3>(0.28, 0.18, 0.12);
+    for (var i = 0; i < 3; i = i + 1) {
+        d = min(d, abs(length(p - centers[i]) - radii[i]));
+    }
+    d = min(d, sd_segment(p, vec2<f32>(0.55, 0.20), vec2<f32>(0.85, 0.50)));
+    d = min(d, sd_segment(p, vec2<f32>(0.62, 0.28), vec2<f32>(0.80, 0.44)));
+    d = min(d, sd_segment(p, vec2<f32>(0.72, 0.70), vec2<f32>(0.86, 0.52)));
+    return d;
+}
+
+@fragment
+fn fs_waves(inp: VsOut) -> @location(0) vec4<f32> {
+    let uv = inp.uv;
+    let aspect = u.resolution.x / max(u.resolution.y, 1.0);
+    let cuv0 = (uv - 0.5) * vec2<f32>(aspect, 1.0);
+    let t = u.time;
+
+    // Background wireframe
+    let gold = vec3<f32>(1.00, 0.86, 0.46);
+    let d = wireframe_bg(uv);
+    var col = vec3<f32>(0.04, 0.055, 0.10);
+    let line = smoothstep(0.012, 0.002, d);
+    // Make wireframe more visible; it will bloom subtly
+    col += gold * line * (0.30 + 0.60 * u.ambient);
+
+    // Three layered waves with parallax
+    for (var L = 0; L < 3; L = L + 1) {
+        let depth = f32(L);
+        let par = mix(0.65, 1.25, depth / 2.0);
+        var cuv = cuv0 * par + vec2<f32>(0.0, -0.10 * depth);
+        // Swirl displacement around active pointer
+        if u.swirl_active > 0.5 {
+            let c = (u.swirl_uv - 0.5) * vec2<f32>(aspect, 1.0) * par;
+            let v = cuv - c;
+            let r = length(v);
+            let ang = u.swirl_strength * 2.5 * exp(-1.8 * r);
+            let cs = cos(ang);
+            let sn = sin(ang);
+            let rot = vec2<f32>(v.x * cs - v.y * sn, v.x * sn + v.y * cs);
+            cuv = c + rot;
+        }
+        // Displace coordinates by nearby voices so dragging clearly affects visuals
+        var disp = vec2<f32>(0.0);
+        for (var i = 0; i < 3; i = i + 1) {
+            let v = u.voices[i];
+            let p = vec2<f32>(v.pos_pulse.x, v.pos_pulse.z) * 0.33;
+            let d = distance(cuv, p);
+            let dir = normalize(cuv - p);
+            let pulse = clamp(v.pos_pulse.w, 0.0, 1.5);
+            let str = (0.12 + 0.45 * pulse) * exp(-1.8 * d);
+            disp += dir * str;
+        }
+        cuv += disp;
+        let tt = t * (0.30 + 0.08 * depth);
+        let amp = mix(1.0, 2.2, depth / 2.0);
+        var h = 0.0;
+        // Broader ribbons along X with mild Y slant
+        h += amp * (1.05 * sin((6.0 + 1.0 * depth) * cuv.x - 1.2 * tt));
+        h += amp * (0.65 * sin((9.0 + 1.5 * depth) * cuv.x + 0.8 * tt + 0.7 * cuv.y));
+        // Envelope so center has more curvature
+        h *= (1.0 - 0.25 * abs(cuv.y));
+        // Add velvet noise
+        h += 0.35 * fbm(cuv * 2.4 + vec2<f32>(0.22 * tt, -0.16 * tt));
+        for (var i = 0; i < 3; i = i + 1) {
+            let v = u.voices[i];
+            let p = vec2<f32>(v.pos_pulse.x, v.pos_pulse.z) * 0.33;
+            let dd = distance(cuv, p);
+            let pulse = clamp(v.pos_pulse.w, 0.0, 1.5);
+            h += (0.65 + 0.9 * pulse) * exp(-2.2 * dd) * sin(14.0 * dd - 2.0 * tt);
+            h += 0.22 * (1.0 / (1.0 + 6.0 * dd)) * sin(7.0 * (cuv.x - p.x) + 1.5 * tt);
+        }
+        let e = 0.002;
+        let hx = h - (0.55 * sin(6.0 * (cuv.x - e) - 1.4 * tt) + 0.35 * sin(10.0 * (cuv.x - e) + 0.9 * tt + 0.8 * cuv.y) + 0.25 * fbm((cuv - vec2<f32>(e, 0.0)) * 2.5 + vec2<f32>(0.2 * tt, -0.15 * tt)));
+        let hy = h - (0.55 * sin(6.0 * cuv.x - 1.4 * tt) + 0.35 * sin(10.0 * cuv.x + 0.9 * tt + 0.8 * (cuv.y - e)) + 0.25 * fbm((cuv - vec2<f32>(0.0, e)) * 2.5 + vec2<f32>(0.2 * tt, -0.15 * tt)));
+        let n = normalize(vec3<f32>(hx, hy, e));
+        let l1 = normalize(vec3<f32>(-0.4, 0.3, 0.85));
+        let l2 = normalize(vec3<f32>(0.6, -0.2, 0.75));
+        let diff = 0.65 * max(dot(n, l1), 0.0) + 0.35 * max(dot(n, l2), 0.0);
+        let base = mix(vec3<f32>(0.03, 0.04, 0.08), vec3<f32>(0.12, 0.14, 0.26), diff + 0.15 * u.ambient);
+        let cool = vec3<f32>(0.18, 0.45, 1.05);
+        let warm = vec3<f32>(1.08, 0.86, 0.40);
+        let k = clamp(0.5 + 1.1 * h, 0.0, 1.0);
+        var lay = base + mix(cool * 0.45, warm * 0.55, k);
+        let stripes = smoothstep(0.45, 0.5, abs(fract(h * 8.0) - 0.5));
+        lay += (1.0 - stripes) * gold * (0.18 + 0.30 * u.ambient);
+        let view = vec3<f32>(0.0, 0.0, 1.0);
+        let h1 = normalize(l1 + view);
+        lay += vec3<f32>(1.0) * (0.18 * pow(max(dot(n, h1), 0.0), 72.0));
+        // Emissive crest glow captured by bloom
+        let crest = smoothstep(0.84, 0.98, k);
+        lay += gold * crest * (0.75 + 1.4 * u.ambient);
+        // Visible voice focus points
+        for (var i = 0; i < 3; i = i + 1) {
+            let p = vec2<f32>(u.voices[i].pos_pulse.x, u.voices[i].pos_pulse.z) * 0.33;
+            let dd = distance(cuv, p);
+            lay += gold * exp(-40.0 * dd * dd) * 0.45;
+        }
+        let a = mix(0.55, 0.28, depth / 2.0);
+        col = col * (1.0 - a) + lay * a;
+    }
+
+    let s = hash2(cuv0 * 600.0 + t);
+    col += (step(0.992, s) * (s - 0.992) * 240.0) * gold * (0.35 + 0.55 * u.ambient);
+
+    return vec4<f32>(col, 1.0);
+}
+
+

crates/app-core/src/lib.rs

@@ -2,6 +2,8 @@ pub mod constants;
 pub mod music;
 pub mod state;
 pub static SCENE_WGSL: &str = include_str!("../shaders/scene.wgsl");
+pub static POST_WGSL: &str = include_str!("../shaders/post.wgsl");
+pub static WAVES_WGSL: &str = include_str!("../shaders/waves.wgsl");
 
 pub use constants::*;
 pub use music::*;