id: P-Reinforce-AUTO-7B2955 category: "10_Wiki/💡 Topics/Graphics & Performance" confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - WebGL"

WebGL

📌 한 줄 통찰 (The Karpathy Summary)

WebGL은 플러그인 없이 웹 브라우저에서 2D 및 3D 그래픽을 렌더링하기 위한 저수준(Low-level) JavaScript API입니다. 원시 WebGL은 직접 다루기 매우 복잡하고 장황하지만, Three.js나 React Three Fiber(R3F) 같은 라이브러리를 통해 추상화되어 현대 웹의 고성능 3D 인터랙티브 그래픽과 게임 엔진을 구현하는 핵심 기반 기술로 사용됩니다.

📖 구조화된 지식 (Synthesized Content)

1. WebGL의 복잡성과 Three.js의 역할 WebGL 자체는 셰이더 코드와 버퍼를 직접 다루어야 하는 매우 저수준(Low-level)의 시스템입니다. 이러한 복잡성을 줄이고자 개발된 것이 Three.js 라이브러리이며, 개발자에게 씬(Scene), 카메라, 기하구조(Geometry), 재질(Material), 렌더러 등의 추상화된 객체를 제공하여 WebGL 렌더링 파이프라인을 훨씬 쉽게 구축할 수 있도록 지원합니다.

2. WebGL의 메모리 및 자원 관리 (가비지 컬렉션 한계) JavaScript의 일반적인 힙 메모리와 달리, WebGL이 사용하는 GPU 자원(VRAM에 올라간 텍스처, 기하구조, 재질, 렌더 타겟 등)은 브라우저의 가비지 컬렉터(GC)에 의해 자동으로 회수되지 않습니다. 따라서 심각한 메모리 누수와 GPU 크래시를 방지하려면, 사용이 끝난 자원에 대해 반드시 명시적으로 .dispose() 메서드를 호출하여 직접 메모리를 해제해야 합니다. GLTF 모델에서 로드된 ImageBitmap 텍스처의 경우 .close() 호출도 필요합니다.

3. 성능 최적화와 드로우 콜(Draw Call) WebGL 렌더링의 주된 성능 병목은 CPU가 GPU에게 그리기 명령을 내리는 **'드로우 콜(Draw Call)'**에서 발생합니다. 부드러운 60FPS를 유지하기 위한 황금률은 프레임당 드로우 콜을 100회 미만으로 유지하는 것입니다. 수백, 수천 개의 동일한 객체를 그릴 때는 개별 메시(Mesh)를 생성하지 않고, 단 1회의 드로우 콜만으로 GPU 내부에서 객체를 복제하는 [[InstancedMesh|InstancedMesh]] 최적화 기법을 사용해야 합니다. 모바일 WebGL 환경의 셰이더에서는 mediump 정밀도를 사용하여 연산 성능을 2배가량 향상시킬 수 있습니다.

4. OffscreenCanvas를 통한 메인 스레드 분리 복잡한 WebGL 3D 씬 연산은 메인 스레드를 블로킹하여 사용자 UI의 반응성을 크게 떨어뜨릴 수 있습니다. 이를 해결하기 위해 OffscreenCanvas API를 사용하여 WebGL 렌더링 컨텍스트를 DOM에서 완전히 분리하고, **웹 워커(Web Worker)**라는 백그라운드 스레드에서 WebGL을 실행할 수 있습니다. 이 멀티스레드 아키텍처는 무거운 그래픽 연산 중에도 UI가 매끄럽게 동작하도록 보장합니다.

5. 차세대 WebGPU와의 공존과 TSL 현재 WebGL 2는 브라우저의 97% 이상을 커버하는 가장 안정적이고 널리 쓰이는 표준입니다. 하지만 수십만 개의 입자를 제어하거나 고성능 물리 연산을 처리하는 컴퓨트 셰이더(Compute Shaders) 기능의 부재로 인해, 차세대 그래픽스 API인 WebGPU로 전환되는 추세입니다. 이에 대응하여 최신 Three.js는 **TSL (Three Shader Language)**이라는 노드 기반 셰이더 시스템을 도입했습니다. TSL로 작성된 코드는 WebGPU용 WGSL과 WebGL용 GLSL로 동시 컴파일되며, WebGPU를 지원하지 않는 브라우저에서는 **자동으로 WebGL 2로 폴백(Fallback)**되도록 설계되어 호환성과 성능을 모두 잡고 있습니다.

⚠️ 모순 및 업데이트 (Contradictions & RL Update)

과거 데이터와의 충돌: 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
정책 변화: Graphics & Performance 분야의 자동 자산화 수행.

🔗 지식 연결 (Graph)

Related Topics: Three.js, React Three Fiber (R3F), WebGPU Compute Shaders, OffscreenCanvas, InstancedMesh (드로우 콜 최적화), memory Leak Prevention (메모리 누수 방지)
Projects/Contexts: 브라우저 기반 3D 데이터 시각화 및 디지털 트윈, 멀티스레드 기반 고성능 웹 게임 엔진
Contradictions/Notes: WebGL 파이프라인에서 EffectComposer 등을 활용해 커스텀 후처리(Post-Processing)를 적용할 경우, WebGL의 내장 안티앨리어싱(AA) 기능이 무효화되는 제약이 있습니다. 이를 해결하려면 파이프라인 마지막 단계에 SMAA나 FXAA 효과 패스를 수동으로 추가해 주어야 시각적 품질을 유지할 수 있습니다.

5.1 KiB Raw Blame History