Open App

Performance Optimization Tips for Smooth Rendering

2026-04-22•By Threnic Team

Threnic runs entirely in your browser, which means performance depends on your hardware and how you configure your project. This guide helps you identify bottlenecks, optimize settings, and maintain smooth 60fps rendering even with complex effect stacks.

Understanding the Rendering Pipeline

Every frame in Threnic passes through this pipeline:

  1. Scene Render — Three.js renders the 3D scene (text, background) to a framebuffer
  2. Post-Processing — GPU shaders apply effects (bloom, distortion, chromatic aberration, grain)
  3. Compositing — The final image is drawn to the canvas
  4. Display / Encode — During preview, the frame displays on screen; during export, it's sent to the WebCodecs encoder

Performance bottlenecks can occur at any stage. The key is identifying which stage is the limiting factor.

Diagnosing Performance Issues

Check Your FPS

Threnic displays the current frame rate in the toolbar during preview. If it's consistently below 30fps, you have a performance issue. Occasional dips to 50fps are normal and imperceptible.

Common Bottleneck Indicators

| Symptom | Likely Cause | Fix | | ----------------------- | ------------------------- | ---------------------------------------- | | Consistent low FPS | GPU shader overload | Reduce effects or resolution | | Sudden FPS drops | Memory pressure | Close other tabs, reduce background size | | Stutter on text changes | Text geometry rebuild | Reduce font complexity | | Slow export only | Encoder bottleneck | Reduce bitrate or resolution | | Everything is slow | Integrated GPU being used | Enable hardware acceleration |

GPU Optimization

Enable Hardware Acceleration

This is the single most important setting. Without hardware acceleration, your browser falls back to software rendering, which is 10-50× slower.

Chrome: Settings → System → "Use hardware acceleration when available" → Enable → Restart

Edge: Settings → System and performance → "Use hardware acceleration when available" → Enable → Restart

Check Which GPU is Being Used

If your laptop has both integrated and dedicated GPUs, the browser might be using the wrong one.

Windows: Settings → Display → Graphics → Add Chrome → Options → High performance

NVIDIA: NVIDIA Control Panel → Manage 3D Settings → Program Settings → Add Chrome → Preferred GPU → High-performance NVIDIA processor

VRAM Considerations

| VRAM | Comfortable Resolution | Max Effects | | ----- | ---------------------- | ----------- | | 2 GB | 720p | 2-3 effects | | 4 GB | 1080p | 4-5 effects | | 6 GB | 1080p + heavy effects | All effects | | 8+ GB | 4K | All effects |

If you exceed your GPU's VRAM capacity, the browser will start swapping to system memory, causing severe stuttering.

Effect Optimization

Effect Cost Rankings

Not all effects are equal in GPU cost:

| Effect | Relative Cost | Notes | | ------------------------- | ------------- | -------------------------------- | | Film Grain | Very Low | Simple noise overlay | | Vignette | Very Low | Single radial gradient | | Color Correction | Low | Per-pixel math | | Bloom | Medium | Multi-pass blur | | Chromatic Aberration | Medium | Three texture samples per pixel | | Distortion | Medium-High | Noise calculation + displacement | | Multiple effects combined | High | Costs stack linearly |

Optimization Strategies

  1. Disable effects you can't see — If film grain is too subtle to notice, turn it off for free performance
  2. Reduce distortion frequency — High frequency values (8+) are significantly more expensive than low ones (1-2)
  3. Lower bloom quality — If available, reduce bloom iterations from the default
  4. Use audio reactivity wisely — Reactivity itself is free (just multiplying a value), but it can push effects to their max cost during loud passages

Background Optimization

Large background images are a common performance drain:

  • Pre-crop to 16:9 at your target resolution — don't import a 6000×4000 photo for a 1080p video
  • Compress images — JPEG at quality 85-90 is visually identical to uncompressed but uses 5-10× less memory
  • Avoid animated/tiled backgrounds when using heavy effects — the combination multiplies GPU workload

See Background & Scene Design for detailed preparation guidelines.

Browser Optimization

Close Unnecessary Tabs

Each open tab consumes GPU memory and processing resources. Before starting an intensive session or export, close everything except Threnic.

Disable Browser Extensions

Some extensions (ad blockers, dark mode tools, accessibility overlays) inject CSS and JavaScript into every page, including Threnic. This can interfere with WebGL rendering. Try running Threnic in an incognito window with extensions disabled to see if performance improves.

Use a Dedicated Browser Profile

Create a Chrome profile specifically for Threnic with no extensions, no bookmarks sync, and minimal overhead. This ensures maximum resources are available for rendering.

Export-Specific Optimization

Export performance differs from preview performance because the encoder adds a processing step:

Tips for Faster Exports

  • Close all other applications — especially other GPU-intensive software
  • Export at 30fps unless you specifically need 60fps — halves the frame count
  • Start with 1080p — 4K exports take 4× longer and are only justified for specific distribution needs
  • Don't interact with the browser during export — switching tabs can cause WebGL context issues

Handling Long Exports

For songs longer than 5 minutes at 4K:

  • Expect 20-40 minutes of export time on mid-range hardware
  • Ensure your computer won't sleep (adjust power settings)
  • The export progress bar shows estimated time remaining

Quick Performance Checklist

  • [ ] Hardware acceleration enabled in browser settings
  • [ ] Dedicated GPU selected (laptop users)
  • [ ] Background image pre-cropped and compressed
  • [ ] Unnecessary effects disabled
  • [ ] Other browser tabs closed
  • [ ] Browser extensions disabled or using clean profile
  • [ ] Export resolution matches actual distribution needs

Next Steps

← BACK TO GUIDES