
# Snippet Server

Starting with Babylon.js v4.2, you can save, load, and edit particle systems using the Inspector. These code snippets are saved on the Babylon.js snippet server. Make a note of the snippet ID shown when you save it.

![Snippet](/img/how_to/Particles/snippet_screen.webp)

When you have a snippet ID, you can easily load the particle system using the following code:

```javascript
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.2, segments: 32}, scene);
BABYLON.ParticleHelper.ParseFromSnippetAsync("T54JV7", scene, false).then(system => {
    system.emitter = sphere;
});
```

Live example: <Playground id="#XGX927" title="Particle Snippet Server Example" description="Simple example of loading a particle system from the snippet server." isMain={true} category="Particles"/>

You can also specify `"_BLANK"` for the snippet ID. In this case, the system will create an empty one for you to work on:

```javascript
BABYLON.SpriteManager.ParseFromSnippetAsync("_BLANK", scene);
```



## Particle System JSON Files

When you use the [particle system editor](/legacy/inspector/particleEditor), you can save the particle system as a local JSON file that can be loaded and used in any Babylon.js scene. This is useful for sharing particle systems between different scenes and for updating a particle system quickly. Changing the parameters in a locally stored JSON file lets any scene that uses that particle system pick up the update immediately, without needing to manage a referenced snippet ID.

## Loading the JSON file

The [Asset Manager](/features/featuresDeepDive/importers/assetManager) offers flexibility and power in loading the multiple files needed for particle systems — such as particle textures and particle system JSON files — at once. Simply add a new [TextFileAssetTask](/features/featuresDeepDive/importers/assetManager#textfileassettask) for each particle system file that needs to be loaded.

```javascript
const assetsManager = new BABYLON.AssetsManager(scene);
const particleFile = assetsManager.addTextFileTask("my particle system", "particleSystem.json");

// load all tasks
assetsManager.load();
```

Create a new `TextFileTask` for each particle system that needs to be loaded. The Asset Manager loads each file in sequence and then invokes a callback once all loading is complete. Since most effects are made up of several particle systems, the Asset Manager helps load each file quickly and efficiently before parsing.

```javascript
assetsManager.onFinish = function (task) {
    console.log("task successful", task);

    // prepare to parse particle system files
}
```

## Parsing the Text File as JSON

Once the files are loaded as text, they need to be parsed as JSON objects before they can be used. Simply add a `JSON.parse` for each loaded text file.

```javascript
assetsManager.onFinish = function (task) {
    console.log("task successful", task);

    // prepare to parse particle system files
    const particleJSON = JSON.parse(particleFile.text);
}
```

## Using the JSON with BABYLON.ParticleSystem

The final step is to convert the JSON into a `BABYLON.ParticleSystem` using another parse operation. However, this parse operation has several components worth exploring.

```javascript
const myParticleSystem = BABYLON.ParticleSystem.Parse(json, scene, rootURL, doNotStart, capacity);
```

- **json**: The JSON file to parse.
- **scene**: The scene or engine within which to create the particle system.
- **rootURL**: The root URL to load dependencies like the particle texture.
- **doNotStart**: Boolean that determines whether the particle system should automatically start. This overrides the autostart parameter contained in the particle system JSON.
- **capacity**: The capacity limit of particles for this system. This is the only way to change the capacity of a particle system created from JSON. If this parameter is undefined or null, the capacity parameter in the JSON will be used.

Adding this last step to our Asset Manager completes the loading and creation of our particle system.

```javascript
assetsManager.onFinish = function (task) {
    console.log("task successful", task);

    // prepare to parse particle system files
    const particleJSON = JSON.parse(particleFile.text);
    const myParticleSystem = BABYLON.ParticleSystem.Parse(particleJSON, scene, "", false, 1000);
}
```

Live example: <Playground id="#9Y10LR" title="Loading Particle System From File" description="Simple example using the Asset Manager to load a particle system and texture before parsing it." isMain={true} category="Particles"/>



# GPU Particles

Starting from Babylon.js v3.2, you can leverage a new WebGL2 feature, the transform feedback buffer, to drastically boost the performance of particles. Whereas regular particles use the CPU for animation and the GPU for rendering, the new WebGL2 API allows Babylon.js to use the GPU for both animation and rendering. With GPU particles, everything is offloaded to the GPU.

Unfortunately, this feature is only available when WebGL2 is available. You can use `BABYLON.GPUParticleSystem.IsSupported` to detect if GPU particles can be used. When they are supported, GPU particles can be used almost like regular particles:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene);
```

As the CPU is no longer involved, you can go crazy with active particles (1,000,000 in this example). Also, you can use `particleSystem.activeParticleCount` to define the number of active particles if you want to limit GPU usage.

**Note:** Sub emitters are not supported in GPU particles.

## Random Texture

It is a shame, but there is no good way to get random numbers when running on the GPU. To fill this gap, Babylon.js will create a texture filled with thousands of random values. These values will be read by the particle update shader to animate the particles.
By default, the largest supported texture size is used (16K). You may want to reduce the size of this texture by initializing the system like this:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000, randomTextureSize: 4096 }, scene);
```

## Fallback

As the `GPUParticleSystem` and the `ParticleSystem` share almost all of their API, it is easy to switch from one to the other when WebGL2 is not supported. Keep in mind that the CPU cannot animate as many particles as the GPU can, so you will probably have to reduce the capacity of your system when not using the `GPUParticleSystem`.

## Stopping a GPU Particle System

Calling `system.stop()` on a `GPUParticleSystem` object forces the system to stop generating new particles. However, particles will still be rendered even when they are not visible.

To completely stop a `GPUParticleSystem`, you have to call `dispose()` on it.

## Using custom effects to render the particle system

New since 5.0, you can now use custom effects with GPU particles!

GPU Particles with custom effect: <Playground id="#1ASENS#68" title="GPU Particles With Custom Effect" description="Simple example of a GPU particle system using a custom effect for display."/>

## Unsupported Features

The following features are not supported by GPU particles due to their nature:

- ManualEmitCount
- disposeOnStop
- Dual values per gradient (only one value is supported)
- Emit rate gradients are not supported
- Start size gradients are not supported
- Mesh emitter

## Example

GPU Particles: <Playground id="#PU4WYI#4" title="GPU Particles Example" description="Simple example of a GPU particle system."/>
