chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문

2026-06-12 16:37:41 +09:00
parent a97fc7be07
commit 89fb05a28a
781 changed files with 138546 additions and 47 deletions
@@ -0,0 +1,204 @@
+---
+id: wiki-2026-0508-디지털-트윈-및-데이터-시뮬레이션
+title: 디지털 트윈 및 데이터 시뮬레이션
+category: 10_Wiki/Topics
+status: verified
+canonical_id: self
+aliases: [Digital Twin, IoT Visualization, Real-time Simulation]
+duplicate_of: none
+source_trust_level: A
+confidence_score: 0.85
+verification_status: applied
+tags: [frontend, digital-twin, threejs, websocket, visualization]
+raw_sources: []
+last_reinforced: 2026-05-10
+github_commit: pending
+tech_stack:
+  language: typescript
+  framework: react-three-fiber
+---
+
+# 디지털 트윈 및 데이터 시뮬레이션
+
+## 매 한 줄
+> **"매 물리 자산의 live mirror"**. 공장 / 빌딩 / 차량을 3D로 render + 실시간 sensor stream 으로 동기화. 2026 stack: React Three Fiber + WebSocket / WebTransport + WebGPU compute + Cesium (geo).
+
+## 매 핵심
+
+### 매 디지털 트윈이란
+- 물리 system 의 software replica — sensor 로 state sync, simulation 으로 future predict.
+- 4 단계: Descriptive (현재 시각화) → Diagnostic (anomaly detect) → Predictive (forecast) → Prescriptive (optimize).
+- Use case: smart factory, BIM, fleet management, energy grid.
+
+### 매 frontend 책임
+- **3D rendering**: 자산 model (glTF/USD) load + scene graph.
+- **Real-time stream**: WebSocket / SSE / WebTransport 으로 sensor data.
+- **Time-series viz**: 매 chart + 3D overlay (heatmap, particles).
+- **Interaction**: select asset → 매 detail panel + control commands.
+
+### 매 응용
+1. 공장 라인 모니터링 (machine health).
+2. 빌딩 BIM + HVAC sensor.
+3. Fleet tracking (차량 GPS + telematics).
+4. Energy grid load visualization.
+
+## 💻 패턴
+
+### React Three Fiber + glTF asset
+```tsx
+import { Canvas, useFrame } from '@react-three/fiber';
+import { useGLTF, OrbitControls } from '@react-three/drei';
+
+function Factory() {
+  const { scene } = useGLTF('/models/factory.glb');
+  return <primitive object={scene} />;
+}
+
+export function Twin() {
+  return (
+    <Canvas camera={{ position: [10, 10, 10] }}>
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[5, 10, 5]} />
+      <Factory />
+      <SensorOverlay />
+      <OrbitControls />
+    </Canvas>
+  );
+}
+```
+
+### WebSocket sensor stream → state
+```tsx
+import { create } from 'zustand';
+
+const useSensors = create<{ sensors: Record<string, Sensor> }>(() => ({
+  sensors: {},
+}));
+
+function useSensorStream(url: string) {
+  useEffect(() => {
+    const ws = new WebSocket(url);
+    ws.onmessage = e => {
+      const { id, value, timestamp } = JSON.parse(e.data);
+      useSensors.setState(s => ({
+        sensors: { ...s.sensors, [id]: { value, timestamp } },
+      }));
+    };
+    return () => ws.close();
+  }, [url]);
+}
+```
+
+### Sensor heatmap on 3D mesh
+```tsx
+function SensorOverlay() {
+  const sensors = useSensors(s => s.sensors);
+  return (
+    <>
+      {Object.entries(sensors).map(([id, sensor]) => (
+        <mesh key={id} position={sensor.position}>
+          <sphereGeometry args={[0.2, 16, 16]} />
+          <meshStandardMaterial
+            color={tempToColor(sensor.value)}
+            emissive={tempToColor(sensor.value)}
+            emissiveIntensity={0.5}
+          />
+        </mesh>
+      ))}
+    </>
+  );
+}
+
+function tempToColor(t: number) {
+  // 매 cold blue → hot red
+  const h = (1 - Math.min(t / 100, 1)) * 240;
+  return `hsl(${h}, 100%, 50%)`;
+}
+```
+
+### Time-series chart + 3D selection sync
+```tsx
+const [selectedAsset, setSelectedAsset] = useState<string | null>(null);
+
+<Asset onClick={() => setSelectedAsset('pump-3')} />
+{selectedAsset && (
+  <DetailPanel>
+    <TimeSeriesChart sensorId={selectedAsset} />
+  </DetailPanel>
+)}
+```
+
+### WebGPU compute for particle simulation
+```ts
+// 매 air flow / thermal simulation 100k particles.
+const computeShader = `
+@group(0) @binding(0) var<storage, read_write> particles: array<vec4f>;
+@compute @workgroup_size(64)
+fn main(@builtin(global_invocation_id) id: vec3u) {
+  let i = id.x;
+  particles[i].xyz += particles[i].xyz * 0.01; // 매 velocity update
+}`;
+```
+
+### Cesium for geo-scale twin
+```tsx
+import { Viewer, Entity } from 'resium';
+
+<Viewer full>
+  {fleet.map(vehicle => (
+    <Entity
+      key={vehicle.id}
+      position={Cartesian3.fromDegrees(vehicle.lon, vehicle.lat, vehicle.alt)}
+      model={{ uri: '/models/truck.glb', scale: 1.0 }}
+    />
+  ))}
+</Viewer>
+```
+
+### Anomaly detection (client-side)
+```ts
+function detectAnomaly(values: number[]): boolean {
+  const mean = values.reduce((a, b) => a + b) / values.length;
+  const std = Math.sqrt(values.reduce((s, v) => s + (v - mean) ** 2, 0) / values.length);
+  const last = values[values.length - 1];
+  return Math.abs(last - mean) > 3 * std; // 매 3-sigma
+}
+```
+
+## 매 결정 기준
+| 상황 | Approach |
+|---|---|
+| Indoor (factory/building) | React Three Fiber + glTF. |
+| Outdoor / geo-scale | Cesium / MapLibre 3D. |
+| < 1k sensors | WebSocket + zustand. |
+| 100k+ data points | WebGPU compute + instanced mesh. |
+| Forecasting | server-side (TimeGPT / Prophet) → push results. |
+| Safety-critical | unidirectional viz only — control via separate verified channel. |
+
+**기본값**: R3F + WebSocket + zustand + recharts. WebGPU 는 particle/heatmap 만.
+
+## 🔗 Graph
+- 부모: [[클라우드_인프라_및_IaC_운영_표준|IoT]]
+- 변형: [[GIS]]
+- Adjacent: [[WebGPU]] · [[Three.js]] · [[Cesium]]
+
+## 🤖 LLM 활용
+**언제**: 물리 system live mirror, 감독자 dashboard, what-if simulation.
+**언제 X**: static infographic, 매 control loop (latency-critical 은 PLC/edge).
+
+## ❌ 안티패턴
+- **High-poly raw model**: 100M tri 의 CAD model 그대로 load → 매 GPU 죽음. Decimate → 100k tri.
+- **Per-sensor mesh**: 10k sensor 의 sphere 개별 mesh → 매 instanced mesh 사용.
+- **Polling**: 매 1초마다 REST GET → WebSocket / SSE.
+- **Control via twin UI**: viz 와 control 분리. 매 safety-critical 명령은 verified channel.
+- **No level of detail**: 멀리 있는 asset 도 풀 detail — LOD 필수.
+
+## 🧪 검증 / 중복
+- Verified (NIST digital twin definition, R3F docs, Cesium docs, WebGPU spec).
+- 신뢰도 A-.
+
+## 🕓 Changelog
+| 날짜 | 변경 |
+|---|---|
+| 2026-05-08 | Phase 1 |
+| 2026-05-10 | Manual cleanup — R3F + WebSocket + WebGPU stack |