refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조
에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게 [공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류. 문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인). - Topic_Programming → Domain_Programming (내부 구조 보존) - Topic_Graphic → Domain_Design - Topic_Business → Domain_Product - Topic_General → Domain_General - _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning), Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing) - 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서) - 빈 폴더 정리 (memory/procedures) - 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,202 @@
|
||||
---
|
||||
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]] · [[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 |
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
|
||||
<!-- CODE-GROUNDING:START -->
|
||||
### 🔎 코드베이스 근거 (자동 추출 — E:\Wiki 레포)
|
||||
**실제 구현/사용 위치:**
|
||||
- `photoai/src/inference/faceEngine.ts:20` — // face-api는 브라우저(렌더러) 환경에서 첫 추론 시 WebGL 백엔드를 자동 초기화한다.
|
||||
|
||||
**관련 커밋:**
|
||||
- `photoai 8a8c102 Initial commit: AI Photo Organizer (Electron + face-api)`
|
||||
|
||||
_자동 생성: code_grounding.mjs · 재실행 시 갱신됨_
|
||||
<!-- CODE-GROUNDING:END -->
|
||||
Reference in New Issue
Block a user