
![Generated Tree ](/img/extensions/trees/quick1.webp)

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 the trunk, 10 to 15.

radius - Radius of the trunk, 1 to 5.

trunkMaterial - Material used for the trunk.

leafMaterial - Material for the canopies.



![Generated Tree ](/img/extensions/trees/pine1.webp)

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 the tree.

trunkMaterial - Material used for the trunk.

leafMaterial - Material for the canopies.
 
scene - The BABYLON scene.  


![Generated Tree ](/img/extensions/trees/genTree.webp)

The function createTree uses the solid particle system to generate a tree.
A base tree is created, consisting of a trunk that forks into branches, which may then fork again or not.
This base tree is used in two different ways: 1. as the trunk and parent branches for the whole tree, and 2. with leaves added as a mini-tree that is added multiple times to the base trunk and parent branches to form the whole tree.

![Base Tree to Full Tree Sequence ](/img/extensions/trees/baseToFull.webp)

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 the tree trunk. The initial trunk radius is 1 unit.  
trunkTaper - Fraction of the starting radius used 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 means the trunk splits into branches, 2 means those branches also split into branches.  
forks - The number of branches a branch can split into. A value of 5 or more really slows generation.  
forkAngle - The angle a forked branch makes with its parent branch, measured from the branch direction.  
forkRatio - The ratio of a branch's length 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, measured from the branch direction.  
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 branch's direction line.  
leavesOnBranch - The number of leaves added to one side of a branch.  
leafWHRatio - Width-to-height ratio for a leaf, between 0 and 1. Closer to 0 means a longer leaf, and closer to 1 means a more circular one.  
leafMaterial - Material used for all leaves.  
scene - BABYLON scene.

## Examples of Results for some Parameters

![Forks and Boughs ](/img/extensions/trees/forks.webp)

![Fork Angles ](/img/extensions/trees/forkAngle.webp)

![Bows and Slices ](/img/extensions/trees/bows.webp)

![Leaf Ratio ](/img/extensions/trees/leafRatio.webp)



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.webp)
*[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.webp)
<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]);
```

Loading a PMX model with `ImportMeshAsync` always returns an array of length 1, so you can get the mesh with `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 use babylon-mmd through two step-by-step examples.


Tree Generators

Coming next

SPS Tree Generator

Learn about the sps tree generator extension.

Simple Pine Tree Generator

Learn about the simple pine tree generator extension.

Quick Tree Generator

Learn about the quick tree generator extension.