2nd/10_Wiki/Topics/DevOps_and_Security/Data Array Textures.md

---
id: wiki-2026-0508-data-array-textures
title: Data Array Textures
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Texture Array, GL_TEXTURE_2D_ARRAY, WebGL2 Array Texture]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [webgl, gpu, texture, graphics, rendering]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: glsl
  framework: webgl2
---

# Data Array Textures

## 매 한 줄
> **"매 N 장 의 동일 size texture 의 single bind"**. 매 GL_TEXTURE_2D_ARRAY 의 atlas 의 alternative 의 sub-texel bleed 의 X 의 mipmap-safe 의 layered access 의 enable. 매 2026 년 의 WebGPU 의 default storage 의 voxel terrain, sprite atlas, lookup table 의 standard.

## 매 핵심

### 매 vs Atlas
- **Atlas**: 매 single 2D texture 의 grid. 매 mipmap 의 bleed problem.
- **Array texture**: 매 layer 의 independent. 매 mipmap-safe. 매 single bind 의 N draw call 의 1 draw call 의 reduction.

### 매 제약
- 매 모든 layer 의 same size + same format.
- 매 max_array_layers (보통 2048) 의 hardware limit.
- 매 sampler 의 layer index 의 third coord (z) 로 access.

### 매 응용
1. Voxel/Minecraft-like terrain (block type → layer index).
2. Sprite animation (frame → layer).
3. LUT (lookup table) batch.
4. Instanced material variation.
5. ML inference의 batched feature map.

## 💻 패턴

### WebGL2 array texture upload
```javascript
const gl = canvas.getContext('webgl2');
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D_ARRAY, tex);

const W = 64, H = 64, LAYERS = 16;
gl.texStorage3D(gl.TEXTURE_2D_ARRAY, 1, gl.RGBA8, W, H, LAYERS);

for (let i = 0; i < LAYERS; i++) {
  const pixels = loadLayer(i); // Uint8Array(W*H*4)
  gl.texSubImage3D(
    gl.TEXTURE_2D_ARRAY, 0,
    0, 0, i,         // x, y, layer offset
    W, H, 1,
    gl.RGBA, gl.UNSIGNED_BYTE, pixels
  );
}
gl.texParameteri(gl.TEXTURE_2D_ARRAY, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
```

### GLSL 300 es sampling
```glsl
#version 300 es
precision highp float;
precision highp sampler2DArray;

uniform sampler2DArray uBlocks;
in vec2 vUV;
flat in int vBlockType;
out vec4 fragColor;

void main() {
  fragColor = texture(uBlocks, vec3(vUV, float(vBlockType)));
}
```

### WebGPU equivalent
```javascript
const tex = device.createTexture({
  size: [W, H, LAYERS],
  format: 'rgba8unorm',
  usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
  dimension: '2d', // array via depthOrArrayLayers
});

device.queue.writeTexture(
  { texture: tex, origin: [0, 0, layer] },
  pixels,
  { bytesPerRow: W * 4 },
  { width: W, height: H, depthOrArrayLayers: 1 }
);
```

### WGSL sampling
```wgsl
@group(0) @binding(0) var blocks: texture_2d_array<f32>;
@group(0) @binding(1) var samp: sampler;

@fragment
fn fs_main(@location(0) uv: vec2f, @location(1) @interpolate(flat) layer: u32) -> @location(0) vec4f {
  return textureSample(blocks, samp, uv, layer);
}
```

### Three.js DataArrayTexture
```javascript
import { DataArrayTexture, RGBAFormat, UnsignedByteType } from 'three';

const data = new Uint8Array(W * H * LAYERS * 4);
// fill data...
const tex = new DataArrayTexture(data, W, H, LAYERS);
tex.format = RGBAFormat;
tex.type = UnsignedByteType;
tex.needsUpdate = true;
material.uniforms.uBlocks.value = tex;
```

### Mipmap generation
```javascript
gl.bindTexture(gl.TEXTURE_2D_ARRAY, tex);
gl.generateMipmap(gl.TEXTURE_2D_ARRAY);
// → each layer mipmapped independently → no atlas-style bleed
```

## 매 결정 기준

| 상황 | Approach |
|---|---|
| < 16 unique textures, dynamic | Texture atlas (simple, cached) |
| Many same-size layers, mipmap critical | Array texture |
| Different sizes / formats | Bindless / texture array of handles (WebGPU) |
| Voxel terrain | Array texture (layer = block type) |
| Cubemap variant | TextureCubeArray |

**기본값**: 매 same-size + N > 8 → array texture.

## 🔗 Graph
- 부모: [[WebGL 20|WebGL2]] · [[WebGPU]]
- 변형: [[Texture Atlas]]
- 응용: [[실시간 물리 시뮬레이션 동기화|Real-time Physics Simulation]]
- Adjacent: [[Mipmap]]

## 🤖 LLM 활용
**언제**: 매 shader code generation 의 boilerplate 의 GLSL/WGSL 의 sample. 매 LLM 의 layer index 의 binding 의 OK.
**언제 X**: 매 driver-specific 의 size limit 의 query 는 runtime 의 `getParameter`. 매 LLM 의 hardcode 의 X.

## ❌ 안티패턴
- **Mixed sizes의 attempt**: 매 array texture 의 disqualify. 매 atlas 또는 bindless.
- **Layer count 의 over 2048**: 매 split 의 multi-array-texture 또는 bindless.
- **Mipmap 의 atlas로**: 매 bleed 의 inevitable. 매 array texture 의 fix.

## 🧪 검증 / 중복
- Verified (Khronos WebGL2 spec, WebGPU spec, Three.js docs).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — array texture / WebGL2 + WebGPU usage |