--- id: P-REINFORCE-AUTO-CE737D category: "10_Wiki/πŸ’‘ Topics/Graphics & Performance" confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이딩(Fragment Shading)" --- # [[프ᄅᅒ그ᄆα…₯ᆫ트 셰아당(Fragment Shading)|ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이딩(Fragment Shading)]] ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) > ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이딩(Fragment Shading)은 κ·Έλž˜ν”½ λ Œλ”λ§ νŒŒμ΄ν”„λΌμΈμ˜ ν›„λ°˜λΆ€ λ‹¨κ³„λ‘œ, μ΅œμ’… 색상 값을 κ²°μ •ν•˜κΈ° μœ„ν•΄ ν”½μ…€ λ‹¨μœ„μ˜ 연산을 μ‹€ν–‰ν•˜λŠ” 과정이닀 [1, 2]. 주둜 ν…μŠ€μ²˜ 데이터 μƒ˜ν”Œλ§, ν”½μ…€ λ‹¨μœ„ μ‘°λͺ…(per-pixel lighting), μ•ŒνŒŒ(투λͺ…도) 값을 κ³„μ‚°ν•˜μ—¬ ν‘œλ©΄μ˜ λ””ν…ŒμΌμ„ κ΅¬ν˜„ν•˜λŠ” 역할을 μˆ˜ν–‰ν•œλ‹€ [1, 3, 4]. 화면에 λ³΄μ΄λŠ” 픽셀에 λŒ€ν•΄ 계산을 μˆ˜ν–‰ν•˜λ―€λ‘œ, 픽셀이 μ€‘μ²©λ˜μ–΄ μ—¬λŸ¬ 번 λ Œλ”λ§λ˜λŠ” μ˜€λ²„λ“œλ‘œμš°(Overdraw)κ°€ λ°œμƒν•˜κ±°λ‚˜ λ³΅μž‘ν•œ 셰이더λ₯Ό μ‚¬μš©ν•  경우 GPU μ„±λŠ₯ μ €ν•˜ 및 ν”„λ ˆμž„ μ§€μ—°μ˜ μ£Όμš” 원인이 λœλ‹€ [1, 2]. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) - **μ—­ν•  및 데이터 처리:** ν”„λž˜κ·Έλ¨ΌνŠΈ μ…°μ΄λ”λŠ” 정점 셰이더(Vertex Shader)λ‘œλΆ€ν„° Varying λ³€μˆ˜λ₯Ό 톡해 데이터λ₯Ό 전달받아 ν”½μ…€ λ‹¨μœ„λ‘œ μ²˜λ¦¬ν•œλ‹€ [5]. 이 μ…°μ΄λ”λŠ” ν”½μ…€ 셰이딩이라 λΆˆλ¦¬λŠ” μ‘°λͺ… 계산, λ…Έλ©€ 맡을 ν™œμš©ν•œ λ―Έμ„Έν•œ ν‘œλ©΄ λ””ν…ŒμΌ λͺ¨μ‚¬, 그리고 ν…μŠ€μ²˜μ— λ”°λ₯Έ μ•ŒνŒŒ(Alpha) κ°’ μ—°μ‚° 등을 λ‹΄λ‹Ήν•œλ‹€ [3, 4]. 이 밖에도 폰트 벑터 데이터λ₯Ό λ°”νƒ•μœΌλ‘œ ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 λ‚΄μ—μ„œ 직접 ν…μŠ€νŠΈλ₯Ό μž¬λ Œλ”λ§ν•˜λŠ” 기법도 μ‘΄μž¬ν•œλ‹€ [6, 7]. - **μ„±λŠ₯ 병λͺ©κ³Ό μ˜€λ²„λ“œλ‘œμš°(Overdraw):** μ—¬λŸ¬ 개의 ν…μŠ€μ²˜ μƒ˜ν”Œλ§κ³Ό λ³΅μž‘ν•œ μˆ˜ν•™μ  μ—°μ‚° 및 쑰건문이 ν¬ν•¨λœ PBR(Physically Based Rendering) 재질 같은 λ³΅μž‘ν•œ μ…°μ΄λ”λŠ” 쀑간 사양 GPU의 ν•„ 레이트(Fill rate)λ₯Ό 50~70%κΉŒμ§€ κ°μ†Œμ‹œν‚¬ 수 μžˆλ‹€ [1]. 특히 λ™μΌν•œ ν”½μ…€ μœ„μΉ˜μ— μ—¬λŸ¬ 번 μ“°κΈ° μž‘μ—…μ΄ μ€‘μ²©λ˜λŠ” μ˜€λ²„λ“œλ‘œμš°(Overdraw) ν˜„μƒμ΄ λ°œμƒν•˜λ©΄ 씬(Scene) 전체가 'ν”„λž˜κ·Έλ¨ΌνŠΈ λ°”μš΄λ“œ(Fragment-bound)' μƒνƒœμ— λΉ μ Έ μ‹¬κ°ν•œ ν”„λ ˆμž„ 처리 지연이 λ°œμƒν•œλ‹€ [2]. - **ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 μ΅œμ ν™” 기법:** - **거리 기반 및 κ°€μ‹œμ„± μ΅œμ ν™”:** 동적 LOD(Level of Detail) μ „ν™˜μ„ ν™œμš©ν•˜λ©΄ ν”½μ…€ 레벨의 GPU ν”„λž˜κ·Έλ¨ΌνŠΈ 처리 연산을 60~75%κ°€λŸ‰ 쀄일 수 μžˆλ‹€ [8]. λ˜ν•œ 뎁슀 ν”„λ¦¬νŒ¨μŠ€(Depth Pre-Pass)λ₯Ό κ΅¬ν˜„ν•˜λ©΄ GPUκ°€ κ°’λΉ„μ‹Ό 메인 셰이더 연산에 μ§„μž…ν•˜κΈ° 전에 κ°€λ €μ§„ ν”„λž˜κ·Έλ¨ΌνŠΈλ₯Ό 미리 폐기(Discard)ν•˜μ—¬ ν”„λž˜κ·Έλ¨ΌνŠΈ μ…°μ΄λ”μ˜ λΆ€ν•˜λ₯Ό μ΅œλŒ€ 30%κΉŒμ§€ κ°μ†Œμ‹œν‚¨λ‹€ [9]. - **재질(Material) λͺ¨λΈ λ‹¨μˆœν™”:** μ—°μ‚°λŸ‰μ΄ λ§Žμ€ `MeshStandardMaterial`은 ν”„λž˜κ·Έλ¨ΌνŠΈ ν”„λ‘œμ„Έμ„œλ₯Ό 포화 μƒνƒœλ‘œ λ§Œλ“€ 수 μžˆμœΌλ―€λ‘œ, ν•˜λ“œμ›¨μ–΄ μ„±λŠ₯이 μ œν•œμ μΈ ν™˜κ²½μ—μ„œλŠ” 픽셀별 μŠ€νŽ™ν˜λŸ¬ ν•˜μ΄λΌμ΄νŠΈλ§Œ μ œκ³΅ν•˜λŠ” `MeshPhongMaterial`μ΄λ‚˜ μ‘°λͺ… 연산을 λ°°μ œν•œ ν”Œλž« 셰이딩(Flat Shaded) μ»€μŠ€ν…€ 셰이더λ₯Ό μ‚¬μš©ν•˜μ—¬ ν”„λž˜κ·Έλ¨ΌνŠΈ μ—°μ‚° λΉ„μš©μ„ μ΅œμ†Œν™”ν•΄μ•Ό ν•œλ‹€ [10, 11]. - **절차적 λ Œλ”λ§(Procedural Rendering):** μ—£μ§€(Edge)λ‚˜ μ™€μ΄μ–΄ν”„λ ˆμž„μ„ 그릴 λ•Œ λ³„λ„μ˜ κΈ°ν•˜ν•™μ  λ„ν˜•μ„ μΆ”κ°€λ‘œ 그리지 μ•Šκ³ , λ¬΄κ²Œμ€‘μ‹¬ μ’Œν‘œκ³„(Barycentric Coordinate)λ₯Ό μ΄μš©ν•΄ ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이더 λ‚΄μ—μ„œ 절차적으둜 μ—£μ§€κΉŒμ§€μ˜ 거리λ₯Ό κ³„μ‚°ν•˜μ—¬ λ Œλ”λ§ν•˜λŠ” 것이 훨씬 νš¨μœ¨μ μ΄λ‹€ [12]. ## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & RL Update) - **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** μžλ™ν™” 엔진에 μ˜ν•΄ λ§€ν•‘λœ μ§€μ‹μœΌλ‘œ, μΆ”ν›„ μ •λ°€ 검증 ν•„μš”. - **μ •μ±… λ³€ν™”:** Graphics & Performance λΆ„μ•Όμ˜ μžλ™ μžμ‚°ν™” μˆ˜ν–‰. ## πŸ”— 지식 μ—°κ²° (Graph) - **Related Topics:** [[Overdraw|Overdraw]], [[Vertex Shader|Vertex Shader]], [[Level of Detail (LOD)|Level of Detail (LOD)]], Physically Based Rendering (PBR) - **Projects/Contexts:** [[Three.js|Three.js]], [[WebGL|WebGL]] - **Contradictions/Notes:** μ‹œκ°μ μΈ ν˜„μ‹€κ°μ„ μ œκ³΅ν•˜λŠ” PBR λͺ¨λΈμ˜ μž¬μ§ˆμ€ 사싀적인 λΉ› λ°˜μ‚¬λ₯Ό κ΅¬ν˜„ν•˜μ§€λ§Œ ν”„λž˜κ·Έλ¨ΌνŠΈ μ…°μ΄λ”μ—μ„œ μˆ˜λ§Žμ€ μ—°μ‚°κ³Ό ν…μŠ€μ²˜ μƒ˜ν”Œλ§μ„ μš”κ΅¬ν•œλ‹€. λ”°λΌμ„œ λ‚΄μž₯ GPU(iGPU)와 같은 저사양 ν•˜λ“œμ›¨μ–΄ ν™˜κ²½μ—μ„œλŠ” μ„±λŠ₯을 크게 μ €ν•˜μ‹œν‚€λ©°, 였히렀 μ—°μ‚°λŸ‰μ΄ 적은 Phong λͺ¨λΈμ΄λ‚˜ ν”Œλž« 셰이딩 μž¬μ§ˆμ„ μ‚¬μš©ν•˜λŠ” 것이 높은 ν”„λ ˆμž„ 레이트 μœ μ§€λ₯Ό μœ„ν•΄ ν•„μˆ˜μ μ΄λΌκ³  μ†ŒμŠ€λŠ” μ„€λͺ…ν•œλ‹€ [1, 10, 11]. --- *Last updated: 2026-04-19* - Raw Source: 00_Raw/2026-04-20/ν”„λž˜κ·Έλ¨ΌνŠΈ 셰이딩(Fragment Shading).md ---