Tree generator

Tree generator

Grows a procedural tree in three.js: oak, ash, aspen, pine or bush, at any age and season, swaying in the wind in a small world with sky, shadows, grass and rocks.

It's ez-tree by Dan Greenheck (MIT), steered by Patch's block controls. Every tree comes from a species preset, a seed and about 50 options (branch levels, angles, gnarl, twist, leaf count and tint, bark), so the same settings always grow the same tree. The live demo on this page shows one tree; drag in it to look around and scroll to zoom.

Use it in a game

The tree is ez-tree's Tree, a THREE.Group you add to any three.js scene:

Call applyTreeTextures(tree) from ez-tree/app/textures.js before tree.generate(), or it draws grey squares. That also needs urls.js and the @dgreenheck/ez-tree alias from vite.config. It ran the same on three 0.186.1 as on 0.170.

import { Tree } from '@dgreenheck/ez-tree';   // here: ez-tree/lib/index.js

const tree = new Tree();
tree.loadPreset('Oak Medium');      // or Ash, Aspen, Pine (Small, Medium, Large), Bush 1 to 3
tree.options.seed = 1234;
tree.options.leaves.tint = 0xffd9a0; // any option in ez-tree/lib/options.js
tree.generate();
scene.add(tree);

// every frame, for the wind
tree.update(elapsedSeconds);

• Bark and leaf textures load from textures/ (ez-tree/app/textures.js, applyTreeTextures). Ship the bark sets you use; each is about 4 MB at 1K.
• The world around it (sky, ground, grass, rocks, clouds) is ez-tree's demo world, ez-tree/app/environment.js. Use it as a starting point or leave it out.
• Forests: generate a few trees per species with different seeds and instance or clone them; generate() costs about 10 ms for an Oak Medium, but around 100 ms for a big one (a hundred branches off the trunk, three levels deep). Grow those in a worker, as demo.js does with tree-worker.js, so no frame stalls.
• demo.js shows how each control maps onto ez-tree's options (options.json says which path each sets), including the relative ones (age, leaves, gnarl) that carry across species.

Controls

The block page talks to the demo over the patch-block message channel (lib/patch-block.js). Setting species or size loads that preset and resets the options and seed; the demo then sends every value back in a state.

For people (the block page shows these):

On the page, for people: Tree (species), Size (size), Age, Season and Wind, with Grow and New tree. Every other control above is for agents.

Triggers: Grow (grow): Grows the tree from a sapling to its age, in two and a half seconds; New tree (reroll): A new seed: the same species, grown differently.

For agents (60 more, in recipe.json with every range and default):

Build it

npm install
npm run build        # writes recipe.json and options.json from ez-tree's presets, then dist/ (56 files, ~49 MB)

dist/ is the live demo exactly as released, with index.html at the top. Every file loads from the release itself: ez-tree's root paths are rewritten to relative ones (urls.js), and its rocks' Draco decoder, which upstream loads from Google's CDN, is copied from three.js into dist/draco/.

About 5 MB loads at start; the other bark sets load only when chosen (bark.type).

Credits and licences

• ez-tree by Dan Greenheck, MIT, © 2024 Daniel Greenheck (ez-tree/LICENSE): the tree library, its presets, the demo world, the leaf and ground textures and the grass, flower and rock models. Credit line: "ez-tree by Dan Greenheck (MIT), github.com/dgreenheck/ez-tree".
• Bark textures (public/textures/bark/): ambientCG, CC0 1.0 (public/textures/LICENSE.md lists each set's source).
• three.js: MIT, the three.js authors.
• Draco decoder (copied into dist/draco/ by the build): Google, Apache 2.0, as three.js ships it (LICENSE-draco.txt).
• The demo page and the code that steers ez-tree: Patch, MIT.

Code: MIT (LICENSE). Art: a mix. The bark is CC0; the leaf and ground textures and the models come with ez-tree under its MIT licence (its repo states no separate terms for the ground textures and models), so the project lists its art licence as MIT.