2nd/10_Wiki/Topics/DevOps_and_Security/Data Array Textures.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-data-array-textures	Data Array Textures	10_Wiki/Topics	verified	self	Texture Array GL_TEXTURE_2D_ARRAY WebGL2 Array Texture	none	A	0.9	applied	webgl gpu texture graphics rendering		2026-05-10	pending	language framework glsl 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

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

#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

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

@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

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

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

• 부모: WebGL2 · WebGPU
• 변형: Texture Atlas · Bindless Textures
• 응용: Voxel Rendering · Sprite Batching · Real-time Physics Simulation
• Adjacent: GPU Memory Layout · 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