chore(brain): ASTRA 성장 자산 동기화 — 기능 인벤토리·growth(약점프로필/학습큐)·일화기억·장기기억·회의록 원문
This commit is contained in:
@@ -0,0 +1,189 @@
|
||||
---
|
||||
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 |
|
||||
Reference in New Issue
Block a user