@marble.fun/track-catalog 3.0.0

package/src/pages/play/race/track-appearance-jungle-flower-hedge.ts

@@ -0,0 +1,483 @@
+import * as THREE from 'three'
+
+import { VisualSphereGeometry, VisualCylinderGeometry } from '../../../three/visual-geometry'
+
+import {
+  PAINTED_VALLEY_THEME_ID,
+  PAINTED_VALLEY_TROPICAL_FLOWER_HEDGE_WALL_ID,
+} from '../../../three/painted-valley-appearance'
+import {
+  canonicalWallFrameAt,
+  type CanonicalWallRun,
+  type RawWallFrame,
+} from './track-surface-topology'
+
+export type JungleFlowerHedgePathFrame = RawWallFrame
+export type JungleFlowerHedgePathRun = CanonicalWallRun
+
+type FlowerType = 'orange' | 'pink' | 'magenta' | 'coral' | 'gold'
+
+interface HedgeAssets {
+  leafGeometry: THREE.BufferGeometry
+  petalGeometry: THREE.BufferGeometry
+  sphereGeometry: THREE.SphereGeometry
+  stemGeometry: THREE.CylinderGeometry
+  stamenGeometry: THREE.CylinderGeometry
+  trumpetGeometry: THREE.CylinderGeometry
+  leafMaterials: THREE.MeshStandardMaterial[]
+  leafMatrices: THREE.Matrix4[][]
+  flowerMaterials: Record<string, THREE.MeshStandardMaterial>
+  centreMaterials: Record<string, THREE.MeshStandardMaterial>
+  stemMaterial: THREE.MeshStandardMaterial
+  calyxMaterial: THREE.MeshStandardMaterial
+}
+
+type SampledRun = CanonicalWallRun
+
+const HEDGE_DEPTH = 0.82
+const FLOWER_SCHEDULE: readonly FlowerType[] = ['orange', 'coral', 'magenta', 'gold', 'orange', 'pink']
+const REAR_FLOWER_SCHEDULE: readonly FlowerType[] = ['pink', 'gold', 'orange', 'magenta', 'coral', 'orange']
+const CROWN_FLOWER_SCHEDULE: readonly FlowerType[] = ['pink', 'orange', 'magenta', 'gold']
+
+function hash01(value: number): number {
+  const result = Math.sin(value * 91.3458 + 17.147) * 47_453.5453
+  return result - Math.floor(result)
+}
+
+function standardMaterial(color: string, roughness = 0.88, emissive = '#000000', emissiveIntensity = 0): THREE.MeshStandardMaterial {
+  return new THREE.MeshStandardMaterial({ color, roughness, metalness: 0, emissive, emissiveIntensity, side: THREE.FrontSide })
+}
+
+function createLeafGeometry(): THREE.BufferGeometry {
+  const steps = 3
+  const positions: number[] = []
+  const colors: number[] = []
+  const indices: number[] = []
+  for (let step = 0; step <= steps; step += 1) {
+    const t = step / steps
+    const serration = 1 + Math.sin(t * Math.PI * 7) * 0.045
+    const width = (0.1 * (1 - t) + Math.pow(Math.sin(Math.PI * t), 0.76)) * 0.37 * serration
+    const spine = Math.sin(Math.PI * t) * 0.075 + t * t * 0.035
+    const edge = spine - width * 0.105
+    positions.push(-width, t, edge, 0, t, spine, width, t, edge)
+    positions.push(-width, t, edge - 0.028, 0, t, spine - 0.032, width, t, edge - 0.028)
+    colors.push(0.7, 0.76, 0.58, 1.26, 1.18, 0.72, 0.7, 0.76, 0.58)
+    colors.push(0.5, 0.56, 0.43, 0.72, 0.7, 0.48, 0.5, 0.56, 0.43)
+  }
+  const stride = 6
+  for (let step = 0; step < steps; step += 1) {
+    const a = step * stride
+    const b = a + stride
+    indices.push(a, a + 1, b, a + 1, b + 1, b, a + 1, a + 2, b + 1, a + 2, b + 2, b + 1)
+    indices.push(a + 3, b + 3, a + 4, a + 4, b + 3, b + 4, a + 4, b + 4, a + 5, a + 5, b + 4, b + 5)
+    indices.push(a, b, a + 3, a + 3, b, b + 3, a + 2, a + 5, b + 2, a + 5, b + 5, b + 2)
+  }
+  indices.push(0, 3, 1, 1, 3, 4)
+  const end = steps * stride
+  indices.push(end, end + 1, end + 3, end + 1, end + 4, end + 3)
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
+  geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3))
+  geometry.setIndex(indices)
+  geometry.computeVertexNormals()
+  return geometry
+}
+
+function createPetalGeometry(): THREE.BufferGeometry {
+  const steps = 3
+  const positions: number[] = []
+  const indices: number[] = []
+  for (let step = 0; step <= steps; step += 1) {
+    const t = step / steps
+    const width = Math.pow(Math.sin(Math.PI * Math.pow(t, 0.92)), 0.78) * (0.44 + t * 0.1)
+    const centerZ = Math.sin(Math.PI * t) * 0.1 + t * t * 0.045
+    const edgeZ = centerZ - width * 0.17
+    positions.push(-width, t, edgeZ, 0, t, centerZ, width, t, edgeZ)
+    positions.push(-width, t, edgeZ - 0.035, 0, t, centerZ - 0.04, width, t, edgeZ - 0.035)
+  }
+  const stride = 6
+  for (let step = 0; step < steps; step += 1) {
+    const a = step * stride
+    const b = a + stride
+    indices.push(a, a + 1, b, a + 1, b + 1, b, a + 1, a + 2, b + 1, a + 2, b + 2, b + 1)
+    indices.push(a + 3, b + 3, a + 4, a + 4, b + 3, b + 4, a + 4, b + 4, a + 5, a + 5, b + 4, b + 5)
+    indices.push(a, b, a + 3, a + 3, b, b + 3, a + 2, a + 5, b + 2, a + 5, b + 5, b + 2)
+  }
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
+  geometry.setIndex(indices)
+  geometry.computeVertexNormals()
+  return geometry
+}
+
+function frameQuaternion(tangent: THREE.Vector3, up: THREE.Vector3, normal: THREE.Vector3): THREE.Quaternion {
+  const x = tangent.clone().normalize()
+  let z = normal.clone().addScaledVector(x, -normal.dot(x)).normalize()
+  if (z.lengthSq() < 0.5) z = new THREE.Vector3().crossVectors(x, up).normalize()
+  const y = new THREE.Vector3().crossVectors(z, x).normalize()
+  z = new THREE.Vector3().crossVectors(x, y).normalize()
+  return new THREE.Quaternion().setFromRotationMatrix(new THREE.Matrix4().makeBasis(x, y, z))
+}
+
+function sampleAt(run: SampledRun, distance: number): JungleFlowerHedgePathFrame {
+  return canonicalWallFrameAt(run, distance)
+}
+
+function createSweptCoreGeometry(run: SampledRun, height: number): THREE.BufferGeometry {
+  const crossSegments = 32
+  const ringCount = Math.max(2, Math.ceil(run.length / 0.12) + 1)
+  const positions: number[] = []
+  const uvs: number[] = []
+  const indices: number[] = []
+  const exponent = 0.34
+  for (let ring = 0; ring < ringCount; ring += 1) {
+    const distance = run.length * ring / (ringCount - 1)
+    const frame = sampleAt(run, distance)
+    const endScale = ring === 0 || ring === ringCount - 1 ? 0.94 : 1
+    for (let segment = 0; segment <= crossSegments; segment += 1) {
+      const angle = segment / crossSegments * Math.PI * 2 - Math.PI / 2
+      const zProfile = Math.sign(Math.cos(angle)) * Math.pow(Math.abs(Math.cos(angle)), exponent)
+      const yProfile = Math.sign(Math.sin(angle)) * Math.pow(Math.abs(Math.sin(angle)), exponent)
+      let y = height * (0.5 + yProfile * 0.5)
+      if (y < height * 0.075) y *= 0.35
+      y = height / 2 + (y - height / 2) * endScale
+      const z = zProfile * HEDGE_DEPTH / 2 * endScale
+      const broad = Math.sin(distance * 1.47 + z * 3.1) * Math.cos(y * 5.2 - distance * 0.37)
+      const fine = Math.sin(distance * 6.7 + y * 9.3 + z * 5.8) * 0.36
+      const displacement = y < height * 0.07 ? 0 : (broad + fine) * 0.013
+      const point = frame.base.clone().addScaledVector(frame.up, y).addScaledVector(frame.outward, z + displacement * Math.sign(z || 1))
+      positions.push(point.x, point.y, point.z)
+      uvs.push(run.length > 0 ? distance / run.length : 0, segment / crossSegments)
+    }
+  }
+  const stride = crossSegments + 1
+  for (let ring = 0; ring < ringCount - 1; ring += 1) {
+    for (let segment = 0; segment < crossSegments; segment += 1) {
+      const a = ring * stride + segment
+      const b = a + stride
+      indices.push(a, b, a + 1, a + 1, b, b + 1)
+    }
+  }
+  const addCap = (ring: number, reverse: boolean) => {
+    const frame = sampleAt(run, ring === 0 ? 0 : run.length)
+    const center = positions.length / 3
+    positions.push(frame.base.x + frame.up.x * height / 2, frame.base.y + frame.up.y * height / 2, frame.base.z + frame.up.z * height / 2)
+    uvs.push(ring === 0 ? 0 : 1, 0.5)
+    for (let segment = 0; segment < crossSegments; segment += 1) {
+      const a = ring * stride + segment
+      if (reverse) indices.push(center, a, a + 1)
+      else indices.push(center, a + 1, a)
+    }
+  }
+  addCap(0, true)
+  addCap(ringCount - 1, false)
+  const geometry = new THREE.BufferGeometry()
+  geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3))
+  geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2))
+  geometry.setIndex(indices)
+  geometry.computeVertexNormals()
+  geometry.computeBoundingSphere()
+  return geometry
+}
+
+function createAssets(): HedgeAssets {
+  const leafMaterials = [
+    standardMaterial('#3b5429', 0.9, '#081307', 0.15), standardMaterial('#4e6931', 0.9, '#0a1708', 0.14),
+    standardMaterial('#304823', 0.92, '#071106', 0.16), standardMaterial('#60733a', 0.88, '#0c1908', 0.12),
+  ]
+  leafMaterials.forEach(material => { material.vertexColors = true; material.flatShading = true })
+  const flowerMaterials = {
+    orange: standardMaterial('#d56a38', 0.76, '#3f1209', 0.18), coral: standardMaterial('#cf6043', 0.78, '#42130b', 0.17),
+    coralLight: standardMaterial('#dd805b', 0.76, '#48170d', 0.16), magenta: standardMaterial('#ad3564', 0.78, '#35081c', 0.19),
+    orchidPink: standardMaterial('#cf6895', 0.76, '#3b0d28', 0.17), deepPink: standardMaterial('#7d2849', 0.8, '#260512', 0.17),
+    gold: standardMaterial('#d2a044', 0.8, '#442807', 0.16), cream: standardMaterial('#e4d0b8', 0.78, '#432718', 0.1),
+  }
+  Object.values(flowerMaterials).forEach(material => { material.flatShading = true })
+  return {
+    leafGeometry: createLeafGeometry(), petalGeometry: createPetalGeometry(), sphereGeometry: new VisualSphereGeometry(1, 12, 8),
+    stemGeometry: new VisualCylinderGeometry(0.012, 0.016, 0.12, 7), stamenGeometry: new VisualCylinderGeometry(0.007, 0.006, 0.08, 6),
+    trumpetGeometry: new VisualCylinderGeometry(0.11, 0.038, 0.21, 10, 3, true), leafMaterials, leafMatrices: [[], [], [], []], flowerMaterials,
+    centreMaterials: { amber: standardMaterial('#77311d', 0.82, '#210502', 0.12), gold: standardMaterial('#d8b05a', 0.78, '#402806', 0.14) },
+    stemMaterial: standardMaterial('#315716', 0.94), calyxMaterial: standardMaterial('#3c681b', 0.94),
+  }
+}
+
+function pushLeaf(assets: HedgeAssets, frame: JungleFlowerHedgePathFrame, position: THREE.Vector3, normal: THREE.Vector3, length: number, roll: number, seed: number): void {
+  const leaf = new THREE.Object3D()
+  leaf.position.copy(position)
+  leaf.quaternion.copy(frameQuaternion(frame.tangent, frame.up, normal))
+  leaf.rotateZ(roll)
+  leaf.scale.set(length, length, length * (0.82 + hash01(seed * 7 + 13) * 0.26))
+  leaf.updateMatrix()
+  assets.leafMatrices[Math.abs(seed) % assets.leafMatrices.length]!.push(leaf.matrix.clone())
+}
+
+function addRosette(assets: HedgeAssets, frame: JungleFlowerHedgePathFrame, position: THREE.Vector3, normal: THREE.Vector3, radius: number, phase: number, seed: number): void {
+  for (let index = 0; index < 5; index += 1) {
+    const angle = phase + index * Math.PI * 0.4 + (hash01(seed + index * 3) - 0.5) * 0.24
+    pushLeaf(assets, frame, position, normal, radius * (0.78 + hash01(seed + index * 7 + 1) * 0.28), angle, seed + index)
+  }
+}
+
+function populateFoliage(assets: HedgeAssets, run: SampledRun, height: number, runSeed: number): void {
+  const columns = Math.max(2, Math.ceil(run.length / 0.26))
+  for (const face of [-1, 1]) {
+    for (let column = 0; column <= columns; column += 1) {
+      const distance = run.length * column / columns
+      const frame = sampleAt(run, distance)
+      for (let row = 0; row < 5; row += 1) {
+        const seed = runSeed + column * 17 + row * 41 + face * 113
+        const normal = frame.outward.clone().multiplyScalar(face).addScaledVector(frame.up, 0.08 + hash01(seed + 4) * 0.14).normalize()
+        const length = 0.21 + hash01(seed + 5) * 0.12
+        const position = frame.base.clone().addScaledVector(frame.up, 0.025 + row * height * 0.2 + (hash01(seed + 2) - 0.5) * 0.085)
+          .addScaledVector(frame.outward, face * (HEDGE_DEPTH / 2 + 0.018 + hash01(seed + 3) * 0.018))
+          .addScaledVector(frame.tangent, (hash01(seed) - 0.5) * 0.12)
+        const roll = (hash01(seed + 6) - 0.5) * 1.38 + (row % 2 ? 0.16 : -0.16)
+        pushLeaf(assets, frame, position, normal, length, roll, seed)
+        if (hash01(seed + 9) > 0.48) pushLeaf(assets, frame, position.clone().addScaledVector(normal, 0.012), normal, length * (0.68 + hash01(seed + 11) * 0.12), roll + (hash01(seed + 12) > 0.5 ? 0.92 : -0.92), seed + 1)
+      }
+      const shoulderSeed = runSeed + 971 + column * 37 + face * 83
+      const shoulderNormal = frame.up.clone().multiplyScalar(0.72).addScaledVector(frame.outward, face * 0.7).normalize()
+      const shoulderPosition = frame.base.clone().addScaledVector(frame.up, height - 0.075 + (hash01(shoulderSeed + 1) - 0.5) * 0.055)
+        .addScaledVector(frame.outward, face * (HEDGE_DEPTH / 2 - 0.02))
+      pushLeaf(assets, frame, shoulderPosition, shoulderNormal, 0.22 + hash01(shoulderSeed + 3) * 0.1, (hash01(shoulderSeed + 4) - 0.5) * 1.5, shoulderSeed)
+    }
+    const rosettes = Math.max(2, Math.ceil(run.length * 4.5))
+    for (let index = 0; index < rosettes; index += 1) {
+      const seed = runSeed + 1801 + index * 53 + face * 127
+      const frame = sampleAt(run, 0.14 + hash01(seed) * Math.max(0, run.length - 0.28))
+      const normal = frame.outward.clone().multiplyScalar(face).addScaledVector(frame.up, 0.1).normalize()
+      const position = frame.base.clone().addScaledVector(frame.up, 0.1 + hash01(seed + 1) * (height - 0.22)).addScaledVector(frame.outward, face * (HEDGE_DEPTH / 2 + 0.045))
+      addRosette(assets, frame, position, normal, 0.16 + hash01(seed + 2) * 0.07, hash01(seed + 3) * Math.PI * 2, seed)
+    }
+  }
+  const crownLeaves = Math.max(4, Math.ceil(run.length * 26.75))
+  for (let index = 0; index < crownLeaves; index += 1) {
+    const seed = runSeed + 701 + index * 43
+    const frame = sampleAt(run, 0.08 + hash01(seed) * Math.max(0, run.length - 0.16))
+    const position = frame.base.clone().addScaledVector(frame.up, height + 0.01 + hash01(seed + 2) * 0.024).addScaledVector(frame.outward, -HEDGE_DEPTH * 0.39 + hash01(seed + 1) * HEDGE_DEPTH * 0.78)
+    const length = 0.19 + hash01(seed + 3) * 0.12
+    pushLeaf(assets, frame, position, frame.up, length, hash01(seed + 4) * Math.PI * 2, seed)
+    if (hash01(seed + 8) > 0.58) pushLeaf(assets, frame, position.clone().addScaledVector(frame.up, 0.008), frame.up, length * 0.7, hash01(seed + 4) * Math.PI * 2 + 1, seed + 2)
+  }
+  for (const end of [0, run.length]) {
+    const frame = sampleAt(run, end)
+    const normal = frame.tangent.clone().multiplyScalar(end === 0 ? -1 : 1).addScaledVector(frame.up, 0.08).normalize()
+    for (let index = 0; index < 12; index += 1) {
+      const seed = runSeed + 3209 + index * 71 + (end === 0 ? -101 : 101)
+      const position = frame.base.clone().addScaledVector(frame.up, 0.12 + hash01(seed) * (height - 0.25)).addScaledVector(frame.outward, -HEDGE_DEPTH * 0.27 + hash01(seed + 1) * HEDGE_DEPTH * 0.54)
+      addRosette(assets, frame, position, normal, 0.15 + hash01(seed + 2) * 0.06, hash01(seed + 3) * Math.PI * 2, seed)
+    }
+  }
+}
+
+function petal(assets: HedgeAssets, material: THREE.Material, angle: number, width: number, length: number, lift = 0, twist = 0): THREE.Mesh {
+  const mesh = new THREE.Mesh(assets.petalGeometry, material)
+  mesh.scale.set(width, length, Math.min(width, length) * 1.1)
+  mesh.rotation.set(lift, 0, -angle + twist)
+  mesh.position.set(Math.sin(angle) * 0.012, Math.cos(angle) * 0.012, 0.018)
+  mesh.castShadow = true
+  mesh.receiveShadow = true
+  return mesh
+}
+
+function addCentre(group: THREE.Group, assets: HedgeAssets, color: string, radius = 0.035, z = 0.065): void {
+  const centre = new THREE.Mesh(assets.sphereGeometry, assets.centreMaterials[color]!)
+  centre.scale.set(radius, radius, radius * 0.72)
+  centre.position.z = z
+  centre.castShadow = true
+  group.add(centre)
+}
+
+function makeLily(assets: HedgeAssets): THREE.Group {
+  const group = new THREE.Group()
+  for (let index = 0; index < 6; index += 1) {
+    const angle = index * Math.PI / 3 + 0.08
+    group.add(petal(assets, assets.flowerMaterials.orange!, angle, 0.09, 0.19 + (index % 2) * 0.018, (index % 3 - 1) * 0.06))
+  }
+  addCentre(group, assets, 'amber', 0.039, 0.075)
+  for (let index = 0; index < 5; index += 1) {
+    const stamen = new THREE.Mesh(assets.stamenGeometry, assets.centreMaterials.gold!)
+    const angle = index * Math.PI * 0.4
+    stamen.position.set(Math.sin(angle) * 0.04, Math.cos(angle) * 0.04, 0.105)
+    stamen.rotation.x = Math.PI / 2
+    stamen.castShadow = true
+    group.add(stamen)
+  }
+  return group
+}
+
+function makePlumeria(assets: HedgeAssets): THREE.Group {
+  const group = new THREE.Group()
+  for (let index = 0; index < 5; index += 1) {
+    const angle = index * Math.PI * 0.4 + 0.16
+    group.add(petal(assets, assets.flowerMaterials.cream!, angle, 0.095, 0.17, -0.04, 0.18))
+  }
+  addCentre(group, assets, 'gold', 0.035, 0.07)
+  return group
+}
+
+function makeOrchid(assets: HedgeAssets): THREE.Group {
+  const group = new THREE.Group()
+  ;[0, 2.08, 4.19].forEach((angle, index) => group.add(petal(assets, assets.flowerMaterials.magenta!, angle, 0.11, 0.18 + index * 0.008, -0.05 + index * 0.04)))
+  for (const angle of [-1.05, 1.05]) group.add(petal(assets, assets.flowerMaterials.orchidPink!, angle, 0.075, 0.13, 0.02))
+  const lip = new THREE.Mesh(assets.sphereGeometry, assets.flowerMaterials.deepPink!)
+  lip.scale.set(0.066, 0.046, 0.045)
+  lip.position.set(0, -0.038, 0.085)
+  lip.castShadow = true
+  group.add(lip)
+  addCentre(group, assets, 'gold', 0.026, 0.11)
+  return group
+}
+
+function makeTrumpet(assets: HedgeAssets): THREE.Group {
+  const group = new THREE.Group()
+  const bell = new THREE.Mesh(assets.trumpetGeometry, assets.flowerMaterials.coral!)
+  bell.rotation.x = Math.PI / 2
+  bell.position.z = 0.1
+  bell.castShadow = true
+  group.add(bell)
+  for (let index = 0; index < 5; index += 1) {
+    const angle = index * Math.PI * 0.4 + 0.18
+    const flare = petal(assets, assets.flowerMaterials.coralLight!, angle, 0.045, 0.095, -0.04, 0.08)
+    flare.position.set(Math.sin(angle) * 0.035, Math.cos(angle) * 0.035, 0.185)
+    group.add(flare)
+  }
+  addCentre(group, assets, 'amber', 0.038, 0.218)
+  group.rotation.x = -0.24
+  return group
+}
+
+function makeGoldCluster(assets: HedgeAssets): THREE.Group {
+  const group = new THREE.Group()
+  const offsets = [[-0.09, -0.02, 0], [0.085, -0.025, 0.012], [-0.035, 0.085, 0.018], [0.055, 0.075, 0.026], [0, -0.105, 0.02]]
+  offsets.forEach(([x, y, z], bloomIndex) => {
+    const bloom = new THREE.Group()
+    for (let index = 0; index < 5; index += 1) bloom.add(petal(assets, assets.flowerMaterials.gold!, index * Math.PI * 0.4, 0.038, 0.07, 0, 0.1))
+    addCentre(bloom, assets, 'amber', 0.016, 0.04)
+    bloom.position.set(x!, y!, z!)
+    bloom.rotation.z = bloomIndex * 0.48
+    group.add(bloom)
+  })
+  return group
+}
+
+function makeBotanicalCluster(assets: HedgeAssets, type: FlowerType): THREE.Group {
+  const group = new THREE.Group()
+  ;[[-0.78, 0.14, -0.05], [0.72, 0.13, 0.045], [2.45, 0.105, 0]].forEach(([roll, length, offset]) => {
+    const leaf = new THREE.Mesh(assets.leafGeometry, assets.leafMaterials[2]!)
+    leaf.scale.setScalar(length!)
+    leaf.rotation.z = roll!
+    leaf.position.set(offset!, -0.035, -0.045)
+    leaf.castShadow = true
+    group.add(leaf)
+  })
+  const stem = new THREE.Mesh(assets.stemGeometry, assets.stemMaterial)
+  stem.rotation.x = Math.PI / 2
+  stem.position.z = -0.015
+  group.add(stem)
+  const calyx = new THREE.Mesh(assets.sphereGeometry, assets.calyxMaterial)
+  calyx.scale.set(0.075, 0.075, 0.032)
+  calyx.position.z = 0.022
+  group.add(calyx)
+  const flower = type === 'orange' ? makeLily(assets) : type === 'pink' ? makePlumeria(assets) : type === 'magenta' ? makeOrchid(assets) : type === 'coral' ? makeTrumpet(assets) : makeGoldCluster(assets)
+  flower.position.z = 0.035
+  group.add(flower)
+  if (type === 'magenta' || type === 'coral') {
+    const maker = type === 'magenta' ? makeOrchid : makeTrumpet
+    const left = maker(assets)
+    left.scale.setScalar(type === 'magenta' ? 0.58 : 0.62)
+    left.position.set(type === 'magenta' ? -0.145 : -0.12, 0.05, 0.05)
+    left.rotation.z = type === 'magenta' ? -0.28 : -0.48
+    group.add(left)
+    const right = maker(assets)
+    right.scale.setScalar(type === 'magenta' ? 0.52 : 0.56)
+    right.position.set(type === 'magenta' ? 0.145 : 0.115, 0, 0.045)
+    right.rotation.z = type === 'magenta' ? 0.32 : 0.52
+    group.add(right)
+  }
+  return group
+}
+
+function addFlowerCluster(root: THREE.Group, assets: HedgeAssets, type: FlowerType, frame: JungleFlowerHedgePathFrame, position: THREE.Vector3, normal: THREE.Vector3, scale: number, roll: number): void {
+  const cluster = makeBotanicalCluster(assets, type)
+  cluster.name = `jungle-v4-${type}-cluster`
+  cluster.position.copy(position)
+  cluster.quaternion.copy(frameQuaternion(frame.tangent, frame.up, normal))
+  cluster.rotateZ(roll)
+  cluster.scale.setScalar(scale * 1.1)
+  cluster.userData.decorative = true
+  cluster.userData.visualOnly = true
+  root.add(cluster)
+}
+
+function populateFlowers(root: THREE.Group, assets: HedgeAssets, run: SampledRun, height: number, runSeed: number): void {
+  const faceSlots = Math.max(1, Math.round(run.length * 0.75))
+  for (const face of [-1, 1]) {
+    const schedule = face > 0 ? FLOWER_SCHEDULE : REAR_FLOWER_SCHEDULE
+    for (let index = 0; index < faceSlots; index += 1) {
+      const seed = runSeed + 5003 + index * 89 + face * 137
+      const distance = (index + 0.5) * run.length / faceSlots
+      const frame = sampleAt(run, distance)
+      const type = schedule[index % schedule.length]!
+      const y = height * (0.31 + hash01(seed) * 0.36)
+      const normal = frame.outward.clone().multiplyScalar(face).addScaledVector(frame.up, 0.08).normalize()
+      const position = frame.base.clone().addScaledVector(frame.up, y).addScaledVector(frame.outward, face * (HEDGE_DEPTH / 2 + 0.105))
+      addFlowerCluster(root, assets, type, frame, position, normal, 0.88 + hash01(seed + 2) * 0.12, (hash01(seed + 3) - 0.5) * 0.4 * face)
+    }
+  }
+  const crownSlots = Math.max(1, Math.round(run.length * 0.5))
+  for (let index = 0; index < crownSlots; index += 1) {
+    const seed = runSeed + 6101 + index * 97
+    const frame = sampleAt(run, (index + 0.5) * run.length / crownSlots)
+    const position = frame.base.clone().addScaledVector(frame.up, height + 0.09).addScaledVector(frame.outward, (hash01(seed) - 0.5) * HEDGE_DEPTH * 0.28)
+    addFlowerCluster(root, assets, CROWN_FLOWER_SCHEDULE[index % CROWN_FLOWER_SCHEDULE.length]!, frame, position, frame.up, 0.86 + hash01(seed + 1) * 0.09, (hash01(seed + 2) - 0.5) * 0.4)
+  }
+}
+
+/** Adds the approved tropical hedge as visual-only geometry over unchanged wall colliders. */
+export function addTropicalFlowerHedgeVisual(root: THREE.Group, id: string, runs: readonly JungleFlowerHedgePathRun[], wallHeight: number, coreMaterial: THREE.Material): THREE.Group | undefined {
+  if (wallHeight <= 0.18) return undefined
+  const height = Math.min(0.95, wallHeight)
+  const group = new THREE.Group()
+  group.name = `${id}-jungle-flower-hedge`
+  group.userData.themeOnly = PAINTED_VALLEY_THEME_ID
+  group.userData.decorative = true
+  group.userData.visualOnly = true
+  group.userData.appearance = 'tropical-flower-hedge'
+  group.userData.approvedVisualContract = 'jungle-short-flower-hedge-v4.2'
+  const assets = createAssets()
+  runs.forEach((pathRun, runIndex) => {
+    if (pathRun.frames.length < 2) return
+    const run = pathRun
+    if (run.length < 0.02) return
+    const core = new THREE.Mesh(createSweptCoreGeometry(run, height), coreMaterial)
+    core.name = `${id}-jungle-v4-clipped-hedge-core-${runIndex}`
+    core.castShadow = true
+    core.receiveShadow = true
+    core.userData.visualOnly = true
+    group.add(core)
+    populateFoliage(assets, run, height, runIndex * 10_007)
+    populateFlowers(group, assets, run, height, runIndex * 10_007)
+  })
+  assets.leafMatrices.forEach((matrices, index) => {
+    const mesh = new THREE.InstancedMesh(assets.leafGeometry, assets.leafMaterials[index]!, matrices.length)
+    matrices.forEach((matrix, matrixIndex) => mesh.setMatrixAt(matrixIndex, matrix))
+    mesh.instanceMatrix.needsUpdate = true
+    mesh.name = `${id}-jungle-v4-foliage-family-${index}`
+    mesh.castShadow = true
+    mesh.receiveShadow = true
+    mesh.userData.visualOnly = true
+    group.add(mesh)
+  })
+  group.traverse(object => {
+    if (object instanceof THREE.Mesh) {
+      object.userData.appearanceMaterialId = PAINTED_VALLEY_TROPICAL_FLOWER_HEDGE_WALL_ID
+    }
+  })
+  root.add(group)
+  return group
+}
+
+/** Backwards-compatible export for existing Track World call sites. */
+export const addJungleFlowerHedgeVisual = addTropicalFlowerHedgeVisual