2nd/10_Wiki/Topics/Frontend/WebGPU Compute Shader.md

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-webgpu-compute-shader	WebGPU Compute Shader	10_Wiki/Topics	needs_review	self	P-Reinforce-AUTO-B03C61	none	A	0.9	auto-reinforced		2026-04-20	[P-Reinforce] Continuous Worker - WebGPU Compute Shader	Claude Opus 4.7 (auto-normalize 2026-05-08)	language framework unspecified unspecified

WebGPU Compute Shader

📌 한 줄 통찰 (The Karpathy Summary)

WebGPU Compute Shader는 범용 GPU 연산을 수행하여 메인 스레드(CPU)의 과중한 작업을 GPU 코어로 분산시키는 렌더링 기술이다 [1, 2]. InstancedMesh를 사용할 때 발생하는 가시성 판단(컬링) 및 데이터 전송 병목 현상을 극복하기 위해 GPU 주도 렌더링(GPU-driven Rendering)을 구현하는 데 핵심적인 역할을 한다 [2]. 이를 통해 수백만 개의 파티클이나 대규모 인스턴스의 물리 연산 및 컬링을 CPU 개입 없이 GPU 내부에서 병렬로 직접 처리할 수 있다 [1-3].

📖 구조화된 지식 (Synthesized Content)

• GPU 주도 컬링 및 간접 그리기(Indirect Draw): InstancedMesh의 근본적인 문제인 'CPU 기반 가시성 판단 오버헤드'를 해결하기 위해 활용된다 [2]. 컴퓨트 셰이더가 모든 인스턴스의 시야 포함 여부(Frustum Culling)와 가림 현상(Occlusion)을 직접 판별하고, 시야에 존재하는 인스턴스 정보만 GPU 내부 버퍼에 담아 간접 그리기(drawIndirect 또는 간접 버퍼) 명령으로 출력한다 [2, 4, 5]. 이로 인해 CPU와 GPU 간의 데이터 전송량이 거의 0에 수렴하게 되며, 수백만 개의 인스턴스 렌더링에 필수적인 최적화를 제공한다 [2, 6].
• 대규모 연산의 병렬 처리: 기존 CPU 기반의 시스템은 약 50,000개 수준의 파티클 업데이트에서 성능 병목을 겪지만, WebGPU 컴퓨트 셰이더를 활용하면 수백만 개 단위의 연산으로 한계를 확장할 수 있다 [3]. 파티클뿐만 아니라 물리 시뮬레이션이나 대규모 지형의 실시간 절차적 생성(Procedural generation) 등 연산 집약적인 작업을 GPU에서 실시간으로 처리할 수 있다 [1, 7].
• 작업 그룹 공유 메모리와 렌더링 동기화: 컴퓨트 셰이더 내에서 스레드 간 데이터 공유가 필요한 경우, 전역 메모리보다 10~100배 빠른 작업 그룹 공유 메모리(workgroup shared memory)를 활용하여 성능을 높일 수 있다 [1, 6]. 또한, 씬에 컴퓨트 셰이더 작업이 포함된 경우, 종속된 렌더 패스가 시작되기 전에 컴퓨트 패스가 완전히 끝나도록 보장하기 위해 비동기 렌더링(renderAsync)을 사용하여 GPU 작업을 동기화해야 한다 [8].
• 스토리지 텍스처(Storage Textures) 활용: 일반 텍스처와 달리 컴퓨트 셰이더 내에서 읽기와 쓰기가 모두 가능한 스토리지 텍스처를 지원한다 [9]. 이는 유체 시뮬레이션, 이미지 처리, 그리고 GPU 주도 렌더링 등 복잡한 효과를 구현하는 데 필수적인 요소로 작용한다 [9].

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

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

🔗 지식 연결 (Graph)

• Related Topics: GPU-driven Rendering, Indirect Draw, Frustum Culling, Draw Call
• Projects/Contexts: 대규모 건축물 및 지형 뷰어(BIM), Three.js WebGPU 파티클 예제, 실시간 물리 및 유체 시뮬레이션
• Contradictions/Notes: 컴퓨트 셰이더를 통해 GPU 단에서 컬링 및 피킹 처리를 최적화할 수 있으나, 다른 인스턴스에 의해 가려진 객체들을 포함하여 올가미(Lasso) 그룹 선택을 하는 것과 같은 복잡한 상호작용은 컴퓨트 셰이더만으로는 간단히 해결되지 않으며, 깊이 벗기기(depth-peeling)와 같은 추가적인 셰이더 작업이나 웹 워커가 필요할 수 있다 [10].

---

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: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)