⚠️ This lesson is not yet translated in your language, it will be available soon!

So far, we've created custom components to create particles in our 3D scenes. Most of the time, we want to do almost the same thing: emit particles from a point in space and animate them over time. (Color, size, position, etc.)

Instead of duplicating the same code over and over, we can create a relatively generic VFX engine that can be used to create different types of particle effects.

It comes with many benefits:

• Reusability: You can use the same engine to create different types of particle effects in your projects.
• Performance: The engine can be optimized to handle a large number of particles efficiently and to merge multiple particle systems into a single one.
• Flexibility: You can easily customize the behavior of the particles by changing the engine's parameters.
• Ease of use: You can create complex particle effects with just a few lines of code.
• Avoid code duplication: You don't have to write the same code multiple times.

We will use this VFX engine in the next lessons to create various effects. While you can skip this lesson and use the engine directly, understanding how it works will help you understand more in-depth how to master performance and flexibility in your 3D projects.

Ready to build your VFX engine? Let's get started!

GPU Particles

We have seen on the previous lessons how we can use the <Instances /> component from drei to create controlled particles in our 3D scenes.

But this approach has one main limitation: the number of particles we can handle is limited by the CPU. The more particles we have, the more the CPU has to handle them, which can lead to performance issues.

This is due to the fact that under the hood, the <Instances /> component does calculation to get the position, color, and size of each <Instance /> in its useFrame loop. You can see the code here.

For our VFX Engine, we want to be able to spawn way more particles than we can handle with the <Instances /> component. We will use the GPU to handle the particles' position, color, and size. Allowing us to handle hundreds of thousands of particles (millions? 👀) without any performance issues.

Instanced Mesh

While we could use Sprite or Points to create particles, we will use InstancedMesh.

It allows us to render not only simple shapes like points or sprites but also 3D shapes like cubes, spheres, and custom geometries.

Let's create a component in a new vfxs folder called VFXParticles.jsx:

Copy
import { useMemo, useRef } from "react";
import { PlaneGeometry } from "three";

export const VFXParticles = ({ settings = {} }) => {
  const { nbParticles = 1000 } = settings;
  const mesh = useRef();
  const defaultGeometry = useMemo(() => new PlaneGeometry(0.5, 0.5), []);
  return (
    <>
      <instancedMesh args={[defaultGeometry, null, nbParticles]} ref={mesh}>
        <meshBasicMaterial color="orange" />
      </instancedMesh>
    </>
  );
};

We create the geometry that will be used for each particle. In this case, we use a simple plane geometry with a size of 0.5 on both axes. Later we will add a prop to pass any geometry we want.

The instancedMesh component takes three arguments:

• The geometry of the particles.
• The material of the particles. We passed null to define it declaratively inside the component.
• The number of instances the component will be able to handle. For us it represents the maximum number of particles that can be displayed at the same time.

Let's replace the orange cube with our VFXParticles component in the Experience.jsx file:

Copy
// ...
import { VFXParticles } from "./vfxs/VFXParticles";

export const Experience = () => {
  return (
    <>
      {/* ... */}
      <VFXParticles />
    </>
  );
};

You can see one orange particle in the middle of the scene. This is our VFXParticles component.

Our number of particles is set to 1000 but we can only see one. This is because all are rendered at the same position (0, 0, 0). Let's change that.

Instance Matrix

The instanced mesh uses a matrix to define the position, rotation, and scale of each instance. By updating the instanceMatrix property of our mesh, we can move, rotate, and scale each particle individually.

For each instance, the matrix is a 4x4 matrix that represents the transformation of the particle. The Matrix4 class from Three.js allows us to compose and decompose the matrix to set/get the position, rotation, and scale of the particle in a more human-readable way.

On top of the VFXParticles declaration, let's declare some dummy variables to manipulate the particles without recreating Vectors and Matrices too often:

Copy
// ...
import { Euler, Matrix4, PlaneGeometry, Quaternion, Vector3 } from "three";

const tmpPosition = new Vector3();
const tmpRotationEuler = new Euler();
const tmpRotation = new Quaternion();
const tmpScale = new Vector3(1, 1, 1);
const tmpMatrix = new Matrix4();

Now let's create an emit function to setup our particles:

Copy
// ...
import { useEffect } from "react";

// ...

export const VFXParticles = ({ settings = {} }) => {
  // ...

  const emit = (count) => {
    for (let i = 0; i < count; i++) {
      const position = [
        randFloatSpread(5),
        randFloatSpread(5),
        randFloatSpread(5),
      ];
      const scale = [
        randFloatSpread(1),
        randFloatSpread(1),
        randFloatSpread(1),
      ];
      const rotation = [
        randFloatSpread(Math.PI),
        randFloatSpread(Math.PI),
        randFloatSpread(Math.PI),
      ];
      tmpPosition.set(...position);
      tmpRotationEuler.set(...rotation);
      tmpRotation.setFromEuler(tmpRotationEuler);
      tmpScale.set(...scale);
      tmpMatrix.compose(tmpPosition, tmpRotation, tmpScale);
      mesh.current.setMatrixAt(i, tmpMatrix);
    }
  };
  useEffect(() => {
    emit(nbParticles);
  }, []);
  // ...
};

The emit function loops over the number of particles we want to emit and sets a random position, rotation, and scale for each particle. We then compose the matrix with these values and set it to the instance at the current index.

You can see random particles in the scene. Each particle has a random position, rotation, and scale.

To animate our particles we will define attributes such as lifetime, speed, direction so the computation can be done on the GPU.

Before doing that, we need to switch to a custom shader material to handle these attributes as we don't have access and control over the attributes of the meshBasicMaterial.

Particles Material

Our first goal will be to not see any change between the meshBasicMaterial and our new shaderMaterial. We will create a simple shader material that will render the particles the same way as the meshBasicMaterial currently does.

In the VFXParticles component, let's create a new shader material:

Copy
// ...
import { shaderMaterial } from "@react-three/drei";
import { extend } from "@react-three/fiber";
import { Color } from "three";

const ParticlesMaterial = shaderMaterial(
  {
    color: new Color("white"),
  },
  /* glsl */ `
varying vec2 vUv;

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(instanceMatrix * vec4(position, 1.0));
  vUv = uv;
}
`,
  /* glsl */ `
uniform vec3 color;
varying vec2 vUv;


void main() {
  gl_FragColor = vec4(color, 1.0);
}`
);

extend({ ParticlesMaterial });

This is a very simple shader material that takes a color uniform and renders the particles with this color. The only new thing here is the instanceMatrix that we use to get the position, rotation, and scale of each particle.

Note that we didn't need to declare the instanceMatrix attribute as this is one of the built-in attributes of the WebGLProgram when using instancing. More information can be found here.

Let's replace the meshBasicMaterial with our new ParticlesMaterial:

Copy
<instancedMesh args={[defaultGeometry, null, nbParticles]} ref={mesh}>
  <particlesMaterial color="orange" />
</instancedMesh>

Perfect! Our position, rotation, and scale are still working as expected. The particles are rendered with a slightly different orange color. This is because we don't take the environment into account in our shader material. To keep things simple, we will keep it like this.

We are now ready to add custom attributes to our particles to animate them.

Instanced Buffer Attributes

So far, we only used the instanceMatrix attribute, we will now add custom attributes to have more control over each particle.

For this, we will use the InstancedBufferAttribute from Three.js.

We will add the following attributes to our particles:

• instanceColor: A vector3 representing the color of the particle.
• instanceColorEnd: A vector3 representing the color will turn into over time.
• instanceDirection: A vector3 representing the direction the particle will move.
• instanceSpeed: A float to define how fast the particle will move in its direction.
• instanceRotationSpeed: A vector3 to determine the rotation speed of the particle per axis.
• instanceLifetime: A vector2 to define the lifetime of the particle. The first value (x) is the start time, and the second value (y) is the lifetime/duration. Combined to a time uniform, we can calculate the age, progress, and if a particle is alive or dead.

Let's create the different buffers for our attributes:

Copy
// ...
import { useState } from "react";

// ...

export const VFXParticles = ({ settings = {} }) => {
  // ...

  const [attributeArrays] = useState({
    instanceColor: new Float32Array(nbParticles * 3),
    instanceColorEnd: new Float32Array(nbParticles * 3),
    instanceDirection: new Float32Array(nbParticles * 3),
    instanceLifetime: new Float32Array(nbParticles * 2),
    instanceSpeed: new Float32Array(nbParticles * 1),
    instanceRotationSpeed: new Float32Array(nbParticles * 3),
  });

  // ...
};

// ...

I'm using a useState to create the different buffers for our attributes to avoid recreating them at each render. I chose not to use the useMemo hook as changing the maximum number of particles during the component's lifecycle is not something we want to handle.

The Float32Array is used to store the values of the attributes. We multiply the number of particles by the number of components of the attribute to get the total number of values in the array.

In the instanceColor attribute, the first 3 values will represent the color of the first particle, the next 3 values will represent the color of the second particle, and so on.

Let's start by getting familiar with the InstancedBufferAttribute and how to use it. To do so, we will implement the instanceColor attribute:

Copy
// ...
import { DynamicDrawUsage } from "three";

export const VFXParticles = ({ settings = {} }) => {
  // ...

  return (
    <>
      <instancedMesh args={[defaultGeometry, null, nbParticles]} ref={mesh}>
        <particlesMaterial color="orange" />
        <instancedBufferAttribute
          attach={"geometry-attributes-instanceColor"}
          args={[attributeArrays.instanceColor]}
          itemSize={3}
          count={nbParticles}
          usage={DynamicDrawUsage}
        />
      </instancedMesh>
    </>
  );
};

In our <instancedMesh />, we add an <instancedBufferAttribute /> component to define the instanceColor attribute. We attach it to the geometry-attributes-instanceColor attribute of the mesh. We pass the attributeArrays.instanceColor array as the data source, set the itemSize to 3 as we have a vector3, and the count to nbParticles.

The usage prop is set to DynamicDrawUsage to tell the renderer that the data will be updated frequently. The other possible values and more details can be found here.

We won't update them every frame, but every time we emit new particles, the data will be updated. Enough to consider it as DynamicDrawUsage.

Perfect, let's create a dummy tmpColor variable on top of our file to manipulate the colors of the particles:

Copy
// ...

const tmpColor = new Color();

Now let's update the emit function to set the instanceColor attribute:

Copy
const emit = (count) => {
  const instanceColor = mesh.current.geometry.getAttribute("instanceColor");

  for (let i = 0; i < count; i++) {
    // ...

    tmpColor.setRGB(Math.random(), Math.random(), Math.random());
    instanceColor.set([tmpColor.r, tmpColor.g, tmpColor.b], i * 3);
  }
};

We start by getting the instanceColor attribute from the geometry of the mesh. We then loop over the number of particles we want to emit and set a random color for each particle.

Let's update the particlesMaterial to use the instanceColor attribute instead of the color uniform:

Copy
const ParticlesMaterial = shaderMaterial(
  {
    // color: new Color("white"),
  },
  /* glsl */ `
varying vec2 vUv;
varying vec3 vColor;

attribute vec3 instanceColor;

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(instanceMatrix * vec4(position, 1.0));
  vUv = uv;
  vColor = instanceColor;
}
`,
  /* glsl */ `
varying vec3 vColor;
varying vec2 vUv;


void main() {
  gl_FragColor = vec4(vColor, 1.0);
}`
);
// ...

We added an attribute vec3 instanceColor; to the vertex shader and set the vColor varying to pass the color to the fragment shader. We then set the gl_FragColor to the vColor to render the particles with their color.

We successfully set a random color for each particle. The particles are rendered with their color.

Perfect, let's add the other attributes to our particles. First, let's update our emit function to set the instanceColorEnd, instanceDirection, instanceLifetime, instanceSpeed, and instanceRotationSpeed attributes with random values:

Copy
const emit = (count) => {
  const instanceColor = mesh.current.geometry.getAttribute("instanceColor");
  const instanceColorEnd =
    mesh.current.geometry.getAttribute("instanceColorEnd");
  const instanceDirection =
    mesh.current.geometry.getAttribute("instanceDirection");
  const instanceLifetime =
    mesh.current.geometry.getAttribute("instanceLifetime");
  const instanceSpeed = mesh.current.geometry.getAttribute("instanceSpeed");
  const instanceRotationSpeed = mesh.current.geometry.getAttribute(
    "instanceRotationSpeed"
  );

  for (let i = 0; i < count; i++) {
    // ...

    tmpColor.setRGB(Math.random(), Math.random(), Math.random());
    instanceColor.set([tmpColor.r, tmpColor.g, tmpColor.b], i * 3);

    tmpColor.setRGB(Math.random(), Math.random(), Math.random());
    instanceColorEnd.set([tmpColor.r, tmpColor.g, tmpColor.b], i * 3);

    const direction = [
      randFloatSpread(1),
      randFloatSpread(1),
      randFloatSpread(1),
    ];
    instanceDirection.set(direction, i * 3);

    const lifetime = [randFloat(0, 5), randFloat(0.1, 5)];
    instanceLifetime.set(lifetime, i * 2);

    const speed = randFloat(5, 20);
    instanceSpeed.set([speed], i);

    const rotationSpeed = [
      randFloatSpread(1),
      randFloatSpread(1),
      randFloatSpread(1),
    ];
    instanceRotationSpeed.set(rotationSpeed, i * 3);
  }
};

And create the instancedBufferAttribute components for each attribute:

Copy
<instancedMesh args={[defaultGeometry, null, nbParticles]} ref={mesh}>
  <particlesMaterial color="orange" />
  <instancedBufferAttribute
    attach={"geometry-attributes-instanceColor"}
    args={[attributeArrays.instanceColor]}
    itemSize={3}
    count={nbParticles}
    usage={DynamicDrawUsage}
  />
  <instancedBufferAttribute
    attach={"geometry-attributes-instanceColorEnd"}
    args={[attributeArrays.instanceColorEnd]}
    itemSize={3}
    count={nbParticles}
    usage={DynamicDrawUsage}
  />
  <instancedBufferAttribute
    attach={"geometry-attributes-instanceDirection"}
    args={[attributeArrays.instanceDirection]}
    itemSize={3}
    count={nbParticles}
    usage={DynamicDrawUsage}
  />
  <instancedBufferAttribute
    attach={"geometry-attributes-instanceLifetime"}
    args={[attributeArrays.instanceLifetime]}
    itemSize={2}
    count={nbParticles}
    usage={DynamicDrawUsage}
  />
  <instancedBufferAttribute
    attach={"geometry-attributes-instanceSpeed"}
    args={[attributeArrays.instanceSpeed]}
    itemSize={1}
    count={nbParticles}
    usage={DynamicDrawUsage}
  />
  <instancedBufferAttribute
    attach={"geometry-attributes-instanceRotationSpeed"}
    args={[attributeArrays.instanceRotationSpeed]}
    itemSize={3}
    count={nbParticles}
    usage={DynamicDrawUsage}
  />
</instancedMesh>

Now it's time to add life to our particles by implementing their movement, color and lifetime logic.

Particles lifetime

To compute our particles' behavior, we need to pass the elapsed time to our shader. We will use the uniforms prop of the shaderMaterial to pass the time to it.

Let's update our ParticlesMaterial to add a uTime uniform:

Copy
const ParticlesMaterial = shaderMaterial(
  {
    uTime: 0,
  },
  /* glsl */ `
uniform float uTime;
// ...
`,
  /* glsl */ `
// ...
`
);

And in a useFrame loop, we will update the uTime uniform:

Copy
// ...
import { useFrame } from "@react-three/fiber";

// ...
export const VFXParticles = ({ settings = {} }) => {
  // ...

  useFrame(({ clock }) => {
    if (!mesh.current) {
      return;
    }
    mesh.current.material.uniforms.uTime.value = clock.elapsedTime;
  });

  // ...
};

In the vertex shader, we will compute the age and progress of each particle based on the uTime uniform and the instanceLifetime attribute. We will pass the progress into the fragment shader to animate the particles using a varying named vProgress.

Copy
uniform float uTime;

varying vec2 vUv;
varying vec3 vColor;
varying vec3 vColorEnd;
varying float vProgress;

attribute float instanceSpeed;
attribute vec3 instanceRotationSpeed;
attribute vec3 instanceDirection;
attribute vec3 instanceColor;
attribute vec3 instanceColorEnd;
attribute vec2 instanceLifetime; // x: startTime, y: duration

void main() {
  float startTime = instanceLifetime.x;
  float duration = instanceLifetime.y;
  float age = uTime - startTime;
  vProgress = age / duration;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(instanceMatrix * vec4(position, 1.0));

  vUv = uv;
  vColor = instanceColor;
  vColorEnd = instanceColorEnd;
}

The age is calculated by subtracting the startTime from the uTime. The progress is then calculated by dividing the age by the duration.

Now in the fragment shader, we will interpolate the color of the particles between the instanceColor and instanceColorEnd based on the progress:

Copy
varying vec3 vColor;
varying vec3 vColorEnd;
varying float vProgress;
varying vec2 vUv;


void main() {
  vec3 finalColor = mix(vColor, vColorEnd, vProgress);
  gl_FragColor = vec4(finalColor, 1.0);
}

We can see the particles changing color over time but we are facing an issue. All particles are visible at the beginning while their start time is random. We need to hide the particles that are not alive yet.

To prevent unborn and dead particles from being rendered, we will use the discard keyword in the fragment shader:

Copy
// ...
void main() {
  if (vProgress < 0.0 || vProgress > 1.0) {
    discard;
  }
  // ...
}

The discard keyword tells the renderer to discard the current fragment and not render it.

Perfect, our particles are now born, live, and die over time. We can now add the movement and rotation logic.

Particles movement

By using the direction, speed, and age of the particles, we can compute their position over time.

In the vertex shader let's adjust the gl_Position to take into account the direction and speed of the particles.

First we normalize the direction to avoid particles moving faster when the direction is not a unit vector:

Copy
vec3 normalizedDirection = length(instanceDirection) > 0.0 ? normalize(instanceDirection) : vec3(0.0);

Then we calculate the offset of the particle based on the speed and age:

Copy
vec3 offset = normalizedDirection * age * instanceSpeed;

Let's get the instance position:

Copy
vec4 startPosition = modelMatrix * instanceMatrix * vec4(position, 1.0);
vec3 instancePosition = startPosition.xyz;

And apply the offset to it:

Copy
vec3 finalPosition = instancePosition + offset;

Finally, we get the model view position mvPosition by applying the modelViewMatrix to the finalPosition to transform the position to world space:

Copy
vec4 mvPosition = modelViewMatrix * vec4(finalPosition, 1.0);

And apply the projectionMatrix to transform the world position to camera space:

Copy
gl_Position = projectionMatrix * mvPosition;

Here is our complete vertex shader so far:

Copy
uniform float uTime;

varying vec2 vUv;
varying vec3 vColor;
varying vec3 vColorEnd;
varying float vProgress;

attribute float instanceSpeed;
attribute vec3 instanceRotationSpeed;
attribute vec3 instanceDirection;
attribute vec3 instanceColor;
attribute vec3 instanceColorEnd;
attribute vec2 instanceLifetime; // x: startTime, y: duration

void main() {
  float startTime = instanceLifetime.x;
  float duration = instanceLifetime.y;
  float age = uTime - startTime;
  vProgress = age / duration;

  vec3 normalizedDirection = length(instanceDirection) > 0.0 ? normalize(instanceDirection) : vec3(0.0);
  vec3 offset = normalizedDirection * age * instanceSpeed;

  vec4 startPosition = modelMatrix * instanceMatrix * vec4(position, 1.0);
  vec3 instancePosition = startPosition.xyz;

  vec3 finalPosition = instancePosition + offset;
  vec4 mvPosition = modelViewMatrix * vec4(finalPosition, 1.0);
  gl_Position = projectionMatrix * mvPosition;

  vUv = uv;
  vColor = instanceColor;
  vColorEnd = instanceColorEnd;
}

The particles are now moving in various directions at different speeds. This is chaotic but it is because of our random values.

Let's remedy this by adjusting our random values in the emit function to have a clearer view of the particles' movement:

Copy
for (let i = 0; i < count; i++) {
  const position = [
    randFloatSpread(0.1),
    randFloatSpread(0.1),
    randFloatSpread(0.1),
  ];
  const scale = [randFloatSpread(1), randFloatSpread(1), randFloatSpread(1)];
  const rotation = [
    randFloatSpread(Math.PI),
    randFloatSpread(Math.PI),
    randFloatSpread(Math.PI),
  ];
  tmpPosition.set(...position);
  tmpRotationEuler.set(...rotation);
  tmpRotation.setFromEuler(tmpRotationEuler);
  tmpScale.set(...scale);
  tmpMatrix.compose(tmpPosition, tmpRotation, tmpScale);
  mesh.current.setMatrixAt(i, tmpMatrix);

  tmpColor.setRGB(1, 1, 1);
  instanceColor.set([tmpColor.r, tmpColor.g, tmpColor.b], i * 3);

  tmpColor.setRGB(0, 0, 0);
  instanceColorEnd.set([tmpColor.r, tmpColor.g, tmpColor.b], i * 3);

  const direction = [randFloatSpread(0.5), 1, randFloatSpread(0.5)];
  instanceDirection.set(direction, i * 3);

  const lifetime = [randFloat(0, 5), randFloat(0.1, 5)];
  instanceLifetime.set(lifetime, i * 2);

  const speed = randFloat(1, 5);
  instanceSpeed.set([speed], i);

  const rotationSpeed = [
    randFloatSpread(1),
    randFloatSpread(1),
    randFloatSpread(1),
  ];
  instanceRotationSpeed.set(rotationSpeed, i * 3);
}

Starting to take shape!

We will add simple UI controls to adjust the variables later on. Now let's finalize the particles by adding the rotation logic.

While we separated the direction and speed for the movement, for the rotation we will use a single instanceRotationSpeed attribute to define the rotation speed per axis.

In the vertex shader we can calculate the rotation of the particle based on the rotation speed and age:

Copy
vec3 rotationSpeed = instanceRotationSpeed * age;

Then, to be able to apply this "offset rotation" to the particle, we need to convert it to a rotation matrix:

Copy
mat4 rotX = rotationX(rotationSpeed.x);
mat4 rotY = rotationY(rotationSpeed.y);
mat4 rotZ = rotationZ(rotationSpeed.z);
mat4 rotationMatrix = rotZ * rotY * rotX;

rotationX, rotationY, and rotationZ are functions that return a rotation matrix around the X, Y, and Z axis respectively. We will define them about the main function in the vertex shader:

Copy
mat4 rotationX(float angle) {
  float s = sin(angle);
  float c = cos(angle);
  return mat4(
      1,  0,  0,  0,
      0,  c, -s,  0,
      0,  s,  c,  0,
      0,  0,  0,  1
  );
}

mat4 rotationY(float angle) {
  float s = sin(angle);
  float c = cos(angle);
  return mat4(
       c,  0,  s,  0,
       0,  1,  0,  0,
      -s,  0,  c,  0,
       0,  0,  0,  1
  );
}

mat4 rotationZ(float angle) {
  float s = sin(angle);
  float c = cos(angle);
  return mat4(
      c, -s,  0,  0,
      s,  c,  0,  0,
      0,  0,  1,  0,
      0,  0,  0,  1
  );
}

To learn more about rotation matrices, you can check this Wikipedia article, the incredible Game Math Explained Simply by Simon Dev, or the Matrix section from The Book of Shaders.

Finally, we can apply the rotation matrix to the start position of the particle:

Copy
vec4 startPosition = modelMatrix * instanceMatrix * rotationMatrix * vec4(position, 1.0);

Let's try it out:

The particles are now moving, changing color, and rotating! ✨

Perfect, we have a solid base for our VFX Engine. Before adding more features and controls, let's prepare a second important part of the engine: the emitter.

Emitters

In examples and tutorials it's often an overlooked part of the particle system. But it's a crucial part to integrate particles into your projects easily and efficiently:

• Easily because your <VFXParticles /> component will be at the top of your hierarchy and your emitter can spawn them from any sub-component in your scene. Making it easy to spawn them from a specific point, attach them to a moving object, or a moving bone.
• Efficiently because instead of re-creating instanced meshes, compiling shader materials, and setting attributes every time you want to spawn particles, you can reuse the same VFXParticles component and just call a function to spawn particles with the desired settings.

useVFX

We want to be able to call the emit function from our VFXParticles component from anywhere in our project. To do so, we will create a custom hook called useVFX that will take care of registering and unregistering the emitters from the VFXParticles component.

We will use Zustand as it's a simple and efficient way to manage global state in React with great performance.

Let's add it to our project:

Copy
yarn add zustand

In our vfxs folder, let's create a VFXStore.js file:

Copy
import { create } from "zustand";

export const useVFX = create((set, get) => ({
  emitters: {},
  registerEmitter: (name, emitter) => {
    if (get().emitters[name]) {
      console.warn(`Emitter ${name} already exists`);
      return;
    }
    set((state) => {
      state.emitters[name] = emitter;
      return state;
    });
  },
  unregisterEmitter: (name) => {
    set((state) => {
      delete state.emitters[name];
      return state;
    });
  },
  emit: (name, ...params) => {
    const emitter = get().emitters[name];
    if (!emitter) {
      console.warn(`Emitter ${name} not found`);
      return;
    }
    emitter(...params);
  },
}));

What it contains:

• emitters: An object that will store all the emitters from our VFXParticles components.
• registerEmitter: A function to register an emitter with a given name.
• unregisterEmitter: A function to unregister an emitter with a given name.
• emit: A function to call the emitter with a given name and parameters from anywhere in our project.

Let's plug it into our VFXParticles component:

Copy
// ...
import { useVFX } from "./VFXStore";

// ...
export const VFXParticles = ({ name, settings = {} }) => {
  // ...
  const registerEmitter = useVFX((state) => state.registerEmitter);
  const unregisterEmitter = useVFX((state) => state.unregisterEmitter);

  useEffect(() => {
    // emit(nbParticles);
    registerEmitter(name, emit);
    return () => {
      unregisterEmitter(name);
    };
  }, []);
  // ...
};

// ...

We add a name prop to our VFXParticles component to identify the emitter. We then use the useVFX hook to get the registerEmitter and unregisterEmitter functions.

We call registerEmitter with the name and emit function inside the useEffect hook to register the emitter when the component mounts and unregister it when it unmounts.

In the Experience component, let's add the name prop to our VFXParticles component:

Copy
// ...
import { VFXParticles } from "./vfxs/VFXParticles";

export const Experience = () => {
  return (
    <>
      {/* ... */}
      <VFXParticles name="sparks" />
    </>
  );
};

VFXEmitter

Now that we have our useVFX hook, we can create an VFXEmitter component that will be responsible for spawning particles from our VFXParticles component.

In the vfxs folder, let's create a VFXEmitter.jsx file:

Copy
import { forwardRef, useImperativeHandle, useRef } from "react";
import { useVFX } from "./VFXStore";

export const VFXEmitter = forwardRef(
  ({ emitter, settings = {}, ...props }, forwardedRef) => {
    const {
      duration = 1,
      nbParticles = 1000,
      spawnMode = "time", // time, burst
      loop = false,
      delay = 0,
    } = settings;

    const emit = useVFX((state) => state.emit);

    const ref = useRef();
    useImperativeHandle(forwardedRef, () => ref.current);

    return (
      <>
        <object3D {...props} ref={ref} />
      </>
    );
  }
);