
![Generated Tree ](/img/extensions/trees/quick1.png)

The function QuickTreeGenerator uses a sphere with randomized vertices to generate a tree.

A demo can be found at: <Playground id="/#XG2DFK" title="Quick Tree Generator Example" description="Simple example of the quick tree generator."/>

## How to use it

Clone or copy the file https://github.com/BabylonJS/Extensions/tree/master/TreeGenerators/QuickTreeGenerator

```javascript
const 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.



![Generated Tree ](/img/extensions/trees/pine1.png)

The function simplePineGenerator uses a tube to generate a tree. 

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."/>

## How to use it.

Clone or copy the file https://github.com/BabylonJS/Extensions/tree/master/TreeGenerators/SimplePineGenerator

call the function


```javascript
const 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."/>

## How to use it

Clone or copy the file https://github.com/BabylonJS/Extensions/blob/master/TreeGenerators/SPSTreeGenerator/TreeGenerator.js

call the function

```javascript
const 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 randomly 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)



A series of extensions that generate 3D trees.



## **[babylon-mmd](https://github.com/noname0310/babylon-mmd)**: The MMD Loader and Runtime for Babylon.js

![Screenshot showing the MMD model in the playground](/img/extensions/mmdLoader/ModelWithInspector.png)
*[YYB Hatsune Miku_10th](https://www.deviantart.com/sanmuyyb/art/YYB-Hatsune-Miku-10th-DL-702119716) by YYB (modified)*

MMD is a Japanese 3D animation creation software that has its own 3D model format, PMD/PMX, and motion formats, VPD and VMD.

babylon-mmd is a library focused on loading PMX models and VMD motion files into babylon js and playing high-quality dance animations.

## Features

- Load PMX models and VMD motion files
- Solve IK, AppendTransform(a.k.a. Append, Grant) and RigidBody / Joint simulation
- MMD morph system
- MmdStandardMaterial for PMX models
- Support multiple models and motions
- Synced audio playback
- Player controls (play, pause, etc.)
- Optimized custom format for MMD models and motions

## Example

![Playground example of a MMD](/img/extensions/mmdLoader/PGScreenshot.png)
<Playground id="#028YR6#41" title="Complete MMD Example" description="Example of a MMD model with a VMD motion file and audio." />

*Music: [メランコリ・ナイト](https://youtu.be/y__uZETTuL8) by higma*

*Model: [YYB Hatsune Miku_10th](https://www.deviantart.com/sanmuyyb/art/YYB-Hatsune-Miku-10th-DL-702119716) by YYB (modified)*

*Motion / Camera: https://www.nicovideo.jp/watch/sm41164308 by ほうき堂*

## Usage

These are just a few code snippets, please refer to the documentation for full usage

### Installation

ES6 module:

```bash
npm add @babylonjs/core @babylonjs/havok babylon-mmd
```

UMD module using the html script tag:

```html
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/havok/HavokPhysics_umd.js"></script>
<script src="https://www.unpkg.com/babylon-mmd/umd/babylon.mmd.min.js"></script>
```

UMD module in Playgrounds:

```typescript
declare const BABYLONMMD: any;

await new Promise((resolve) => {
    const babylonMmdScript = document.createElement("script");
    babylonMmdScript.src = "https://www.unpkg.com/babylon-mmd/umd/babylon.mmd.min.js";
    document.head.appendChild(babylonMmdScript);
    babylonMmdScript.onload = resolve;
});
```

### Import PMX Model

<Playground id="#FY1L15#3" title="Import PMX Model" description="Example of importing a PMX model." />

```typescript
import "babylon-mmd/esm/Loader/pmxLoader"; // side effect import

const mmdMesh = await ImportMeshAsync("your_model_path.pmx", scene).then((result) => result.meshes[0]);
```

load PMX model by `ImportMeshAsync` always returns a 1-length array, so you can get the mesh by `result.meshes[0]`.

### Import VMD Motion

```typescript
const vmdLoader = new VmdLoader(scene);
const modelMotion = await vmdLoader.loadAsync("model_motion_1", "your_model_motion_path.vmd");
```

### Play MMD Animation

```typescript
const mmdRuntime = new MmdRuntime();
mmdRuntime.register(scene);
const mmdModel = mmdRuntime.createMmdModel(mmdMesh);
mmdModel.addAnimation(modelMotion);
mmdModel.setAnimation("model_motion_1");
```

## Documentation

In **[this document](https://noname0310.github.io/babylon-mmd/)**, you'll learn how to fully utilize babylon-mmd by creating two pieces of work together.
