Update flow-shield for article

demos/flow-shield/src/App.jsx

@@ -1,5 +1,77 @@
-import PlaygroundCanvas from './components/playground/PlaygroundCanvas'
+import { useCallback, useRef, useState } from 'react'
+import { Canvas } from '@react-three/fiber'
+import { Leva, useControls } from 'leva'
+import SceneContent from './components/playground/SceneContent'
+import UIOverlay from './components/overlay/UIOverlay'
+import OverlayButtons from './components/overlay/OverlayButtons'
+import LoadingOverlay from './components/overlay/LoadingOverlay'
+import { LEVA_THEME } from './components/theme/theme'
 
 export default function App() {
-  return <PlaygroundCanvas />
+  const [showGrid, setShowGrid] = useState(true)
+  const [hideLeva, setHideLeva] = useState(false)
+  const [glbUrl, setGlbUrl] = useState(null)
+  const [preset, setPreset] = useState('default')
+  const [isLoadingModel, setIsLoadingModel] = useState(false)
+  const glbUrlRef = useRef(null)
+
+  const handleLoadGlb = useCallback((file) => {
+    if (glbUrlRef.current) URL.revokeObjectURL(glbUrlRef.current)
+    const url = URL.createObjectURL(file)
+    glbUrlRef.current = url
+    setIsLoadingModel(true)
+    setGlbUrl(url)
+  }, [])
+
+  const handleModelLoaded = useCallback(() => {
+    setIsLoadingModel(false)
+  }, [])
+
+  const handleClearGlb = useCallback(() => {
+    if (glbUrlRef.current) URL.revokeObjectURL(glbUrlRef.current)
+    glbUrlRef.current = null
+    setGlbUrl(null)
+  }, [])
+
+  const { mode } = useControls(
+    'Scene',
+    {
+      mode: {
+        value: 'Background',
+        options: ['Background', 'Frame'],
+        label: 'Mode'
+      }
+    },
+    { collapsed: true }
+  )
+
+  return (
+    <>
+      <Leva theme={LEVA_THEME} titleBar={{ title: 'CONTROLS' }} collapsed={false} flat={false} oneLineLabels={false} hidden={hideLeva} />
+      <div style={{ position: 'fixed', inset: 0 }}>
+        <Canvas
+          shadows
+          camera={{ position: [8, 5, 8], fov: 50, near: 0.1, far: 200 }}
+          gl={{ antialias: true, alpha: false }}
+          style={{ background: '#0e0d0c' }}
+          dpr={[1, 1.5]}
+        >
+          <SceneContent showGrid={showGrid} mode={mode} glbUrl={glbUrl} onModelLoaded={handleModelLoaded} preset={preset} />
+        </Canvas>
+      </div>
+      <UIOverlay />
+      <OverlayButtons
+        showGrid={showGrid}
+        onToggleGrid={() => setShowGrid((value) => !value)}
+        hideLeva={hideLeva}
+        onToggleLeva={() => setHideLeva((value) => !value)}
+        hasGlb={glbUrl !== null}
+        onLoadGlb={handleLoadGlb}
+        onClearGlb={handleClearGlb}
+        preset={preset}
+        onSetPreset={setPreset}
+      />
+      <LoadingOverlay visible={isLoadingModel} />
+    </>
+  )
 }

demos/flow-shield/src/components/ForceShield/index.tsx

@@ -1,13 +1,15 @@
 'use client'
 
-import { useRef, useMemo, useEffect, useCallback } from 'react'
-import { useFrame } from '@react-three/fiber'
+import { useRef, useEffect, useCallback } from 'react'
+import { extend, useFrame } from '@react-three/fiber'
 import type { ThreeEvent } from '@react-three/fiber'
 import * as THREE from 'three'
 import type { Preset } from '../overlay/OverlayButtons'
 import { MAX_HITS, SHIELD_PRESETS } from './consts'
 import { useShieldControls } from './useShieldControls'
-import { createShieldMaterial } from './shaderMaterial'
+import { ShieldMaterial } from './shaderMaterial'
+
+extend({ ShieldMaterial })
 
 interface ShieldProps {
   isActive?: boolean
@@ -16,7 +18,7 @@ interface ShieldProps {
 }
 
 function Shield({ isActive = false, posYOverride, preset }: ShieldProps) {
-  const materialRef = useRef<THREE.ShaderMaterial>(null!)
+  const materialRef = useRef<ShieldMaterial>(null!)
   const groupRef = useRef<THREE.Group>(null!)
   const revealRef = useRef(1)
   const timeRef = useRef(0)
@@ -72,13 +74,6 @@ function Shield({ isActive = false, posYOverride, preset }: ShieldProps) {
     if (preset) setShield(SHIELD_PRESETS[preset])
   }, [preset])
 
-  // ── Shader material ───────────────────────────────────────────────────────
-  const shieldMaterial = useMemo(() => createShieldMaterial(), [])
-
-  if (shieldMaterial && materialRef.current !== shieldMaterial) {
-    materialRef.current = shieldMaterial
-  }
-
   // ── Sync Leva → uniforms ──────────────────────────────────────────────────
   useEffect(() => {
     if (!materialRef.current) return
@@ -180,7 +175,7 @@ function Shield({ isActive = false, posYOverride, preset }: ShieldProps) {
     <group ref={groupRef} position={[posX, posYOverride ?? posY, posZ]} scale={[scale, scale, scale]}>
       <mesh onClick={handleClick}>
         <sphereGeometry args={[1.8, 64, 64]} />
-        <primitive object={shieldMaterial} attach="material" />
+        <shieldMaterial ref={materialRef} />
       </mesh>
     </group>
   )

demos/flow-shield/src/components/ForceShield/shaderMaterial.ts

@@ -239,49 +239,52 @@ export const fragmentShader = /* glsl */ `
   }
 `
 
-// ── Material factory ──────────────────────────────────────────────────────────
-export function createShieldMaterial(): THREE.ShaderMaterial {
-  const hitPositions = Array.from({ length: MAX_HITS }, () => new THREE.Vector3(0, 1.8, 0))
-  const hitTimes = new Array(MAX_HITS).fill(-999)
-
-  return new THREE.ShaderMaterial({
-    uniforms: {
-      uTime: { value: 0 },
-      uColor: { value: new THREE.Color('#26aeff') },
-      uLife: { value: 1.0 },
-      uHexScale: { value: 3.0 },
-      uEdgeWidth: { value: 0.06 },
-      uFresnelPower: { value: 1.8 },
-      uFresnelStrength: { value: 1.75 },
-      uOpacity: { value: 0.76 },
-      uReveal: { value: 1 },
-      uFlashSpeed: { value: 0.6 },
-      uFlashIntensity: { value: 0.11 },
-      uNoiseScale: { value: 1.3 },
-      uNoiseEdgeColor: { value: new THREE.Color('#26aeff') },
-      uNoiseEdgeWidth: { value: 0.02 },
-      uNoiseEdgeIntensity: { value: 10.0 },
-      uNoiseEdgeSmoothness: { value: 0.5 },
-      uHexOpacity: { value: 0.13 },
-      uShowHex: { value: 1.0 },
-      uFlowScale: { value: 2.4 },
-      uFlowSpeed: { value: 1.13 },
-      uFlowIntensity: { value: 4 },
-      uHitPos: { value: hitPositions },
-      uHitTime: { value: hitTimes },
-      uHitRingSpeed: { value: 1.75 },
-      uHitRingWidth: { value: 0.12 },
-      uHitMaxRadius: { value: 0.85 },
-      uHitDuration: { value: 1.8 },
-      uHitIntensity: { value: 4.1 },
-      uHitImpactRadius: { value: 0.3 },
-      uFadeStart: { value: 0.0 }
-    },
-    vertexShader,
-    fragmentShader,
-    transparent: true,
-    depthWrite: false,
-    side: THREE.FrontSide,
-    blending: THREE.AdditiveBlending
-  })
+// Each material instance gets its own hit ring buffers.
+function createUniforms() {
+  return {
+    uTime: { value: 0 },
+    uColor: { value: new THREE.Color('#26aeff') },
+    uLife: { value: 1.0 },
+    uHexScale: { value: 3.0 },
+    uEdgeWidth: { value: 0.06 },
+    uFresnelPower: { value: 1.8 },
+    uFresnelStrength: { value: 1.75 },
+    uOpacity: { value: 0.76 },
+    uReveal: { value: 1 },
+    uFlashSpeed: { value: 0.6 },
+    uFlashIntensity: { value: 0.11 },
+    uNoiseScale: { value: 1.3 },
+    uNoiseEdgeColor: { value: new THREE.Color('#26aeff') },
+    uNoiseEdgeWidth: { value: 0.02 },
+    uNoiseEdgeIntensity: { value: 10.0 },
+    uNoiseEdgeSmoothness: { value: 0.5 },
+    uHexOpacity: { value: 0.13 },
+    uShowHex: { value: 1.0 },
+    uFlowScale: { value: 2.4 },
+    uFlowSpeed: { value: 1.13 },
+    uFlowIntensity: { value: 4 },
+    uHitPos: { value: Array.from({ length: MAX_HITS }, () => new THREE.Vector3(0, 1.8, 0)) },
+    uHitTime: { value: new Array(MAX_HITS).fill(-999) },
+    uHitRingSpeed: { value: 1.75 },
+    uHitRingWidth: { value: 0.12 },
+    uHitMaxRadius: { value: 0.85 },
+    uHitDuration: { value: 1.8 },
+    uHitIntensity: { value: 4.1 },
+    uHitImpactRadius: { value: 0.3 },
+    uFadeStart: { value: 0.0 }
+  }
+}
+
+export class ShieldMaterial extends THREE.ShaderMaterial {
+  constructor() {
+    super({
+      uniforms: createUniforms(),
+      vertexShader,
+      fragmentShader,
+      transparent: true,
+      depthWrite: false,
+      side: THREE.FrontSide,
+      blending: THREE.AdditiveBlending
+    })
+  }
 }

demos/flow-shield/src/components/playground/Droideka.tsx

@@ -10,7 +10,7 @@ Title: Droideka
 
 import { useGLTF } from '@react-three/drei'
 
-const DROIDEKA_URL = `${import.meta.env.BASE_URL.replace(/\/?$/, '/')}droideka.glb`
+const DROIDEKA_URL = `${import.meta.env.BASE_URL.replace(/\/?$/, '/')}droideka-5mb.glb`
 
 export function Droideka() {
   const { nodes, materials } = useGLTF(DROIDEKA_URL)

demos/flow-shield/src/react-three-fiber-jsx.d.ts

@@ -3,17 +3,26 @@ import type { ThreeElements } from '@react-three/fiber'
 declare global {
   namespace JSX {
     interface IntrinsicElements extends ThreeElements {}
+    interface IntrinsicElements {
+      shieldMaterial: ThreeElements['shaderMaterial']
+    }
   }
 }
 
 declare module 'react' {
   namespace JSX {
     interface IntrinsicElements extends ThreeElements {}
+    interface IntrinsicElements {
+      shieldMaterial: ThreeElements['shaderMaterial']
+    }
   }
 }
 
 declare module 'react/jsx-runtime' {
   namespace JSX {
     interface IntrinsicElements extends ThreeElements {}
+    interface IntrinsicElements {
+      shieldMaterial: ThreeElements['shaderMaterial']
+    }
   }
 }