Guides
Custom Shaders

Shader System

threeparticles uses Three.js TSL (Three Shading Language) internally for WebGPU accelerated rendering.

Built-in Rendering

The library handles particle rendering through configuration rather than custom shaders. Most visual effects can be achieved through the config options:

import * as THREE from "three";
import { Particles } from "@threeparticles/core";
 
const particles = new Particles({
  particles: {
    count: 1000,
    colors: [
      [
        { color: "cyan", stop: 0 },
        { color: "purple", stop: 0.5 },
        { color: "transparent", stop: 1 },
      ],
    ],
    fadeAlpha: [1, 0],
    fadeSize: [0.5, 1.5],
  },
  render: {
    blendingMode: THREE.AdditiveBlending,
    depthTest: true,
  },
  emitter: {
    loop: true,
    lifetime: [1, 2],
  },
});

Color Gradients

Use the colors array with stops to create color gradients over particle lifetime:

const particles = new Particles({
  particles: {
    colors: [
      [
        { color: "white", stop: 0 }, // start
        { color: "yellow", stop: 0.2 }, // early life
        { color: "orange", stop: 0.5 }, // mid life
        { color: "red", stop: 0.8 }, // late life
        { color: "#000000", stop: 1 }, // end
      ],
    ],
  },
  // ...
});

Alpha and Size Curves

Control how particles fade and scale over their lifetime:

const particles = new Particles({
  particles: {
    fadeAlpha: [1, 0], // fully visible at start, invisible at end
    fadeSize: [0.5, 2], // start small, grow larger
  },
  // ...
});

Blending Modes

Configure blending for different visual effects:

import * as THREE from "three";
 
// Additive blending for glowing effects
const glowingParticles = new Particles({
  render: {
    blendingMode: THREE.AdditiveBlending,
    depthTest: false,
  },
  // ...
});
 
// Normal blending for opaque particles
const opaqueParticles = new Particles({
  render: {
    blendingMode: THREE.NormalBlending,
    depthTest: true,
  },
  // ...
});
PerformanceReact Integration