
A *blend mode* determines how, when rendering a mesh, new on-screen pixels will be mixed with existing pixels.

This may sound trivial as most of the time new pixels simply replace existing ones, which is not really what we may call _blending_ at all. However, in the case of alpha-blended meshes, new pixels do not simply overwrite existing ones: they are _combined_ according to how transparent the mesh is. This is an example of the most simple blending operation available (and also the default one): `BABYLON.Engine.ALPHA_COMBINE`.

Other blend modes exist, and allow you to achieve advanced visual effects.


## Available Blend Modes

All the available blend modes are listed below:

| Blend Mode | Effect | Additional Info |
|-------------------------------- |---------------- | -------------------- |
| `BABYLON.Engine.ALPHA_COMBINE` | This is the default blend mode for alpha-blended meshes. Blending is modulated by the alpha value of the pixel being drawn. | This is the default blend mode. |
| `BABYLON.Engine.ALPHA_ADD` | This blend mode will effectively _add_ the new pixel and existing pixel values, giving off a ghost-like effect and brightening what's behind the mesh. | |
| `BABYLON.Engine.ALPHA_SUBTRACT` | The new pixel value is subtracted from the existing one, giving off an "inverted color" effect. | Blending is **not** modulated by alpha value. |
| `BABYLON.Engine.ALPHA_MULTIPLY` | The new and existing pixel values are multiplied, thus what's behind the rendered mesh is darkened. This is more or less the opposite of the ALPHA_ADD effect. | Blending is **not** modulated by alpha value. |
| `BABYLON.Engine.ALPHA_MAXIMIZED` | This blend mode is similar to ALPHA_ADD, but gives off a less vibrant and saturated effect. | |
| `BABYLON.Engine.ALPHA_ONEONE` | This blend mode is very similar to ALPHA_ADD, except that it is not modulated by alpha value. Used internally for various visual effects. | Blending is **not** modulated by alpha value. |

Please note that the blending operations are in fact simple mathematical operations done seperately on R, G and B components of the pixel values, each one comprised between 0 and 1. As such, having a green mesh (R=0, G=1, B=0) set with ALPHA_SUBTRACT drawn over a yellow one (R=1, G=1, B=0) will give off a red value (R=1, G=0, B=0).


## How to Use Blend Modes

Using blend modes is done by manipulating the `alphaMode` property of materials, setting it to one of the constants listed above.

**This property will only be used when the rendered mesh is alpha-blended.** This is very important, because since the `alphaMode` property will have absolutely no effect on an opaque mesh, you will need to make sure your mesh is *alpha-blended* to use it.

You can force an opaque mesh to be alpha-blended by making it very slightly transparent, like so:
```javascript
mesh.visibility = 0.9999;
```

Or you can assign an opacity texture to its material (even if the opacity texture have no alpha channel):
```javascript
material.opacityTexture = material.diffuseTexture;
```



## Examples

Here is a screenshot showing the previously mentioned blend modes:

![Available Blend Modes](/img/how_to/blend-modes/blend-modes.jpg)

This playground showcases the available blend modes in action: <Playground id="#1MSIXB#4" title="Blend Modes Example" description="Simple example of blend modes in Babylon.js." image="/img/playgroundsAndNMEs/divingDeeperBlendModes1.jpg"/>


A dynamic texture works by creating a canvas onto which you can draw using all the facilities of the [HTML5 Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API). 

![dynamic texture](/img/how_to/dyntext.png)

## Creating and Applying

This is simply achieved using the `dynamicTexture` function with just three parameters,

```javascript
var myDynamicTexture = new BABYLON.DynamicTexture(name, option, scene);   
```
though the existing default values of `minmaps`, `sampling mode` and `texture format` can be overwritten by their addition.

Whereas the name and scene parameters are obvious, the `option` parameter, which determines the width and height of the dynamic texture, can be one of three values:

1. An already created canvas, in which case `canvas.width` and `canvas.height` are used;
2. An object having the properties `width` and `height`;
3. A number, in which case both width and height are set to this number.

Once created, the dynamic texture is used as the `diffuseTexture` for a material in the usual way:

```javascript
var myMaterial = new BABYLON.StandardMaterial("Mat", scene);    				
myMaterial.diffuseTexture = myDynamicTexture;
mesh.material = myMaterial;
```

## Writing Text

A `drawText` method is available so that text can be written directly onto the dynamic texture.

```javascript
myDynamicTexture.drawText(text, x, y, font, color, canvas color, invertY, update);
```

Here are the parameters:
* text: string, the words to be written;
* x: number, distance from the left-hand edge;
* y: number, distance from the top or bottom edge, depending on invertY;
* font: string, font definition in the form font-style, font-size, font_name;
* invertY: boolean, true by default in which case y is the distance from the top, when false, y is distance from the bottom and the letters reversed;
* update: boolean, true by default, the dynamic texture will immediately be updated.

<Playground id="#5ZCGRM#2" title="Drawing Text" description="Simple example of drawing text with dynamic textures." image="/img/playgroundsAndNMEs/divingDeeperDynamicTexture1.jpg"/>

## Canvas Methods

You can obtain the canvas context using

```javascript
var ctx = myDynamicTexture.getContext();
```
exposing all the possibilities of the HTML5 canvas element. 

### Drawing Curves
As an example, drawing using a quadratic curve

```javascript
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.quadraticCurveTo(25, 25, 25, 62.5);
ctx.quadraticCurveTo(25, 100, 50, 100);
ctx.quadraticCurveTo(50, 120, 30, 125);
ctx.quadraticCurveTo(60, 120, 65, 100);
ctx.quadraticCurveTo(125, 100, 125, 62.5);
ctx.quadraticCurveTo(125, 25, 75, 25);
ctx.stroke();
```

To apply the drawing, the dynamic texture needs updating

```javascript
myDynamicTexture.update();
```

**Note:** use `update(false)` if you do not want to use `invertY`.

<Playground id="#5ZCGRM#3" title="Drawing A Curve" description="Simple example of drawing a circle with dynamic textures." image="/img/playgroundsAndNMEs/divingDeeperDynamicTexture2.jpg"/>

### Images

Images can be added to fill part or the whole of the canvas using the `drawImage` method. Remember that you will have to wait for the image to load before assigning it to the canvas and update the dynamic texture afterwards.

For whole image  
```javascript
var img = new Image();
img.src = 'PATH TO IMAGE';
img.onload = function() {

ctx.drawImage(this, 0, 0);
myDynamicTexture.update();
```

For part of the image scaled onto part of the canvas  
```javascript
var img = new Image();
img.src = 'PATH TO IMAGE';
img.onload = function() {

ctx.drawImage(this, image start x, image start y, image width, image height, canvas to x, canvas to y, destination width, destination height);
myDynamicTexture.update();
```

<Playground id="#5ZCGRM#4" title="Adding An Image" description="Simple example of adding an image with dynamic textures." image="/img/playgroundsAndNMEs/divingDeeperDynamicTexture3.jpg"/>

## Playground Combination

This playground combines all the above techniques.

<Playground id="#5ZCGRM#1" title="All Dynamic Texture Techniques" description="Simple example of all of the dynamic texture techniques." image="/img/playgroundsAndNMEs/divingDeeperDynamicTexture4.jpg"/>

## Text and Area Matching 

For a single line of text it is possible to fit the text into a specified area or to fit an area to a specified text.

### Fit Text Into an Area.

You have a plane with width and height, `planeWidth` and `planeHeight`, to form the width and height of the dynamic texture multiply both the plane width and height by the same number to maintain aspect ratio. The number to multiply by defines the sharpness of the text, low numbers produce blurred text. Now you can create the dynamic texture.

```javascript
var DTWidth = planeWidth * 60;
var DTHeight = planeHeight * 60;
var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", {width:DTWidth, height:DTHeight}, scene);
```

For the next stage using any size of font write and measure the width of text on the dynamic texture. 

```javascript
var ctx = dynamicTexture.getContext();
var size = 12; //any value will work
ctx.font = size + "px " + font_type;
var textWidth = ctx.measureText(text).width;
```

The ratio of text width to size of font applied can be applied to the dynamic texture width to determine the font size that will fit the plane. 

```javascript
var ratio = textWidth/size;

var font_size = Math.floor(DTWidth / ratio); 
```

If you wish you can apply a multiplier to the ratio, the larger the multiplier the smaller the text and bigger margins.

```javascript
var font_size = Math.floor(DTWidth / (ratio * 1.1)); 
```

Now set the font and draw the text

```javascript
var font = font_size + "px " + font_type;
dynamicTexture.drawText(text, null, null, font, "#000000", "#ffffff", true);
```
Finally set and apply the material for the plane.

```javascript
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.diffuseTexture = dynamicTexture;
plane.material = mat;
```

<Playground id="#TMHF80#1" title="Fit Text To Plane" description="Simple example of fitting text to a plane with a dynamic texture." image="/img/playgroundsAndNMEs/divingDeeperDynamicTexture5.jpg"/>

### Fit an Area to Text

Take a plane mesh of fixed height, **planeHeight** and text with a set font size you can then calculate how wide the plane must be for the text to fit in. In order to do this you need to know the width the text will take up on a dynamic texture. This is calculated using a temporary dynamic texture and measuring the text.

```javascript
var temp = new BABYLON.DynamicTexture("DynamicTexture", 64, scene);
var tmpctx = temp.getContext();
tmpctx.font = font;
var DTWidth = tmpctx.measureText(text).width;
```

Choose a height for the dynamic texture, **DTHeight** and to maintain the aspect ratio of the plane to the dynamic texture:

1. calculate the `ratio` planeHeight:DTHeight;
2. use the ratio to calculate the width of the `planeWidth` = DTWidth * ratio;
3. create the dynamic texture to use as material with width and height, DTWidth and DTHeight;
4. draw text on dynamic texture;
4. create the plane with width and height planeWidth and planeHeight.

```javascript
var planeHeight = 3;
var DTHeight = 256; //or set as wished
var ratio = planeHeight/DTHeight;
var planeWidth = DTWidth * ratio;

var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", {width:DTWidth, height:DTHeight}, scene, false);
var mat = new BABYLON.StandardMaterial("mat", scene);
mat.diffuseTexture = dynamicTexture;
dynamicTexture.drawText(text, null, null, font, "#000000", "#ffffff", true); //use of null, null centers the text
    
var plane = BABYLON.MeshBuilder.CreatePlane("plane", {width:planeWidth, height:planeHeight}, scene);
plane.material = mat;
```
<Playground id="#TMHF80" title="Fit Plane To Text" description="Simple example of fitting a plane to text with a dynamic texture." image="/img/playgroundsAndNMEs/divingDeeperDynamicTexture6.jpg"/>

## Serialization
The dynamic texture can be serialized with the scene using `SceneSerializer.Serialize()` or a mesh using `SceneSerializer.SerializeMesh()`.  

**Note:** Be sure that the scene is ready before serialization.

This playground demonstrates serializing a dynamic texture associated with a material on a mesh:

<Playground id="#FU0ES5" title="Drawing Text and a Curve Texture Serialized Mesh" description="Simple example of drawing text and a curve texture serialized mesh." image="/img/playgroundsAndNMEs/divingDeeperDynamicTexture7.jpg"/>

Video As A Texture