feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]
This commit is contained in:
@@ -1,20 +1,33 @@
|
||||
---
|
||||
category: Unified
|
||||
id: wiki-2026-0508-webgl
|
||||
title: WebGL
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [auto-consolidated, technical-documentation]
|
||||
title: [[WebGL|WebGL]]
|
||||
last_updated: 2026-05-02
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
---
|
||||
|
||||
# [[WebGL|WebGL]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> **WebGL**은 플러그인 없이 웹 브라우저에서 2D 및 3D 그래픽을 렌더링하기 위한 저수준(Low-level) [[JavaScript|JavaScript]] API입니다. 원시 WebGL은 직접 다루기 매우 복잡하고 장황하지만, **Three.js**나 **React Three Fiber(R3F)** 같은 라이브러리를 통해 추상화되어 현대 웹의 고성능 3D 인터랙티브 그래픽과 게임 엔진을 구현하는 핵심 기반 기술로 사용됩니다.
|
||||
|
||||
---
|
||||
|
||||
> 모바일 기반 WebGL 애플리케이션 개발은 상대적으로 부족한 시스템 메모리와 프로세서 성능을 지닌 모바일 브라우저 환경에서 매끄러운 3D 렌더링(60fps)을 구현하고 배터리 소모를 최소화하는 데 중점을 두는 기술적 접근입니다. 제한된 하드웨어 리소스를 극복하기 위해 엄격한 폴리곤 수 및 드로우 콜([[Draw Call|Draw Call]]) 제한, 텍스처 메모리 압축, 셰이더 정밀도 하향, 그리고 디바이스 특성을 고려한 전원 및 컨텍스트 관리 기법이 복합적으로 동원됩니다.
|
||||
|
||||
## 📖 Core Content
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
**1. WebGL의 복잡성과 Three.js의 역할** WebGL 자체는 셰이더 코드와 버퍼를 직접 다루어야 하는 매우 저수준(Low-level)의 시스템입니다. 이러한 복잡성을 줄이고자 개발된 것이 Three.js 라이브러리이며, 개발자에게 씬(Scene), 카메라, 기하구조(Geometry), 재질(Material), 렌더러 등의 추상화된 객체를 제공하여 WebGL 렌더링 파이프라인을 훨씬 쉽게 구축할 수 있도록 지원합니다.
|
||||
|
||||
**2. WebGL의 메모리 및 자원 관리 (가비지 컬렉션 한계)** JavaScript의 일반적인 힙 메모리와 달리, WebGL이 사용하는 GPU 자원(VRAM에 올라간 텍스처, 기하구조, 재질, 렌더 타겟 등)은 브라우저의 가비지 컬렉터(GC)에 의해 자동으로 회수되지 않습니다. 따라서 심각한 메모리 누수와 GPU 크래시를 방지하려면, 사용이 끝난 자원에 대해 반드시 명시적으로 `.dispose()` 메서드를 호출하여 직접 메모리를 해제해야 합니다. GLTF 모델에서 로드된 `ImageBitmap` 텍스처의 경우 `.close()` 호출도 필요합니다.
|
||||
@@ -46,7 +59,7 @@ last_updated: 2026-05-02
|
||||
* React Three Fiber 등에서 정적인 씬을 구현할 때 `frameloop="demand"` 옵션을 설정하여 불필요한 프레임 렌더링을 멈춤으로써 모바일 기기의 배터리를 아낄 수 있습니다 [9].
|
||||
* 모바일 환경에서는 WebGL 컨텍스트가 유실(context lost)되는 현상이 발생할 수 있으므로, 해당 이벤트를 수신하여 자연스럽게 복구되도록 처리해야 합니다 [10].
|
||||
|
||||
## ⚖️ Trade-offs & Caveats
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
||||
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
|
||||
|
||||
@@ -55,7 +68,7 @@ last_updated: 2026-05-02
|
||||
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
||||
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
|
||||
|
||||
## 🔗 Knowledge Connections
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** Three.js, [[React Three Fiber (R3F)|React Three Fiber (R3F]], WebGPU Compute Shaders, OffscreenCanvas, [[InstancedMesh (드로우 콜 최적화)|InstancedMesh (드로우 콜 최적화]], [[memory|memory]] Leak Prevention (메모리 누수 방지)
|
||||
- **Projects/Contexts:** 브라우저 기반 3D 데이터 시각화 및 디지털 트윈, 멀티스레드 기반 고성능 웹 게임 엔진
|
||||
- **Contradictions/Notes:** WebGL 파이프라인에서 `EffectComposer` 등을 활용해 커스텀 후처리(Post-[[Processing|Processing]])를 적용할 경우, WebGL의 내장 안티앨리어싱(AA) 기능이 무효화되는 제약이 있습니다. 이를 해결하려면 파이프라인 마지막 단계에 SMAA나 FXAA 효과 패스를 수동으로 추가해 주어야 시각적 품질을 유지할 수 있습니다.
|
||||
@@ -72,3 +85,52 @@ last_updated: 2026-05-02
|
||||
*Last updated: 2026-04-19*
|
||||
|
||||
---
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
Reference in New Issue
Block a user