DEV Community

Eugene Pascheko
Eugene Pascheko

Posted on

Reviving 1,300+ 90s Chiptune & Tracker Hits in the Browser: WebAssembly, 3D Demoscene & AI

#showdev #webdev #javascript #webassembly

🕹️ Reviving 1,300+ 90s Chiptune & Tracker Hits in the Browser: WebAssembly, 3D Demoscene & AI

For me, the passion for tracker music started back in the mid-90s with legendary DOS games:

  • Xixit (1995): A hypnotic puzzle game whose melancholic, atmospheric tracker soundtrack was more addicting than the gameplay itself.
  • Mine Bombers 3.1 (1995): A Finnish hotseat multiplayer classic where dynamite explosions on a single keyboard were fueled by adrenaline-pumping, punchy MOD tracks.

That raw energy and creative genius of tracker music stuck with me forever: 8-bit chip basslines, sparkling sample-based arpeggios, and mesmerizing hex note matrices scrolling down the screen in FastTracker II, ProTracker, or demoscene cracktros.

C-4 01 v64 A0F  |  ··· .. .. ···  |  G-5 02 v48 ...
D#4 01 v64 ...  |  F#4 03 v32 C20 |  ··· .. .. ···
Enter fullscreen mode Exit fullscreen mode

Many developers dream of building the ultimate retro tracker player in the browser. Not just an MP3 jukebox, but a true WebAssembly synthesis workstation that allows per-channel soloing, tempo modulation, interactive 3D WebGL demoscene worlds, and live FastTracker II pattern scrolling.

Today, I'm excited to share Tracker Music — a live, 60 FPS in-browser chiptune machine packed with 1,300+ authentic modules (from Xixit & Mine Bombers favorites to Unreal Superhero 3, Razor 1911, Skaven, Purple Motion, and 4mat).

Here is the story of how we built it and how an AI pair-programming copilot helped turn a long-postponed dream project into reality.

⚡ What's Under the Hood?

1. Real-time WASM Synthesis with LibOpenMPT

Playing pre-rendered MP3 recordings ruins the magic of tracker music. Real tracker files (.mod, .xm, .s3m, .it) contain raw instrument samples and sequenced pattern commands executed in real-time.

  • LibOpenMPT in WebAssembly: We compiled the battle-tested libopenmpt engine into WebAssembly.
  • Dynamic Channel Isolation: Every channel can be muted or soloed independently in real-time.
  • Pitch-Free Tempo Scaling: You can speed up or slow down playback from 40 to 300 BPM on the fly without pitch distortion.

2. 4-Layer Visualizer Suite (60 FPS)

To capture the true demoscene aesthetic, we built four visualizer layers:

  1. Master Oscilloscope & Spectrum FFT: Neon glow oscilloscope with retro phosphor persistence.
  2. FastTracker II Full Pattern Matrix: Dynamic 60 FPS note scroller with syntax highlighting (Cyan notes, Gold instruments, Pink volume, Purple effects) and real-time channel VU meters.
  3. Channel Animation Rack: Live per-channel oscilloscope waveforms, scrollers, and falling neon piano-roll blocks (Guitar Hero style).
  4. 3D WebGL Demoscene Engine (Three.js): 5 procedural worlds including a Synthwave wireframe grid with a setting sun, Cyber Tunnel, and Digital Skyline.

🤖 How an AI Copilot Sped Up Development

Building this as a solo side-project would normally take months of tedious evenings. Here is how pair-programming with an autonomous AI coding agent solved the hardest parts in record time:

1. Auditing & Indexing 1,300+ Modules

The AI wrote automated scripts to inspect module headers via virtual WASM instances, validating sample counts, channel structures, fixing broken metadata, and generating a clean, searchable index.

2. Smooth 60 FPS 3D & Graphics Optimization

Initially, 3D scenes caused high CPU usage on low-end laptops. The AI pinpointed the rendering bottlenecks, optimized geometry transformations, and eliminated unnecessary calculations so the 3D scenes glide smoothly even on integrated GPUs.

3. Canvas 2D FastTracker Matrix

Replacing repetitive HTML table generation with direct GPU-accelerated Canvas 2D rendering eliminated micro-stuttering and locked the visualizer at a buttery 60 FPS, while dynamically filling the entire screen height with 20–35 rows.

4. Perfect Character Grid Alignment

In tracker music, parameters vary by format (MOD vs XM). The AI redesigned cell positioning into a strict monospace token grid so notes, instruments, volume tags, and effects align in razor-sharp columns with zero overlap.

5. Eco Lite Mode & Zero CPU in Background Tabs

  • Added a one-click 🌱 ECO LITE mode for power saving.
  • When the player tab is minimized or hidden, graphics rendering automatically sleeps, keeping background music playing at ~0% CPU usage.

🕹️ Live Demo & Must-Listen Classics

Experience it live in your browser:
👉 https://tracker.snakelair.ru/

Recommended starter tracks:

  • Unreal Super Hero 3 (Kenet & Rez)
  • Space Debris (Captain / Markus Schneider)
  • Stardust Memories (Jesper Kyd)
  • Desert Dawn (Purple Motion / Future Crew)
  • Razor 1911 & Fairlight Classics

What are your favorite tracker modules and demoscene memories? Drop them in the comments below!

Top comments (0)