Visuval.io - a 3D Music Visualizer for Content Creators

Showcase
,
1

Live app: Visuval – 3D Music Visualizer
Landing page: https://visuval.io

Visuval – 3D Music Visualizer

Visuval is a browser-based 3D music visualizer for creators - musicians, YouTubers, streamers, and VJs. Drop in a track (or use your mic), pick a preset and theme, and export up to 1440p / 60fps video. No install required.

What it does

  • 50+ visualization presets — geometric structures, particle fields, raymarched tunnels, fluid/organic scenes, fractals, nature, retro oscilloscope vibes, and more
  • 29 color themes — solid palettes, duo-tone gradients, and a custom color picker
  • Real-time audio analysis — Web Audio API FFT (2048 bins → 64 buckets), split into bass / mid / treble
  • Mic input for live performance and DJ sets
  • Offline video export via WebCodecs (MP4 / WebM), frame-by-frame at up to 1440p
  • Post-processing stack — bloom, brightness/saturation, film grain, motion trails, kaleidoscope, depth of field, scanlines
  • MIDI controller support for hands-on control during live use

Preset highlights

A few favorites that show different Three.js approaches:

Preset Technique
Tunnel / Box Tunnel Raymarched infinite corridors with kaleidoscopic warping
Meadow Instanced grass field + particle pollen on a displaced terrain
Ferrofluid Glossy mesh with vertex displacement driven by audio bands
Starfield / Galaxy Billboard particles with warp-speed camera motion
MilkDrop Domain-warped feedback loops in a fragment shader

Three.js architecture

Visuval is built on vanilla Three.js (ES modules, no React Three Fiber). Each preset is a class extending a shared BasePreset with consistent lifecycle.

Shaders

  • Shared GLSL library reused across presets: hash/noise/fbm, SDF primitives, particle glow, watercolor, sketch hatching, rotation matrices, cosine palettes
  • Mix of mesh-based scenes (instanced geometry, buffer-attribute particles) and fullscreen quad fragment shaders (raymarching, fractals, feedback)

Performance

  • PresetLRU cache (capacity 4) — switching back to a recent preset reattaches GPU resources instead of rebuilding
  • Shared geometry registration to avoid duplicate GPU allocations
  • Particle systems use typed arrays + setDrawRange() for density control

Export

  • Offline render loop steps the audio clock frame-by-frame and encodes via WebCodecs (VP9 → VP8 → H.264 fallback)

Try it

  1. Open Visuval – 3D Music Visualizer
  2. Click Demo or upload an MP3/WAV
  3. Arrow keys cycle presets, 1–9 switch themes, F for fullscreen

Free tier includes a solid set of presets with no signup. Premium unlocks the full library and advanced export options.

Tech stack

  • Three.js (r170+) — scene graph, post-processing, custom shaders
  • Web Audio API — FFT analysis, mic capture, scrubbing
  • WebCodecs — video encoding
  • Firebase — auth and membership (premium presets are server-gated in production)

Happy to answer questions about the shader architecture, preset system, or export pipeline. Feedback from the Three.js community is always welcome! :slight_smile: