Use your fingers or mouse to control model (hold shift key or use mouse wheel to zoom it). Press H-key to hide dat.GUI controls. Framerate is shown at the bottom. 3D WebGL Maple tree model. You can change ramiforms and couples of twigs by bending angles (in radian) and integer rotation step (rotation angle is π rot / 9). Thick forks should be corrected for small bending angles.

Procedural maple tree. One more tree with tripling twigs and hand made tall tree. See also
Mighty maple
Growing tree
simple animation
Gallery of trees

Modeling the Mighty Maple for Web

The page follows the old path of Jules Bloomenthal's "Modeling the Mighty Maple" work and goes further...

Twigs and Bezier cylinders

Bezier cylinders (tensor product (circle × quadratic Bezier spline) patches) are used to make twigs. Control circles R0 , R1 , R2 are thick blue lines and Bezier spline is the red curve below.
Twig origin is determined by 3 initial base vectors: tangent (l0 direction), normal (to the Fig.1 plane) and binormal (R0 direction). These 3 vectors and initial position are stored successively in b array. Twig shape is determined by two lengths l0 , l1 , bending angle θ and rotation angle φ (with respect to previous twig). R0 , R2 are twig radii. The middle control ellipse is roteded by the θ/2 angle. R1 is linear interpolated as R1 = (l0 R0 + l1 R2 )/(l0 + l1 ). Final base vectors and position are saved in b for the next twig or ramiform.
  function twig(b, th,nfi, R0,R2, l0,l1, stu,redu){}
Every semi-circle is subdivided in su = 33 points (we need semi-circles to make ramiforms). Step along circle parameter stu = 1,2,4,8 is used to reduce patch accuracy (e.g. for small twigs). Therefore rotation angle is π nfi stu/su. Parameter redu = true is used for twigs connecting circles with different stu.

Interactive quadratic Bezier spline and its basis functions are shown below.

See 4 segments twig demo.

Tree base

To make curved tree base radius of the bottom control "circle" is modulated as
    R(u) = R0 + .2 sin[7πu/(su - 1)].
To reproduce oscillations su = 33 is used.


Two twigs are connected smoothly to make ramiform. It is simplification of the Jules Bloomenthal's node (just C0 continuous). Four Bezier semi-cylinders are used to make it. 2 side patches (the pink and fawny ones below) are similar to twigs. Two more patches are used to make smooth top part of the ramiform.
OA line breaks BOC angle in half. Then control semi-ellipses OB, OC are rotated with respect to O by
    θ ± aΔθ,   θ = (θ1 + θ2 )/2,   Δθ = (θ1 - θ2 )/2,
where a ~ 0.2 - 0.3 is adjustable parameter. At last point A is determined as (C + B)/2 to connect top patches smoothly.

See ramiform node demo and one more example with thing side twig. Old XY Ramiform node.

Simple Lighting and Normals

By construction control circle radius is (almost) normal to Bezier cylinder. Therefore light intensity are calculated for control circles. Next intensities are spline interpolated for the whole surface.

Top oriented leaves

To avoid top pointed leaves for ty > 0 tangent directions are modified (lowered) as
    ty = ty (1 - ty2)
and normalized. Next leaves are rotated around the tangent direction to get maximum light from the top (y-direction). See leaves with simple procedural textures.

Procedural bark textures

Periodic random 2D Fractal noise and sin-strips are used to make simple bark textures:
    |noise(x,y) + sin(16πy)|.

Tree skeleton

To get a simple tree branching process is repeated recursevely with the same parameters. Therefore one can get easy many different random trees (with the same topology :)
See Tree skeleton

Simple tree animation

It is not difficult to bend trunk. Points are just displaced e.g. in the x-direction proportionally v-texture coordinate (or unused blue-color vertex attribute). But leaves motion is not very natural for strong wind, because they should change its orientation. Therefore one need to recalculate all points (every frame or key-frame).

Self-similar (recursive) growing tree simple animation.

Self organized tree

Random dichotomic "Sunny" tree with environment lights. New twig is accepted if it is not shadowed (there is no neighbour above or to the left, right, before or behind). 128x128 array is used to store top heights. Top height values make draft tree outline. It is used to make leaves shadowing.
7 trees demo with only top lights.

More realistic demo with shadows. A few tens of trees with fixed level of details overload PC. To make real forest we need adaptive GPU based LOD, spline patches and tesselation shaders (in WebGL 2+ :)

Tree with distance testing. New twig or leaf is rejected if there is a neighbour too near. Unfortunately distance checking is too expensive.

1000 remote trees demo. Instanced trees with simplified trunks and point cloud based foliation.

See also Toy garden.

updated 14 June 2016