
## How To use the Node Material with Particles

The Node Material Editor (aka NME) is a powerful tool that can be used to design shaders, [particles](/divingDeeper/materials/node_material/nodeMaterial#creating-particle-shaders), and [post processes](/divingDeeper/materials/node_material/nodeMaterial#creating-post-processes).

This article will help you set up a simple scene that will contain only a few lines of code, because all of the work will be done using our editors.

You can see the final result here: 

<Playground id="#RA18GJ" title="Node Material With Particles" description="Simple example of using the node material to create a particle fragment shader." image="/img/playgroundsAndNMEs/divingDeeperNodeMaterialParticle1.jpg"/>

## Setting up the scene

Setting up this scene is actually quite simple. We only need a scene, a camera, and a sphere to act as the particle emitter:

```
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, new BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

// Create a random emitter
var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.01, segments: 4}, scene);
```

## Invoking the inspector to create our particle system

If you are executing this code in the [Playground](https://playground.babylonjs.com), you can simply click on the Inspector button inside the header bar.

If you are running the code on your own, you can call `scene.debugLayer.show()`.

Once there, you can right click on the "Particle Systems" node to create a new particle system:

![Create new system](/img/how_to/Particles/create_new_system.jpg)

The inspector will then let you play with all the parameters to define the system the way you want.

When you're done setting up your system, you can go to the Snippet zone and click "Save to Snippet Server":

![Save a snippet](/img/how_to/Particles/save_snippet.jpg)

This will give you a snippet ID that we will use later to load the particle system from our code.

You can see my setup in this playground:

<Playground id="#KST50Y" title="Particles Created In the Inspector" description="Simple example showing particles saved and loaded from the snippet server." image=""/>

## Working with the snippet server

The beauty of the snippet server is that it gives you a central place to store and update your particle system without having to modify your code.

We can use the [async/await pattern](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) in our example to load a snippet asychronously. We can flag our function as `async` and then `await` a link to our particle system using the snippet ID:

```
var createScene = async function () {

    var scene = new BABYLON.Scene(engine);

    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, new BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // Create a random emitter
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.01, segments: 4}, scene);

    // Load the previously setup particle system (it was setup with the inspector)
    let system = await BABYLON.ParticleHelper.CreateFromSnippetAsync("T54JV7#13", scene, false);
    system.emitter = sphere;

    return scene;
};
```

As you can see, you can simply call `BABYLON.ParticleHelper.CreateFromSnippetAsync` to download your particle system from the snippet server.

If you do not want to (or cannot) use async / await, you can get the same outcome using Promises:

```
BABYLON.ParticleHelper.CreateFromSnippetAsync("T54JV7#13", scene, false).then(system => {
    system.emitter = sphere;
});
```

## Creating the node material for our particle system

We are going to use the same approach for the node material.

To setup our material, let's open the NME at [https://nme.babylonjs.com/](https://nme.babylonjs.com/)

The NME can be used for materials, particles and postprocesses. We'll switch to particles mode:

![Particle mode in NME](/img/how_to/Particles/nme_particle.jpg)

For this demo, I created a material where the particles are displayed with one texture when above ground (y = 0) and with another one below ground, with a smooth transition between the two. Here is the the shader I ended up with: <nme id="#345ATT#4" title="Node Material Particle Shader Example" description="Simple example of using the node material to create a particle fragment shader." image="/img/playgroundsAndNMEs/divingDeeperNodeMaterialParticle2.jpg"/>

![Demo shader](/img/how_to/Particles/demo_shader.jpg)

In a nutshell, I'm checking the particle position in world space and using a [smoothstep](https://www.khronos.org/registry/OpenGL-Refpages/gl4/html/smoothstep.xhtml) to output a value between 0 and 1, which is then used with a gradient between black and white. This color is then used to mix (lerp) between two textures.

Just like the particle system, you can save your creation to the snippet server and gets a snippet Id.

## Applying the material
The final step is to get that shader from the snippet server and use it with our particle system.

To do so, we will use the exact same approach as before:
```
// Load our node material
let nodeMaterial = await BABYLON.NodeMaterial.ParseFromSnippetAsync("#345ATT#4", scene);

// Apply it to the particle system
nodeMaterial.createEffectForParticles(system);
```

As you can see the NodeMaterial class has a handy function to apply it to a particle system.

And voila! 
The final code is extremely simple (thanks to async/await in particular):

```
var createScene = async function () {

    var scene = new BABYLON.Scene(engine);

    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, new BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // Create a random emitter
    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.01, segments: 4}, scene);

    // Load the previously setup particle system (it was setup with the inspector)
    let system = await BABYLON.ParticleHelper.CreateFromSnippetAsync("T54JV7#13", scene, false);
    system.emitter = sphere;

    // Load our node material
    let nodeMaterial = await BABYLON.NodeMaterial.ParseFromSnippetAsync("#345ATT#4", scene);
    
    // Apply it to the particle system
    nodeMaterial.createEffectForParticles(system);

    return scene;
};
```

## Automatic updates

The best part is that our Playground can evolve automagically. If you open the main Playground (referenced at the beginning of this article), you can keep editing the particle system or the material, and your code will automatically update. This happens every time open the Inspector and use one of the editors. When you click "Save to Snippet Server", the system will be smart enough to work with the Playground and update the link for you:

![Automatic update](/img/how_to/Particles/auto-pg.gif)

You can see in the GIF that the Snippet ID for the particle system is updated to version #14 when I hit the save button.

Now that we know about that automatic update,there was another option to create the initial particle. You could have called the CreateFromSnippetAsync with a "__BLANK" id:

```
BABYLON.ParticleHelper.CreateFromSnippetAsync("_BLANK", scene, false).then(system => {
    system.emitter = sphere;
});
```

And then from there you could have used the Inspector to edit it (The inspector can replace the __BLANK with the right id later on)


## Introduction
<img src="/img/resources/gpu_compressed_textures/compression_cesar.png" title="Compression" caption="Photo credit : © Adam Rzepka - Centre Pompidou, MNAM-CCI /Dist. RMN-GP"/>

Using GPU compressed textures is becoming more and more important in the computer graphics / gaming land as it allows to use more assets within the same memory budget and provides better performances by reducing cache misses on the GPU side.

Note that we are speaking about **GPU compressed textures**, meaning textures that remain compressed on the GPU board. That's different from a .png or .jpg file, for eg, that holds compressed data too but which must be expanded before being sent to the GPU.

## Working with compressed texture formats
<img src="/img/resources/gpu_compressed_textures/container.jpg" title="Container" caption="Photo courtesy of Depositphotos"/>

There are a number of compression formats used by the industry (ASTC, DXT, PVRTC, etc), and depending on your device it will generally support only a (small) subset of them : see [the table here](/advanced_topics/mutliPlatTextures#khronos-texture-container-format--ktx-files) for more details. So, to support a wide range of devices, you would need to provide your assets in multiple different formats and Babylon.js would choose the right one depending on the capability of the target device.

It can be a bit tedious to generate and maintain so many formats for a given asset, so **container files** have been created. These files can either contain multiple formats of the same asset or be transcodable to multiple formats, and being the subject of this article we are going to deal with the **KTX2 container file format**.

## KTX2 container
<img src="/img/resources/gpu_compressed_textures/ktx2.jpg" title="KTX2"/>

**KTX** stands for **Khronos Texture Container** and the current incarnation is [v2.0](http://github.khronos.org/KTX-Specification/#basisu_gd) (we won't discuss v1 version) and the associated file format extension is **.ktx2**.

This file does not in fact contains different formats of the same asset but a **universal representation** of the data that can be transcoded to any format supported by the target device! We are speaking of **transcoding** instead of **expanding** because the data are not expanded per se, they are transformed to another compressed format, one supported by your target device (the universal representation being itself compressed).

Currently, the universal representation is generated by using a compression algorithm known as [Basis Universal](https://github.com/BinomialLLC/basis_universal#basis_universal), or **BasisU** for short, created by a company named Binomial. This algorithm supports two modes :
* **ETC1S** : original low/medium quality mode, produces lower file size. Work best on images, photos, map data or albedo/specular/etc textures, but don't work as well on any data that are not true color data (like normal maps, metallic/roughness maps, etc)
* **UASTC** : high quality mode, can be used on any type of textures, even for non color data maps

On top of this compression, the data can be further compressed in the UASTC case by using a [Zstandard](https://facebook.github.io/zstd/) compression scheme. Note however that this additional compression pass can lead to smaller .ktx2 file sizes but not smaller GPU compressed textures ! The data compressed with Zstandard will be expanded on the CPU side and then will be transcoded to a GPU texture.

Note that .ktx2 files can also store GPU compressed non-universal data, but as far as Babylon.js is concerned it is only dealing with the ETC1S and UASTC universal compression schemes listed above.

## Babylon.js support for .ktx2 files
<img src="/img/resources/gpu_compressed_textures/breeze.gif" title="KTX2" caption="Gif courtesy of giphy.com"/>

On **Babylon.js** side, using such files is a breeze: just create a Texture instance by pointing to the .ktx2 file you want to use, as you would with any other standard picture format (png, jpg, etc) !

The KTX2 format is also used in the **glTF** world by means of the [KHR_texture_basisu extension](https://github.com/KhronosGroup/glTF/pull/1751) : this extension simply enables you to use .ktx2 files for the images used by your .gltf/.glb files and is supported by Babylon.js.

The KTX2 implemention of Babylon.js is developped as an external package (the [KTX2 decoder](https://github.com/BabylonJS/Babylon.js/tree/master/ktx2Decoder)) designed to be small (the minified .js file is less than 22kb) and efficient. Depending on the universal representation of the data in the .ktx2 file and the compressed formats supported by the target device, the right module is used for the transcoding. Whenever possible, the [Universal Texture Transcoders](https://github.com/KhronosGroup/Universal-Texture-Transcoders) (UTT) are used, as they are both very fast and small. For transcoding formats not supported by the UTTs (yet), the [MSC Basis Transcoder](https://github.com/KhronosGroup/KTX-Software/releases) module is used instead.

*Note* : you may have already encountered/heard of **.basis** files. Those files are using the same compression scheme than the .ktx2 files but this format is not baked by any standard committee, contrary to the KTX2 format. So, you should prefer using the latter as it will become the de-facto standard.

## Tools
<img src="/img/resources/gpu_compressed_textures/tools.png" title="Tools" caption="Photo courtesy of pixels.com"/>

Now that you know why you should use .ktx2 files, you will need to actually generate them ! 

Khronos is providing [command line tools](https://github.com/KhronosGroup/KTX-Software/releases) that you can use to generate / check / dump .ktx2 files :
* **toktx.exe** is the primary tool, used to generate .ktx2 files from .png, .jpg files. There are a handful of options, just type **toktx.exe** to display them
* **ktxinfo.exe** will display useful data in human readable form about a .ktx2 file
* **ktx2check.exe** will check that your .ktx2 file is a valid file
* **ktxsc.exe** will allow you to update some parameters of an existing .ktx2 file (change the compression scheme, add a Zstandard compression, etc)

*Happy compressions !*

<img src="/img/resources/gpu_compressed_textures/compression.gif" title="KTX2" caption="Gif courtesy of giphy.com"/>


Node Material

Node Material

Coming next

Node Material

The Node Material is a simple, highly customizable material that you can build yourself piece by piece. Combined with the powerful node-based editor, you can easily create stunning custom GPU shaders and FX for your Babylon.js scenes.

Node Material and Particles

Learn how to use the node material editor to create particle shaders.