@deck.gl-community/three 9.2.5 → 9.3.0-beta.1

package/README.md

@@ -1,6 +1,9 @@
 # @deck.gl-community/three
 
-A collection of deck.gl layers powered by [Three.js](https://threejs.org/), giving access to Three.js geometry primitives, materials, and scene graph tooling directly inside deck.gl visualisations.
+[![NPM Version](https://img.shields.io/npm/v/@deck.gl-community/three.svg)](https://www.npmjs.com/package/@deck.gl-community/three)
+[![NPM Downloads](https://img.shields.io/npm/dw/@deck.gl-community/three.svg)](https://www.npmjs.com/package/@deck.gl-community/three)
+
+A collection of deck.gl layers powered by [Three.js](https://threejs.org/), giving access to Three.js geometry primitives and scene graph tooling directly inside deck.gl visualisations.
 
 `TreeLayer` is the first layer in this module — a fully parametric 3D tree renderer backed by Three.js `BufferGeometry` and rendered via deck.gl's `SimpleMeshLayer`.
 
@@ -8,7 +11,7 @@ A collection of deck.gl layers powered by [Three.js](https://threejs.org/), givi
 
 | Layer | Description |
 |-------|-------------|
-| [`TreeLayer`](#treelayer) | Procedural 3D trees with 5 species silhouettes and season-driven colours |
+| [`TreeLayer`](#treelayer) | Procedural 3D trees with 5 species silhouettes, season colours, and crop/fruit visualisation |
 
 ---
 
@@ -19,10 +22,13 @@ Renders richly configurable 3D trees at geographic positions using procedural ge
 ### Features
 
 - **5 tree species / silhouettes**: pine (tiered cones), oak (sphere), palm (flat crown), birch (narrow oval), cherry (round sphere)
+- **Organic canopy geometry**: smooth low-frequency vertex jitter baked into each species mesh at init time — no runtime cost, no mesh gaps
+- **Per-tree variety**: position-derived random bearing and asymmetric XY scale give every instance a unique silhouette with zero extra draw calls
 - **Parametric geometry**: per-instance height, trunk-to-canopy ratio, trunk radius, canopy radius
 - **Season-driven colours**: spring / summer / autumn / winter palettes with species-specific defaults
 - **Explicit colour overrides**: `getTrunkColor` and `getCanopyColor` accessors for full control
-- **Pine tier density**: `getBranchLevels` (1–5) controls the number of overlapping cone tiers
+- **Pine tier density**: `getBranchLevels` (1–5) controls the number of overlapping cone tiers; each tier drifts progressively for a windswept look
+- **Crop / fruit / flower visualisation**: `getCrop` places coloured spheres in the outer canopy volume and scattered on the ground beneath the tree
 - **Global scale factor**: `sizeScale` multiplier for easy zoom-level adjustment
 
 ## Install
@@ -35,47 +41,155 @@ yarn add @deck.gl-community/three
 
 > Three.js is a peer dependency pulled in automatically.
 
-### Usage
+## Usage
 
 ```tsx
 import {TreeLayer} from '@deck.gl-community/three';
+import type {CropConfig} from '@deck.gl-community/three';
 
 const layer = new TreeLayer({
   id: 'trees',
   data: myForestData,
   getPosition: d => d.coordinates,
-  getTreeType: d => d.species,       // 'pine' | 'oak' | 'palm' | 'birch' | 'cherry'
+  getTreeType: d => d.species,        // 'pine' | 'oak' | 'palm' | 'birch' | 'cherry'
   getHeight: d => d.heightMetres,
   getTrunkRadius: d => d.trunkRadius,
   getCanopyRadius: d => d.canopyRadius,
   getTrunkHeightFraction: d => 0.35,
   getSeason: d => 'autumn',
+  getCrop: d => d.crop,               // CropConfig | null
   sizeScale: 1,
   pickable: true,
 });
 ```
 
+### Crop / fruit / flower example
+
+```tsx
+import type {CropConfig} from '@deck.gl-community/three';
+
+// Orange orchard
+const citrusCrop: CropConfig = {
+  color: [255, 140, 0, 255],  // orange
+  count: 30,                  // live fruits in canopy
+  droppedCount: 10,           // fallen fruits on ground (rendered at 45% opacity)
+  radius: 0.12,               // metres per fruit sphere (scaled by sizeScale)
+};
+
+// Cherry blossom (flowering stage — just use flower colour)
+const blossomCrop: CropConfig = {
+  color: [255, 200, 220, 200],
+  count: 25,
+  droppedCount: 8,
+  radius: 0.07,
+};
+```
+
+Crop positions are seeded deterministically from each tree's geographic coordinates, so they are stable across re-renders and sizeScale changes.
+
+---
+
 ## TreeLayer Props
 
+### Geometry
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `getPosition` | accessor → `[lon, lat]` | `d.position` | Tree base position |
 | `getElevation` | accessor → `number` | `0` | Base elevation in metres |
 | `getTreeType` | accessor → `TreeType` | `'pine'` | Silhouette variant |
 | `getHeight` | accessor → `number` | `10` | Total height (metres) |
-| `getTrunkHeightFraction` | accessor → `number` | `0.35` | Trunk fraction of total height |
+| `getTrunkHeightFraction` | accessor → `number` | `0.35` | Fraction of total height occupied by trunk (0–1) |
 | `getTrunkRadius` | accessor → `number` | `0.5` | Trunk base radius (metres) |
 | `getCanopyRadius` | accessor → `number` | `3` | Canopy horizontal radius (metres) |
+| `getBranchLevels` | accessor → `number` | `3` | Pine tier count (1–5) |
+| `sizeScale` | `number` | `1` | Global size multiplier applied to all dimensions |
+
+### Colour
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
 | `getTrunkColor` | accessor → `Color\|null` | `null` | Explicit trunk RGBA; `null` uses species default |
 | `getCanopyColor` | accessor → `Color\|null` | `null` | Explicit canopy RGBA; `null` uses season default |
-| `getSeason` | accessor → `Season` | `'summer'` | Drives default canopy colour |
-| `getBranchLevels` | accessor → `number` | `3` | Pine tier count (1–5) |
-| `sizeScale` | `number` | `1` | Global size multiplier |
+| `getSeason` | accessor → `Season` | `'summer'` | Drives default canopy colour when no explicit colour is given |
 
-## TreeType values
+### Crops
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `getCrop` | accessor → `CropConfig\|null` | `null` | Crop configuration per tree. `null` renders no crops |
 
-`'pine'` · `'oak'` · `'palm'` · `'birch'` · `'cherry'`
+---
+
+## Types
+
+### `TreeType`
+
+```ts
+type TreeType = 'pine' | 'oak' | 'palm' | 'birch' | 'cherry';
+```
 
-## Season values
+### `Season`
+
+```ts
+type Season = 'spring' | 'summer' | 'autumn' | 'winter';
+```
+
+### `CropConfig`
+
+Configuration for crop/fruit/flower visualisation on a single tree.
+
+```ts
+type CropConfig = {
+  /** Colour of each crop sphere [r, g, b, a]. */
+  color: Color;
+
+  /** Number of crop spheres placed in the outer canopy volume (live / in-tree). */
+  count: number;
+
+  /**
+   * Number of crop spheres scattered on the ground within the canopy footprint
+   * (dropped / fallen). Rendered at ~45 % opacity relative to `color`.
+   * @default 0
+   */
+  droppedCount?: number;
+
+  /**
+   * Radius of each individual crop sphere in metres (scaled by `sizeScale`).
+   * Typical values: 0.06–0.15 m for fruit, 0.05–0.10 m for nuts/blossoms.
+   */
+  radius: number;
+};
+```
+
+#### Crop placement details
+
+- **Live crops** are placed on the outer 90–102 % of the canopy ellipsoid surface (equatorial band only — never on the crown or base) so they appear nestled into the canopy with tips just visible.
+- **Dropped crops** are scattered uniformly across the ground disk within the canopy footprint at a fixed slight elevation (0.05 m), rendered semi-transparent.
+- All positions are derived deterministically from the tree's geographic coordinates via a seeded PRNG, so they are stable across re-renders and `sizeScale` changes.
+
+---
+
+## Default canopy colours
+
+| Species | Spring | Summer | Autumn | Winter |
+|---------|--------|--------|--------|--------|
+| pine | `[34, 100, 34]` | `[0, 64, 0]` | `[0, 64, 0]` | `[0, 55, 0]` |
+| oak | `[100, 180, 80]` | `[34, 120, 15]` | `[180, 85, 20]` | `[100, 80, 60]` (α 160) |
+| palm | `[50, 160, 50]` | `[20, 145, 20]` | `[55, 150, 30]` | `[40, 130, 30]` |
+| birch | `[150, 210, 110]` | `[80, 160, 60]` | `[230, 185, 40]` | `[180, 180, 170]` (α 90) |
+| cherry | `[255, 180, 205]` | `[50, 140, 50]` | `[200, 60, 40]` | `[120, 90, 80]` (α 110) |
+
+---
+
+## Wild-Forest example
+
+A full demo with 9 forest zones (pines, oaks, palms, birches, cherry blossoms, citrus orchards, almond groves) is available at `examples/three/wild-forest/`.
+
+```bash
+cd examples/three/wild-forest
+yarn          # first time only
+yarn start    # opens http://localhost:8080
+```
 
-`'spring'` · `'summer'` · `'autumn'` · `'winter'`
+The example includes a live `sizeScale` slider, a crop toggle, and a zone legend.

package/dist/index.cjs

@@ -35,6 +35,44 @@ var import_mesh_layers = require("@deck.gl/mesh-layers");
 // dist/tree-layer/tree-geometry.js
 var import_three = require("three");
 var Y_TO_Z_UP = new import_three.Matrix4().makeRotationX(-Math.PI / 2);
+function jitterSmooth(geo, magnitude, seed) {
+  let s = seed >>> 0;
+  const rng = () => {
+    s = s + 2654435769 | 0;
+    let t = s ^ s >>> 16;
+    t = Math.imul(t, 569420461);
+    t ^= t >>> 15;
+    t = Math.imul(t, 1935289751);
+    return ((t ^ t >>> 15) >>> 0) / 4294967296;
+  };
+  const waves = Array.from({ length: 4 }, () => ({
+    fx: 2 + rng() * 3,
+    fy: 2 + rng() * 3,
+    fz: 2 + rng() * 3,
+    phase: rng() * Math.PI * 2
+  }));
+  const pos = geo.attributes.position.array;
+  for (let i = 0; i < pos.length; i += 3) {
+    const x = pos[i];
+    const y = pos[i + 1];
+    const z = pos[i + 2];
+    const r = Math.sqrt(x * x + y * y + z * z);
+    if (r !== 0) {
+      const nx = x / r;
+      const ny = y / r;
+      const nz = z / r;
+      let noise = 0;
+      for (const w of waves) {
+        noise += Math.sin(nx * w.fx + ny * w.fy + nz * w.fz + w.phase);
+      }
+      noise /= 4;
+      const scale = 1 + noise * magnitude;
+      pos[i] = x * scale;
+      pos[i + 1] = y * scale;
+      pos[i + 2] = z * scale;
+    }
+  }
+}
 function extractMesh(geo) {
   geo.computeVertexNormals();
   const posAttr = geo.attributes.position;
@@ -97,32 +135,49 @@ function createTrunkMesh(segments = 8) {
 }
 function createPineCanopyMesh(levels = 3, segments = 8) {
   const geos = [];
-  const tierHeight = 0.55 / levels;
+  let s = levels * 2654435761 >>> 0;
+  const rng = () => {
+    s = s + 2654435769 | 0;
+    let t = s ^ s >>> 16;
+    t = Math.imul(t, 569420461);
+    t ^= t >>> 15;
+    t = Math.imul(t, 1935289751);
+    return ((t ^ t >>> 15) >>> 0) / 4294967296;
+  };
+  const tierHeight = 1.6 / (levels + 1);
+  const step = tierHeight / 2;
+  let zCursor = 0;
   for (let i = 0; i < levels; i++) {
     const t = i / (levels - 1 || 1);
-    const radius = (1 - t * 0.5) * 0.85;
-    const zBase = t * (1 - tierHeight * 1.2);
-    const cone = new import_three.ConeGeometry(radius, tierHeight, segments);
+    const baseRadius = (1 - t * 0.5) * 0.85;
+    const radius = baseRadius * (0.8 + rng() * 0.4);
+    const tierH = tierHeight * (0.85 + rng() * 0.3);
+    const cone = new import_three.ConeGeometry(radius, tierH, segments);
     cone.applyMatrix4(Y_TO_Z_UP);
-    cone.translate(0, 0, zBase + tierHeight);
+    const driftScale = levels > 1 ? i / (levels - 1) : 0;
+    const driftX = (rng() - 0.5) * 0.2 * driftScale;
+    const driftY = (rng() - 0.5) * 0.2 * driftScale;
+    cone.translate(driftX, driftY, zCursor + tierH / 2);
     geos.push(cone);
+    zCursor += step;
   }
-  const tip = new import_three.ConeGeometry(0.12, 0.18, 6);
+  const tip = new import_three.ConeGeometry(0.08, 0.22, 6);
   tip.applyMatrix4(Y_TO_Z_UP);
-  tip.translate(0, 0, 1);
+  tip.translate((rng() - 0.5) * 0.08, (rng() - 0.5) * 0.08, zCursor + 0.05);
   geos.push(tip);
   const merged = mergeGeometries(geos);
-  merged.computeVertexNormals();
   return extractMesh(merged);
 }
 function createOakCanopyMesh() {
-  const geo = new import_three.SphereGeometry(0.5, 12, 8);
+  const geo = new import_three.SphereGeometry(0.5, 14, 10);
+  jitterSmooth(geo, 0.18, 1);
   geo.applyMatrix4(Y_TO_Z_UP);
   geo.translate(0, 0, 0.5);
   return extractMesh(geo);
 }
 function createPalmCanopyMesh() {
   const geo = new import_three.SphereGeometry(0.7, 12, 5);
+  jitterSmooth(geo, 0.1, 4);
   const flatten = new import_three.Matrix4().makeScale(1.4, 0.35, 1.4);
   geo.applyMatrix4(flatten);
   geo.applyMatrix4(Y_TO_Z_UP);
@@ -131,6 +186,7 @@ function createPalmCanopyMesh() {
 }
 function createBirchCanopyMesh() {
   const geo = new import_three.SphereGeometry(0.42, 10, 8);
+  jitterSmooth(geo, 0.14, 2);
   const elongate = new import_three.Matrix4().makeScale(1, 1.45, 1);
   geo.applyMatrix4(elongate);
   geo.applyMatrix4(Y_TO_Z_UP);
@@ -139,6 +195,13 @@ function createBirchCanopyMesh() {
 }
 function createCherryCanopyMesh() {
   const geo = new import_three.SphereGeometry(0.52, 12, 8);
+  jitterSmooth(geo, 0.2, 3);
+  geo.applyMatrix4(Y_TO_Z_UP);
+  geo.translate(0, 0, 0.5);
+  return extractMesh(geo);
+}
+function createCropMesh() {
+  const geo = new import_three.SphereGeometry(0.5, 6, 4);
   geo.applyMatrix4(Y_TO_Z_UP);
   geo.translate(0, 0, 0.5);
   return extractMesh(geo);
@@ -198,7 +261,79 @@ var CANOPY_MESHES = {
   birch: createBirchCanopyMesh(),
   cherry: createCherryCanopyMesh()
 };
+var CROP_MESH = createCropMesh();
 var ALL_TREE_TYPES = ["pine", "oak", "palm", "birch", "cherry"];
+var CANOPY_TRUNK_OVERLAP = 0.22;
+function createRng(seed) {
+  let s = seed >>> 0;
+  return () => {
+    s = s + 2654435769 | 0;
+    let t = s ^ s >>> 16;
+    t = Math.imul(t, 569420461);
+    t ^= t >>> 15;
+    t = Math.imul(t, 1935289751);
+    return ((t ^ t >>> 15) >>> 0) / 4294967296;
+  };
+}
+function positionSeed(lng, lat) {
+  return (Math.round(lng * 1e4) * 92821 ^ Math.round(lat * 1e4) * 65537) >>> 0;
+}
+var DEG_PER_METER_LAT = 1 / 111320;
+function lngDegreesPerMeter(latDeg) {
+  return 1 / (111320 * Math.cos(latDeg * Math.PI / 180));
+}
+function expandLiveCropPoints(opts) {
+  const { lng, lat, elevation, height, trunkFraction, canopyRadius, cropConfig, out } = opts;
+  if (cropConfig.count <= 0)
+    return;
+  const rxy = canopyRadius * 0.5;
+  const canopyH = height * (1 - trunkFraction);
+  const rz = canopyH * 0.5;
+  const canopyCenterZ = elevation + height * trunkFraction - canopyH * CANOPY_TRUNK_OVERLAP + rz;
+  const dLng = lngDegreesPerMeter(lat);
+  const rng = createRng(positionSeed(lng, lat));
+  for (let i = 0; i < cropConfig.count; i++) {
+    const theta = rng() * Math.PI * 2;
+    const cosPhi = -0.8 + rng() * 1.6;
+    const sinPhi = Math.sqrt(Math.max(0, 1 - cosPhi * cosPhi));
+    const radFrac = 0.9 + rng() * 0.12;
+    const dx = rxy * radFrac * sinPhi * Math.cos(theta);
+    const dy = rxy * radFrac * sinPhi * Math.sin(theta);
+    const dz = rz * radFrac * cosPhi;
+    out.push({
+      position: [lng + dx * dLng, lat + dy * DEG_PER_METER_LAT, canopyCenterZ + dz],
+      color: cropConfig.color,
+      scale: cropConfig.radius
+    });
+  }
+}
+function expandDroppedCropPoints(opts) {
+  const { lng, lat, elevation, canopyRadius, cropConfig, out } = opts;
+  const droppedCount = cropConfig.droppedCount ?? 0;
+  if (droppedCount <= 0)
+    return;
+  const footprintRadius = canopyRadius * 0.5;
+  const dLng = lngDegreesPerMeter(lat);
+  const rng = createRng(positionSeed(lng, lat) ^ 439041101);
+  const c = cropConfig.color;
+  const droppedColor = [
+    c[0],
+    c[1],
+    c[2],
+    Math.round((c[3] ?? 255) * 0.45)
+  ];
+  for (let i = 0; i < droppedCount; i++) {
+    const theta = rng() * Math.PI * 2;
+    const dist = Math.sqrt(rng()) * footprintRadius;
+    const dx = dist * Math.cos(theta);
+    const dy = dist * Math.sin(theta);
+    out.push({
+      position: [lng + dx * dLng, lat + dy * DEG_PER_METER_LAT, elevation + 0.05],
+      color: droppedColor,
+      scale: cropConfig.radius
+    });
+  }
+}
 var defaultProps = {
   getPosition: { type: "accessor", value: (d) => d.position },
   getElevation: { type: "accessor", value: (_d) => 0 },
@@ -211,18 +346,21 @@ var defaultProps = {
   getCanopyColor: { type: "accessor", value: (_d) => null },
   getSeason: { type: "accessor", value: (_d) => "summer" },
   getBranchLevels: { type: "accessor", value: (_d) => 3 },
+  getCrop: { type: "accessor", value: (_d) => null },
   sizeScale: { type: "number", value: 1, min: 0 }
 };
 var TreeLayer = class extends import_core.CompositeLayer {
   initializeState() {
     this.state = {
       grouped: { pine: [], oak: [], palm: [], birch: [], cherry: [] },
-      pineMeshes: {}
+      pineMeshes: {},
+      liveCropPoints: [],
+      droppedCropPoints: []
     };
   }
-  updateState({ props, changeFlags }) {
-    if (changeFlags.dataChanged || changeFlags.updateTriggersChanged) {
-      const { data, getTreeType, getBranchLevels } = props;
+  updateState({ props, oldProps, changeFlags }) {
+    if (changeFlags.dataChanged || changeFlags.propsChanged || changeFlags.updateTriggersChanged) {
+      const { data, getTreeType, getBranchLevels, getCrop, getPosition, getElevation, getHeight, getTrunkHeightFraction, getCanopyRadius, sizeScale } = props;
       const grouped = {
         pine: [],
         oak: [],
@@ -231,6 +369,8 @@ var TreeLayer = class extends import_core.CompositeLayer {
         cherry: []
       };
       const pineMeshes = {};
+      const liveCropPoints = [];
+      const droppedCropPoints = [];
       for (const d of data) {
         const type = getTreeType(d);
         if (grouped[type])
@@ -239,36 +379,78 @@ var TreeLayer = class extends import_core.CompositeLayer {
           const levels = Math.max(1, Math.min(5, Math.round(getBranchLevels(d))));
           pineMeshes[levels] ??= createPineCanopyMesh(levels);
         }
+        const cropConfig = getCrop(d);
+        if (cropConfig) {
+          const pos = getPosition(d);
+          const lng = pos[0];
+          const lat = pos[1];
+          const elev = getElevation(d) || 0;
+          const h = getHeight(d) * sizeScale;
+          const f = getTrunkHeightFraction(d);
+          const r = getCanopyRadius(d) * sizeScale;
+          const scaledCropConfig = {
+            ...cropConfig,
+            radius: cropConfig.radius * sizeScale
+          };
+          expandLiveCropPoints({
+            lng,
+            lat,
+            elevation: elev,
+            height: h,
+            trunkFraction: f,
+            canopyRadius: r,
+            cropConfig: scaledCropConfig,
+            out: liveCropPoints
+          });
+          expandDroppedCropPoints({
+            lng,
+            lat,
+            elevation: elev,
+            canopyRadius: r,
+            cropConfig: scaledCropConfig,
+            out: droppedCropPoints
+          });
+        }
       }
-      this.setState({ grouped, pineMeshes });
+      this.setState({ grouped, pineMeshes, liveCropPoints, droppedCropPoints });
     }
   }
-  /** Build a single canopy sub-layer for one tree type. */
-  _buildCanopyLayer(type) {
+  /**
+   * Build a single canopy sub-layer.
+   *
+   * Takes explicit `mesh`, `data`, and `layerId` so that pine trees can be
+   * split into one sub-layer per level count (each with its own mesh).
+   */
+  _buildCanopyLayer(type, mesh, data, layerId) {
     const { getPosition, getElevation, getHeight, getTrunkHeightFraction, getCanopyRadius, getCanopyColor, getSeason, sizeScale } = this.props;
-    const { grouped, pineMeshes } = this.state;
-    let mesh = CANOPY_MESHES[type];
-    if (type === "pine") {
-      const firstLevel = Object.keys(pineMeshes)[0];
-      if (firstLevel)
-        mesh = pineMeshes[Number(firstLevel)];
-    }
     return new import_mesh_layers.SimpleMeshLayer(this.getSubLayerProps({
-      id: `canopy-${type}`,
-      data: grouped[type],
+      id: layerId,
+      data,
       mesh,
       getPosition: (d) => {
         const pos = getPosition(d);
         const elevation = getElevation(d) || 0;
         const h = getHeight(d) * sizeScale;
         const f = getTrunkHeightFraction(d);
-        return [pos[0], pos[1], elevation + h * f];
+        const canopyH = h * (1 - f);
+        return [pos[0], pos[1], elevation + h * f - canopyH * CANOPY_TRUNK_OVERLAP];
       },
       getScale: (d) => {
+        const pos = getPosition(d);
         const h = getHeight(d) * sizeScale;
         const f = getTrunkHeightFraction(d);
         const r = getCanopyRadius(d) * sizeScale;
-        return [r, r, h * (1 - f)];
+        const seed = positionSeed(pos[0], pos[1]);
+        const sx = 1 + ((seed & 65535) / 65535 - 0.5) * 0.6;
+        const sy = 1 + ((seed >>> 16 & 65535) / 65535 - 0.5) * 0.6;
+        return [r * sx, r * sy, h * (1 - f)];
+      },
+      getOrientation: (d) => {
+        const pos = getPosition(d);
+        const seed = positionSeed(pos[0], pos[1]);
+        const yaw = ((seed ^ seed >>> 13) & 65535) / 65535 * 360;
+        const pitch = (((seed ^ seed >>> 7) & 255) / 255 - 0.5) * 24;
+        return [pitch, yaw, 0];
       },
       getColor: (d) => {
         const explicit = getCanopyColor(d);
@@ -278,12 +460,17 @@ var TreeLayer = class extends import_core.CompositeLayer {
         return DEFAULT_CANOPY_COLORS[type][season];
       },
       pickable: this.props.pickable,
-      material: { ambient: 0.4, diffuse: 0.7, shininess: 12 }
+      material: { ambient: 0.55, diffuse: 0.55, shininess: 0 },
+      updateTriggers: {
+        getPosition: sizeScale,
+        getScale: sizeScale,
+        getOrientation: sizeScale
+      }
     }));
   }
   renderLayers() {
-    const { getPosition, getElevation, getTreeType, getHeight, getTrunkHeightFraction, getTrunkRadius, getTrunkColor, sizeScale } = this.props;
-    const { grouped } = this.state;
+    const { getPosition, getElevation, getTreeType, getHeight, getTrunkHeightFraction, getTrunkRadius, getTrunkColor, getBranchLevels, sizeScale } = this.props;
+    const { grouped, pineMeshes, liveCropPoints, droppedCropPoints } = this.state;
     const trunkLayer = new import_mesh_layers.SimpleMeshLayer(this.getSubLayerProps({
       id: "trunks",
       data: this.props.data,
@@ -306,10 +493,45 @@ var TreeLayer = class extends import_core.CompositeLayer {
         return DEFAULT_TRUNK_COLORS[type] ?? DEFAULT_TRUNK_COLORS.pine;
       },
       pickable: this.props.pickable,
-      material: { ambient: 0.35, diffuse: 0.6, shininess: 8 }
+      material: { ambient: 0.45, diffuse: 0.55, shininess: 4 },
+      updateTriggers: { getScale: sizeScale }
     }));
-    const canopyLayers = ALL_TREE_TYPES.filter((type) => grouped[type].length > 0).map((type) => this._buildCanopyLayer(type));
-    return [trunkLayer, ...canopyLayers];
+    const nonPineCanopies = ALL_TREE_TYPES.filter((t) => t !== "pine" && grouped[t].length > 0).map((t) => this._buildCanopyLayer(t, CANOPY_MESHES[t], grouped[t], `canopy-${t}`));
+    const pineCanopies = Object.entries(pineMeshes).flatMap(([levelStr, mesh]) => {
+      const levels = Number(levelStr);
+      const pineData = grouped.pine.filter(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (d) => Math.max(1, Math.min(5, Math.round(getBranchLevels(d)))) === levels
+      );
+      return pineData.length > 0 ? [this._buildCanopyLayer("pine", mesh, pineData, `canopy-pine-${levels}`)] : [];
+    });
+    const canopyLayers = [...nonPineCanopies, ...pineCanopies];
+    const cropLayers = [];
+    if (liveCropPoints.length > 0) {
+      cropLayers.push(new import_mesh_layers.SimpleMeshLayer(this.getSubLayerProps({
+        id: "live-crops",
+        data: liveCropPoints,
+        mesh: CROP_MESH,
+        getPosition: (d) => d.position,
+        getScale: (d) => [d.scale, d.scale, d.scale],
+        getColor: (d) => d.color,
+        pickable: false,
+        material: { ambient: 0.5, diffuse: 0.8, shininess: 40 }
+      })));
+    }
+    if (droppedCropPoints.length > 0) {
+      cropLayers.push(new import_mesh_layers.SimpleMeshLayer(this.getSubLayerProps({
+        id: "dropped-crops",
+        data: droppedCropPoints,
+        mesh: CROP_MESH,
+        getPosition: (d) => d.position,
+        getScale: (d) => [d.scale, d.scale, d.scale],
+        getColor: (d) => d.color,
+        pickable: false,
+        material: { ambient: 0.6, diffuse: 0.5, shininess: 10 }
+      })));
+    }
+    return [trunkLayer, ...canopyLayers, ...cropLayers];
   }
 };
 __publicField(TreeLayer, "layerName", "TreeLayer");