Back

L-System Apple Tree

March 2021

project code webgl typescript

I created a procedural apple tree generator based on L-Systems with the base grammar of F = F[-F]F[+F] and slowly introduced increasing elements of variation such as leaves, apples, and pseudo-random branch rotations. It was both fascinating and challenging to try to mimic organic structures using math and algorithms.

Live Demo →

Instance Rendering

The branches of the tree are made up of many small cylinders that are instance rendered on top of each other. I created a Turtle class that marches along a path specified by the L-System grammar and determines the size and orientation of a given cylinder instance. The leaves and apples are also instance rendered similarly.

User Parameters

The branch rotation angles are based on a seeded noise function, which means the tree only changes when prompted by the user’s seed input. The user may also increase or decrease the number of recursive calls in the L-System with the iterations control. I implemented the apple density control by simply adding a probability value and conditionally rendering an apple based on the apple density value. The branch thickness on the other hand was a bit more tricky to implement.

Since thickness is an attribute that belongs to the individual instances of each cylinder in the tree, I made the branch thickness a variable in my Turtle class. This allowed me to scale the cylinder up or down depending on how deep in the recursion the turtle was.

Final Touches

To add a bit of visual flair, I added FBM-based clouds to the background referencing this shader.

I also implemented textures by loading in my own images and adding UV coordinates to my vertex and fragment shaders. To increase variation even further, I sample 2 different textures for both the apples and the leaves.