--- id: P-REINFORCE-AUTO-208D23 category: "10_Wiki/πŸ’‘ Topics/Graphics & Performance" confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - WebGL2" --- # [[WebGL2|WebGL2]] ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) > WebGL2λŠ” μ›Ή λΈŒλΌμš°μ € ν™˜κ²½μ—μ„œ 3D κ·Έλž˜ν”½μŠ€λ₯Ό λ Œλ”λ§ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” κ·Έλž˜ν”½ APIμž…λ‹ˆλ‹€ [1, 2]. μ΅œμ‹  Three.js μƒνƒœκ³„μ—μ„œλŠ” μ°¨μ„ΈλŒ€ API인 WebGPU둜의 μ „ν™˜μ΄ 이루어지고 μžˆμœΌλ‚˜, WebGPUλ₯Ό μ§€μ›ν•˜μ§€ μ•ŠλŠ” λΈŒλΌμš°μ €μ—μ„œλŠ” WebGL 2κ°€ μžλ™ λŒ€μ²΄(Fallback) μˆ˜λ‹¨μœΌλ‘œμ„œ 핡심적인 역할을 μˆ˜ν–‰ν•©λ‹ˆλ‹€ [3, 4]. WebGL1κ³Ό λΉ„κ΅ν–ˆμ„ λ•Œ 데이터 λ°°μ—΄ ν…μŠ€μ²˜(Data Array Textures)λ₯Ό μ§€μ›ν•˜κ³  ν…μŠ€μ²˜ μ•„ν‹€λΌμŠ€μ˜ 블리딩(Bleeding) ν˜„μƒμ„ 더 μ‰½κ²Œ μ œμ–΄ν•  수 μžˆλŠ” λ“± μ§„λ³΄λœ κΈ°λŠ₯을 μ œκ³΅ν•˜μ§€λ§Œ, WebGPU와 달리 μ»΄ν“¨νŠΈ 셰이더(Compute Shaders)λ₯Ό μ§€μ›ν•˜μ§€ μ•ŠλŠ” ν•œκ³„κ°€ μžˆμŠ΅λ‹ˆλ‹€ [1, 5, 6]. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) - **WebGPU의 μžλ™ λŒ€μ²΄(Fallback) μ‹œμŠ€ν…œ:** Three.js(r171 버전 이후)μ—μ„œ μ œκ³΅ν•˜λŠ” `WebGPURenderer`λŠ” μ‚¬μš©μžμ˜ λΈŒλΌμš°μ €κ°€ WebGPUλ₯Ό μ§€μ›ν•˜μ§€ μ•Šμ„ 경우, λ³„λ„μ˜ μ½”λ“œ λΆ„κΈ° 없이 μžλ™μœΌλ‘œ WebGL 2 ν™˜κ²½μœΌλ‘œ μ „ν™˜ν•˜μ—¬ ν˜Έν™˜μ„±μ„ μœ μ§€ν•©λ‹ˆλ‹€ [3, 7]. κ°œλ°œμžλŠ” λ””λ²„κΉ…μ΄λ‚˜ 아직 WebGPUμ—μ„œ μ§€μ›ν•˜μ§€ μ•ŠλŠ” νŠΉμ • WebGL ν™•μž₯ κΈ°λŠ₯을 μ‚¬μš©ν•˜κΈ° μœ„ν•΄ `forceWebGL: true` μ˜΅μ…˜μœΌλ‘œ κ°•μ œ WebGL λ Œλ”λ§ λͺ¨λ“œλ₯Ό ν™œμ„±ν™”ν•  수 μžˆμŠ΅λ‹ˆλ‹€ [8, 9]. - **데이터 λ°°μ—΄ ν…μŠ€μ²˜(Data Array Textures) 및 λ Œλ”λ§ μ΅œμ ν™”:** WebGL2λŠ” 데이터 λ°°μ—΄ ν…μŠ€μ²˜ κΈ°μˆ μ„ μ§€μ›ν•˜μ—¬ μ—¬λŸ¬ ν…μŠ€μ²˜λ₯Ό 셰이더 λ‚΄μ—μ„œ 인덱슀둜 μ ‘κ·Όν•  수 μžˆλŠ” μŠ€νƒ ν˜•νƒœλ‘œ μ œκ³΅ν•©λ‹ˆλ‹€ [1, 10]. 이 방식은 ν…μŠ€μ²˜ μ•„ν‹€λΌμ‹±μ˜ μ£Όμš” 단점인 인접 ν…μŠ€μ²˜ κ°„μ˜ 경계선 블리딩(Edge Bleeding) 문제λ₯Ό ν•΄κ²°ν•˜κ³  λ„€μ΄ν‹°λΈŒ λž˜ν•‘(Wrapping)을 μ§€μ›ν•©λ‹ˆλ‹€ [1, 10]. λ˜ν•œ WebGL2 ν™˜κ²½μ—μ„œλŠ” WebGL1에 λΉ„ν•΄ μ•„ν‹€λΌμŠ€ 블리딩 μ²˜λ¦¬κ°€ 훨씬 μˆ˜μ›”ν•©λ‹ˆλ‹€ [6]. - **μ„±λŠ₯ 및 κΈ°λŠ₯적 ν•œκ³„:** WebGL2λŠ” ν˜„λŒ€ λ Œλ”λ§μ˜ ν•„μˆ˜ 기술둜 자리 μž‘μ€ μ»΄ν“¨νŠΈ 셰이더(Compute Shaders)λ₯Ό μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€ [5]. λ”°λΌμ„œ GPU 병렬 처리λ₯Ό ν†΅ν•œ λ³΅μž‘ν•œ 물리 μ—°μ‚°, λŒ€κ·œλͺ¨ νŒŒν‹°ν΄ μ‹œμŠ€ν…œ μ—…λ°μ΄νŠΈ, GPU μ£Όλ„μ˜ μ •λ°€ν•œ 컬링(GPU-driven Culling) 등은 λΆˆκ°€λŠ₯ν•˜λ©°, μ΄λŸ¬ν•œ ν•œκ³„λ₯Ό κ·Ήλ³΅ν•˜κΈ° μœ„ν•΄ λŒ€κ·œλͺ¨ ν”„λ‘œμ νŠΈμ—μ„œλŠ” WebGPU둜의 μ•„ν‚€ν…μ²˜ μ „ν™˜μ΄ ꢌμž₯되고 μžˆμŠ΅λ‹ˆλ‹€ [2, 5, 11]. ## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & RL Update) - **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** μžλ™ν™” 엔진에 μ˜ν•΄ λ§€ν•‘λœ μ§€μ‹μœΌλ‘œ, μΆ”ν›„ μ •λ°€ 검증 ν•„μš”. - **μ •μ±… λ³€ν™”:** Graphics & Performance λΆ„μ•Όμ˜ μžλ™ μžμ‚°ν™” μˆ˜ν–‰. ## πŸ”— 지식 μ—°κ²° (Graph) - **Related Topics:** [[WebGPU|WebGPU]], [[Three.js|Three.js]], [[Data Array Textures|Data Array Textures]], [[Compute Shaders|Compute Shaders]] - **Projects/Contexts:** Three.js WebGPURenderer μžλ™ 폴백 지원, BatchedMesh 및 λ“œλ‘œμš° 콜 μ΅œμ ν™” νŒŒμ΄ν”„λΌμΈ - **Contradictions/Notes:** μ†ŒμŠ€μ— λ”°λ₯΄λ©΄ WebGL 2λŠ” ν˜„μž¬ 널리 μ§€μ›λ˜λŠ” κ°•λ ₯ν•œ κ·Έλž˜ν”½ APIμ΄μ§€λ§Œ, μ»΄ν“¨νŠΈ 셰이더λ₯Ό ν†΅ν•œ GPU 기반의 병렬 κ°€μ‹œμ„± μ—°μ‚°(Compute Culling)μ΄λ‚˜ λŒ€κ·œλͺ¨ κ°„μ ‘ λ“œλ‘œμš°(Indirect Draw) λΆ€μž¬λ‘œ 인해 λ Œλ”λ§ μ„±λŠ₯ μ΅œμ ν™”μ˜ 기술적 ν•œκ³„μ μ— 도달해 μžˆμŠ΅λ‹ˆλ‹€ [2, 5, 11]. --- *Last updated: 2026-04-19* - Raw Source: 00_Raw/2026-04-20/WebGL2.md ---