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.
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.
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.
Ramiform
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.
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.
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.
