---
id: P-REINFORCE-AI-074AE7
category: "10_Wiki/💡 Topics/Automation & Industry"
confidence_score: 0.95
tags: []
last_reinforced: 2026-04-20
github_commit: "[P-Reinforce] Batch 9 - Wikified 3D Web-based HMI"
---

# [[3D Web-based HMI|3D Web-based HMI]]

## 📌 한 줄 통찰 (The Karpathy Summary)
> 3D Web-based HMI는 사용자가 기계 또는 자동화 시스템과 통신할 수 있도록 지원하는 소프트웨어 인터페이스로, 주로 SCADA(Supervisory Control and Data Acquisition) 시스템의 기기 모니터링 및 제어를 위한 디스플레이 역할을 수행합니다 [1, 2]. 기존 HMI 시스템의 특정 플랫폼 종속성과 별도의 소프트웨어 설치 요구라는 한계를 극복하기 위해 제안되었습니다 [3]. WebGL과 WebSocket 기술을 활용하여 사용자는 별도의 소프트웨어 설치 없이 모든 플랫폼의 HTML5 웹 브라우저에서 실시간 데이터 통신 및 3D 그래픽 렌더링을 경험할 수 있습니다 [3-5].

## 📖 구조화된 지식 (Synthesized Content)
* **도입 배경 및 기존 HMI의 한계:** 공장 및 빌딩 자동화 분야에서 널리 쓰이는 SCADA 시스템의 벤더들은 전통적으로 독점적인 HMI 소프트웨어를 제공해 왔습니다 [2]. 예를 들어, 상용 제품인 Genesis64의 GraphWorX64 컴포넌트는 Windows 운영 체제, .NET Framework, DirectX 설치 및 Internet Explorer 사용을 강제하는 플랫폼 종속적인 한계가 있었습니다 [6, 7]. 3D Web-based HMI는 이러한 문제점을 극복하고자 웹 기술을 바탕으로 고안되었습니다 [2, 3].
* **핵심 렌더링 및 통신 기술:** 3D Web-based HMI는 OpenGL ES 2.0을 기반으로 하는 크로스 플랫폼 웹 그래픽 라이브러리인 WebGL을 사용하여 3D 장면을 구성합니다 [4]. 저수준 API인 WebGL의 복잡성을 줄이기 위해 Three.js 라이브러리의 `WebGLRenderer()`를 활용하며, 화면 주사율에 맞춰 자연스러운 애니메이션을 처리하기 위해 `RequestAnimationFrame()`을 사용합니다 [4, 8]. 데이터 통신 측면에서는 HTTP 대신 WebSocket을 사용하여 서버와 클라이언트 간의 데이터가 빠르게 변경되는 상황에서도 효율적으로 대처할 수 있습니다 [3].
* **초당 프레임 수(FPS) 성능:** 상용 3D HMI 제품(GraphWorX64)과 성능을 비교 평가한 결과, 3D Web-based HMI는 브라우저(Internet Explorer 및 Chrome) 환경에서 큐브(Cube) 개수가 0.5K~0.8K일 때 목표 최대 성능인 60 FPS를 안정적으로 유지했습니다 [1, 9]. 큐브 개수가 증가하여 1.1K~1.6K에 도달했을 때는 인간의 눈이 프레임 건너뛰기를 감지하지 못하는 최소 기준인 30 FPS를 기록했습니다 [1, 9, 10].
* **프레임 지연 시간(Frame Time Latency) 및 디스플레이 품질:** FPS가 높더라도 프레임 시간이 불규칙하면 화면 끊김(Stuttering)이 발생할 수 있습니다 [10]. 실험 결과, 3D Web-based HMI는 객체가 5K에 이를 때까지 상용 제품보다 각 프레임을 렌더링하는 데 걸리는 시간 편차가 적어 훨씬 부드럽고 일관된 디스플레이를 제공했습니다 [1, 11, 12]. 
* **시스템 리소스 소모:** CPU 사용량은 약 40%, 메모리 사용량은 약 180MB 수준으로 상용 HMI(약 240MB)보다 메모리를 더 적게 사용하여 안정적인 모습을 보였습니다 [5, 13]. 다만 GPU 사용량은 상용 제품과 비교했을 때 평균적으로 약 5% 정도 더 높게 나타났습니다 [5, 13].

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 신규 문서로, 기존 정보와의 충돌 분석 예정.
- **정책 변화:** Automation & Industry 카테고리의 지식 연결망 강화를 위한 표준 위키화 적용.

## 🔗 지식 연결 (Graph)
- **Related Topics:** [[SCADA|SCADA]], [[WebGL|WebGL]], [[Three.js|Three.js]], WebSocket, Frame Time Latency
- **Projects/Contexts:** Genesis64 상용 제품과의 웹 기반 3D 렌더링 성능 벤치마크
- **Contradictions/Notes:** 3D Web-based HMI는 프레임의 부드러움(일관성)에서는 상용 제품보다 뛰어나지만, 전체 프로세스 소요 시간 중 약 96% 이상이 객체를 생성하는 실행 시간(Execution Time)이 아닌 렌더링 시간(Rendering Time)에 집중되어 있습니다. 이는 향후 렌더링 코드 최적화를 통해 성능을 더욱 개선해야 할 주요 병목 지점임을 시사합니다 [9, 14].

---
*Last updated: 2026-04-19*
- Raw Source: 00_Raw/2026-04-20/3D Web-based HMI.md
---