Feat/presets

package.json

@@ -21,6 +21,7 @@
     "next": "15.5.2",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "simplex-noise": "^4.0.3",
     "three": "^0.180.0",
     "three-bvh-csg": "^0.0.17",
     "three-stdlib": "^2.36.0"

src/app/(scene)/geo.tsx

@@ -3,21 +3,20 @@ import { useMemo } from 'react'
 import * as THREE from 'three'
 
 export default function Geo({
-  petalAmp = 0.35,
-  petalSegments = 360,
-  petalWidth = 0.02,
-  petals = 6,
+  configRef,
   phaseRef
-}: GeoProps) {
+}: {
+  configRef: React.RefObject<any>
+  phaseRef: React.RefObject<{ phase: number; gradientRot: number }>
+}) {
+  const cfg = configRef.current
+
   return (
     <FlowerBand
-      amplitude={petalAmp}
-      baseRadius={0.5}
-      petals={petals}
-      phaseDeg={0}
+      configRef={configRef}
       phaseRef={phaseRef}
-      segments={Math.max(32, Math.floor(petalSegments))}
-      width={petalWidth}
+      baseRadius={0.5}
+      segments={Math.max(32, Math.floor(cfg.petalSegments))}
     />
   )
 }
@@ -112,50 +111,65 @@ interface FlowerParams {
   width?: number
 }
 
-interface GeoProps {
-  petalAmp?: number
-  petalSegments?: number
-  petalWidth?: number
-  petals?: number
-  phaseRef?: { current: { phase: number; gradientRot: number } }
-}
-
 function FlowerBand({
-  amplitude = 0.3,
   baseRadius = 0.5,
-  petals = 6,
-  phaseDeg = 0,
+  configRef,
   phaseRef,
-  segments = 360,
-  width = 0.02
-}: FlowerParams & {
-  phaseRef?: { current: { phase: number; gradientRot: number } }
+  segments = 360
+}: {
+  baseRadius?: number
+  configRef: React.RefObject<any>
+  phaseRef?: React.RefObject<{ phase: number; gradientRot: number }>
+  segments?: number
 }) {
+  const MAX_SEGMENTS = 512
+
+  const trig = useMemo(() => {
+    const cosTable = new Float32Array(MAX_SEGMENTS + 1)
+    const sinTable = new Float32Array(MAX_SEGMENTS + 1)
+    const twoPi = Math.PI * 2
+
+    for (let i = 0; i <= MAX_SEGMENTS; i++) {
+      const t = i / MAX_SEGMENTS
+      const theta = t * twoPi
+      cosTable[i] = Math.cos(theta)
+      sinTable[i] = Math.sin(theta)
+    }
+
+    return { cosTable, sinTable }
+  }, [])
+
   const { geom, positions } = useMemo(() => {
+    // Create with max segments to avoid recreation
     const g = createFlowerBandGeometry({
-      amplitude,
+      amplitude: 0.5,
       baseRadius,
-      petals,
-      phaseDeg,
-      segments,
-      width
+      petals: 6,
+      phaseDeg: 0,
+      segments: MAX_SEGMENTS,
+      width: 0.05
     })
 
-    return {
-      geom: g,
-      positions: g.getAttribute('position') as THREE.BufferAttribute
-    }
-  }, [amplitude, baseRadius, petals, phaseDeg, segments, width])
+    const pos = g.getAttribute('position') as THREE.BufferAttribute
+    pos.setUsage(THREE.DynamicDrawUsage)
+
+    return { geom: g, positions: pos }
+  }, [baseRadius])
 
   useFrame(() => {
-    const p = phaseRef?.current?.phase ?? phaseDeg
-    updateFlowerPositions(positions, {
-      amplitude,
+    const cfg = configRef.current
+
+    if (!cfg) return
+    const p = phaseRef?.current?.phase ?? 0
+
+    // Update positions with current config (fast path)
+    updateFlowerPositionsFast(positions, trig.cosTable, trig.sinTable, {
+      amplitude: cfg.petalAmp,
       baseRadius,
-      petals,
+      petals: Math.max(1, cfg.petals),
       phaseDeg: p,
-      segments,
-      width
+      segments: MAX_SEGMENTS,
+      width: cfg.petalWidth
     })
   })
 
@@ -199,3 +213,52 @@ function updateFlowerPositions(
 
   positions.needsUpdate = true
 }
+
+function updateFlowerPositionsFast(
+  positions: THREE.BufferAttribute,
+  cosTable: Float32Array,
+  sinTable: Float32Array,
+  {
+    amplitude,
+    baseRadius,
+    petals,
+    phaseDeg,
+    segments,
+    width
+  }: Required<FlowerParams>
+) {
+  const array = positions.array as Float32Array
+  const phase = (phaseDeg * Math.PI) / 180
+  const invRes = 1 / Math.max(segments, 1)
+
+  for (let i = 0; i <= segments; i++) {
+    const t = i * invRes
+    const thetaIdx = Math.round(t * segments)
+    const cos = cosTable[thetaIdx]
+    const sin = sinTable[thetaIdx]
+
+    const r =
+      baseRadius *
+      (1 + amplitude * Math.sin(petals * (t * Math.PI * 2) + phase))
+
+    const inner = Math.max(0.0005, r - width)
+
+    const ox = r * cos
+    const oy = r * sin
+    const ix = inner * cos
+    const iy = inner * sin
+
+    const oIndex = i * 2 * 3
+    const iIndex = oIndex + 3
+
+    array[oIndex + 0] = ox
+    array[oIndex + 1] = oy
+    array[oIndex + 2] = 0
+
+    array[iIndex + 0] = ix
+    array[iIndex + 1] = iy
+    array[iIndex + 2] = 0
+  }
+
+  positions.needsUpdate = true
+}