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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

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

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

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)

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

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

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

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