2nd/10_Wiki/Topics/Architecture/WebGL.md

---
id: wiki-2026-0508-webgl
title: WebGL
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [WebGL2, Web Graphics Library]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [graphics, web, gpu, opengl]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: JavaScript
  framework: 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
```javascript
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
```javascript
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
```javascript
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)
```javascript
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)
```javascript
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
```javascript
canvas.addEventListener('webglcontextlost', (e) => {
  e.preventDefault();
  cancelAnimationFrame(rafId);
});
canvas.addEventListener('webglcontextrestored', () => {
  reinitGLResources(); // 매 mandatory
  rafId = requestAnimationFrame(render);
});
```

### Resize 매 DPR aware
```javascript
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]] · [[Babylon.js]]
- 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 |