[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,92 +2,205 @@
|
||||
id: wiki-2026-0508-gpu-resources
|
||||
title: GPU Resources
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: [P-Reinforce-AUTO-4AA291]
|
||||
aliases: [GPU Buffer, GPU Texture, Render Target, WebGPU Resources]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.9
|
||||
tags: [auto-reinforced]
|
||||
verification_status: applied
|
||||
tags: [gpu, webgpu, graphics, rendering]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-04-20
|
||||
github_commit: "[P-Reinforce] Continuous Worker - GPU Resources"
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: typescript
|
||||
framework: webgpu
|
||||
---
|
||||
|
||||
# [[GPU Resources|GPU Resources]]
|
||||
# GPU Resources
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
> GPU 리소스는 Three.js 및 [[WebGL|WebGL]] 환경에서 렌더링을 위해 할당되는 VRAM 자원으로, 기하학적 구조(Geometries), 재질(Materials), 텍스처(Textures), 렌더 타겟(Render targets) 등을 포함합니다 [1-3]. 브라우저 렌더링 엔진은 이러한 리소스들을 자동으로 가비지 컬렉트(Garbage Collect)하지 않기 때문에 사용이 끝나면 개발자가 직접 명시적으로 메모리에서 해제해야 합니다 [1]. 효율적인 GPU 리소스 관리가 이루어지지 않으면 심각한 메모리 누수([[Memory Leaks|Memory Leaks]])가 발생하며, 궁극적으로 브라우저의 제한된 GPU 메모리를 초과하여 컨텍스트 손실(Context Lost)과 화면 멈춤 현상을 유발합니다 [3, 4].
|
||||
## 매 한 줄
|
||||
> **"매 GPU 는 매 buffer + texture + sampler + binding 의 매 4 primitive 위에서 매 모든 것을 그린다."**. Buffer 는 매 raw memory, texture 는 매 sampled grid, render target 은 매 write 가능한 texture. 매 2026 WebGPU / Vulkan / Metal 모두 매 같은 model.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **GPU 리소스의 구성 및 메모리 소비량:** 3D 모델을 렌더링할 때 GPU 메모리에는 정점 버퍼(Vertex buffers), 인덱스 버퍼(Index buffers), 텍스처 맵, 그리고 셰이더 프로그램 등이 할당됩니다 [3]. 고해상도 텍스처는 막대한 메모리를 차지하여, 단일 4K(4096x4096) 압축 해제 텍스처의 경우 VRAM의 64MB 이상을 단독으로 소비할 수 있습니다 [1, 5]. 추가적으로 후처리(Post-[[Processing|Processing]]) 단계에서 사용되는 개별 렌더 타겟들 또한 프레임 버퍼 메모리를 추가 할당합니다 [2].
|
||||
- **명시적인 자원 해제(Disposal) 필수성:** Three.js 프레임워크는 GPU 리소스를 추적하여 자동으로 메모리에서 지워주지 않습니다 [1]. 따라서 메모리 누수를 방지하기 위해서는 에셋이 더 이상 필요하지 않을 때 반드시 `geometry.dispose()`, `material.dispose()`, `texture.dispose()` 함수를 호출해 GPU 자원을 명시적으로 해제해야 합니다 [1, 4, 6].
|
||||
- **특수 텍스처 및 빈번한 생성 객체 관리:** GLTF 모델 파일에서 `ImageBitmap` 형태로 로드된 텍스처 리소스의 경우, 기본 폐기 메서드 외에도 명시적으로 `texture.source.data.close?()`를 호출해 닫아주어야만 메모리가 새는 것을 막을 수 있습니다 [4, 7]. 또한 게임 내 탄환이나 파티클처럼 자주 생성되고 파괴되는 리소스의 경우 매번 새로 할당하지 않고 오브젝트 풀링(Object [[Pooling|Pooling]]) 방식을 사용하여 메모리 할당 오버헤드를 막는 것이 좋습니다 [4, 7].
|
||||
- **리소스 한계 모니터링:** WebGL 컨텍스트의 가용 메모리 한도는 디바이스 환경에 따라 약 256MB에서 1GB 수준으로 제한적입니다 [3]. 이 용량을 초과해 GPU 리소스가 할당되면 컨텍스트 손실이 발생하여 애플리케이션이 충돌하게 됩니다 [3]. 이를 방지하기 위해서는 런타임 중에 `renderer.info.[[memory|memory]]` 상태를 꾸준히 모니터링하여 텍스처나 지오메트리 수가 지속적으로 증가하는 메모리 누수 현상이 없는지 확인해야 합니다 [1, 4].
|
||||
## 매 핵심
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
- **과거 데이터와의 충돌:** 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
|
||||
- **정책 변화:** Graphics & Performance 분야의 자동 자산화 수행.
|
||||
### 매 Buffer 종류
|
||||
- **Vertex buffer**: 매 vertex attribute (position, normal, uv).
|
||||
- **Index buffer**: 매 triangle index.
|
||||
- **Uniform buffer (UBO)**: 매 small constant data — 매 16KB 권장.
|
||||
- **Storage buffer (SSBO)**: 매 large read/write — 매 compute shader.
|
||||
- **Staging buffer**: 매 CPU→GPU upload 의 매 intermediate.
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** [[Memory Management|Memory Management]], Memory Leaks, Textures, VRAM, [[Garbage Collection|Garbage Collection]]
|
||||
- **Projects/Contexts:** Three.js, [[WebGL|WebGL]], [[WebGPU|WebGPU]]
|
||||
- **Contradictions/Notes:** 소스에 관련 모순이나 충돌 정보는 없습니다.
|
||||
### 매 Texture 종류
|
||||
- **Sampled texture**: 매 shader 에서 매 sample.
|
||||
- **Storage texture**: 매 compute write.
|
||||
- **Depth/Stencil**: 매 depth test.
|
||||
- **Cube map / 3D / Array**: 매 special layout.
|
||||
- **Format**: rgba8unorm, rgba16float, bgra8unorm-srgb, depth32float, etc.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-19*
|
||||
### 매 Render Target
|
||||
- 매 texture + 매 RENDER_ATTACHMENT usage. 매 framebuffer 의 매 color/depth attachment.
|
||||
- 매 swap chain texture 는 매 surface 가 매 제공 (acquireNextImage / getCurrentTexture).
|
||||
|
||||
---
|
||||
### 매 Binding model
|
||||
- **WebGPU/Vulkan**: bind group / descriptor set — 매 group of resources.
|
||||
- **Layout**: 매 shader 와 매 CPU 가 매 합의한 schema.
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### 매 응용
|
||||
1. PBR renderer — 매 g-buffer (multiple render target).
|
||||
2. Post-processing — 매 ping-pong render target.
|
||||
3. Compute particles — 매 storage buffer + indirect draw.
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(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
|
||||
### WebGPU buffer create + write
|
||||
```typescript
|
||||
const buf = device.createBuffer({
|
||||
size: 256,
|
||||
usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
|
||||
});
|
||||
device.queue.writeBuffer(buf, 0, new Float32Array([1, 2, 3, 4]));
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Vertex buffer + draw
|
||||
```typescript
|
||||
const verts = new Float32Array([0, 0.5, 0, -0.5, -0.5, 0, 0.5, -0.5, 0]);
|
||||
const vb = device.createBuffer({
|
||||
size: verts.byteLength,
|
||||
usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
|
||||
});
|
||||
device.queue.writeBuffer(vb, 0, verts);
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
pass.setVertexBuffer(0, vb);
|
||||
pass.draw(3);
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Texture upload
|
||||
```typescript
|
||||
const img = await createImageBitmap(blob);
|
||||
const tex = device.createTexture({
|
||||
size: [img.width, img.height, 1],
|
||||
format: 'rgba8unorm',
|
||||
usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
|
||||
});
|
||||
device.queue.copyExternalImageToTexture(
|
||||
{ source: img },
|
||||
{ texture: tex },
|
||||
[img.width, img.height],
|
||||
);
|
||||
```
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
### Render target (offscreen)
|
||||
```typescript
|
||||
const colorTex = device.createTexture({
|
||||
size: [w, h, 1],
|
||||
format: 'rgba16float',
|
||||
usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.TEXTURE_BINDING,
|
||||
});
|
||||
const depthTex = device.createTexture({
|
||||
size: [w, h, 1],
|
||||
format: 'depth24plus',
|
||||
usage: GPUTextureUsage.RENDER_ATTACHMENT,
|
||||
});
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
const enc = device.createCommandEncoder();
|
||||
const pass = enc.beginRenderPass({
|
||||
colorAttachments: [{
|
||||
view: colorTex.createView(),
|
||||
clearValue: { r: 0, g: 0, b: 0, a: 1 },
|
||||
loadOp: 'clear',
|
||||
storeOp: 'store',
|
||||
}],
|
||||
depthStencilAttachment: {
|
||||
view: depthTex.createView(),
|
||||
depthClearValue: 1.0,
|
||||
depthLoadOp: 'clear',
|
||||
depthStoreOp: 'store',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
### Bind group + sampler
|
||||
```typescript
|
||||
const sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear' });
|
||||
|
||||
const layout = device.createBindGroupLayout({
|
||||
entries: [
|
||||
{ binding: 0, visibility: GPUShaderStage.FRAGMENT, sampler: {} },
|
||||
{ binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: {} },
|
||||
{ binding: 2, visibility: GPUShaderStage.VERTEX, buffer: { type: 'uniform' } },
|
||||
],
|
||||
});
|
||||
|
||||
const group = device.createBindGroup({
|
||||
layout,
|
||||
entries: [
|
||||
{ binding: 0, resource: sampler },
|
||||
{ binding: 1, resource: tex.createView() },
|
||||
{ binding: 2, resource: { buffer: ubo } },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### Compute shader with storage buffer
|
||||
```typescript
|
||||
const ssbo = device.createBuffer({
|
||||
size: 1024 * 1024,
|
||||
usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_SRC,
|
||||
});
|
||||
const pipe = device.createComputePipeline({
|
||||
layout: 'auto',
|
||||
compute: { module: device.createShaderModule({ code: wgsl }), entryPoint: 'main' },
|
||||
});
|
||||
const enc = device.createCommandEncoder();
|
||||
const cp = enc.beginComputePass();
|
||||
cp.setPipeline(pipe);
|
||||
cp.setBindGroup(0, bindGroup);
|
||||
cp.dispatchWorkgroups(1024);
|
||||
cp.end();
|
||||
```
|
||||
|
||||
### Resource lifecycle
|
||||
```typescript
|
||||
buffer.destroy(); // explicit free — required for large resources
|
||||
texture.destroy();
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Resource |
|
||||
|---|---|
|
||||
| 매 small constants per draw | Uniform buffer |
|
||||
| 매 large read-only data | Storage buffer (read) |
|
||||
| 매 read/write GPGPU | Storage buffer |
|
||||
| 매 sampled image | Texture (2D/3D/Cube) |
|
||||
| 매 framebuffer attachment | Texture w/ RENDER_ATTACHMENT |
|
||||
| 매 CPU↔GPU stream | Staging buffer + queue.writeBuffer |
|
||||
|
||||
**기본값**: WebGPU + bind group layout 명시. 매 destroy() 호출 잊지 X.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[WebGPU]] · [[Computer Graphics]]
|
||||
- 변형: [[Vulkan Resources]] · [[Metal Resources]] · [[D3D12 Resources]]
|
||||
- 응용: [[PBR Pipeline]] · [[Post Processing]] · [[Compute Shader]]
|
||||
- Adjacent: [[Shader Language]] · [[Framebuffer]] · [[Sampler]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: 매 GPU pipeline 설계, 매 memory budget, 매 binding layout debug.
|
||||
**언제 X**: 매 high-level engine (Three.js, Babylon) 사용 시 — 매 abstraction 위.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **매 frame buffer create**: 매 alloc 폭증. 매 reuse / pool.
|
||||
- **UBO 에 매 large data**: 매 16KB cap. 매 SSBO 사용.
|
||||
- **destroy() 누락**: 매 GPU OOM.
|
||||
- **Bind group layout mismatch**: 매 shader / CPU schema drift.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (WebGPU spec, Vulkan spec).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — 매 WebGPU buffer/texture/RT 패턴 |
|
||||
|
||||
Reference in New Issue
Block a user