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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

id	title	category	status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	verification_status	tags	raw_sources	last_reinforced	github_commit	tech_stack
wiki-2026-0508-디지털-트윈-및-데이터-시뮬레이션	디지털 트윈 및 데이터 시뮬레이션	10_Wiki/Topics	verified	self	Digital Twin IoT Visualization Real-time Simulation	none	A	0.85	applied	frontend digital-twin threejs websocket visualization		2026-05-10	pending	language framework typescript 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

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

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

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

const [selectedAsset, setSelectedAsset] = useState<string | null>(null);

<Asset onClick={() => setSelectedAsset('pump-3')} />
{selectedAsset && (
  <DetailPanel>
    <TimeSeriesChart sensorId={selectedAsset} />
  </DetailPanel>
)}

WebGPU compute for particle simulation

// 매 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

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)

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 운영 표준
• 변형: 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