
## Pickable Particles

You can make your particles pickable by using the `isPickable` parameter (default _false_) when creating your SPS:

```javascript
var SPS = new BABYLON.SolidParticleSystem("SPS", scene, { isPickable: true });
```

This sets the underlying mesh as pickable and populates two arrays called `SPS.pickedParticles` and `SPS.pickebBySubMesh`. So don't set your SPS as pickable if you don't need it to be, as this saves a lot of memory.  
To retrieve the particle picking data from these arrays, use the method `SPS.pickedParticle(pickingInfo)`, which returns an object with these properties:

- `idx` : the picked particle idx
- `faceId` : the face index of the picked particle (counted within this particle)

Example :

```javascript
var SPS = new BABYLON.SolidParticleSystem("SPS", scene, { isPickable: true });
// add shapes, build the mesh, init particles, etc
SPS.setParticles(); // initial SPS draw
SPS.refreshVisibleSize(); // force the BBox recomputation
scene.onPointerDown = function(evt, pickResult) {
  var meshFaceId = pickResult.faceId; // get the mesh picked face
  if (meshFaceId == -1) {
    return;
  } // return if nothing picked
  var picked = SPS.pickedParticle(pickResult); // get the picked particle data : idx and faceId
  var idx = picked.idx;                         
  var p = SPS.particles[idx];                   // get the actual picked particle
  p.color.r = 1; // turn it red
  p.color.b = 0;
  p.color.g = 0;
  p.velocity.y = -1; // drop it
  SPS.setParticles();
};
```

SPS pickability is directly related to the size of its bounding box (please read the 'SPS Visibility' part). So, to make sure your particles are pickable, remember to force the bounding box size to be recomputed at least once after the particles have been positioned in space with `setParticles()`.  
Pickable particle example (no SPS update in the render loop): <Playground id="#2FPT1A#352" title="Pickable Solid Particles Example" description="Simple example showing how to make solid particles pickable."/>
Pickable particle example (particle rotation): <Playground id="#2FPT1A#351" title="Pickable Solid Particles That Rotate" description="Simple example of picking solid particles that then rotate in the render loop."/>



## Particle Intersections

The SPS is physics agnostic. This means you need to implement your own particle behavior if you want to animate the particles.  
For this, you may need to check whether the solid particles intersect other particles or meshes in the scene. For example, you may want to know when your particles collide with an obstacle so you can make them bounce back.  
The SPS provides a simple way to deal with particle intersections. As this feature consumes more memory and CPU, it's disabled by default.  
Enable it explicitly with the parameter `particleIntersection` when creating your SPS:

```javascript
var SPS = new SolidParticleSystem("sps", scene, { particleIntersection: true });
```

Then you can simply call the method `intersectsMesh(<SolidParticle | AbstractMesh>target)` on any solid particle to check whether that particle intersects the _target_.  
It simply returns true or false depending on whether the particle intersects the target.

```javascript
// for instance, in your SPS.updateParticle(p) function : particle / particle
if (p.intersectsMesh(otherParticle)) { // change p velocity vector }
```

You can pass either a solid particle object or a standard BJS mesh to the `intersectsMesh()` method. Both work the same way.

```javascript
// for instance, in your SPS.updateParticle(p) function : particle / mesh
if (p.intersectsMesh(anyMesh)) { // change p velocity vector }
```

Beware that invisible solid particles can still intersect, exactly like meshes do. So it is up to you to test particle visibility (`isVisible`) if you want to exclude a particle from an intersection computation.

If you prefer, you can even use the `AbstractMesh` method `intersectsMesh()` and pass it a solid particle.

```javascript
// for instance, in your SPS.updateParticle(p) function : mesh / particle
if (someMesh.intersectsMesh(p)) { // change p velocity vector }
```

Under the hood, when creating an SPS with `particleIntersection`, a bounding box and a bounding sphere are assigned to each solid particle.  
For performance reasons, particle intersections are always computed in the fastest way, that is, with Axis Aligned Bounding Boxes (AABB). [More Details on Intersection Collisions](/features/featuresDeepDive/mesh/interactions/mesh_intersect)

If you use the `AbstractMesh` `intersectsMesh()` method, which allows you to force OBB computation (precise mode), only the mesh bounding box will be rotated, not the particle one, so the intersection detection will be only slightly better than in AABB mode.  
Precise mode has a significant CPU cost, so it is not recommended for use with solid particles.

```javascript
// for instance, in your SPS.updateParticle(p) function : precise mode, mesh / particle
if (someMesh.intersectsMesh(p, true)) { // change p velocity vector }
```

Example: <Playground id="#10RCC9" title="Physics and Solid Particles Example 1" description="Simple example of adding physics to solid particles."/>

For an SPS with thousands of particles, computing the bounding box for each particle on each frame is still a heavy CPU operation. So, if you need more performance and do not mind reducing intersection accuracy, you may choose to limit the computation to the particle bounding sphere only (a bounding box requires 8 iterations per particle, one for each box vertex) by using the optional boolean parameter `boundingSphereOnly` (default _false_) when creating the SPS.

```javascript
var SPS = new SolidParticleSystem("sps", scene, {
    particleIntersection: true,
    boundingSphereOnly: true,
});
```

Example: <Playground id="#2BXZC#2" title="Physics and Solid Particles Example 2" description="Simple example of adding physics to solid particles."/>

As you may know, a mesh—so, a solid particle—is inside its bounding box, and its bounding box is inside its bounding sphere. So the bounding sphere is bigger than the bounding box, which is bigger than the mesh.  
If your particles look like some tiny spherical objects and if you use the `boundingSphereOnly` mode, you would probably like to tweak the bounding sphere to make it closer to the embedded particle.  
You can then use the parameter `bSphereRadiusFactor`, a floating-point number that is multiplied by the current bounding sphere radius.  
Imagine that your particle is a spherical shape with a radius of R. Its bounding sphere radius is then, by default, R \* sqrt(3). So if you multiply the bounding sphere radius by 1 / sqrt(3), the bounding sphere gets the same radius as the particle and both match exactly.

```javascript
var SPS = new SolidParticleSystem("sps", scene, {
    particleIntersection: true,
    boundingSphereOnly: true,
    bSphereRadiusFactor: 1 / Math.sqrt(3),
});
```

Example: <Playground id="#29F0EG#2" title="Physics and Solid Particles Example 3" description="Simple example of adding physics to solid particles."/>

At last, in case you are using the `boundingSphereOnly` mode, just remember that the particle bounding box isn't computed, only its bounding sphere, so don't test the intersection from a **mesh** object :

```javascript
// boundingSphereOnly case :
mesh.intersectsMesh(particle); // won't give the right result
particle.intersectsMesh(mesh); // will give the right bounding sphere intersection
```



# Update a Particle's Shape

- `SPS.updateParticleVertex()` _usage_ :  
  It happens before particle scaling, rotation, and translation, and it allows you to update the vertex coordinates, color, and UV of each particle.  
  This function is called for each vertex of each particle, and it is passed the current particle, the current vertex, and its current index in the particle shape.  
  The vertex is a SolidParticleVertex object, so you can access or set its properties :
  ```javascript
  vertex.position: Vector3 (x, y, z)
  vertex.color: Color4 (r, g, b, a)
  vertex.uv: Vector2 (x, y)
  ```

```javascript
SPS.computeParticleVertex = true; // false by default for performance reason
SPS.updateParticleVertex = function(particle, vertex, v) {
  // particle : the current particle object
  // vertex : the current vertex, a solidParticleVertex object
  // the index of the current vertex in the particle shape
  // example :
  if (particle.shapeID == 1) {
    vertex.position.x *= Math.random() + 1;
    vertex.position.y *= Math.random() + 1;
    vertex.position.z *= Math.random() + 1;
    vertex.color.r = Math.abs(Math.sin(v));
    vertex.color.g = 1 - vertex.color.r
    vertex.uv.x = particle.idx + v;
    vertex.uv.y = vertex.uv.x;
  }

};
```

Note that this vertex update is not stored (the particle shape is not modified) but only computed in the next call to `setParticles()`. So there is no value accumulation: the vertex coordinates, colors, or UVs are always the initial ones when entering this function.  
Note also that the shape reference for each particle is the original shape of the mesh model you passed in `addShape()`, even if you also passed a custom `vertexFunction` (see the part: "Going further in immutable SPS").  
The good news is that the very same function can be used for `SPS.updateParticleVertex` and for the custom `vertexFunction` expected by `addShape()`.  
So, to better understand how it works, here is another general pseudocode outline:

```javascript
var particles: SolidParticles[] = [array of SolidParticle objects];
function setParticles() {
    beforeUpdateParticles();                 // your custom function
    for (let p = 0; p < nbParticles; p++) {
      var particle = particles[p];
      updateParticles(particle);             // your custom position function
      for(let v = 0; particle.vertices.length; v++) {
        var vertex = particle.vertices[v];
        updateParticleVertex(particle, vertex, v);   // your ustom vertex function
        computeAllTheVertexStuff();
      }
    }
    updateTheWholeMesh();                   // does the WebGL work
    afterUpdateParticles();                 // your ustom function
}
```

Example: <Playground id="#1X7SUN#11" title="Updating Solid Particle Geometry" description="Simple example of manipulating solid particle geometry."/>
Or dancing glow-worms: <Playground id="#1X7SUN#12" title="Dancing Glow Worm Solid Particles" description="Fun Glow Worm example of changing solid particle geometry."/>


Picking Solid Particles

Pickable Particles