
![Generated Tree ](/img/extensions/trees/quick1.png)

The function QuickTreeGenerator uses a sphere with randomized vertices to generate a tree. 

It is based on Julian Temechon's tutorial on the VertexData object http://www.pixelcodr.com/tutos/trees/trees.html

A demo can be found at: <Playground id="#LG3GS#107" title="Quick Tree Generator Example" description="Simple example of the quick tree generator." image=""/>

## How to use it.

Clone or copy the file https://github.com/BabylonJS/Extensions/tree/master/TreeGenerators/QuickTreeGenerator

Before using check your version of BABYLONJS versions 2.2 and earlier require line 8 to be active, comment line 9 instead
BABYLON 2.3 or later leave as is.

call the function

```
var tree = QuickTreeGenerator(sizeBranch, sizeTrunk, radius, trunkMaterial, leafMaterial, scene);
```

## Parameters

sizeBranch - sphere radius used for branches and leaves 15 to 20.

sizeTrunk - height of trunk 10 to 15.

radius - radius of trunk 1 to 5.

trunkMaterial - material used for trunk.

leafMaterial - material for canopies.
 
scene - BABYLON scene. 



![Generated Tree ](/img/extensions/trees/pine1.png)

The function simplePineGenerator uses a tube to generate a tree. 

It is based on playgrounds from  this forum topic https://www.html5gamedevs.com/topic/21484-simple-pine-trees/

A demo can be found at: <Playground id="#LG3GS#106" title="Simple Pine Tree Generator Example" description="Simple example of the simple pine tree generator." image=""/>

## How to use it.

Clone or copy the file https://github.com/BabylonJS/Extensions/tree/master/TreeGenerators/SimplePineGenerator

call the function


```
var tree = simplePineGenerator(canopies, height, trunkMaterial, leafMaterial, scene);
```

## Parameters

canopies - number of leaf sections.

height - height of tree.

trunkMaterial - material used for trunk.

leafMaterial - material for canopies.
 
scene - BABYLON scene.  


![Generated Tree ](/img/extensions/trees/genTree.png)

The function createTree uses the solid particle system to generate a tree. 
A base tree is created consisting of a trunk which forks into branches, which then themselves may fork or not.
This base tree is used in two different ways. 
    1. as the trunk and parent branches for the whole tree.
    2. with leaves added as a mini-tree that is added a number of times to the base trunk and parent branches to form the whole tree.
    
  ![Base Tree to Full Tree Sequence ](/img/extensions/trees/baseToFull.png)  
  
  A demo can be found at: <Playground id="#1LXNS9#4" title="SPS Tree Generator Example" description="Simple example of the sps tree generator." image=""/>

## How to use it.

Clone or copy the file https://github.com/BabylonJS/Extensions/blob/master/TreeGenerators/SPSTreeGenerator/TreeGenerator.js

call the function

```
var tree = createTree(trunkHeight, trunkTaper, trunkSlices, trunkMaterial, boughs, forks, forkAngle, forkRatio, branches, branchAngle, bowFreq, bowHeight, leavesOnBranch, leafWHRatio, leafMaterial, scene);
```

## Parameters

trunkHeight - height of trunk of tree. The initial trunk radius is 1 unit.  
trunkTaper -  fraction of starting radius for the end radius of a branch between 0 and 1.   
trunkSlices - the number of points on the paths used for the ribbon mesh that forms the branch.  
trunk material - the material used on all branches.  
boughs - the number of times the tree will split into forked branches, 1 trunk splits into branches, 2 these branches also spilt into branches.  
forks -  the number of branches a branch can split into, 5 or more really slows the generation.  
forkAngle - the angle a forked branch makes with its parent branch measured from the direction of the branch.  
forkRatio - the ratio of the length of a branch to its parent's length, between 0 and 1.  
branches - the number of mini-trees that are randomally added to the tree.  
branchAngle - the angle the mini-tree makes with its parent branch from the direction of the branch.  
bowFreq - the number of bows (bends) in a branch. A trunk is set to have only one bow.  
bowHeight - the height of a bow from the line of direction of the branch.  
leavesOnBranch - the number of leaves to be added to one side of a branch.  
leafWHRatio - width to height ratio for a leaf between 0 and 1, closer to 0 longer leaf, closer to 1 more circular.  
leafMaterial - material used for all leaves.  
scene - BABYLON scene.  

## Examples of Results for some Parameters

![Forks and Boughs ](/img/extensions/trees/forks.png)

![Fork Angles ](/img/extensions/trees/forkAngle.png)

![Bows and Slices ](/img/extensions/trees/bows.png)

![Leaf Ratio ](/img/extensions/trees/leafRatio.png)


## TextureCanvas

![Fur material high](/img/extensions/texturecanvas.jpg)

## About

TextureCanvas is a texture on which other textures can be drawn.

## Usage

## Creating a canvas

To construct a TextureCanvas, you need to provide the size and the scene the texture will be used in:

```javascript
// A square texture
let canvas = new TextureCanvas(128, scene);
```

```javascript
// A rectangular texture
let canvas = new TextureCanvas({ width: 256, height: 128 }, scene);
```

Aditionally, you may pass three more parameters, which are:

-   _initTexture_, an initial texture to draw.
-   _onReady_, a function to be called when the canvas is ready.
-   _options_, an object with the properties _generateMipMaps_ (boolean) and _samplingMode_ (number)

<<<<<<< HEAD
PG: <Playground id="#9S5YZY#6" title="Texture Canvas" description="Example of a TextureCanavas" image=""/>
=======
<Playground id="#9S5YZY#6" title="Texture Canvas Example 2" description="Simple example of a texture canvas." image=""/>
>>>>>>> 0a9d2fb9c99e3447ee3122c8df9d8182db9c7827

## Draw using contexts

Contexts can be used to specify how a texture should be drawn. Multiple contexts can be created and used interchangably.

To draw a texture using the default context, you can call `canvas.drawTexture(myTexture)`.

You can create a context like this:

```javascript
let ctx = canvas.createContext();
```

A context has the following propteries:

| Name                    | Type                                                                                                                | Description                                                                                               |
| ----------------------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| diffuseTexture          | [Texture](/api/classes/babylon.texture)                                                    | The texture to draw.                                                                                      |
| diffuseSamplingRect     | [Rectangle](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#rectangle-class)         | The area of the diffuse texture to draw.                                                                  |
| drawRect                | [Rectangle](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#rectangle-class)         | The area to draw to.                                                                                      |
| rotation                | [Vector3Matrix](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#vector3matrix-class) | The rotation axes in radians to rotate the diffuse textures by (_z_ is 2D rotation).                      |
| pivotPoint              | [PivotPoint](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#pivotpoint-class)       | The rotation pivot point.                                                                                 |
| skewing                 | [UVector](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#uvector-class)             | The amount of skewing/shearing.                                                                           |
| opacityTexture          | [Texture](/api/classes/babylon.texture)                                                    | The texture to get the alpha values from.                                                                 |
| opacityTextureIntensity | number                                                                                                              | How much the opacity texture should be contributing to the difuse's alpha values, ranging from 0.0 to 1.0 |
| opacitySamplingRect     | [Rectangle](https://github.com/Poolminer/BabylonTextureCanvas/blob/master/DOCUMENTATION.md#rectangle-class)         | The area of the opacity texture to use.                                                                   |
| clearColor              | [Color4](/api/classes/babylon.color4)                                                      | The color to clear the canvas with.                                                                       |

And the following methods:

| Name                   | Parameters                                                                                         | Description                                                                                 |
| ---------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| reset                  |                                                                                                    | Resets the draw options to their default values.                                            |
| setDiffuseSamplingRect | u, v, width, height                                                                                | Sets which area of the diffuse texture to draw.                                             |
| setOpacitySamplingRect | u, v, width, height                                                                                | Sets which area of the opacity texture to draw.                                             |
| setDrawRect            | u, v, width, height                                                                                | Sets which area of the canvas to draw to — this area may be tranformed by rotating/skewing. |
| setRotation            | x?: number, y?: number, z?: number                                                                 | Sets the rotation axes in radians rotate the diffuse texture by (_z_ is 2D rotation).       |
| setPivotPoint          | pu?: number, pv?: number, isLocalSpace?: boolean                                                   | Sets the point around which to rotate the texture.                                          |
| setSkewing             | u, v                                                                                               | Sets how the texture should be skewed (shear transform).                                    |
| draw                   |                                                                                                    | Draws the diffuse texture, if set.                                                          |
| drawTexture            | diffuseTexture: Texture                                                                            | Draws a texture.                                                                            |
| clear                  |                                                                                                    | Clears the canvas using the set clearColor.                                                 |
| clone                  | cloneDrawOptions?:&nbsp;boolean, cloneTextures?:&nbsp;boolean, ref?:&nbsp;TextureCanvasDrawContext | Returns a clone of the context.                                                             |

Once the context is set up, simply call `ctx.draw()` or `ctx.drawTexture(myTexture)`

<<<<<<< HEAD
PG: <Playground id="#436DIW#2" title="Texture Canvas" description="Example of drawing on a TextureCanavas" image=""/>
=======
<Playground id="#436DIW#2" title="Texture Canvas Example 2" description="Texture canvas example with drawing using context." image=""/>
>>>>>>> 0a9d2fb9c99e3447ee3122c8df9d8182db9c7827

## Notes

Please note that uv-coordinates are used rather than pixel values.

## Rotation

Rotating a texture happens in three dimensions in the default coordinate system of Babylon.js, with _z_ being the forward axis.

You can set a pivot point to be in local space (that of the diffuse texture), or world space (that of the canvas), with `pivotPoint.isLocalSpace`.


Tree Generators

Coming next

Simple Pine Tree Generator

Learn about the simple pine tree generator extension.

SPS Tree Generator

Learn about the sps tree generator extension.

Quick Tree Generator

Learn about the quick tree generator extension.