2nd/10_Wiki/Topics/Frontend/GPU Resources.md

---
id: wiki-2026-0508-gpu-resources
title: GPU Resources
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [GPU Buffer, GPU Texture, Render Target, WebGPU Resources]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [gpu, webgpu, graphics, rendering]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: webgpu
---

# GPU Resources

## 매 한 줄
> **"매 GPU 는 매 buffer + texture + sampler + binding 의 매 4 primitive 위에서 매 모든 것을 그린다."**. Buffer 는 매 raw memory, texture 는 매 sampled grid, render target 은 매 write 가능한 texture. 매 2026 WebGPU / Vulkan / Metal 모두 매 같은 model.

## 매 핵심

### 매 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.

### 매 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.

### 매 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.

### 매 응용
1. PBR renderer — 매 g-buffer (multiple render target).
2. Post-processing — 매 ping-pong render target.
3. Compute particles — 매 storage buffer + indirect draw.

## 💻 패턴

### 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]));
```

### 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);

pass.setVertexBuffer(0, vb);
pass.draw(3);
```

### 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],
);
```

### 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,
});

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',
  },
});
```

### 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]]
- 응용: [[Post Processing]] · [[Compute Shader]]

## 🤖 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 패턴 |