2nd/10_Wiki/Topics/Architecture/WebGL.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-webgl	WebGL	10_Wiki/Topics	verified	self	WebGL2 Web Graphics Library	none	A	0.9	applied	graphics web gpu opengl		2026-05-10	pending	language framework JavaScript WebGL2 / WebGPU

WebGL

매 한 줄

"매 OpenGL ES 의 browser 포팅 — 매 GPU 직접 access 의 web standard.". 2011 WebGL 1.0 (OpenGL ES 2.0 base), 2017 WebGL 2.0 (ES 3.0 base). 매 2026 modern web 은 WebGPU 로 transition 중이지만, WebGL 은 매 universal compatibility (iOS Safari 포함) 의 fallback 로 여전히 dominant.

매 핵심

매 architecture

• Context: canvas.getContext('webgl2') — 매 single global state machine.
• Pipeline: vertex shader → rasterization → fragment shader. 매 fixed-function 의 X.
• Buffers: VBO (vertex), IBO (index), FBO (framebuffer), UBO (uniform).
• Shaders: GLSL ES 3.00 — 매 string 으로 compile, link 후 use.

매 vs WebGPU (2026)

• WebGL: 매 universally available. 매 single-threaded driver. 매 immediate-mode binding.
• WebGPU: 매 modern (Vulkan/Metal/D3D12 mapping). 매 compute shader. 매 explicit pipeline. 매 Chrome/Edge/Firefox stable, Safari 18+ partial.
• 2026 default: 매 new project 는 WebGPU + WebGL fallback. 매 existing codebase 는 WebGL 유지.

매 응용

1. Three.js / Babylon.js — 매 3D engine.
2. Map rendering (Mapbox GL, deck.gl).
3. Data viz (PixiJS, regl).
4. Game (Unity WebGL, Unreal HTML5 export).

💻 패턴

Context creation + 매 capability check

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2', {
  antialias: true,
  alpha: false,
  preserveDrawingBuffer: false,
  powerPreference: 'high-performance',
});
if (!gl) throw new Error('WebGL2 unsupported');
console.log('Max texture size:', gl.getParameter(gl.MAX_TEXTURE_SIZE));

Shader compile helper

function compileShader(gl, src, type) {
  const sh = gl.createShader(type);
  gl.shaderSource(sh, src);
  gl.compileShader(sh);
  if (!gl.getShaderParameter(sh, gl.COMPILE_STATUS)) {
    const log = gl.getShaderInfoLog(sh);
    gl.deleteShader(sh);
    throw new Error(`Shader compile error: ${log}`);
  }
  return sh;
}
function linkProgram(gl, vsSrc, fsSrc) {
  const p = gl.createProgram();
  gl.attachShader(p, compileShader(gl, vsSrc, gl.VERTEX_SHADER));
  gl.attachShader(p, compileShader(gl, fsSrc, gl.FRAGMENT_SHADER));
  gl.linkProgram(p);
  if (!gl.getProgramParameter(p, gl.LINK_STATUS))
    throw new Error(gl.getProgramInfoLog(p));
  return p;
}

VAO + indexed draw

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

const vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 0, 0);

const ibo = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ibo);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

gl.bindVertexArray(null);

// draw
gl.bindVertexArray(vao);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

Instanced rendering (WebGL2)

gl.bindBuffer(gl.ARRAY_BUFFER, instanceMatrixBuf);
for (let i = 0; i < 4; i++) {
  gl.enableVertexAttribArray(2 + i);
  gl.vertexAttribPointer(2 + i, 4, gl.FLOAT, false, 64, i * 16);
  gl.vertexAttribDivisor(2 + i, 1); // per-instance
}
gl.drawElementsInstanced(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0, 10000);

Render-to-texture (FBO)

const fbo = gl.createFramebuffer();
const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA8, 1024, 1024, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE)
  throw new Error('FBO incomplete');

Lost context handling

canvas.addEventListener('webglcontextlost', (e) => {
  e.preventDefault();
  cancelAnimationFrame(rafId);
});
canvas.addEventListener('webglcontextrestored', () => {
  reinitGLResources(); // 매 mandatory
  rafId = requestAnimationFrame(render);
});

Resize 매 DPR aware

function resize() {
  const dpr = Math.min(window.devicePixelRatio, 2);
  const w = Math.floor(canvas.clientWidth * dpr);
  const h = Math.floor(canvas.clientHeight * dpr);
  if (canvas.width !== w || canvas.height !== h) {
    canvas.width = w; canvas.height = h;
    gl.viewport(0, 0, w, h);
  }
}

매 결정 기준

상황	Approach
매 new 2026 project, modern browser only	WebGPU
매 universal compat (iOS old)	WebGL2
매 high-level 3D	Three.js / Babylon
매 low-overhead 2D	regl, PixiJS
매 compute heavy	WebGPU compute shader

기본값: 매 high-level engine (Three.js) — 매 raw WebGL 은 매 specific need.

🔗 Graph

• 부모: Graphics_Pipeline
• 변형: WebGPU · OpenGL ES
• 응용: Three.js · Babylonjs
• Adjacent: GLSL

🤖 LLM 활용

언제: 매 web 3D, data viz, browser-based game, AR/VR (WebXR). 언제 X: 매 native-only performance critical (WebAssembly + WebGPU 도 부족 시 native).

❌ 안티패턴

• 매 frame draw call 폭증: 매 instancing / batching 의 X — 1000+ draw call 은 매 CPU bound.
• State leak: 매 bind 후 unbind X — 매 다음 frame state pollute.
• getError() 매 production loop: 매 sync stall — 매 dev only.
• 매 lost context 무시: 매 mobile 에서 흔함, recovery path 매 mandatory.

🧪 검증 / 중복

• Verified (Khronos WebGL2 spec, MDN, WebGL Fundamentals).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — WebGL2 patterns + WebGPU transition note