🎛️ Wibei Devlog: 3D Holographic Album Art & the VOID Overhaul

Project: Wibei (3D Audio Spectrograph & Real-Time DSP Lab)
Built for: Hack Club Stardance
Creators: @EVINJSUBIN & @aamosm
Repo: github.com/EVINJSUBIN/Wibei | Live: wibei.onrender.com

🚀 Elevating the Cockpit

Audio visualization isn’t just about moving bars — it’s about tactile feedback, visual hierarchy, and immersive atmosphere. In this sprint, we overhauled Wibei into a commercial-grade glassmorphism workstation, added a 3D holographic album art core, wrote a zero-dependency ID3 tag parser, and redesigned our landing page in our signature VOID aesthetic.

💎 1. Commercial-Grade Glassmorphism Cockpit

We replaced flat panels with an ergonomic, floating dual-deck hardware layout:

• Left Deck (Ingest): Quick-switch tabs for DEMOS, STREAM (YouTube/Spotify live audio), QUEUE (playlist management), and LOCAL (drag-and-drop).
• Right Deck (Synthesis & FX): Instant geometry matrix switching (RING, WAVE, GRID, ORB), real-time biquad muffler, sub-bass drive, nightcore tempo shifters, and camera auto-orbit.
• Floating Transport Bar: Ergonomic bottom bar with real-time master VU meter bars, peak telemetry (dBFS), elapsed timers, track metadata, and volume scrubber.
• Frosted Material System: Deep obsidian glass (rgba(10, 10, 14, 0.72)) with backdrop-filter: blur(28px), subtle rim lighting, and responsive LED indicators.

💿 2. 3D Holographic Center Album Art

In our RING (Pulse) visualizer, tracks with rich artwork now come to life in 3D:

• Hologram Disc: High-def circular disc (CircleGeometry(4.2)) with dark tinted glass backing and an audio-reactive neon border ring.
• Adaptive Gyro-Core: When artwork is present, the wireframe octahedron scales outward to 1.55x, orbiting as an open crystal gimbal cage. Without artwork (or on mic input), it docks back to its native 1.0x center scale.
• Vinyl Dynamics: Spins with bass-accelerated inertia, tilts dynamically in 3D pitch/roll, and pulses to sub-bass hits.

📦 3. Zero-Dependency In-Browser ID3 Extractor

To keep local playback instant without server uploads, we wrote id3.js from scratch:

• Direct binary parsing of ID3v2.3, ID3v2.4, and ID3v1 tags via ArrayBuffer slices.
• Extracts APIC frames into instant in-memory blob: URLs for album covers.
• Parses title, artist, album, and genre instantly with zero latency.

🌌 4. The “VOID” Aesthetic & Minimalist Landing Page

• Serious Void Default: Distraction-free interstellar abyss (#050507), crisp starlight typography (#f8fafc), and titanium slate accents (#8b95a5).
• Calibrated Bloom: Re-tuned UnrealBloomPass threshold to 0.82 — eliminating blinding white glare while keeping geometry razor-sharp.
• Minimalist Landing Page: Clean terminal layout with a 1,800-star WebGL starfield and a 3D gyro-core that pulses with kinetic shockwaves on live DSP audition clicks!

💻 100% Client-Side Engine

Built entirely with vanilla JS, Three.js (r128), and native Web Audio API — zero bulky UI frameworks, locked 60+ FPS, and zero-latency 32-bit floating DSP.