Files
2nd/10_Wiki/Topics/Frontend/WebGL2.md
T

5.0 KiB

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, tags, raw_sources, last_reinforced, github_commit, inferred_by, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score tags raw_sources last_reinforced github_commit inferred_by tech_stack
wiki-2026-0508-webgl2 WebGL2 10_Wiki/Topics needs_review self
P-Reinforce-AUTO-208D23
none A 0.9
auto-reinforced
2026-04-20 [P-Reinforce] Continuous Worker - WebGL2 Claude Opus 4.7 (auto-normalize 2026-05-08)
language framework
unspecified unspecified

WebGL2

📌 한 줄 통찰 (The Karpathy Summary)

WebGL2는 웹 브라우저 환경에서 3D 그래픽스를 렌더링하기 위해 사용되는 그래픽 API입니다 [1, 2]. 최신 Three.js 생태계에서는 차세대 API인 WebGPU로의 전환이 이루어지고 있으나, WebGPU를 지원하지 않는 브라우저에서는 WebGL 2가 자동 대체(Fallback) 수단으로서 핵심적인 역할을 수행합니다 [3, 4]. WebGL1과 비교했을 때 데이터 배열 텍스처(Data Array Textures)를 지원하고 텍스처 아틀라스의 블리딩(Bleeding) 현상을 더 쉽게 제어할 수 있는 등 진보된 기능을 제공하지만, WebGPU와 달리 컴퓨트 셰이더(Compute Shaders)를 지원하지 않는 한계가 있습니다 [1, 5, 6].

📖 구조화된 지식 (Synthesized Content)

  • WebGPU의 자동 대체(Fallback) 시스템: Three.js(r171 버전 이후)에서 제공하는 WebGPURenderer는 사용자의 브라우저가 WebGPU를 지원하지 않을 경우, 별도의 코드 분기 없이 자동으로 WebGL 2 환경으로 전환하여 호환성을 유지합니다 [3, 7]. 개발자는 디버깅이나 아직 WebGPU에서 지원하지 않는 특정 WebGL 확장 기능을 사용하기 위해 forceWebGL: true 옵션으로 강제 WebGL 렌더링 모드를 활성화할 수 있습니다 [8, 9].
  • 데이터 배열 텍스처(Data Array Textures) 및 렌더링 최적화: WebGL2는 데이터 배열 텍스처 기술을 지원하여 여러 텍스처를 셰이더 내에서 인덱스로 접근할 수 있는 스택 형태로 제공합니다 [1, 10]. 이 방식은 텍스처 아틀라싱의 주요 단점인 인접 텍스처 간의 경계선 블리딩(Edge Bleeding) 문제를 해결하고 네이티브 래핑(Wrapping)을 지원합니다 [1, 10]. 또한 WebGL2 환경에서는 WebGL1에 비해 아틀라스 블리딩 처리가 훨씬 수월합니다 [6].
  • 성능 및 기능적 한계: WebGL2는 현대 렌더링의 필수 기술로 자리 잡은 컴퓨트 셰이더(Compute Shaders)를 지원하지 않습니다 [5]. 따라서 GPU 병렬 처리를 통한 복잡한 물리 연산, 대규모 파티클 시스템 업데이트, GPU 주도의 정밀한 컬링(GPU-driven Culling) 등은 불가능하며, 이러한 한계를 극복하기 위해 대규모 프로젝트에서는 WebGPU로의 아키텍처 전환이 권장되고 있습니다 [2, 5, 11].

⚠️ 모순 및 업데이트 (Contradictions & Updates)

  • 과거 데이터와의 충돌: 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
  • 정책 변화: Graphics & Performance 분야의 자동 자산화 수행.

🔗 지식 연결 (Graph)

  • Related Topics: WebGPU, Three.js, Data Array Textures, Compute Shaders
  • Projects/Contexts: Three.js WebGPURenderer 자동 폴백 지원, BatchedMesh 및 드로우 콜 최적화 파이프라인
  • Contradictions/Notes: 소스에 따르면 WebGL 2는 현재 널리 지원되는 강력한 그래픽 API이지만, 컴퓨트 셰이더를 통한 GPU 기반의 병렬 가시성 연산(Compute Culling)이나 대규모 간접 드로우(Indirect Draw) 부재로 인해 렌더링 성능 최적화의 기술적 한계점에 도달해 있습니다 [2, 5, 11].

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: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

  • (TODO)

선택 B를 써야 할 때:

  • (TODO)

기본값:

(TODO)

안티패턴 (Anti-Patterns)

  • [안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)