🌱 A web-based procedural plant generator that creates unique 3D plant models using deterministic algorithms.
🖥️Demo: https://kannmu.top/GenPlant/GenPlant/
- Deterministic Generation: Same seed always generates the same plant, ensuring reproducible results
- Procedural Modeling: Plant growth algorithms based on biological principles, simulating realistic plant morphology
- Real-time Rendering: High-quality 3D rendering and interaction using Three.js
- Pure Frontend: Runs entirely in the browser without server requirements
- Parametric Control: Rich parameter system controlling all aspects of plant generation
- Input Seed: Enter any number in the input field as the generation seed.
- Generate Plant: Click the "Generate Plant" button to create a plant.
- Random Generation: Click the "Random Plant" button to generate a random plant.
- Camera Control: Use the mouse to drag and rotate the view, scroll to zoom, and click "Reset Camera" to reset the view.
Note: This project uses ES6 modules and requires a local server to run. See the Development Guide for more details.
- Three.js: 3D rendering engine (loaded via CDN from
esm.sh). - ES6 Modules: Modular architecture.
- WebGL: Hardware-accelerated rendering.
- HTML5 Canvas: Rendering target.
User Interface (UI)
↓
Main Controller
↓
Generator Core
├── Parameters Generator
├── Structure Engine
├── Geometry Builder
└── Material Generator
↓
Renderer Module
↓
HTML5 Canvas
- Deterministic Random Number Generation: Uses the Mulberry32 algorithm to ensure reproducibility.
- Hierarchical Parameter System: Multi-layer parameter control from macro morphology to detail textures.
- Recursive Branch Generation: Recursive algorithms simulating natural plant branching.
- Procedural Materials: Parameter-based material and texture generation.
GenPlant/
├── index.html # Main page
├── style.css # Stylesheet
├── js/
│ ├── main.js # Main controller
│ ├── renderer.js # Renderer module
│ ├── config/
│ │ └── constants.js # Configuration constants
│ ├── generator/
│ │ ├── index.js # Generator entry point
│ │ ├── parameters.js # Parameter generation
│ │ ├── structure.js # Structure generation
│ │ ├── geometry.js # Geometry building
│ │ └── material.js # Material generation
│ └── util/
│ ├── random.js # Random utilities
│ ├── math.js # Math utilities
│ └── geometry.js # Geometry utilities
└── data/
└── defaultModel/ # Default model resources
- Global Seed: The root of all random processes.
- Archetype Parameters: Basic plant type and macro morphology.
- Environmental Parameters: Environmental influences like phototropism, gravity, and pruning factors.
- Structural Parameters: Geometric properties of the trunk and branches.
- Material Parameters: Colors, textures, and surface properties.
- Phototropism: Simulates plant growth towards light.
- Gravitropism: Simulates gravity's effect on plant morphology.
- Apical Dominance: Simulates the trunk's growth advantage over side branches.
- Natural Pruning: Simulates the natural elimination of internal branches.
Since ES6 modules are used, you need to run the project through an HTTP server:
# Using Python
python -m http.server 8000
# Using Node.js
npx serve .
# Using Live Server (VS Code extension)
# Right-click index.html -> Open with Live Server- Use ES6+ syntax.
- Modular design with a single responsibility principle.
- Detailed JSDoc comments.
- Unified error handling mechanisms.
- New Growth Algorithms: Implement new generation logic in
structure.js. - New Material Effects: Add new material types in
material.js. - New Geometric Features: Extend geometry generation in
geometry.js.
MIT License - See LICENSE file for details
Welcome to submit Issues and Pull Requests to improve the project!
GenPlant - Let every seed bloom into unique life 🌿