
# PCS Creation

Creating an empty PCS requires three parameters: its name, the size of every particle, and the scene. For example:

```javascript
var pcs = new BABYLON.PointsCloudSystem("pcs", 5, scene);
```

After creating the PCS, there are a number of options for adding particles.

## Add Points

By default, point particles are randomly added within a unit cube.

```javascript
pcs.addPoints(10000);
```

will add 10000 points.

- <Playground id="#UI95UC" title="Adding Point Cloud Points" description="Simple example of adding point cloud points."/>

You can use your own function as a second parameter to set particle properties such as position and color. This function must have a signature like this:

```javascript
var myFunc = function (particle, i, s) {
  // particle is the current particle, the i-th one in the PCS and the s-th one in its group
};
```

For example, using `i`:

```javascript
var myfunc = function (particle, i, s) {
  particle.position = new BABYLON.Vector3(0.5 + 0.25 * Math.random(), i / 5000, 0.25 * Math.random());
  particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), Math.random());
};
pcs.addPoints(10000, myfunc);
pcs.addPoints(10000, myfunc);
```

will produce a tall block of points whose heights cover the full range of 20,000 points. By contrast, using `s`:

```javascript
var myfunc = function (particle, i, s) {
  particle.position = new BABYLON.Vector3(0.5 + 0.25 * Math.random(), s / 5000, 0.25 * Math.random());
  particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), Math.random());
};
pcs.addPoints(10000, myfunc);
pcs.addPoints(10000, myfunc);
```

will produce a denser block of points whose heights cover only a range of 10,000 points, as you can see in the picture below.

![use of i or s](/img/how_to/particles/points1.webp)

In addition, the use of `particle.groupId` can affect all particles within a group. For example:

```javascript
var myfunc = function (particle, i, s) {
  particle.position = new BABYLON.Vector3(particle.groupId * 0.5 + 0.25 * Math.random(), i / 5000, 0.25 * Math.random());
  particle.color = new BABYLON.Color4(Math.random(), Math.random(), Math.random(), Math.random());
};
pcs.addPoints(10000, myfunc);
pcs.addPoints(10000, myfunc);
```

will displace the second group of points along the x-axis.

![use groupId](/img/how_to/particles/points2.webp)

- <Playground id="#UI95UC#1" title="Pass A Function" description="Simple example of passing a function to add point cloud points."/>

## Add Surface / Volume Points

You can use a mesh such as this one as a model

![Points 3](/img/how_to/particles/points3.webp)

and convert it to particle points on its surface or within its volume.

![Points 4](/img/how_to/particles/points4.webp)

The points are evenly and randomly distributed based on the size of the individual triangular facets of the mesh model. The density of points is the same for all facets.

For both surface and volume, the default is for the points to be colored randomly. For example, the following are equivalent for the two surface additions and the two volume additions.

```javascript
pcs.addSurfacePoints(model, 10000);
pcs.addSurfacePoints(model, 10000, BABYLON.PointColor.Random);

pcs.addVolumePoints(model, 10000);
pcs.addVolumePoints(model, 10000, BABYLON.PointColor.Random);
```

**Note:** Additional calculations in `addVolumePoint` mean that it takes longer than `addSurfacePoints` for the same number of points. For a large number of points, this can be noticeable.

There are four available methods for coloring the points.

| Method                    | Effect                                                                                                                                                                                                                                                                                    |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| BABYLON.PointColor.Random | Colors are assigned randomly to each point; this is the default method.                                                                                                                                                                                                                              |
| BABYLON.PointColor.Stated | This method requires two extra parameters: the base color to use (white by default) and a range from 0 to 1 to randomize both the shade and tone of the stated color. A value of 0, the default, gives no variation, and 1 gives the largest variation.                                                |
| BABYLON.PointColor.Color  | When the model has a texture material applied, the color of each point is determined by the texture color at the matching point on a facet. When the material used has color but no texture, the material color is used. When the model has no material applied, random coloring is used. |
| BABYLON.PointColor.UV     | The model uv values for each facet corner are used to determine the uv values for the points. An emissive texture can be applied to the pcs.mesh.material to color the PCS mesh.                                                                                                           |

For example:

```javascript
pcs.addSurfacePoints(box, 1000, BABYLON.PointColor.Stated, new BABYLON.Color3(1, 0, 0), 0.5);
pcs.addVolumePoints(box, 10000, BABYLON.PointColor.Color);
pcs.addSurfacePoints(box, 100000, BABYLON.PointColor.UV);
```

**Note:** Using `BABYLON.PointColor.UV` can be limiting. Several models can be added to the PCS. These models may all have different textures. However only one emissive texture can be applied to a PCS mesh. In this case a separate PCS mesh is needed for each model. This is not a restriction when using `BABYLON.PointColor.Color`.

**Imported Models and Multiple Textures**
In some cases (for example, `PBRMaterial`), more than one texture can be applied to a model. In that case, adding surface or volume points with `BABYLON.PointColor.Color` will, by default, use the first texture in the model's texture array. Although that is often the color map, it may instead be a normal map. To specify which texture to use, add its position in the texture array as a second parameter.

```javascript
pcs.addSurfacePoints(model, 10000, BABYLON.PointColor.Color, 1);

pcs.addVolumePoints(model, 10000, BABYLON.PointColor.Color, 3);
```

Of course, when you import a model, you may not know how many child meshes it is made up of, nor the order of textures for each mesh. Using the [inspector](/toolsAndResources/inspectorv2), you can check the loaded textures and see whether their names give you a clue. If not, use trial and error from 0 to the number of textures. Alternatively, you can inspect meshes and textures once loaded along the lines of

```javascript
BABYLON.ImportMeshAsync("location" + "file", scene).then(function ({ meshes }) {
  var n = meshes.length;
  var p;
  var t;
  for (let i = 0; i < n; i++) {
    if (meshes[i].material !== null) {
      console.log("Mesh", i);
      t = meshes[i].material.getActiveTextures();
      p = t.length;
      for (let j = 0; j < p; j++) {
        console.log("Texture", j, "Name", t[j].name);
      }
    }
  }
});
```

**Examples**

- <Playground id="#UI95UC#2" title="Random Surface" description="Simple example of a point cloud system with random surfaces."/>
- <Playground id="#UI95UC#3" title="Stated Surface" description="Simple example of a point cloud system with stated surfaces"/>
- <Playground id="#UI95UC#4" title="Surface Color from Mesh Color" description="Simple example of a point cloud system with surface color from mesh color."/>
- <Playground id="#UI95UC#5" title="Surface Color from Mesh Texture" description="Simple example of a point cloud system with surface color from mesh texture."/>
- <Playground id="#UI95UC#6" title="Surface UV from Mesh Texture" description="Simple example of a point cloud system with surface UV from mesh texture."/>
- <Playground id="#UI95UC#28" title="Surface Color from Imported Mesh Texture" description="Simple example of a point cloud system with surface color from an imported mesh texture."/>
- <Playground id="#UI95UC#7" title="Random Volume" description="Simple example of a point cloud system with random volume."/>
- <Playground id="#UI95UC#8" title="Stated Volume" description="Simple example of a point cloud system with stated volume."/>
- <Playground id="#UI95UC#9" title="Volume Color from Mesh Color" description="Simple example of a point cloud system with volume color from mesh color."/>
- <Playground id="#UI95UC#10" title="Volume Color From Mesh Texture" description="Simple example of a point cloud system with volume color from a mesh texture."/>
- <Playground id="#UI95UC#11" title="Volume UV from Mesh Texture" description="Simple example of a point cloud system with volume UV from a mesh texture."/>
- <Playground id="#UI95UC#28" title="Volume Color From Imported Mesh Texture" description="Simple example of a point cloud system with volume color from an imported mesh texture."/>

## Building the Mesh

The PCS mesh cannot be built until all relevant data is collected. Because this can involve ensuring that the material applied to a model used for adding surface or volume points is fully loaded, building the mesh is an asynchronous process.

For example, when a mesh model is used to determine the points, the model cannot be disposed of until PCS construction is complete. This can be achieved as follows:

```javascript
pcs.addSurfacePoints(box, 10000, BABYLON.PointColor.Color);
pcs.addPoints(10000, myFunc);
pcs.buildMeshAsync().then(() => box.dispose());
```

If you never want the particle properties of your PCS to change, that is, you want it to be immutable, then you do not need to do anything more. Alternatively, you can set the PCS as immutable when you create it by setting the `updatable` option. (Currently, `updatable` is the only available item in the options list, but the list is open to future expansion.)

```javascript
var pcs = new BABYLON.PointsCloudSystem("pcs", 5, scene, { updatable: false });
```

After setting `updatable` to false, the following methods will no longer have any effect: `initParticles()`, `updateParticle(particle)`, and `setParticles()`.



# Points Cloud Particle System (PCS)

A PCS is a single updatable mesh with the `PointsCloud` property of its material set to `true`. The point particles are simply the vertices of the mesh. As a mesh, a PCS has most of the properties of a mesh. The exceptions are those related to its material, which is already set and cannot be changed, and anything related to its vertex normals and indices, because it does not have any.

As a particle system, the PCS provides some methods to manage the particles. However, it is behavior-agnostic. This means it has no emitter, no particle physics, and no particle recycler. You have to implement your own behavior.

Particles can be added to a PCS with a function or by using an existing mesh as a model, where particles are randomly and evenly distributed either on the surface of the model or inside it.

The expected usage is:

-   First, create your PCS with `new PointsCloudSystem()`.
-   Then, add particles to the PCS, using one of `addPoints(number, function)`, `addSurfacePoints(mesh, number, method)`, or `addVolumePoints(mesh, number, method)`.
-   Redo the additions as many times as needed. Each addition creates a new group of particles identified by `particle.groupID`.
-   When done, build the PCS mesh with `buildMeshAsync()`.
-   Changes to particle properties can be made with the `initParticles()` or `updateParticle(particle)` methods, followed by a call to `setParticles()`.
-   Particle animation can be accomplished by defining their individual behavior in `updateParticle(particle)` and calling `setParticles()` within the render loop.

## Limitations

Because the PCS is created from vertex points with a pre-applied material that has `PointsCloud` set to true, the following limitations apply:

1. Particles cannot be destroyed, and particles off-screen are still enabled;
2. Transparency does not work on individual particles.



# PCS Management

As you can see above, the `setParticles()` function is used in the Babylon.js render loop to provide behavior for the PCS.

The available custom functions of the PCS are:

| Function                  | Usage                                                                                                               |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| initParticles()           | sets the initial particle properties.                                                                               |
| updateParticle(particle)  | sets the particle properties. This function is called per particle by `PCS.setParticles()`                          |
| recycleParticle(particle) | re-sets the particle properties. This function is called conditionally per particle by `PCS.updateParticles()`      |
| beforeUpdateParticles()   | lets you do things within the call to `PCS.setParticles()` just before iterating over all the particles.            |
| afterUpdateParticles()    | lets you do things within the call to `PCS.setParticles()` just after the iteration over all the particles is done. |

The pseudo-code for `setParticles` is:

```javascript
function setParticles() {
    beforeUpdateParticles();
    for (let p = 0; p < nbParticles; p++) {
        updateParticles(particles[p]);
    }
    afterUpdateParticles();
}
```

The particle properties that can be set are shown below.

Available PCS properties are

| Property                | Usage                                                                                                          | Default |
| ----------------------- | -------------------------------------------------------------------------------------------------------------- | ------- |
| particles               | An array containing all the particles. You iterate over this array in the `initParticles()` function, for instance. |         |
| nbParticles             | The number of particles in the PCS.                                                                            |         |
| counter                 | A counter for your own usage                                                                                   | 0       |
| computeParticleRotation | Allows (default) or prevents `setParticles()` from computing `particle.rotation`                                        | true    |
| computeParticleTexture  | Allows (default) or prevents `setParticles()` from computing `particle.uvs`                                             | true    |
| computeParticleColor    | Allows (default) or prevents `setParticles()` from computing `particle.color`                                           | true    |
| computeBoundingBox      | Allows or prevents (default) `setParticles()` from computing the PCS mesh bounding box                                 | false   |

The particle properties for color, uvs, and rotation are set either during the addition phase or by using `initParticles` and then `setParticles`. Updating particle properties requires `updateParticle`, which is called by `setParticles`. Setting the **_compute_** properties to `false` prevents `setParticles()` from updating the relevant particle property when it is called. Setting one or more of these to `false` can increase FPS, especially when `setParticles` is called repeatedly within the render loop.

If you no longer need your PCS, you can dispose of it to free memory.

```javascript
PCS.dispose();
PCS = null; // tells the garbage collector the reference can be also cleaned up
```

## Start and End Indexes for setParticles()

For performance reasons, you may not want to compute the properties of all the particles on each frame. There are three optional parameters for `setParticles()` that you can use to choose a range of particles to compute: `start`, `end`, and `update`.

| Parameter | Definition                                                                            | Default         |
| --------- | ------------------------------------------------------------------------------------- | --------------- |
| start     | _(number)_ the index from where to start to iterate in the `particles` array          | 0               |
| stop      | _(number)_ the index (included) where to stop to iterate in the<br/>`particles` array | nbParticles - 1 |
| update    | _(boolean)_ to force the PCS mesh vertex buffer to be updated                         | true            |

If you pass an `end` value greater than `nbParticles - 1`, the iteration will stop at `nbParticles - 1` to prevent access to undefined elements.

Example 1: to update only 10,000 particle meshes every three frames

-   frame 1 : `setParticles(0, 3300, false)` computes everything for particles from 0 to 3300 and doesn't update the mesh.
-   frame 2 : `setParticles(3301, 6600, false)` computes everything for particles from 3301 to 6600 and doesn't update the mesh.
-   frame 3 : `setParticles(6601, 9999, true)` computes everything for particles from 6601 to 9999 and finally updates the mesh.

In this playground, change _invSpeed_ (line 29) to change the speed.

-   <Playground id="#UI95UC#25" title="Start And End For Animation Speed" description="Simple example of setting a start and end to a system's animation speed."/>

Example 2: you could keep, say, the first 5,000 particles unused and compute particle behavior only for the last 5,000 in your global pool. `setParticles(5000, 9999, true)` computes everything for particles from 5,000 to 9,999 and updates the mesh.

-   <Playground id="#UI95UC#26" title="Start And End For Part Animation" description="Simple example of setting a start and end to a part's animation"/>


## Hints and Tips

A PCS can iterate over a very large number of particles during a call to `updateParticle`, so it is helpful to avoid any apparent pauses in scene generation. The JavaScript Garbage Collector can start cleaning in the middle of what you want to be a smooth animation and cause lag. One way to reduce this is to avoid creating new objects in loops that execute often, where particles are created or updated.

For example, consider a PCS with, say, 30000 particles where you change their velocities

```javascript
pcs.updateParticle = function (particle) {
    var accel = new BABYLON.Vector3(0, 0.5, 0);
    particle.velocity = particle.velocity.add(accel);
    // ...
};
```

will create two new `Vector3` objects each call, or 60 000 new objects over the course of the update.

Instead, make your update loops reuse variables that are declared outside the loop, and don't call any methods inside the loop that create new objects, for example

```javascript
var accel = new BABYLON.Vector3(0, 0.5, 0);
pcs.updateParticle = function (particle) {
    particle.velocity.addInPlace(accel);
    // ...
};
```

A PCS also has a `vars` property, which is an object that you can use to store any variables you want to reuse. Any variables you store there will share the PCS lifecycle, and get cleaned up when you dispose it:

```javascript
pcs.vars.tempVector = new BABYLON.Vector3(0, 0, 0);
// ...
pcs.dispose(); // cleans explicitly all your PCS.vars !
```



## Particle Properties

Once the PCS mesh is built, unless immutable, it can respond to changes in the properties of each particle. Existing properties are shown in the table below.

| Property | Type | Default |
| ---- | ---- | ----|
| position | Vector3 | (0, 0, 0) |
| rotation | Vector3 | (0, 0, 0) |
| rotationQuaternion | Vector3 | undefined |
| velocity | Vector3 | (0, 0, 0) |
| color | Vector4 | (1, 1, 1, 1) |
| pivot | Vector3  | (0, 0, 0) |
| uvs | Vector2  | (0,0) |
| translateFromPivot | boolean |false |
| parentId | integer | null |
| idx | integer (read only) | index of particle |
| groupId | integer (read only) | group number for a particle |


If you set a particle rotation quaternion, its rotation property will then be ignored.

New properties can be initialized.

**Note:** Since point particles **_always_** face the camera, setting the rotation of a particle only has any effect in two cases:

1. The rotation of a particle parent will rotate its children about itself;
2. A pivot is set for the particle.



### Initialising Particles

When using `addPoints`, particle properties can be set in the passed function. The `addSurfacePoints` and `addVolumePoints` methods obviously set the position and color properties of the particles, but you may still want to set the initial values of other particle properties.

This can be done using `initParticles`. To do this, iterate over all the particles by using the `nbParticles` property, and follow the call to this function with a call to `setParticles()`. For example:

```javascript
pcs.initParticles = function() {
   for (let p = 0; p < pcs.nbParticles; p++) {
       pcs.particles[p].velocity = BABYLON.Vector3.Zero();
       pcs.particles[p].acceleration = pcs.particles[p].position.scale(0.01);
   }
}

pcs.addSurfacePoints(model, 10000, BABYLON.PointColor.Color);
pcs.buildMeshAsync().then(() => {
  model.dispose()
  pcs.initParticles();
  pcs.setParticles();
});
```

### Updating Particles

Once the appropriate particle properties are initialized, the `updateParticles` method can be used. Unlike `initParticles`, this function is called by `setParticles` and already receives a particle as an argument. The `setParticles` method will execute only after the PCS mesh has been built, so it can safely be placed inside a render loop to produce an animation. For example:

```javascript
pcs.updateParticle = function(particle) {
  particle.velocity.addInPlace(particle.acceleration);
  particle.position.addInPlace(particle.velocity);
}

scene.registerBeforeRender(() => {
  pcs.setParticles();
});
```

**Note:** All particle positions are expressed in the *local space* of the PCS mesh. 

The particle `pivot` vector is also in the *local space* of the PCS mesh. By default, rotations around a pivot are calculated by translating the particle to the pivot point, then rotating it, and then applying the inverse translation. By setting the particle property `translateFromPivot` to `true` (default `false`), rotations are calculated using only the initial translation followed by the rotation, leaving the particle at the translated location.  

<Playground id="#UI95UC#12" title="Simple Animation" description="Simple example of animating a point cloud system."/>

In the following playground, the particle pivots in the top PCS are set relative to the particle position, and in the lower one they are set in the same place.
<Playground id="#UI95UC#14" title="Pivot Animation Example 1" description="Simple example of animating the pivot point of a point cloud system."/>

In this playground, the only difference is that the lower PCS has `translateFromPivot` set to `true`.
<Playground id="#UI95UC#15" title="Pivot Animation Example 2" description="Simple example of animating the pivot point of a point cloud system."/>

This playground animates the mesh, not the particles.
<Playground id="#UI95UC#16" title="Immutable Animation" description="Simple example of point cloud system immutable animation."/>

This playground loads meshes from a file, converts them to particles, and animates them.
<Playground id="#UI95UC#17" title="Loaded Mesh Animation" description="Simple example of point cloud system animation based on loaded mesh animation."/>

### UVs

While setting and changing particle colors is straightforward, doing the same for UVs is a little more complex. Using `BABYLON.PointColor.UV` as a parameter within `addSurfacepoints` or `addVolumePoints` will set the UVs automatically based on the passed mesh.

You can also set the UV value for each particle using the function passed to `addPoints`. To make the texture map correctly, the UV values should relate in some way to the positional values for each particle. To apply the texture with these UVs, both the `emissiveColor` and `emissiveTexture` for the PCS mesh material must be set after the mesh is built.

**Note:** Only use emissive.

For example

```javascript
var myfunc = function(particle) { 
    var x = Math.random();
    var y = Math.random();
    var z = 0;
    particle.position = new BABYLON.Vector3(x, y, z);
    //Relate uv values to positional values
    particle.uv.x = x;
    particle.uv.y = y; 
    }
    pcs.addPoints(5000, myfunc);

    pcs.buildMeshAsync().then(() => {
      pcs.mesh.material.emissiveColor = new BABYLON.Color3(0, 0, 0);
      pcs.mesh.material.emissiveTexture = myTexture;
    });
```

It is possible to use a texture atlas, but you need to customize and calculate the more complex relationship between positional and UV values.

<Playground id="#UI95UC#23" title="UV With Added Points" description="Simple example of updating the UVs and adding points of a point cloud system."/>
<Playground id="#UI95UC#24" title="UV With Texture Atlas" description="Simple example of updating the UVs of a point cloud system with textured atlas."/>

### Recycling Particles

You can write your own code to recycle particles using `recycleParticle`, which can be called from within `updateParticle`. For example:

```javascript
pcs.recycleParticle = function(particle) {
    particle.position = BABYLON.Vector3.Zero();
    particle.velocity = BABYLON.Vector3.Zero();
    particle.heightLim = 4 + 0.5 * Math.random();
}

pcs.updateParticle = function(particle) {
    if (particle.position.y > particle.heightLim) {
      this.recycleParticle(particle);
    }
    particle.velocity.addInPlace(particle.acceleration);
    particle.position.addInPlace(particle.velocity);
}
```

<Playground id="#UI95UC#19" title="Recycling Animations" description="Simple example of recycling animations of a point cloud system."/>

### Particle Parenting  

Each particle can be given another particle as a parent.  
The parent must be created before the child particle. This means the parent must have a lower index ID (`particle.idx`) than the current particle. So the first particle in the pool (`idx = 0`) cannot have a parent. To give a parent to a particle, just set its property `parentId` to the parent index ID value. 

```javascript
if (particle.idx > 0) {
    particle.parentId = particle.idx - 1; // the previous particle becomes the parent of the current one
}
```
To un-parent a particle, just set `.parentId` back to `null` which is the default value.  

When a particle has a parent, its position and rotation are then expressed in its parent's local space.  
```javascript
if (particle.idx > 0) {
    particle.parentId = particle.idx - 1; // the previous particle becomes the parent of the current one
    // the particle position and rotation are expressed in the previous particle space, this one being already 
    // rotated and translated from the yet previous particle. Etc.
    particle.rotation.z = 0.01;
    particle.position.x = 1.0;
}
```
 <Playground id="#UI95UC#18" title="Parent Animation" description="Simple example of animating a point cloud system parent."/>

### Particle Intersections
     
The PCS provides a simple way to deal with intersections between a particle and other meshes. As this feature consumes more memory and CPU, do not include it unless necessary.

To use it, call the method `intersectsMesh(target)` (`target` is a mesh) for any particle to check whether it intersects the _target_.  
It will simply return `true` or `false` depending on whether the particle intersects the target.    
  
```javascript
if (particle.intersectsMesh(anyMesh)) { 
  // change properties of particle
}
```
By default, the check is carried out on the mesh's (AABB) bounding box. If you want to use the mesh's bounding sphere, add the parameter `true`.
```javascript
if (particle.intersectsMesh(mesh, true) {
    // change properties of particle
}; 
```

<Playground id="#UI95UC#20" title="Recycling Particle Collisions" description="Simple example of recycling particle collisions of a point cloud system."/>
<Playground id="#UI95UC#21" title="Mesh Colliding With Point Cloud" description="Simple example of a mesh colliding with a point cloud."/>



# Point Cloud System

A point cloud particle system (PCS) is a single updatable mesh with the `PointsCloud` property of its material set to `true`. The point particles are simply the vertices of the mesh. As a mesh, a PCS has most of the properties of a mesh. The exceptions are those related to its material, which is already set and cannot be changed, and anything related to its vertex normals and indices, because it does not have any.

<img src="/img/how_to/Particles/points4.webp"/>

Particles can be added to a PCS with a function or by using an existing mesh as a model, where particles are randomly and evenly distributed either on the surface of the model or inside it.

As a particle system, the PCS provides methods to manage the particles, such as setting position and color, and updating and recycling them.



# Transparency Concerns

As you know, the SPS is a standard mesh.

Applying transparency to a standard mesh leads to well-known issues, not when viewing other opaque or transparent meshes through this transparent mesh, but when viewing parts of this transparent mesh through itself.  
Indeed, when the mesh geometry is passed to the GPU, the GPU draws the mesh in the order the mesh facets are sorted in the `indices` array: first triangle, then the second one, and so on, whatever the camera position.  
The shader only respects the geometry order and this geometry is fixed.

As the SPS is a standard mesh, it has the same issue when dealing with transparent particles (rotate the camera): <Playground id="#EPBTB7#3" title="Understanding SPS Transparency Issues" description="Simple example showing common transparency issues with solid particles."/>

A parameter allows you to sort the internal mesh geometry live according to the current camera position: <Playground id="#EPBTB7#2" title="Sorting Mesh Geometry Based On Camera" description="Simple example of dealing with sorting issues live, based on the camera position."/>

It sorts the SPS particles only, not all the facets, for performance reasons.

To enable it, just create your SPS with the parameter `enableDepthSort` set to `true`. By default, each subsequent call to `setParticles()` will then sort the particles according to the camera's global position.

If, for some reason (an immobile camera and SPS), you want to stop or reactivate sorting on the next calls to `setParticles()`, just set the property `sps.depthSortParticles` to `false` (or `true` to reactivate it).

Note that it is better not to enable both particle depth sorting and [facet depth sorting](/features/featuresDeepDive/mesh/facetData#facet-depth-sort) at the same time, or the sort process will be executed twice with no final benefit.  
So just choose what kind of sorting you need : at particle level (faster) or at facet level (more accurate).

Note also that the particle sort **can't work** with the MultiMaterials.

```javascript
// create a particle depth sort enabled SPS
var sps = new BABYLON.SolidParticleSystem("sps", scene, {
  enableDepthSort: true
});

// then later, only do ...
sps.setParticles(); // and the particles are depth sorted on each call

// We can skip the sorting at any time (or reactivate it): sps and camera not moving anymore
sps.depthSortParticles = false; // true by default when enableDepthSort is set to true
```

**Notes :**

- This feature is CPU intensive, so call `setParticles()` with `depthSortParticles` set to true only when needed.
- This feature requires the SPS to be updatable, so it can't work with an immutable SPS.
- This feature needs to sort all the particles from the pool, so it will lead to weird results if you call `setParticles(start, end)` on only some particles.

Point Cloud System

Coming next

Creating A Point Cloud System

Learn how to create a point cloud system in Babylon.js.

The Point Cloud Particle System

Dive into the point cloud particle system in Babylon.js.

Managing A Point Cloud System

Learn all point cloud system management in Babylon.js.

Managing Point Cloud Particles

Learn all point cloud particle management in Babylon.js.