
# Exporters
A range of 3D graphics software packages that can export files in a form that Babylon.js can import, together with hints and tips on getting the best from the export.


## Animation

Animation is what makes your game or app come alive. There are two main ways to produce an animation in BABYLON.js. You can change the properties of an object within a scene during the rendering cycle. We will take a look at that after describing the *Animation* method.



The Babylon.js audio engines are based on the [**Web Audio specification**](https://webaudio.github.io/web-audio-api/). They feature ambient, spatialized, and directional sounds, as well as basic audio buses for signal routing and mixing.

There are two sound engines in Babylon.js.

- a new `AudioEngineV2` with support for modern JavaScript using the latest features of the WebAudio API.

  > [🚀 You can find the `AudioEngineV2` API documented here](/features/featuresDeepDive/audio/playingSoundsMusic).

- an older `AudioEngine`, which is a pre-8.0 Legacy API that is now deprecated.

  > [⚠️ The documentation for the older `AudioEngine` has been moved to the Legacy section.](/legacy/audio)

**We strongly recommend using the new V2 audio engine instead of the old legacy audio engine. [A migration guide is here](/features/featuresDeepDive/audio/migrate).**



The Babylon Viewer aims to simplify a specific but common Babylon.js use case: loading, viewing, and interacting with a 3D model.

At the same time, the Babylon Viewer does ***not*** abstract away the Babylon.js API, but rather provides access to it. This ensures that you can leverage the common functionality of the Viewer but still bring your own [custom code/functionality](/features/featuresDeepDive/babylonViewer/advancedUsage) for more niche needs.

<Alert severity="info">
- For instructions on **integrating the Babylon Viewer** into your project, see the [NPM page](https://www.npmjs.com/package/@babylonjs/viewer).
- For a smaller, WebGPU-only version of the Viewer, see [Viewer Lite](/features/featuresDeepDive/babylonViewer/viewerLite).
- For **details on the API**, see the [API docs](https://doc.babylonjs.com/packages/viewer/index).
- For background on the **goals and design principles** of the Babylon Viewer, see the introduction [blog post](https://www.linkedin.com/pulse/babylon-viewer-v2-babylon-js-lkstc/?trackingId=8xWb1OZKqf5Rulor%2BbhCZQ%3D%3D).
- If you have any **feedback or feature requests**, see the [announcement forum thread](https://forum.babylonjs.com/t/babylon-viewer-v2/54317).
- For details on the deprecated Babylon Viewer V1, see the [legacy docs](/legacy/babylonViewer).
</Alert>

To get started, here is a very basic usage example:

<CodePen pen="ogvbyyW" tab="html,result" title="Babylon Viewer Basics" />

<Alert severity="warning" title="CDN vs. Bundler">
  In the example above (and all other Viewer examples in the docs), for simplicity the ESM bundle included in the NPM package is referenced through a public CDN.
  In most production scenarios, it is likely preferable to use the NPM packages directly with your own bundler and your own deployment. You can install the package into your project via:

  ```bash
  npm install @babylonjs/viewer
  ```

  See the [NPM page](https://www.npmjs.com/package/@babylonjs/viewer) for more details on using the NPM package.
</Alert>

## Viewer Layers

The Babylon Viewer is constructed in three layers to enable cross-platform and cross-framework usage.

**`HTML3DElement` (`<babylon-viewer>`)** - this layer leverages [HTML Custom Elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements), is intended for use directly in HTML, and provides default UI for things like animation controls. The documentation primarily focuses on this layer.

**`CreateViewerForCanvas`** - this layer binds Viewer functionality to an HTML `canvas`. It is used by `HTML3DElement`, and could be used for other web framework bindings (such as [React](https://react.dev/)).

**`Viewer`** - this layer has the bulk of the core Viewer functionality. It is used by `CreateViewerForCanvas`, and could be used in other Babylon scenarios, such as with Babylon Native.

## File Formats

The Babylon Viewer supports all formats supported by `@babylonjs/loaders`. See the [importer docs](/features/featuresDeepDive/importers/loadingFileTypes) for a complete list of supported formats.

Loaders are dynamically imported, so the user does not pay the download cost until the client loads a model format associated with the loader. Similarly, glTF extensions are dynamically imported and are not downloaded until a model is loaded that uses the extension.

<Alert title="Dynamic Imports & Babylon Native" severity="warning">
*When using Babylon Native, dynamic imports are not supported, so be sure to configure your bundler to create a single chunk. You can find more details in the [Babylon Native docs](https://github.com/BabylonJS/BabylonNative/blob/master/Documentation/ConsumingJavaScript.md#using-a-bundler-to-create-a-single-js-file).*
</Alert>

## Engines

`HTML3DElement` (`<babylon-viewer>`) and `CreateViewerForCanvas` support both WebGL and WebGPU. When not explicitly selected, the Viewer will default to an appropriate engine based on browser support and stability.

When WebGPU is used, [snapshot rendering](/setup/support/webGPU/webGPUOptimization/webGPUSnapshotRendering) is automatically enabled and managed. This can significantly improve performance for complex models.

For Babylon Native, a `NativeEngine` instance can be passed into the `Viewer` constructor.

The [Viewer Lite](/features/featuresDeepDive/babylonViewer/viewerLite) variant is WebGPU-only and does not provide a WebGL fallback.

## Power & Resource Optimizations

When a `HTML3DElement` (`<babylon-viewer>`) is not within the browser's viewport (e.g. scrolled out of view), rendering is suspended. Additionally, within the lower `Viewer` layer, when nothing is changing from frame to frame (e.g. no user interactions, no animations playing, etc.), rendering is also suspended. Suspending rendering is especially helpful on power- or resource-constrained devices (e.g. mobile), or when many Viewer instances are used on a page.

By default, `Viewer` will try to render at the native device resolution (maximum quality). When the `Viewer` is not able to render at the target framerate, the render resolution will progressively be reduced until the target frame rate is achieved, or the minimum resolution is reached.

## 3D Commerce Certified

The Babylon Viewer is configured by default to be compliant with the [Khronos 3D Commerce Certification](/setup/support/3D_commerce_certif).

## Viewer Configurator

The [Viewer Configurator](https://viewerconfig.babylonjs.com) is a tool that simplifies configuring the Viewer. Find more details in the [Viewer Configurator docs](/toolsAndResources/viewerConfigurator).



## Behaviors

Babylon.js v3.1 introduced a new component-based tool: behaviors.
A behavior is a simple class that can be attached to a target, where it provides a specific set of features. Those features are triggered by defined events.

## General

A behavior is defined by the following interface:

- `name`: Returns the name of the behavior
- `init()`: This function will be called when a behavior needs to be initialized. This is before the attachment to a target.
- `attach(target)`: This function will be called when a behavior is attached to a target. This is where the behavior will hook into useful events. Babylon.js will make sure that the scene is not currently loading when this function is called.
- `detach()`: This function will be called when a behavior is detached from a target. The behavior must clear any associated resources and unhook all events.

If behaviors rely on animation, the following **static** properties will be available:

- `EasingFunction`: Define the easing function used by animations
- `EasingMode`: Define the easing mode used by animations

You can add behaviors to any object implementing the IBehaviorAware interface (lights, cameras, or meshes, for instance). Every IBehaviorAware object provides the following entry points:

- `addBehavior(behavior)`: Use this function to attach a behavior to a given target. If the scene is currently loading, this code will be delayed until scene completion.
- `removeBehavior(behavior)`: Use this function to detach a behavior from a target.
- `getBehaviorByName(name)`: Return a behavior with the given name or null if not found.
- `behaviors`: This read-only property returns the list of behaviors associated with the target.

Most of the time, behaviors are designed to work with specific kinds of targets.

There are both camera and mesh behaviors.



## Cameras

There are a wide range of cameras to use with Babylon.js, Probably the two most used are the universal and arcRotate cameras and increasingly virtual reality ones.

* _Universal Camera_ - the one to choose for first person shooter type games, and works with all the keyboard, mouse, touch and gamepads. With this camera you can check for collisions and apply gravity.
* _Arc Rotate Camera_ - which acts like a satellite in orbit around a target and always points towards the target position.
* _Follow Camera_ - this takes a mesh as a target and follows it as it moves. Both a free camera version _followCamera_ and an arc rotate version _arcFollowCamera_ are available.
* _Anaglyph Camera_ - extending the use of the Universal and Arc Rotate Cameras for use with red and cyan 3D glasses. 
* _Device Orientation Cameras_ - this is a designed to react to a device being tilted forward or back and left or right. 
* _Virtual Joysticks Camera_ - on-screen 2D graphics that are used to control the camera or other scene items. 
* _[Geospatial Camera](/features/featuresDeepDive/geospatial/geospatialCamera)_ - a camera designed for map-like navigation around a spherical planet.

* _Virtual Reality Camera_ a range of cameras for VR devices

Methods are available to change how a camera reacts to inputs and to use multiple cameras.


# Controls

Babylon.js Controls are a set of regular web controls supercharged with hardware-accelerated rendering through Babylon.js to provide blazing-fast performance.

Babylon.js provides a unified API on top of **WebGL**, **WebGL2**, and **WebGPU** that controls can leverage to unleash the raw power of your GPU.

![Resizer](/img/features/controls/resizer.webp)


Sample https://github.com/sebavan/BabylonjsVideoProcessingSample



![Generated Navmesh ](/img/extensions/navigation/NavMeshGeneration.webp)

A Navigation Mesh (or navmesh for short) is a surface topology describing the space where an agent can go based on constraints.
Based on parameters such as agent radius, climbing capability, and height, navmesh generation computes a topology from source meshes (the world geometry).
Then, this topology can be displayed for debugging (the blue mesh in the screenshot above) to validate the parameters.

A demo can be found at: <Playground id="#HFY257#4" title="Crowd Navigation Demo" description="Simple example showcasing the crowd agent and nav mesh systems."/>



## Realistic Environments

Of course, when working on games or apps, the level of realism achieved will depend on your design decisions. Babylon.js can help you achieve whatever level you want, and in this section we cover some of the ways to do this. For example, lighting the background, creating lens flares, adding sky and fog, or working with HDR.

Other topics need sections of their own, such as infinite terrains, post processes, and shaders.


## Event Handling

Naturally, the main sources of events are the mouse, keyboard, touch, device movement, and game controllers. In this section, we will consider how to manage some of these. In terms of coding, Babylon.js has two features that handle events: actions and observables. It is also possible to use plain JavaScript.



## The Babylon.js Flow Graph System

The [Flow Graph](/features/featuresDeepDive/flowGraph/flowGraphBasicConcepts) system is a powerful tool for creating interactive scenes in Babylon.js. It allows developers to create complex interactions and behaviors without writing extensive code, making it accessible to both programmers and non-programmers alike.
The Flow Graph system is designed to be intuitive and user-friendly, with a visual interface that allows users to create and manipulate blocks representing different actions and events. This makes it easy to create complex interactions by simply connecting blocks together.
The Flow Graph system is particularly useful for creating interactive experiences in games, simulations, and other applications where user interaction is a key component. It allows developers to create dynamic and responsive environments that can adapt to user input in real-time.

A flow graph becomes much easier to author when it has a corresponding visual editor. Babylon.js now includes a dedicated [Flow Graph Editor](/toolsAndResources/flowGraphEditor) that lets you create, test, validate, and debug graphs visually.

Under the hood, the flow graph is used when a glTF asset with the ratified `KHR_interactivity` extension is loaded. Each valid behavior graph is converted to a Babylon Flow Graph, and the selected graph runs when the user interacts with the scene. See [Loading KHR_interactivity Assets](/features/featuresDeepDive/importers/glTF/khrInteractivity) for validation rules, loader options, inspection APIs, and editor import behavior.

If you want to understand the runtime model, continue with the sections below. If you want to build graphs through a visual tool, start with the [Flow Graph Editor documentation](/toolsAndResources/flowGraphEditor).



## The Babylon.js Frame Graph System

The [Frame Graph](/features/featuresDeepDive/frameGraph/frameGraphBasicConcepts) system is a powerful tool for creating and configuring the different rendering passes used over the course of a frame.

It is a modular system that lets you create autonomous and efficient rendering modules, improving extensibility through decoupled and composable modules.

Frame graphs simplify and optimize resource management: by reusing textures, you can potentially save tons of GPU memory, depending on the complexity of your graph!

Frame graphs also allow you to do things that were not previously possible with our fixed rendering loop.

Thanks to the new visual editor, [Node Render Graph Editor](https://nrge.babylonjs.com/) (NRGE), anyone can easily create the layout of a frame visually, without any programming!



## Geospatial

Babylon.js provides a set of features for building geospatial and large-world 3D applications.

- **[Geospatial Camera](/features/featuresDeepDive/geospatial/geospatialCamera)** - A camera designed for map-like navigation around a spherical planet.
- **[Large World Rendering](/features/featuresDeepDive/scene/large_world)** - Techniques for rendering scenes with very large world coordinates while avoiding floating-point precision issues.
- **[Loading 3D Tiles](/features/featuresDeepDive/geospatial/loading3dTiles)** - An overview of the 3D Tiles format and how to load 3D Tiles datasets in Babylon.js.



## Graphical User Interface

There are a number of options for adding a GUI to Babylon.js. The [**Babylon GUI**](/features/featuresDeepDive/gui/gui) is covered in this section.

It allows you to place buttons and labels within 3D space as well as in a 2D front-of-screen GUI.
When you want a GUI that works in VR or within 3D space, it's the only option.

It is integrated within the playground. For your own projects, it must be loaded alongside Babylon.js.

<Playground id="#NGS9AU" title="Simple GUI Slider Example" description="Simple example of adding a GUI slider to your scene." image="/img/playgroundsAndNMEs/divingDeeperGUI1.webp"/>

----------

Other possible GUIs are:

1. Dat.GUI, an external interface
1. HTML GUI
1. HtmlMesh, a Babylon.js addon which allows HTML content to be included in the scene as a scene mesh or an overlay.

## Dat.GUI

The external [dat.GUI](https://github.com/dataarts/dat.gui) is integrated within the playground. For your own projects, it must be loaded alongside Babylon.js.

<Playground id="#NGS9AU#1" title="dat.GUI Example" description="Simple example of using the dat.GUI system in your scene." image="/img/playgroundsAndNMEs/divingDeeperGUI3.webp"/>

## HTML GUI

Since Babylon.js is written in JavaScript, it is possible to use HTML and CSS to overlay the Babylon.js scene.

<Playground id="#1AHPN5" title="HTML GUI Example" description="Simple example of using HTML GUI elements in your scene." image="/img/playgroundsAndNMEs/divingDeeperGUI4.webp"/>

### HtmlMesh

The [HtmlMesh](/addons/htmlMesh) extension for BabylonJS allows HTML content to be incorporated into a scene either as a scene mesh that can occlude and be occluded by other meshes or as an overlay (similar to the HTML GUI example above, but using a mesh so it can be positioned with standard transforms, parented to other meshes, dragged, and scaled using gizmos).

<Playground id="#HVHYJC#82" title="HtmlMesh Example" description="Example of using HtmlMesh elements in your scene." image="/img/playgroundsAndNMEs/htmlMeshPG.webp"/>

## Comparison of GUI Options

Here's a list of the pros and cons of using different types of GUIs. It’s worth noting that these options aren’t mutually exclusive - they can be used together, depending on requirements, for instance:

- Use a simple HTML GUI for initial rapid prototyping before transitioning to Babylon 2D or 3D GUI
- Use an HTML GUI overlay for complex, dynamic, text-heavy info panels but Babylon 2D GUI for everything else

The sky’s the limit! Go forth and GUI in whatever way takes your fancy!

### HTML-based GUI

#### Pros

- Use familiar HTML, CSS and front-end frameworks like Bootstrap, Tailwind, React, Vue, Svelte & Angular etc
- Near unlimited flexibility & mobile responsiveness
- High performance (as rendered by native browser rather than 3D engine)
- Easier to make WCAG accessibility compliant

#### Cons

- Looser integration with 3D scene
- Can’t have GUI elements directly within 3D scene (e.g. applied to meshes)
- Can’t apply 3D post processing effects to overlaid HTML GUI elements
- Can’t be used for fullscreen/native VR

### UI with HtmlMesh

#### Pros

- Use familiar HTML, CSS and front-end frameworks like Bootstrap, Tailwind, React, Vue, Svelte & Angular etc
- Near unlimited flexibility & mobile responsiveness
- High performance (as rendered by native browser rather than 3D engine)
- Easier to make WCAG accessibility compliant

#### Cons

- Can’t be used in Native or WebXR
- Cannot receive events from iframed content (unless same origin)
- On iOS, pointer interaction with content requires clicking on content first
- Small text can be blurry at some camera angles/distances

### Babylon 2D GUI

#### Pros

- There’s now an awesome [GUI Editor](/toolsAndResources/guiEditor) to make interface creation easier!
- Tight integration with 3D scene
- Ability to optionally apply scene post processing effects to GUI as well
- Ability to apply/link GUI elements and meshes
- Some unique, useful capabilities like nine-patch stretching and sprite-sheet animation that aren’t available with a raw HTML GUI

#### Cons

- Less comprehensive/flexible than HTML GUI (but still more than enough for most requirements)
- Depending on advanced dynamic texture resolution, GUI may look a little blurry
- Possibly some performance considerations
- Can’t be used for fullscreen/native VR

### Babylon 3D GUI

#### Pros

- Supports fullscreen/native VR
- Tight integration with 3D scene
- Ability to optionally apply scene post processing effects to GUI as well

#### Cons

- Less comprehensive/flexible than both Babylon 2D GUI and HTML GUI



# Importing Assets

The built-in file type is `.babylon`, and Babylon.js can load it without a plugin. All other file types require a plugin, as described in this section.

Possible file types include glTF, OpenUSD, splat, OBJ, and STL.

To help you manage imported assets, Babylon.js provides an asset manager.

**Note:** Since imported meshes can already have a `rotationQuaternion` set, set `rotationQuaternion` to `null` before applying a rotation.


# Inputs

In addition to the usual keyboard, mouse, and touch input methods, you can also use a gamepad, device orientation, and a virtual joystick.


## Lights and Shadows

Lights are, of course, necessary to see meshes and affect their brightness and color. Although lights illuminate meshes, they only produce shadows when shadow generation is enabled for the mesh. The default number of allowed lights is four, but this can be increased.

There are five types of lights that can be used, each with a range of lighting properties.

- The Point Light - think light bulb.
- The Directional Light - think planet lit by a distant sun.
- The Spot Light - think of a focused beam of light.
- The Hemispheric Light - think of the ambient light.
- The Rectangular Area Light - think LED panel.

Color properties for all lights include _emissive_, _diffuse_ and _specular_.

Overlapping lights will interact as you would expect, with the overlap of red, green, and blue producing white light. Every light can be switched on or off, and when it is on, its intensity can be set with a value from 0 to 1.

For shadows a _shadowGenerator_ object is needed. There is also an extension, **shadows only**, that allows shadows on a transparent mesh.

To understand how meshes react to light, you need to know about the normals of a mesh, since they form part of the calculations that determine color and illumination.



# Materials

Materials give your meshes color and texture. One material in Babylon.js can be used to cover as many meshes as you wish. Materials can be displayed as wireframes, scaled and offset across a mesh, made transparent, and blended. You can apply multiple materials to one mesh and use a dynamic texture as a material that you can draw and write on in real time. Do you need to make your material appear more textured or bumpier, or make it reflect and refract? The first section shows you how.

Node materials allow you to create a material based on custom shaders but without having to deal with shader code.

The advanced section covers more technical aspects of materials and ways to customize them.



## Meshes

In the 3D virtual world, shapes are built from meshes: lots of triangular facets joined together, each made from three vertices.

![A mesh](/img/features/scene/custom1.webp)

Babylon.js provides predefined meshes, supports your own custom meshes, and can import meshes created by 3D design software. For all meshes, the underlying data structure is exposed and can be updated.

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



# Support for Physics Engines

Physics engines are third-party external programs that can be plugged into Babylon.js. Depending on their features, they emulate "real-life" interactions between objects, which can be meshes, solid particles from the solid particle system, or some cameras. One feature of a physics engine is the addition of gravity to a scene.

There are 2 physics architectures in Babylon.js.

- a Version 2 (V2 for short) with support for modern Physics Engines.

  > [🚀 You can find the V2 API documented here.](/features/featuresDeepDive/physics/usingPhysicsEngine)  

- Version 1 (V1 for short), which is a pre-6.0 Legacy API.

  > [⚠️ The documentation for V1 has been moved to the Legacy section.](/legacy/physics)

#### We strongly recommend using V2 over V1. [A migration guide is here](/features/featuresDeepDive/physics/migrate).

## Physics V2

There are plugins for 1 physics engine:

1. Havok - a powerful engine used in AAA games.

It needs to be enabled before use.

This architecture allows finer-grained control over your physics scene by distinguishing between collision shapes and physical bodies.
A typical use case is to have one collision shape used by numerous bodies.
This allows a lower memory footprint and more efficient memory addressing.
A special effort has been put into better performance for a huge number of bodies. This is also the case for the collision callback mechanism.

A broad overview of the Physics V2 advancements is available on this [Medium article](https://medium.com/@babylonjs/physics-v2-overview-ed36039ce1e7).

## Physics V1

There are plugins for 3 physics engines:

1. Cannon.js - a wonderful physics engine written entirely in JavaScript.
2. Oimo.js - a JS port of the lightweight Oimo physics engine.
3. Ammo.js - a JS port of the bullet physics engine.

All need to be enabled before use.

Interactions between objects are achieved by impostors, simple objects that are attached to complex objects in a scene. The impostor can be assigned physical attributes such as mass, friction, a coefficient of restitution, impulse, and linear and angular velocity.

Two imposters can be connected using joints such as a hinge or ball and socket.

Ammo also allows the creation of soft bodies.



# Post Processes

Post processes allow you to create 2D effects on top of your scene.
A post process is linked to a camera and can be part of a chain of post processes, where each post process uses the result of the previous one as input for its own processing.


# The Scene

The scene is somewhat like the stage on which all the meshes, cameras, and lights are placed so they can be viewed. Of course, a good scene includes more than meshes, cameras, and lights; for example, it may also include a user interface. There are also special effects that can make the environment more realistic. If you want to overlap two or more scenes, that is possible as well. 

If you want to build a scene with a minimum of code, fast build is for you. 

What else might you expect of your scene? You might expect to be able to

* have the scene react to clicks and touches;
* have your own design displayed when your scene is loading;
* optimise your scene to maintain a good speed;
* output images of particular views of your scene.


Babylon Smart Filters is a node-based graph system for building GPU-accelerated 2D effects for scenarios like real-time video filters such as background blur. While the Node Material Editor is a graphical tool for creating shaders, Smart Filters is for generating a pipeline of shaders. We call them smart because this feature includes an optimizer that automatically minimizes the number of draw calls and intermediate textures for you.

You can build Smart Filters programmatically:

```javascript
const smartFilter = new SmartFilter("Default");

const pixelateBlock = new PixelateBlock(smartFilter, "Pixelate");

const textureInputBlock = new InputBlock(smartFilter, "Texture", ConnectionPointType.Texture, null);
textureInputBlock.editorData = {
  url: "/assets/logo.png",
  urlTypeHint: "image",
  flipY: true,
  anisotropicFilteringLevel: null,
  forcedExtension: null,
};

const intensityInputBlock = new InputBlock(smartFilter, "Intensity", ConnectionPointType.Float, 0.5);
intensityInputBlock.editorData = {
  animationType: null,
  valueDeltaPerMs: null,
  min: 0.0,
  max: 1.0,
};

textureInputBlock.output.connectTo(pixelateBlock.input);
intensityInputBlock.output.connectTo(pixelateBlock.intensity);
pixelateBlock.output.connectTo(smartFilter.output);
```

Or visually using a new tool, the [Smart Filter Editor](https://sfe.babylonjs.com):
![SFE](/img/how_to/smart-filters/sfe-default.webp)

See the following subtopics to learn how to get started with Smart Filters, how to integrate them into your projects, how to create custom blocks, and more.



# Sprites

Sprites are 2D images and always face the camera. They can be used to display animated characters and particles, and to simulate complex 3D objects like trees.  

For animation, individual sprite images are collected together in a single file called a spritesheet.

* A uniform spritesheet is one where all the sprites are exactly the same size and arranged in order in the file. When you read the term spritesheet in the documentation, you can usually assume that it is referring to a uniform spritesheet. A uniform spritesheet is overseen by a *Sprite Manager*.
* A packed spritesheet is one where the sprites can be of different sizes and are often packed in such a way as to minimize the overall size of the file. Usually the full term _packed spritesheet_ will be used for such a spritesheet. A packed spritesheet is overseen by a *Sprite Packed Manager*. * available from BJS version 4.1*

For sprites, the use of one of these managers is mandatory, even for a single sprite. They optimize GPU resources by grouping multiple instances of a sprite in one place. 

Also available for any grid-like implementation (in a 2D or 2.5D game level, for instance) that requires thousands of sprites to be animated and rendered is a special system called a *Sprite Map*, *available from BJS version 4.1*



# WebXR

The WebXR API enables developers to create VR and AR experiences for the web. XR (extended reality) unifies augmented reality and virtual reality into a single API that works across supported devices.

Babylon.js supports WebXR with both WebGL and, experimentally, WebGPU. WebGPU-backed XR has additional setup and browser requirements; see [WebGPU in WebXR](/features/featuresDeepDive/webXR/webGPUXR) before selecting a rendering engine.


## Diving Deeper

We hope you enjoyed splashing around in the Getting Started section and are now ready to dive deeper into what is possible with Babylon.js. If you are looking for something specific and cannot find it in the navigation menu or landing page selections, head to the search bar; the results cover all the documentation, including the API. Below is the surface of the vast ocean that is this intermediate section of Babylon.js—dive in for a deeper understanding.


# Getting Started - Your First Physics Scene

## Add a Physics Engine

Babylon.js connects to a separate physics engine through a plugin. In this example, we use the recommended Physics V2 API with [Havok](/features/featuresDeepDive/physics/havokPlugin). Havok calculates gravity, movement, and collisions while Babylon.js renders the result.

The Babylon.js Playground loads and initializes Havok for you. There, creating the plugin and enabling physics takes two lines:

```javascript
const havokPlugin = new BABYLON.HavokPlugin();
scene.enablePhysics(new BABYLON.Vector3(0, -9.81, 0), havokPlugin);
```

The vector passed to `enablePhysics` is gravity. Its negative Y value pulls dynamic bodies downward.

In an application of your own, install both Babylon.js and Havok:

```bash
npm install @babylonjs/core @babylonjs/havok
```

Then initialize Havok's WebAssembly module before creating the plugin:

```javascript
import HavokPhysics from "@babylonjs/havok";
import { HavokPlugin, Vector3 } from "@babylonjs/core";

const havokInstance = await HavokPhysics();
const havokPlugin = new HavokPlugin(true, havokInstance);
scene.enablePhysics(new Vector3(0, -9.81, 0), havokPlugin);
```

Because initialization is asynchronous, the function that creates your scene must also be asynchronous. For more setup options, including script tags and CDN usage for small experiments, see [Using Havok and the Havok Plugin](/features/featuresDeepDive/physics/havokPlugin).

## Create Something to Fall

We first create a box for the ground and a sphere above it:

```javascript
const ground = BABYLON.MeshBuilder.CreateBox("ground", {
    width: 10,
    depth: 10,
    height: 0.5,
}, scene);
ground.position.y = -0.25;

const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {
    diameter: 2,
}, scene);
sphere.position.y = 6;
```

These meshes describe what we see, but the physics engine also needs bodies and collision shapes. A `PhysicsAggregate` creates both for a mesh:

```javascript
const groundAggregate = new BABYLON.PhysicsAggregate(
    ground,
    BABYLON.PhysicsShapeType.BOX,
    { mass: 0 },
    scene
);

const sphereAggregate = new BABYLON.PhysicsAggregate(
    sphere,
    BABYLON.PhysicsShapeType.SPHERE,
    { mass: 1, restitution: 0.6 },
    scene
);
```

The ground has a mass of `0`, so it is **static** and stays in place. The sphere has a nonzero mass, so it is **dynamic**: gravity moves it, and it collides with the ground. The sphere's `restitution` controls how bouncy the collision is; `0.6` gives us an easy-to-see bounce.

Press **Run** in the Playground to restart the simulation and watch the sphere fall.

<Playground id="#BHS83B" title="Your First Physics Scene" description="Enable Havok physics, then drop a dynamic sphere onto a static ground."/>

## Where to Go Next

You now have the essential parts of a physics scene: an enabled engine, a static body, and a dynamic body. The [Physics V2 overview](/features/featuresDeepDive/physics) introduces the full system. Continue with [Physics Aggregates](/features/featuresDeepDive/physics/aggregates) to adjust bodies and shapes, or learn how to apply [forces and impulses](/features/featuresDeepDive/physics/forces) to make bodies move.


Diving Deeper

Diving Deeper

Coming next

Animation

Deep dive into the wonderful world of Animation in Babylon.js.

Materials

Jump into the exciting world of learning Babylon.js materials.

Physics

Learn all about the powerful physics capabilities of Babylon.js.

Audio

Dive into using the Babylon.js sound engine for simple to advanced audio.

Behaviors

Dive into the rich world of behaviors in Babylon.js.

Cameras

Learn all about the different types of cameras available in Babylon.js.

Controls

Babylon.js Controls are a set of regular web controls supercharged with hardware-accelerated rendering through Babylon.js to provide blazing-fast performance.

Crowd Navigation System

This system allows you to create primitive AI crowd agents that follow a path along a specific mesh.

Environment

Learn all about creating beautiful environments in Babylon.js.

Events

Learn all about events and event handling in Babylon.js.

Exporters

A range of 3D graphics software that can export files in a form that Babylon.js can import.

Flow Graph

Learn all about the Babylon.js Flow Graph system.

Frame Graph

Learn all about the Babylon.js Frame Graph system.

Geospatial

Learn about Babylon.js features for building geospatial and large-world 3D applications.

GUI

Learn all about the Babylon.js GUI systems.

Input

Learn all about user input in Babylon.js.

Importing Assets

Learn how to import assets to use in your Babylon.js scenes.

Lights

Learn all about lights and shadows in Babylon.js

Meshes

Dive into the rich world of understanding meshes in Babylon.js.

Occlusion Queries

Learn all about leveraging occlusion queries in Babylon.js.

Particles

Dive into the rich and exciting world of particles in Babylon.js.

Post Processes

Learn Post Process effect in Babylon.js.

Scene

Learn all about the core "scene" object in Babylon.js.

Smart Filters

Smart Filters is a system for building node-based 2D shader effects for scenarios like real-time video filters.

Sprites

Learn all about sprites in Babylon.js.

Tags

Learn all about tags in Babylon.js.

Viewer (V2)

The viewer is the simplest way to display 3D content on a web page.

WebXR

Learn about creating immersive web experiences with WebXR in Babylon.js.