@call-me-sensei/toonlab 0.1.1

package/src/vegetation/flowerSpecies.js

@@ -0,0 +1,260 @@
+// Common-flower species catalog + canvas head-sprite builder. Shared by the
+// tree lab's flower patch (canopy blossoms / ground stems) and the
+// StylizedFlower plant, so every flower feature agrees on what a "daisy" or
+// "poppy" looks like. Heads are procedural canvas sprites built from the
+// same traceLeafShapePath silhouettes as leaves — no texture assets.
+
+import * as THREE from 'three';
+import { mergeGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
+import { traceLeafShapePath } from './stylizedTreeFoliage.js';
+
+// Each species is a full head look: petal layers (outer → inner; `scale`
+// shrinks a layer, `shade` darkens the petal color, `offset` rotates it
+// between the previous layer's petals) plus an optional center disc.
+// `color`/`height` are the defaults the UI applies when the species is
+// picked — the user can still recolor or resize afterwards. `headDiameter`
+// is the real-world bloom diameter in meters, so plants keep believable
+// proportions at any plant size (headScale multiplies it). `faceUp` is the
+// up-bias mixed into each bloom's twig direction — a WORLD-FIXED facing
+// (blooms never track the camera): near 0 faces outward like a mature
+// sunflower, large opens to the sky like a tulip cup.
+// The first three ids (tulip/daisy/blossom) predate the catalog and must
+// keep their ids so saved recipes still resolve.
+export const FLOWER_SPECIES = Object.freeze([
+  {
+    color: [0.93, 0.4, 0.45],
+    height: 0.4,
+    icon: '🌷',
+    headDiameter: 0.09,
+    curl: 0.5,
+    faceUp: 2.5,
+    id: 'tulip',
+    label: 'Tulip',
+    layers: [{ count: 3, lift: 66, shape: 'round', width: 0.62 }, { count: 3, lift: 58, offset: 0.5, shade: 0.9, shape: 'round', width: 0.62 }],
+  },
+  {
+    center: { color: '#f0c437', radius: 13 },
+    color: [1, 0.98, 0.92],
+    height: 0.3,
+    icon: '🌼',
+    headDiameter: 0.06,
+    curl: 0.15,
+    faceUp: 1.2,
+    id: 'daisy',
+    label: 'Daisy',
+    layers: [{ count: 10, lift: 12, shape: 'teardrop', width: 0.3 }],
+  },
+  {
+    center: { color: '#f0c437', radius: 13 },
+    color: [0.97, 0.78, 0.86],
+    height: 0.3,
+    icon: '🌸',
+    headDiameter: 0.05,
+    curl: 0.2,
+    faceUp: 0.5,
+    id: 'blossom',
+    label: 'Cherry Blossom',
+    layers: [{ count: 5, lift: 24, shape: 'round', width: 0.5 }],
+  },
+  {
+    center: { color: '#5c3a1e', radius: 26 },
+    color: [0.99, 0.78, 0.18],
+    height: 0.85,
+    icon: '🌻',
+    headDiameter: 0.28,
+    curl: 0.1,
+    faceUp: 0.25,
+    id: 'sunflower',
+    label: 'Sunflower',
+    layers: [
+      { count: 16, lift: 10, shape: 'teardrop', width: 0.24 },
+      { count: 16, lift: 16, offset: 0.5, scale: 0.82, shade: 0.8, shape: 'teardrop', width: 0.24 },
+    ],
+  },
+  {
+    center: { color: '#2f2a33', radius: 11 },
+    color: [0.86, 0.19, 0.14],
+    height: 0.45,
+    icon: '🌺',
+    headDiameter: 0.1,
+    curl: 0.3,
+    faceUp: 1.0,
+    id: 'poppy',
+    label: 'Poppy',
+    layers: [{ count: 4, lift: 40, shape: 'round', width: 1.0 }],
+  },
+  {
+    color: [0.82, 0.16, 0.28],
+    height: 0.5,
+    icon: '🌹',
+    headDiameter: 0.09,
+    curl: 0.45,
+    faceUp: 0.55,
+    id: 'rose',
+    label: 'Rose',
+    layers: [
+      { count: 7, lift: 30, shape: 'round', width: 0.62 },
+      { count: 5, lift: 48, offset: 0.5, scale: 0.8, shade: 0.8, shape: 'round', width: 0.62 },
+      { count: 3, lift: 68, offset: 0.25, scale: 0.55, shade: 0.62, shape: 'round', width: 0.62 },
+    ],
+  },
+  {
+    center: { color: '#3b3f7a', radius: 9 },
+    color: [0.35, 0.47, 0.9],
+    height: 0.4,
+    icon: '💠',
+    headDiameter: 0.05,
+    curl: 0.2,
+    faceUp: 0.9,
+    id: 'cornflower',
+    label: 'Cornflower',
+    layers: [{ count: 8, lift: 26, shape: 'maple', width: 0.42 }],
+  },
+  {
+    center: { color: '#e8a616', radius: 11 },
+    color: [0.99, 0.85, 0.2],
+    height: 0.25,
+    icon: '✿',
+    headDiameter: 0.045,
+    curl: 0.3,
+    faceUp: 1.2,
+    id: 'buttercup',
+    label: 'Buttercup',
+    layers: [{ count: 5, lift: 36, shape: 'round', width: 0.55 }],
+  },
+]);
+
+function channelHex(channel) {
+  return Math.round(Math.min(Math.max(channel, 0), 1) * 255).toString(16).padStart(2, '0');
+}
+
+function toRgb(color) {
+  if (Array.isArray(color)) return color;
+  const int = parseInt(String(color).replace('#', ''), 16);
+  return [((int >> 16) & 255) / 255, ((int >> 8) & 255) / 255, (int & 255) / 255];
+}
+
+function rgbHex(rgb, shade = 1) {
+  return `#${rgb.map((channel) => channelHex(channel * shade)).join('')}`;
+}
+
+function paintGeometry(geometry, [r, g, b]) {
+  const count = geometry.getAttribute('position').count;
+  const colors = new Float32Array(count * 3);
+  for (let i = 0; i < count; i += 1) {
+    colors[i * 3] = r;
+    colors[i * 3 + 1] = g;
+    colors[i * 3 + 2] = b;
+  }
+  geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+  return geometry;
+}
+
+/**
+ * Builds a real 3D head mesh for a species (EZ-Tree ships small flower
+ * MODELS; ours are procedural): curved petal planes arranged in rings —
+ * `lift` degrees above flat per layer (a daisy ring lies almost flat, a
+ * tulip's petals stand up into a cup), species `curl` bowing each petal
+ * toward the axis — plus a center dome. Unit size (head diameter ≈ 1,
+ * axis = +Z), vertex-colored, ready for a vertexColors toon material.
+ *
+ * @param {Object} [options] `species` (FLOWER_SPECIES id) and optional
+ *   `color` petal override (sRGB triplet or hex).
+ * @returns {THREE.BufferGeometry} merged head geometry.
+ */
+export function createFlowerHeadGeometry({ species, color } = {}) {
+  const spec = FLOWER_SPECIES.find((entry) => entry.id === species)
+    ?? FLOWER_SPECIES[0];
+  const rgb = toRgb(color ?? spec.color);
+  const curl = spec.curl ?? 0.2;
+  // Sprite center radii are px of a 128px canvas; 64px = unit head radius 0.5.
+  const centerRadius = spec.center ? (spec.center.radius / 64) * 0.5 : 0;
+  const petalBase = centerRadius * 0.75 + 0.02;
+  const pieces = [];
+
+  for (const layer of spec.layers) {
+    const lift = THREE.MathUtils.degToRad(layer.lift ?? 20);
+    const layerScale = layer.scale ?? 1;
+    const length = Math.min(
+      (0.5 * layerScale - petalBase) / Math.max(Math.cos(lift), 0.35),
+      0.8 * layerScale,
+    );
+    const width = length * (layer.width ?? 0.5);
+    const shade = layer.shade ?? 1;
+    const petalColor = [rgb[0] * shade, rgb[1] * shade, rgb[2] * shade];
+
+    for (let i = 0; i < layer.count; i += 1) {
+      const petal = new THREE.PlaneGeometry(width, length, 1, 5);
+      petal.translate(0, length / 2, 0); // base at the origin
+      const position = petal.getAttribute('position');
+      for (let v = 0; v < position.count; v += 1) {
+        const t = position.getY(v) / length;
+        // Rounded petal silhouette + curl bowing the tip toward the axis.
+        position.setX(v, position.getX(v) * Math.sin(Math.PI * (0.12 + 0.88 * t)) ** 0.7);
+        position.setZ(v, curl * length * t * t);
+      }
+      petal.computeVertexNormals();
+      const azimuth = ((i + (layer.offset ?? 0)) / layer.count) * Math.PI * 2;
+      petal.applyMatrix4(new THREE.Matrix4()
+        .makeRotationZ(azimuth)
+        .multiply(new THREE.Matrix4().makeTranslation(0, petalBase, 0))
+        .multiply(new THREE.Matrix4().makeRotationX(lift)));
+      pieces.push(paintGeometry(petal, petalColor));
+    }
+  }
+
+  if (spec.center) {
+    const dome = new THREE.SphereGeometry(centerRadius, 10, 5, 0, Math.PI * 2, 0, Math.PI / 2);
+    dome.rotateX(Math.PI / 2);
+    dome.scale(1, 1, 0.45);
+    pieces.push(paintGeometry(dome, toRgb(spec.center.color)));
+  }
+
+  const merged = mergeGeometries(pieces);
+  pieces.forEach((piece) => piece.dispose());
+  return merged;
+}
+
+/**
+ * Builds a 128×128 head sprite for a species (or a hand-drawn petal
+ * outline). `petal.preset` is a FLOWER_SPECIES id or 'custom' (with
+ * `petal.outline`); `color` overrides the species petal color (sRGB triplet
+ * or hex — falls back to the species default when null).
+ */
+export function createFlowerHeadTexture({ color, petal }) {
+  const spec = FLOWER_SPECIES.find((entry) => entry.id === petal?.preset)
+    ?? FLOWER_SPECIES[0];
+  const outline = petal?.preset === 'custom' ? petal.outline : null;
+  const rgb = toRgb(color ?? spec.color);
+  const layers = outline
+    ? [{ count: 5, shape: 'custom', width: 0.7 }]
+    : spec.layers;
+
+  const canvas = document.createElement('canvas');
+  canvas.width = 128;
+  canvas.height = 128;
+  const ctx = canvas.getContext('2d');
+  ctx.translate(64, 64);
+  layers.forEach((layer) => {
+    const scale = layer.scale ?? 1;
+    ctx.fillStyle = rgbHex(rgb, layer.shade ?? 1);
+    for (let i = 0; i < layer.count; i += 1) {
+      ctx.save();
+      ctx.rotate(((i + (layer.offset ?? 0)) / layer.count) * Math.PI * 2);
+      ctx.translate(0, -30 * scale);
+      traceLeafShapePath(ctx, layer.shape, 58 * scale, 58 * scale * layer.width, outline);
+      ctx.fill();
+      ctx.restore();
+    }
+  });
+  const center = outline ? { color: '#f0c437', radius: 13 } : spec.center;
+  if (center) {
+    ctx.fillStyle = center.color;
+    ctx.beginPath();
+    ctx.arc(0, 0, center.radius, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  const texture = new THREE.CanvasTexture(canvas);
+  texture.colorSpace = THREE.SRGBColorSpace;
+  return texture;
+}

package/src/vegetation/index.js

@@ -0,0 +1,10 @@
+// Stylized vegetation barrel. Import from '@call-me-sensei/toonlab/vegetation'.
+export * from './stylizedGrass.js';
+export * from './stylizedFlowers.js';
+export * from './flowerSpecies.js';
+export * from './stylizedTree.js';
+export * from './stylizedTreeFoliage.js';
+export * from './stylizedBush.js';
+export * from './stylizedFlower.js';
+export * from './treeRecipe.js';
+export * from './treeExport.js';

package/src/vegetation/stylizedBush.js

@@ -0,0 +1,136 @@
+import * as THREE from 'three';
+
+import {
+  createCanopyBlobs,
+  createTreeFoliageGeometry,
+  createTreeFoliageMaterials,
+  setCanopyCloudShadow,
+  setCanopySceneShadow,
+  setCanopySun,
+  setCanopyWind,
+  tickCanopyTime,
+} from './stylizedTreeFoliage.js';
+import {
+  TREE_RECIPE_SCHEMA,
+  TREE_RECIPE_VERSION,
+  serializableTreeOptions,
+} from './stylizedTree.js';
+
+// Trunkless plant: the tree's leaf-card canopy resting on the ground —
+// bushes, shrubs, hedges. Same deterministic seeding and the same runtime
+// API as StylizedTree (setSun/setWind/update/...), so scenes and the tree
+// designer treat plants polymorphically:
+//
+//   const bush = new StylizedBush({ size: 0.8, seed: 4, canopyColor: 0x4da258 });
+//   scene.add(bush);
+//   bush.update(delta);
+//
+//   width / depth — X / Z reach multipliers (hedges: width up, depth down)
+//   flatten       — vertical squash; low values give low, spreading shrubs
+//   canopyLayout  — extra createCanopyBlobs overrides (lobeCount, spread, ...)
+//   canopy        — createTreeFoliageGeometry options (cardCount, ...)
+//   foliage       — createTreeFoliageMaterials options (cutoff, wind, sun, ...)
+export class StylizedBush extends THREE.Group {
+  constructor(options = {}) {
+    super();
+    const {
+      size = 1,
+      seed = 1,
+      canopyColor = 0x4da258,
+      canopyPalette = {},
+      width = 1.3,
+      depth = 1.1,
+      flatten = 0.35,
+      leafDensity = 1,
+      canopy = {},
+      canopyLayout = {},
+      foliage = {},
+    } = options;
+    this.name = 'StylizedBush';
+    // Kept for toJSON(); not cloned (see StylizedTree.config).
+    this.config = options;
+
+    // Squat layout: smaller core and tighter lobes than a tree crown, so a
+    // size-1 bush reads hip-high rather than like a floating tree top.
+    const coreRadius = canopyLayout.coreRadius ?? 0.7;
+    const blobs = canopy.blobs ?? createCanopyBlobs({
+      seed,
+      width,
+      depth,
+      flatten,
+      spread: 1.0,
+      coreRadius,
+      lobeRadiusRange: [0.35, 0.6],
+      ...canopyLayout,
+    });
+    const geometry = createTreeFoliageGeometry({
+      seed: seed * 7.31 + 1.7,
+      leafDensity,
+      attachments: null,
+      coverageScale: size,
+      cardSizeRange: [0.7, 1.1],
+      ...canopy,
+      blobs,
+    });
+    const materials = createTreeFoliageMaterials({
+      color: canopyColor,
+      palette: canopyPalette,
+      seed,
+      ...foliage,
+    });
+
+    this.canopyMesh = new THREE.Mesh(geometry, materials.material);
+    this.canopyMesh.customDepthMaterial = materials.depthMaterial;
+    this.canopyMesh.castShadow = true;
+    this.canopyMesh.receiveShadow = true;
+    this.canopyMesh.frustumCulled = false;
+    // Keep the loaded-scene material adapter from replacing the leaf shader.
+    this.canopyMesh.userData.environmentShaderExclude = true;
+    // Rest the mass on the ground instead of centering it on the origin.
+    this.canopyMesh.position.y = coreRadius * 0.85;
+
+    this.add(this.canopyMesh);
+    this.scale.setScalar(size);
+  }
+
+  setSun(options) {
+    setCanopySun(this.canopyMesh.material.uniforms, options ?? {});
+    return this;
+  }
+
+  setWind(options) {
+    setCanopyWind(this.canopyMesh.material.uniforms, options);
+    return this;
+  }
+
+  setSceneShadow(options) {
+    setCanopySceneShadow(this.canopyMesh.material.uniforms, options);
+    return this;
+  }
+
+  setCloudShadow(options) {
+    setCanopyCloudShadow(this.canopyMesh.material.uniforms, options);
+    return this;
+  }
+
+  update(delta) {
+    tickCanopyTime(this.canopyMesh.material.uniforms, delta);
+    return this;
+  }
+
+  // Recipe document that rebuilds this exact bush (see StylizedTree.toJSON).
+  toJSON() {
+    return {
+      schema: TREE_RECIPE_SCHEMA,
+      version: TREE_RECIPE_VERSION,
+      type: 'bush',
+      options: serializableTreeOptions(this.config),
+    };
+  }
+
+  dispose() {
+    this.canopyMesh.geometry.dispose();
+    this.canopyMesh.material.dispose();
+    this.canopyMesh.customDepthMaterial?.dispose();
+  }
+}

package/src/vegetation/stylizedFlower.js

@@ -0,0 +1,213 @@
+import * as THREE from 'three';
+
+import {
+  StylizedTree,
+  TREE_RECIPE_SCHEMA,
+  TREE_RECIPE_VERSION,
+  serializableTreeOptions,
+} from './stylizedTree.js';
+import { FLOWER_SPECIES, createFlowerHeadGeometry } from './flowerSpecies.js';
+import {
+  createFlowerBloomNodeMaterial,
+  createFlowerStemNodeMaterial,
+} from '../shaders-tsl/flower.js';
+
+// Horizontal heading of the lab's default sun ([0.35, 0.75, 0.5]): blooms
+// bake their facing toward it at build time (heliotropism), fixed in world
+// space.
+const SUN_HEADING = new THREE.Vector3(0.45, 0, 0.65).normalize();
+const UP = new THREE.Vector3(0, 1, 0);
+
+// Deterministic head-orientation rng (mulberry32-alike, tiny) — same recipe,
+// same blooms.
+function rng(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = (state + 0x6d2b79f5) >>> 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+// A flowering plant as a first-class plant type: the full StylizedTree
+// machinery — its own stem (trunk), branch skeleton, and leaf-card tufts —
+// re-proportioned to read as a flower, with bloom heads from the
+// FLOWER_SPECIES catalog at every branch tip. Same polymorphic runtime API
+// as StylizedTree/StylizedBush (setSun/setWind/update/toJSON/dispose), so
+// scenes and the tree designer treat all plant types alike:
+//
+//   const flower = new StylizedFlower({ species: 'sunflower', seed: 4 });
+//   scene.add(flower);
+//   flower.update(delta);
+//
+//   species        — FLOWER_SPECIES id ('daisy', 'poppy', 'rose', ...)
+//   headColor      — petal color override (sRGB triplet); null = species default
+//   headScale      — bloom size relative to the leaf tufts
+//   stemColor      — toon stem/branch color
+//   ...rest        — any StylizedTree option (trunk, skeleton, canopy, ...)
+export class StylizedFlower extends StylizedTree {
+  constructor(options = {}) {
+    const source = options && typeof options === 'object' ? options : {};
+    const {
+      species = 'daisy',
+      headColor = null,
+      headScale = 1,
+      stemColor = 0x4d8a3f,
+      ...treeOptions
+    } = source;
+
+    // Flowering-plant proportions layered over the incoming tree options:
+    // whatever trunk/skeleton settings arrive, the stem stays thin and green
+    // and the leaf tufts stay small, so switching a tree recipe's type to
+    // 'flower' always reads as a flower rather than a green tree.
+    const trunk = { ...treeOptions.trunk };
+    // Stem height is capped in WORLD meters (branches and blooms extend
+    // past the stem, so a 1.2m stem tops out around head height): tree
+    // recipes switched to 'flower' stay human-scale instead of inheriting
+    // a tree-sized trunk.
+    const plantSize = treeOptions.size ?? 1;
+    trunk.height = Math.min(trunk.height ?? 1.2, 1.2 / Math.max(plantSize, 0.1));
+    trunk.radiusBottom = Math.min(trunk.radiusBottom ?? 0.045, 0.07);
+    super({
+      canopyColor: 0x4d8a3f,
+      leafDensity: 0.7,
+      ...treeOptions,
+      trunk,
+      canopyScale: Math.min(treeOptions.canopyScale ?? 0.45, 0.7),
+      canopy: {
+        cardSizeRange: [0.32, 0.5],
+        cardsPerCluster: 4,
+        clusterRadius: 0.2,
+        ...treeOptions.canopy,
+      },
+      skeleton: {
+        radialSegments: 6,
+        tipRadius: 0.012,
+        minLimbRadius: 0.01,
+        ...treeOptions.skeleton,
+      },
+      trunkMaterial: createFlowerStemNodeMaterial({
+        color: stemColor,
+        height: trunk.height,
+      }),
+    });
+    this.name = 'StylizedFlower';
+    // super() stored the re-proportioned options; toJSON must round-trip the
+    // ORIGINAL flower options so the recipe rebuilds this exact plant.
+    this.config = source;
+
+    // Blooms grow from branch tips. foliageAttachments are canopyMesh-local
+    // and index-aligned with the leaf tufts, so blooms sit where the twigs
+    // end and inherit the canopy anchor/scale by parenting. Heads are
+    // camera-facing billboard instances (iOrigin/iInfo), so a bloom never
+    // renders as an edge-on streak.
+    const spec = FLOWER_SPECIES.find((entry) => entry.id === species)
+      ?? FLOWER_SPECIES.find((entry) => entry.id === 'daisy');
+    const attachments = this.foliageAttachments;
+    const size = this.settings.tree.size;
+    const canopyScale = this.canopyMesh.scale.x || 1;
+    // Real-world bloom size: species headDiameter is in METERS, converted to
+    // canopy-local units, so a daisy stays palm-sized and a sunflower
+    // plate-sized no matter how the plant is scaled or the crown laid out.
+    const headSize = (spec.headDiameter ?? 0.08) * headScale
+      / Math.max(size * canopyScale, 1e-3);
+
+    const random = rng((this.settings.tree.seed * 131 + 17) >>> 0);
+    const direction = new THREE.Vector3();
+    const zAxis = new THREE.Vector3(0, 0, 1);
+    const placed = [];
+    attachments.forEach((attachment) => {
+      const jitter = 0.8 + random() * 0.4;
+      const phase = random();
+      // Clear of the leaf tuft along the twig so leaf cards don't slice
+      // through the petals: half a head plus a tuft-sized clearance
+      // (clusterRadius + card reach, in canopy-local units).
+      direction.copy(attachment.direction ?? zAxis).normalize();
+      const center = attachment.position.clone()
+        .addScaledVector(direction, headSize * jitter * 0.5 + 0.3);
+      const radius = (headSize * jitter) / 2;
+      // Bloom-vs-bloom collision: skip heads that would overlap an already
+      // placed one, so crowded twig clusters read as distinct flowers.
+      const collides = placed.some((other) =>
+        other.center.distanceTo(center) < (other.radius + radius) * 0.85);
+      if (collides) return;
+      // World-fixed facing (never follows the camera): heliotropism — every
+      // bloom leans toward the scene's sun heading (the lab's default sun
+      // azimuth), lifted by the species' faceUp bias and varied a little by
+      // its own twig. Sunflowers all face the sun near-horizontally; tulip
+      // cups open skyward.
+      const tilt = SUN_HEADING.clone()
+        .addScaledVector(direction, 0.35)
+        .add(UP.clone().multiplyScalar(spec.faceUp ?? 0.8))
+        .normalize();
+      placed.push({ center, phase, radius, size: headSize * jitter, tilt });
+    });
+
+    // Leaf/bloom collision: collapse any leaf card whose billboard extent
+    // would slice through a bloom. Cards expand aInfo.x around their center
+    // in the vertex shader, so zeroing aInfo.x on all four corners removes
+    // the card without touching the index buffer.
+    if (placed.length) {
+      const cardCenters = this.canopyMesh.geometry.getAttribute('position');
+      const cardInfo = this.canopyMesh.geometry.getAttribute('aInfo');
+      const cardCenter = new THREE.Vector3();
+      for (let vertex = 0; vertex < cardCenters.count; vertex += 4) {
+        cardCenter.fromBufferAttribute(cardCenters, vertex);
+        const reach = cardInfo.getX(vertex) * 0.45;
+        const hit = placed.some((head) =>
+          cardCenter.distanceTo(head.center) < head.radius + reach);
+        if (hit) {
+          for (let corner = 0; corner < 4; corner += 1) cardInfo.setX(vertex + corner, 0);
+        }
+      }
+      cardInfo.needsUpdate = true;
+    }
+
+    // Real 3D bloom meshes (EZ-Tree-style flower models, built procedurally):
+    // curved petals + center dome, vertex-colored, world-anchored — each
+    // bloom faces up-and-out along its twig like a real flower head instead
+    // of tracking the camera.
+    const headMaterial = createFlowerBloomNodeMaterial({
+      windSpeed: 1.1,
+      windStrength: headSize * 0.04,
+    });
+    const heads = new THREE.InstancedMesh(
+      createFlowerHeadGeometry({ color: headColor, species: spec.id }),
+      headMaterial, placed.length);
+    heads.name = 'StylizedFlowerHeads';
+    heads.frustumCulled = false;
+    heads.userData.environmentShaderExclude = true;
+
+    const matrix = new THREE.Matrix4();
+    const facing = new THREE.Quaternion();
+    const roll = new THREE.Quaternion();
+    const scale = new THREE.Vector3();
+    placed.forEach((head, index) => {
+      direction.copy(head.tilt);
+      facing.setFromUnitVectors(zAxis, direction);
+      roll.setFromAxisAngle(direction, head.phase * Math.PI * 2);
+      scale.setScalar(head.size);
+      matrix.compose(head.center, roll.multiply(facing), scale);
+      heads.setMatrixAt(index, matrix);
+    });
+
+    this.headsMesh = heads;
+    this.canopyMesh.add(heads);
+  }
+
+  toJSON() {
+    return {
+      schema: TREE_RECIPE_SCHEMA,
+      version: TREE_RECIPE_VERSION,
+      type: 'flower',
+      options: serializableTreeOptions(this.config),
+    };
+  }
+
+  dispose() {
+    this.headsMesh.geometry.dispose();
+    this.headsMesh.material.dispose();
+    super.dispose();
+  }
+}