
## How To Use MeshExploder

`MeshExploder` takes an array of meshes and increases or decreases their distance from a center `Mesh`.

```javascript
const newExplosion = new BABYLON.MeshExploder(meshes, centerMesh);

newExplosion.explode(); //Explodes meshes away from center. Default 1.0.
```

| variable              | description                                                                               |
| --------------------- | ----------------------------------------------------------------------------------------- |
| meshes                | The array of meshes to explode/implode.                                                   |
| centerMesh (optional) | The mesh to be the center of the explosion. Defaults to the mesh closest to the center of all meshes. |

The `MeshExploder.explode()` function takes a numeric parameter to multiply the explosion distance. Negative numbers implode. Zero resets the meshes to their original positions.

```javascript
newExplosion.explode(-2); //Implodes
newExplosion.explode(0); //Resets
```

## Example Usage

```javascript
const toExplodeArray = [];
const sphere1 = BABYLON.MeshBuilder.CreateSphere("sphere1", { segments: 12, diameter: 2 }, scene);
sphere1.position.y += 2;
toExplodeArray.push(sphere1);

for (let alpha = 0; alpha < Math.PI * 2; alpha += Math.PI / 10) {
  const sphere0 = BABYLON.MeshBuilder.CreateSphere("sphere0", { segments: 8, diameter: 0.5 }, scene);
  sphere0.position.y = 2;
  sphere0.position.z = Math.cos(alpha) * 1.25;
  sphere0.position.x = Math.sin(alpha) * 1.25;
  toExplodeArray.push(sphere0);
}

const newExplosion = new BABYLON.MeshExploder(toExplodeArray);

newExplosion.explode(2);
```

<Playground id="#SFI0DQ" title="Simple explosion" description="Simple example of creating an explosion." /> <Playground id="#PTT7L9#2" title="Larger explosion" description="Example of creating an explosion with thousands of meshes." />

# Example With Imported Objects

```javascript
const assetsManager = new BABYLON.AssetsManager(scene);
const meshTask = assetsManager.addMeshTask("model", "", "./", "model.gltf");

let meshes;

meshTask.onSuccess = function(task) {
    meshes = task.loadedMeshes;
}
assetsManager.load();
const newExplosion;
scene.executeWhenReady(function() {
    newExplosion = new BABYLON.MeshExploder(meshes);
    newExplosion.explode(2);
});
```

## Example Using the Babylon.js Viewer

```javascript
BabylonViewer.viewerManager.getViewerPromiseById("babylon-viewer").then(function (viewer) {
  viewerObservables(viewer);
});
let newExplosion;
function viewerObservables(viewer) {
  viewer.onModelLoadedObservable.add(function (model) {
    model.rootMesh.getScene().executeWhenReady(function () {
      newExplosion = new BABYLON.MeshExploder(model.meshes, model.meshes[0]);
      newExplosion.explode(2);
    });
  });
}
```



## The MeshDebugPluginMaterial
Visualizing certain properties of a mesh can often be tricky.
The MeshDebugPluginMaterial, one of the [material plugins](/features/featuresDeepDive/materials/using/materialPlugins) available in the Babylon library, can be used to aid in debugging these properties.

The plugin currently offers 7 modes, which are detailed below.

## Triangles Mode
The `TRIANGLES` visualization of the MeshDebugPluginMaterial allows you to see the underlying mesh's wireframe. 
![TRIANGLES mode](/img/features/meshDebug/mdpmTriangles.webp)

### How To Use
Before applying the plugin, first call the static function `PrepareMeshForTrianglesAndVerticesMode` on the mesh. Then create the MeshDebugPluginMaterial with the `mode` option set to `MeshDebugMode.TRIANGLES`.

You can customize the wireframe's thickness and color with the options below
* `wireframeTrianglesColor`: _(Color3)_ the color of the wireframe
* `wireframeThickness`: _(number)_ the thickness of the wireframe's edges

#### Example
```javascript
BABYLON.MeshDebugPluginMaterial.PrepareMeshForTrianglesAndVerticesMode(mesh);

new BABYLON.MeshDebugPluginMaterial(mesh.material, {
    mode: BABYLON.MeshDebugMode.TRIANGLES,
    wireframeTrianglesColor: new BABYLON.Color3(0, 0, 0),
    wireframeThickness: 0.7
});
```

**NOTE** _Behind-the-scenes, `PrepareMeshForTrianglesAndVerticesMode` triples the number of triangles and creates `number_triangles*2*3` vertices in the mesh's vertex buffers. This is necessary for the plugin's shaders to work correctly. You can undo these changes to the mesh via the [rollback function](/typedoc/classes/BABYLON.MeshDebugPluginMaterial#PrepareMeshForTrianglesAndVerticesMode) returned by the method._

Playground example: <Playground id="#KPLZWF" title="Triangles" description="Applying TRIANGLES to a model."/>

## Vertices Mode
The plugin's `VERTICES` mode draws dots over all vertices of the mesh, as shown below.
![VERTICES mode](/img/features/meshDebug/mdpmVertices.webp)

### How To Use
This mode works similarly to `TRIANGLES`. Call the static function `PrepareMeshForTrianglesAndVerticesMode` on the mesh first, then apply the plugin.

Customization options include
* `vertexColor`: _(Color3)_ the color of the vertex dots
* `vertexRadius`: _(number)_ the radius of the vertex dots

#### Example
```javascript
BABYLON.MeshDebugPluginMaterial.PrepareMeshForTrianglesAndVerticesMode(mesh);

new BABYLON.MeshDebugPluginMaterial(mesh.material, {
    mode: BABYLON.MeshDebugMode.TRIANGLES,
    vertexColor: new BABYLON.Color3(0, 0, 0),
    vertexRadius: 1.2
});
```

## Triangles-Vertices Mode
If you'd like to see both the mesh's wireframe and vertex dots, use the `TRIANGLES_VERTICES` mode of the plugin.
![TRIANGLES_VERTICES mode](/img/features/meshDebug/mdpmTrianglesVertices.webp)

### How To Use
Just like both `TRIANGLES` and `VERTICES` modes, use `PrepareMeshForTrianglesAndVerticesMode` on the mesh, then apply the plugin.

The same options available to `TRIANGLES` and `VERTICES` modes also apply to `TRIANGLES_VERTICES`, with one exception. Below, note that `wireframeTrianglesColor` is replaced by `wireframeVerticesColor`. 
* `vertexColor`: _(Color3)_ the color of the vertex dots
* `vertexRadius`: _(number)_ the radius of the vertex dots
* `wireframeVerticesColor`: _(Color3)_ the color of the wireframe
* `wireframeThickness`: _(number)_ the thickness of the wireframe's edges in screen space

#### Example
```javascript
BABYLON.MeshDebugPluginMaterial.PrepareMeshForTrianglesAndVerticesMode(mesh);

new BABYLON.MeshDebugPluginMaterial(mesh.material, {
    mode: BABYLON.MeshDebugMode.TRIANGLES_VERTICES,
    wireframeVerticesColor: new BABYLON.Color3(0.8, 0.8, 0.8),
    wireframeThickness: 0.7,
    vertexColor: new BABYLON.Color3(0, 0, 0),
    vertexRadius: 1.2
});
```

## UV0 and UV1 Modes
These modes can help visualize a mesh's UVs with a basic checkerboard grid.
![UV0 mode](/img/features/meshDebug/mdpmUV0.webp)

### How To Use
Simply set the plugin mode to `UV0` or `UV1`, depending on which UV set you'd like to see.

You can customize the primary and secondary color of the checkerboard grid via
* `uvPrimaryColor`: _(Color3)_ the first color used in the checkerboard grid
* `uvSecondaryColor`: _(Color3)_ the second color used in the checkerboard grid
* `uvScale`: _(number)_ the number of squares along one axis of the grid

#### Example
```javascript
new BABYLON.MeshDebugPluginMaterial(mesh.material, {
    mode: BABYLON.MeshDebugMode.UV0,
    uvPrimaryColor: new BABYLON.Color3(1, 1, 1),
    uvSecondaryColor: new BABYLON.Color3(0.5, 0.5, 0.5),
    uvScale: 20
});
```

## Vertex Colors Mode
The `VERTEXCOLORS` mode can be used to better see a mesh's vertex colors.
![VERTEXCOLORS mode](/img/features/meshDebug/mdpmVertexColors.webp)

### How To Use
Set the plugin's mode to `VERTEXCOLORS`. For best results, also set the `multiply` option to `false`.

#### Example
```javascript
new BABYLON.MeshDebugPluginMaterial(mesh.material, {
    mode: BABYLON.MeshDebugMode.VERTEXCOLORS,
    multiply: false
});
```

**NOTE** _By default, the plugin multiplies the mode's color against the material's final color underneath. We should disable this behavior here to get the real color of each vertex._
**NOTE** _Under-the-hood, disabling `multiply` when on `VERTEXCOLORS` mode will also disable lighting effects on the model. See [The multiply option](toolsAndResources/utilities/VisualizeMeshData#the-multiply-option) section for more details._

## Material IDs Mode
The `MATERIALIDS` mode provides a visual way of distinguishing different materials from one another.
![MATERIALIDS mode](/img/features/meshDebug/mdpmMaterialIds.webp)

### How To Use
Set the plugin's mode to `MATERIALIDS` across all materials. You may also want to toggle off the `multiply` option to better see the ID colors.

The MeshDebugPluginMaterial comes with a default color palette for `MATERIALIDS`. To use a custom color palette, you can directly replace the plugin's [static palette](typedoc/classes/BABYLON.MeshDebugPluginMaterial#MaterialColors) with your own before applying the plugin, as in the following snippet.

#### Example
```javascript
BABYLON.MeshDebugPluginMaterial.Reset();

BABYLON.MeshDebugPluginMaterial.MaterialColors = [
    new BABYLON.Color3(1,0,0),
    new BABYLON.Color3(0,1,0),
    new BABYLON.Color3(0,0,1)
];

new BABYLON.MeshDebugPluginMaterial(mesh.material, {
    mode: BABYLON.MeshDebugMode.MATERIALIDS,
    multiply: false
});
```

**NOTE** _If you'd like ID colors to be consistent across runs, call the static function [`MeshDebugPluginMaterial.Reset()`](/typedoc/classes/BABYLON.MeshDebugPluginMaterial#Reset) before applying the modes. This resets all static variables of the MeshDebugPluginMaterial class, including the counting mechanism for material IDs._

Playground example: <Playground id="#RZPC9Q" title="Material IDs" description="Applying MATERIALIDS to a model."/>

## The Multiply Option
The `MeshDebugPluginMaterial` features an option, `multiply`, that determines if the plugin's visualization colors should be multiplied against the material's final color. This option is set to `true` by default, but what happens if you set it to `false`?

If set to false, the plugin will replace the material's final color with its own, built-in visual (unless the plugin is in `VERTEXCOLORS`). This default shading looks as follows:

![Default Shading](/img/features/meshDebug/mdpmNone.webp)

The visual is based on a Phong lighting model and treats the active camera as a light source. 
You can customize the default shading's appearance with a few options.
* `shadedDiffuseColor`: _(Color3)_ the diffuse color of the default shading
* `shadedSpecularColor`: _(Color3)_ the specular color of the default shading
* `shadedSpecularPower`: _(number)_ the strength of the default shading's specularity

### Example
```javascript
new BABYLON.MeshDebugPluginMaterial(mesh.material, {
    mode: // any mode
    multiply: false,
    shadedDiffuseColor: new BABYLON.Color3(1, 1, 1),
    shadedSpecularColor: new BABYLON.Color3(.8, .8, .8),
    shadedSpecularPower: 10
});
```

See the difference: <Playground id="#U9UKR8" title="Default Shading" description="Example showcasing the default shading of the plugin material."/>

## Notes on Usage
The mesh must have a material assigned to it in order for the MeshDebugPluginMaterial to work as expected. You might consider adding logic to your program that assigns new PBRMaterials to meshes without any material.

Also, all material plugins must be added to materials _before_ they are used for rendering. There are a few techniques to do this, including:
- Importing the mesh asynchronously, then adding the plugin to the materials of the result
- Using an observable like `scene.onNewMaterialAddedObservable`
- Using an `AssetContainer` to modify the materials before adding them to the scene
- Creating a new material, applying the plugin to the new material, then assigning the new material to the mesh

## API
See the full list of available properties, options, methods, and more [here](/typedoc/classes/BABYLON.MeshDebugPluginMaterial).



# Hotspot

Hotspot is a feature designed to compute world space positions within the triangles of deformed geometry. For instance, it can calculate the center of a triangle on a mesh that is being deformed by an animated skeleton. This world space position can then be projected onto the screen, creating a 2D Hotspot. This allows certain areas of an animated mesh to be made more visible to the user.

## Getting a hotspot

Simple example of a hotspot:
```javascript
const hotspotQuery = {pointIndex:[6527,6526,6525],barycentric:[0.723, 0.079, 0.196]};
BABYLON.GetHotSpotToRef(mesh, hotspotQuery, worldPosition);
```

`pointIndex` represents the three vertices used to compute the transformed triangle. Usually, it corresponds to the indices of a rendered triangle.
`barycentric` contains the barycentric coordinates of the hotspot point in the triangle composed of `pointIndex`.

## Getting hotspot query values

Scene picking queries provide everything needed. To fill a query object, first pick inside the displayed scene.

```javascript
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
    const indices = pickResult.pickedMesh.getIndices();
    const base = pickResult.faceId * 3;
    hotspotQuery.pointIndex[0] = indices[base];
    hotspotQuery.pointIndex[1] = indices[base+1];
    hotspotQuery.pointIndex[2] = indices[base+2];
    hotspotQuery.barycentric[0] = pickResult.bu;
    hotspotQuery.barycentric[1] = pickResult.bv;
    hotspotQuery.barycentric[2] = 1 - pickResult.bu - pickResult.bv;
    hotspotQuery.meshIndex = scene.meshes.indexOf(pickResult.pickedMesh);
}	
```

## Projecting hotspot to get 2D values

This works for any world coordinate, not just hotspots.

```javascript
const renderWidth = engine.getRenderWidth();
const renderHeight = engine.getRenderHeight();

const viewportWidth = camera.viewport.width * renderWidth;
const viewportHeight = camera.viewport.height * renderHeight;
const viewport = new BABYLON.Viewport(0, 0, viewportWidth, viewportHeight);

let screenPosition = new BABYLON.Vector3();

BABYLON.Vector3.ProjectToRef(worldPosition, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), viewport, screenPosition);
line.x2 = screenPosition.x;
line.y2 = screenPosition.y;
```

<Playground id="#BQOFIX#15" title="Simple Example of Mesh Hotspot" description="Hotspot hooked to a animated skinned mesh."/>


variable	description
meshes	The array of meshes to explode/implode.
centerMesh (optional)	The mesh to be the center of the explosion. Defaults to the mesh closest to the center of all meshes.

Exploding Meshes

How To Use MeshExploder

Example Usage

Example Using the Babylon.js Viewer