2nd/10_Wiki/Topics/Frontend/디지털 트윈 및 데이터 시뮬레이션.md

---
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
- 부모: [[3D Visualization]] · [[IoT]]
- 변형: [[BIM]] · [[GIS]] · [[Fleet Tracking]]
- 응용: [[Smart Factory]] · [[Energy Grid]] · [[Building Management]]
- Adjacent: [[WebGPU]] · [[WebSocket]] · [[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 |