Guides
Performance

Performance Guide

Optimize threeparticles for the best performance.

Particle Count

The most impactful factor is particle count. Guidelines:

  • Mobile: 1,000 - 5,000 particles
  • Desktop: 10,000 - 50,000 particles
  • High-end: 100,000+ particles
const particles = new Particles({
  particles: {
    count: 5000,
  },
  // ...
});

Blending Modes

AdditiveBlending is faster than NormalBlending because it doesn't require sorting:

import * as THREE from "three";
import { Particles } from "@threeparticles/core";
 
const particles = new Particles({
  render: {
    blendingMode: THREE.AdditiveBlending,
    depthTest: false,
  },
  // ...
});

Update Frequency

For distant particles, reduce update frequency:

let frameCount = 0;
 
function animate() {
  frameCount++;
 
  // Update close particles every frame
  closeParticles.update(delta);
 
  // Update distant particles every 3rd frame
  if (frameCount % 3 === 0) {
    distantParticles.update(delta * 3);
  }
}

Lifecycle Management

Always manage lifecycle properly:

// Start when needed
particles.start();
 
// Stop when not visible
particles.stop();
 
// Dispose when done
particles.dispose();
scene.remove(particles);

Spawn Modes

Use appropriate spawn modes for your use case:

// Continuous emission - use 'time' mode
const continuous = new Particles({
  emitter: {
    spawnMode: "time",
    rate: 50, // particles per cycle
    loop: true,
  },
  // ...
});
 
// One-shot burst - use 'burst' mode
const burst = new Particles({
  emitter: {
    spawnMode: "burst",
    rate: 200, // all at once
    loop: false,
  },
  // ...
});

Optimizing Multiple Systems

When running multiple particle systems:

const systems: Particles[] = [];
 
function animate() {
  const delta = clock.getDelta();
 
  // Update all systems in single loop
  for (const system of systems) {
    system.update(delta);
  }
}
 
// Clean up unused systems
function removeSystem(system: Particles) {
  system.stop();
  system.dispose();
  scene.remove(system);
  const index = systems.indexOf(system);
  if (index > -1) systems.splice(index, 1);
}
IntegrationsCustom Shaders