
As of version 5.36.0, a new fluid rendering component has been added to the `Scene` class, allowing you to render particles (`ParticleSystem`, `GPUParticleSystem`, or some custom vertex buffers) as a fluid.

![Fluid Rendering](/img/features/fluidrenderer/fluid_intro.webp)  



The particle system uses small 2D sprites that may be animated and always face the camera to simulate effects such as smoke or abstract visual forms such as glitter and fairy dust. The clouds of particles produced can be controlled with a wide range of properties including size, lifetime, emission rates, region, and power. Gravity can also be added to the particles.

![Particles](/img/features/particle0.webp)  

From Babylon.js v3.2, when the browser supports WebGL2, GPU particles are available. These make full use of the GPU, though there are some restrictions on their use. When WebGL2 is not available, the *GPUParticleSystem* will fall back to the *ParticleSystem* automatically.



# 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.



# Solid Particle System

The solid particle system (SPS) creates a cloud of particles from one or more base meshes. The resulting system is itself a single mesh that requires a single draw call per frame and has the same properties as any mesh. However, you have to implement the behavior of individual particles yourself through the features and properties provided.

![SPS](/img/features/particle1.webp)

Individual particles are pickable with a pointer, and there are methods to check whether two particles are intersecting. Another feature, digest mesh, takes an existing mesh and turns its triangular facets into particles, allowing a mesh to be 'blown apart', for example.


## Particles

Babylon.js supports three types of particles. These are based on sprites, meshes, and points.

The particle system uses small 2D sprites, which may be animated and always face the camera, to simulate effects such as smoke. The clouds of particles produced can be controlled with a wide range of properties. This differs from the other two systems, as it has parameters to control its behavior while the others require their behavior to be coded. From Babylon.js v3.2, where the browser supports WebGL2, GPU particles are available. These make full use of the GPU, though there are some restrictions on their use. When WebGL2 is not available, the *GPUParticleSystem* will fall back to the *ParticleSystem* automatically.

Starting from Babylon.js v8.14, the [Node Particle Editor (NPE)](/features/featuresDeepDive/particles/particle_system/node_particle_editor) provides a visual, graph-based way to design particle systems. Rather than setting properties in code, you wire together blocks that define creation, update, and rendering logic. NPE produces a *NodeParticleSystemSet* that can be loaded and started with just a few lines of code.

The solid particle system (SPS) combines one or more base meshes into a single mesh, requiring a single draw call per frame. There are many features available that allow you to control the behavior of the individual mesh particles.

A points cloud particle system (PCS) is a single updatable mesh and uses a material property to display its vertices as pixel squares of a size you set. The points cloud system provides some methods to manage the individual particles.

Also, as of version 5.X.Y, a new fluid rendering component has been added to the `Scene` class that allows you to render a particle system (`ParticleSystem`, `GPUParticleSystem`, or some custom vertex buffers) as a fluid.



## Introduction

Babylon.js v3.1 introduced a new feature: Occlusion Queries.
Occlusion Queries detect whether a mesh is visible in the current scene and, based on that, whether the mesh should be drawn. Occlusion Queries are useful when you have an expensive object in the scene and want to ensure that it is drawn only when it is visible to the camera and not behind an opaque object.
Babylon.js provides an implementation of Occlusion Queries through the `occlusionType` property in the `AbstractMesh` class.

**Very important**: The meshes you activate for occlusion requests **must** be rendered *after* their potential occluders! The easiest way to do this is to set their `renderingGroupId` property to a value greater than that of the occluding meshes (don't forget to call `scene.setRenderingAutoClearDepthStencil()` with the appropriate parameters, as you probably won't want to clear the depth buffer between rendering groups).

## How Occlusion Queries Work Behind the Scenes

The Babylon.js engine draws a light, transparent bounding box on the targeted mesh before drawing the object and creates a query to check with the WebGL engine whether the bounding box is visible. If the box is visible, the object gets drawn; if not, the object is not drawn. Occlusion Queries are asynchronous, and the query result for the object is usually not available in the current frame. Because of this, the object is drawn based on the query result from the previous frame. Users generally will not notice the difference unless the FPS is very low.

<Playground id="#QDAZ80#646" title="Occlusion Query Example" description="Simple Example of using occlusion queries in your scene."/>

## Basics

To use Occlusion Queries on a mesh, make sure you include these imports so you have access to the feature:
```javascript
import '@babylonjs/core/Engines/Extensions/engine.query';
import '@babylonjs/core/Rendering/boundingBoxRenderer';
```

Then set the occlusionType on your mesh:

```javascript
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere1", { segments: 16, diameter: 2 }, scene);
sphere.occlusionType = BABYLON.AbstractMesh.OCCLUSION_TYPE_OPTIMISTIC;
```

For more about `occlusionType` and the supported algorithm, see the `AbstractMesh` class [documentation](/typedoc/classes/babylon.abstractmesh).

If your object is behind an opaque object by default, you can set the `isOccluded` property to true so the Babylon.js engine will not decide whether to render it until the query result is retrieved from the WebGL engine.

```javascript
sphere.isOccluded = true;
```

## Reading a Query Result

When you manage an occlusion query directly, wait until the result is available before reading it. Use [`isOcclusionQueryVisible`](/typedoc/classes/babylon.abstractengine#isocclusionqueryvisible) when you only need to know whether any samples passed:

```javascript
if (engine.isQueryResultAvailable(query)) {
    const isVisible = engine.isOcclusionQueryVisible(query);
}
```

This method returns `true` for any positive result and `false` for zero. It provides the same visibility check for WebGL and WebGPU.

Use `getQueryResult(query)` only when you need the raw backend value. The size of a positive raw value is backend-specific and may be greater than `1`, so do not compare it with a fixed positive value. `isOcclusionQueryVisible(query)` does not change the raw result.

## Advanced

As described earlier, the Occlusion Queries result is asynchronous, and it may take some time to get the result. Because of this, the object may take several frames to appear while waiting for the query result. In this case, you can use the `occlusionRetryCount` property to set the number of waiting frames before the query is interrupted. Once that happens, you will need to decide whether to draw the object or maintain its state. The `occlusionType` property is used for this purpose, and you have 2 options:

1. OCCLUSION_TYPE_OPTIMISTIC: this option will render the mesh if a break happens.
2. OCCLUSION_TYPE_STRICT: this option will restore the last state of the object, whether visible remains visible or hidden remains hidden.

As an example of using strict and optimistic modes, suppose you have 2 expensive objects in your scene and one of them must be rendered. In that case, you could set `occlusionRetryCount` and set `occlusionType` to optimistic so the object will be rendered if the query result is not available. If your object can wait until the query is available, do not set `occlusionRetryCount`, or use `occlusionType` set to strict so that if the object was rendered in the last scene, it is rendered again in the current scene; otherwise, it stays hidden.

```javascript
sphere.occlusionRetryCount = 10;
sphere.occlusionType = BABYLON.AbstractMesh.OCCLUSION_TYPE_STRICT;
```

In Babylon.js, you can also set the WebGL Occlusion Queries algorithm type using the `occlusionQueryAlgorithmType` property. For more information, see the `AbstractMesh` class [documentation](/typedoc/classes/babylon.abstractmesh).

You can find a live demo here: <Playground id="#QDAZ80#3" title="Advanced Occlusion Queries" description="Example of using advanced occlusion query methods in your scene."/>


Particles

Particles

Coming next

Particle System

Learn all about the particle system in Babylon.js.

Solid Particle System

Learn all about the solid particle system in Babylon.js.

Point Cloud System

Learn all about the point cloud system in Babylon.js.

Fluid Renderer

Learn all about the fluid renderer component in Babylon.js.