--- id: P-REINFORCE-AUTO-FF2C8C category: "10_Wiki/πŸ’‘ Topics/Graphics & Performance" confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - UV Offset" --- # [[UV Offset|UV Offset]] ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) > UV Offset(UV μ˜€ν”„μ…‹)은 3D λͺ¨λΈμ— ν…μŠ€μ²˜μ˜ νŠΉμ • μ˜μ—­μ„ λ§€ν•‘ν•˜κΈ° μœ„ν•΄ UV μ’Œν‘œλ₯Ό μ‘°μ •ν•˜κ±°λ‚˜ κ³„μ‚°ν•˜λŠ” κΈ°λ²•μž…λ‹ˆλ‹€ [1, 2]. μ‹€μ‹œκ°„ λ Œλ”λ§ μ΅œμ ν™” ν™˜κ²½μ—μ„œλŠ” μ—¬λŸ¬ ν…μŠ€μ²˜λ₯Ό ν•˜λ‚˜λ‘œ ν•©μΉœ ν…μŠ€μ²˜ μ•„ν‹€λΌμŠ€(Texture Atlas)와 ν•¨κ»˜ 주둜 μ‚¬μš©λ©λ‹ˆλ‹€ [3, 4]. 특히 μˆ˜λ§Žμ€ μΈμŠ€ν„΄μŠ€λ₯Ό λ Œλ”λ§ν•  λ•Œ 각 μΈμŠ€ν„΄μŠ€μ˜ μ†μ„±μœΌλ‘œ UV μ˜€ν”„μ…‹μ„ μ „λ‹¬ν•¨μœΌλ‘œμ¨, 단일 λ“œλ‘œμš° 콜(Draw Call) λ‚΄μ—μ„œ κ°œλ³„ μΈμŠ€ν„΄μŠ€λ§ˆλ‹€ λ‹€λ₯Έ ν…μŠ€μ²˜ 이미지λ₯Ό μ μš©ν•  수 있게 ν•΄μ€λ‹ˆλ‹€ [5, 6]. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) * **ν…μŠ€μ²˜ μ•„ν‹€λΌμŠ€ λ§€ν•‘ (Texture Atlas Mapping):** ν…μŠ€μ²˜ 바인딩 νšŸμˆ˜μ™€ λ“œλ‘œμš° μ½œμ„ 쀄이기 μœ„ν•΄ μ—¬λŸ¬ ν…μŠ€μ²˜λ₯Ό 단일 ν…μŠ€μ²˜ μ•„ν‹€λΌμŠ€λ‘œ 병합할 λ•Œ, κ°œλ°œμžλŠ” 메쉬 μ˜μ—­μ΄ μ•„ν‹€λΌμŠ€μ˜ μ˜¬λ°”λ₯Έ μœ„μΉ˜λ₯Ό μ°Έμ‘°ν•˜λ„λ‘ UV μ’Œν‘œλ₯Ό μ‘°μ •(UV Offset 계산)ν•΄μ•Ό ν•©λ‹ˆλ‹€ [1-4]. * **InstancedMeshμ—μ„œμ˜ κ΅¬ν˜„ 방식:** `InstancedMesh`λ₯Ό 톡해 수천 개의 κ°œλ³„ μΈμŠ€ν„΄μŠ€μ— 각기 λ‹€λ₯Έ ν…μŠ€μ²˜λ₯Ό λΆ€μ—¬ν•˜κΈ° μœ„ν•΄μ„œλŠ” 단일 재질(Material)의 ν™•μ‚° λ§΅(Diffuse map)으둜 ν…μŠ€μ²˜ μ•„ν‹€λΌμŠ€λ₯Ό μ§€μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€ [5, 7]. 이후 각 μΈμŠ€ν„΄μŠ€λ§ˆλ‹€ ν…μŠ€μ²˜ μ˜€ν”„μ…‹μ„ μ •μ˜ν•˜λŠ” 좔가적인 μΈμŠ€ν„΄μŠ€ 버퍼 속성(예: `uvOffsets`)을 κΈ°ν•˜κ΅¬μ‘°(Geometry)에 μ£Όμž…ν•©λ‹ˆλ‹€ [5, 6, 8]. κ΅¬μ²΄μ μœΌλ‘œλŠ” `Float32Array`λ₯Ό μ‚¬μš©ν•΄ 각 μΈμŠ€ν„΄μŠ€μ˜ x/y μ˜€ν”„μ…‹ μ’Œν‘œ 배열을 μƒμ„±ν•œ λ’€, 셰이더λ₯Ό μˆ˜μ •ν•˜μ—¬ 이 `uvOffsets` 속성을 기반으둜 각 μΈμŠ€ν„΄μŠ€μ˜ ν…μŠ€μ²˜ μœ„μΉ˜λ₯Ό 이동(Offset)μ‹œν‚€λ„λ‘ λ Œλ”λ§ν•©λ‹ˆλ‹€ [8-10]. * **ν•œκ³„ 및 ν˜„λŒ€μ  λŒ€μ•ˆ:** ν…μŠ€μ²˜ μ•„ν‹€λΌμŠ€λ₯Ό μœ„ν•œ λ³΅μž‘ν•œ UV μ˜€ν”„μ…‹ 계산 μ•Œκ³ λ¦¬μ¦˜μ€ κΉŒλ‹€λ‘œμšΈ 뿐만 μ•„λ‹ˆλΌ, μΈμ ‘ν•œ ν…μŠ€μ²˜ 간에 픽셀이 μ„žμ΄λŠ” 경계선 블리딩(Edge Bleeding) ν˜„μƒμ„ μœ λ°œν•  수 μžˆμŠ΅λ‹ˆλ‹€ [2, 6]. μ΄λŸ¬ν•œ 단점을 κ·Ήλ³΅ν•˜κΈ° μœ„ν•΄ WebGL2λΆ€ν„° μ§€μ›λ˜λŠ” 데이터 λ°°μ—΄ ν…μŠ€μ²˜(Data Array Textures)λ₯Ό ν™œμš©ν•˜λ©΄, λ³΅μž‘ν•œ UV μ˜€ν”„μ…‹ μ—°μ‚°μ΄λ‚˜ νŒ¨ν‚Ή 없이 인덱슀 μ ‘κ·Όλ§ŒμœΌλ‘œ 닀쀑 ν…μŠ€μ²˜λ₯Ό μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€ [2, 11]. ## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & RL Update) - **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** μžλ™ν™” 엔진에 μ˜ν•΄ λ§€ν•‘λœ μ§€μ‹μœΌλ‘œ, μΆ”ν›„ μ •λ°€ 검증 ν•„μš”. - **μ •μ±… λ³€ν™”:** Graphics & Performance λΆ„μ•Όμ˜ μžλ™ μžμ‚°ν™” μˆ˜ν–‰. ## πŸ”— 지식 μ—°κ²° (Graph) - **Related Topics:** [[Texture Atlas|Texture Atlas]], [[InstancedMesh|InstancedMesh]], [[BufferAttribute|BufferAttribute]] - **Projects/Contexts:** [[Three.js|Three.js]], [[WebGL Optimization|WebGL Optimization]] - **Contradictions/Notes:** ν…μŠ€μ²˜ μ•„ν‹€λΌμŠ€μ™€ UV μ˜€ν”„μ…‹μ˜ 쑰합은 μΈμŠ€ν„΄μ‹± μ΅œμ ν™”λ₯Ό μœ„ν•΄ ν•„μˆ˜μ μ΄μ§€λ§Œ UV μ—°μ‚°μ˜ λ³΅μž‘μ„±κ³Ό 경계선 블리딩(Edge Bleeding)μ΄λΌλŠ” ν•œκ³„λ₯Ό κ°€μ§€λ©°, μ†ŒμŠ€μ— λ”°λ₯΄λ©΄ 이λ₯Ό μ™„μ „νžˆ νšŒν”Όν•˜κΈ° μœ„ν•œ λŒ€μ•ˆμœΌλ‘œ 데이터 λ°°μ—΄ ν…μŠ€μ²˜(Data Array Textures)의 μ‚¬μš©μ΄ μ œμ•ˆλ©λ‹ˆλ‹€ [2, 11]. --- *Last updated: 2026-04-19* - Raw Source: 00_Raw/2026-04-20/UV Offset.md ---