
# Snippet server
Starting with Babylon.js v4.2, you can save, load and edit sprite managers using the Inspector. These code snippets are saved on the Babylon.js snippet server. Make a note of the snippet Id shown in when you save it.

![Snippet](/img/how_to/Particles/snippet_screen.png)

When you have a snippet Id, you can easily load the manager using the following code:

```javascript
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.2, segments: 32}, scene);
BABYLON.ParticleHelper.CreateFromSnippetAsync("T54JV7", scene, false).then(system => {
    system.emitter = sphere;
});
```

live example: <Playground id="#76U9TK" 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:

```
BABYLON.SpriteManager.CreateFromSnippetAsync("_BLANK", scene);
```


## Particle System JSON Files
When using the [particle system editor](/toolsAndResources/inspector/particleEditor) there is an option to save the particle system as a local json file that can be loaded and used in any Babylon.js scene. This is useful in sharing particle systems between different scenes as well as updating a particle system quickly. Changing the parameters for a particle system stored locally as a json file allows any scene using that particle system to be updated immediately without the need to manage the snippet ID referenced by any scene.

## 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 great thing about the Asset Manager is that it will load each file in sequence and then send a callback once all of the loading is done. Since most effects are made up of several particle systems, the Asset Manager will help quickly and efficiently load each file 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 to determine if 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 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 almost be used like regular particles:

```javascript
var particleSystem = new BABYLON.GPUParticleSystem("particles", { capacity:1000000 }, scene);
```

As CPU is no longer involved, you can go crazy with active particles (1000000 in this example). Also, you can use `particleSystem.activeParticleCount` to define the number of active particle count if you want to limit the 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 biggest 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 their API, it is easy to switch from one to another 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
When calling `system.stop()` on a `GPUParticleSystem` object, you will force the system to stop generating new particles. But particles will still be rendered even if 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 a 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 inner 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 systems."/>
