--- id: P-REINFORCE-AUTO-95FEB9 category: "10_Wiki/๐Ÿ’ก Topics/Graphics & Performance" confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - React Three Fiber์—์„œ Rapier ๋ฌผ๋ฆฌ ์—”์ง„ ์ตœ์ ํ™”ํ•˜๊ธฐ" --- # [[React Three Fiberแ„‹แ…ฆแ„‰แ…ฅ Rapier แ„†แ…ฎแ†ฏแ„…แ…ต แ„‹แ…ฆแ†ซแ„Œแ…ตแ†ซ แ„Žแ…ฌแ„Œแ…ฅแ†จแ„’แ…ชแ„’แ…กแ„€แ…ต|React Three Fiber์—์„œ Rapier ๋ฌผ๋ฆฌ ์—”์ง„ ์ตœ์ ํ™”ํ•˜๊ธฐ]] ## ๐Ÿ“Œ ํ•œ ์ค„ ํ†ต์ฐฐ (The Karpathy Summary) > React Three Fiber(R3F) ํ™˜๊ฒฝ์—์„œ `@react-three/rapier`๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ, ๋Œ€๊ทœ๋ชจ `InstancedRigidBodies` ์ ์šฉ, ๋น„ํŠธ๋งˆ์Šคํฌ ๊ธฐ๋ฐ˜์˜ ์ถฉ๋Œ ํ•„ํ„ฐ๋ง, Rust ๋ฉ”๋ชจ๋ฆฌ ์—๋Ÿฌ ๋ฐฉ์ง€๋ฅผ ์œ„ํ•œ ์ƒํƒœ ์บ์‹ฑ, ๊ทธ๋ฆฌ๊ณ  ๋ Œ๋”๋ง ๋ฃจํ”„ ๋ถ„๋ฆฌ๋ฅผ ํ†ตํ•ด ์—ฐ์‚ฐ ์˜ค๋ฒ„ํ—ค๋“œ๋ฅผ ๊ทน์ ์œผ๋กœ ์ค„์ด๋Š” ๊ณ ์„ฑ๋Šฅ ๋ฌผ๋ฆฌ ์—”์ง„ ์ตœ์ ํ™” ๊ธฐ๋ฒ•์ž…๋‹ˆ๋‹ค. ## ๐Ÿ“– ๊ตฌ์กฐํ™”๋œ ์ง€์‹ (Synthesized Content) **1. InstancedRigidBodies๋ฅผ ํ™œ์šฉํ•œ ๋Œ€๊ทœ๋ชจ ๋ฌผ๋ฆฌ ๊ฐ์ฒด ์ฒ˜๋ฆฌ** ์ˆ˜๋ฐฑ, ์ˆ˜์ฒœ ๊ฐœ์˜ ๋ฌผ๋ฆฌ ๊ฐ์ฒด(์ด์•Œ, ํŒŒํŽธ ๋“ฑ)๋ฅผ ๊ฐœ๋ณ„ ``๋กœ ๋ Œ๋”๋งํ•˜๋ฉด ๋ฌผ๋ฆฌ ์—ฐ์‚ฐ๊ณผ ๋“œ๋กœ์šฐ ์ฝœ ์˜ค๋ฒ„ํ—ค๋“œ๋กœ ์ธํ•ด ํ”„๋ ˆ์ž„์ด ๊ธ‰๋ฝํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด Three.js์˜ `InstancedMesh`๋ฅผ ``๋กœ ๊ฐ์‹ธ์„œ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜๋ฉด ์ˆ˜์ฒœ ๊ฐœ์˜ ์ธ์Šคํ„ด์Šค์— ๋Œ€ํ•œ ์œ„์น˜, ํšŒ์ „, ๋ฌผ๋ฆฌ์  ์ƒํƒœ๋ฅผ ๋ฐฐ์—ด(`InstancedRigidBodyProps[]`) ํ˜•ํƒœ๋กœ ๋‹จ ๋ฒˆ์— ์ดˆ๊ธฐํ™”ํ•˜๊ณ  ๋‹จ์ผ ๋“œ๋กœ์šฐ ์ฝœ๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ์–ด ์„ฑ๋Šฅ์ด ๋น„์•ฝ์ ์œผ๋กœ ํ–ฅ์ƒ๋ฉ๋‹ˆ๋‹ค. **2. interactionGroups๋ฅผ ํ†ตํ•œ ์ถฉ๋Œ ๋ฐ ์†”๋ฒ„ ์—ฐ์‚ฐ ์ตœ์†Œํ™”** ๋ชจ๋“  ๊ฐ์ฒด๊ฐ€ ์„œ๋กœ ์ถฉ๋Œ ์—ฌ๋ถ€๋ฅผ ๊ณ„์‚ฐํ•˜๊ฒŒ ๋‘๋ฉด ์—”์ง„์— ํฐ ๋ถ€ํ•˜๋ฅผ ์ค๋‹ˆ๋‹ค. Rapier์—์„œ๋Š” `collisionGroups` ๋ฐ `solverGroups` ์†์„ฑ์— ๋น„ํŠธ๋งˆ์Šคํฌ(Bitmask)๋ฅผ ์„ค์ •ํ•˜์—ฌ ์ƒํ˜ธ์ž‘์šฉํ•  ๋Œ€์ƒ์„ ์ œํ•œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ์ œ๊ณตํ•˜๋Š” `interactionGroups` ํ—ฌํผ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ์ฒด๊ฐ€ ์†ํ•œ ๊ทธ๋ฃน๊ณผ ์ƒํ˜ธ์ž‘์šฉํ•  ๊ทธ๋ฃน์„ ๋ช…์‹œ(์˜ˆ: `interactionGroups(0,)`)ํ•จ์œผ๋กœ์จ ๋ถˆํ•„์š”ํ•œ ์ถฉ๋Œ ์—ฐ์‚ฐ์„ ์›์ฒœ์ ์œผ๋กœ ์ฐจ๋‹จํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. **3. Physics Hooks ์บ์‹ฑ์„ ํ†ตํ•œ Rust ๋ฉ”๋ชจ๋ฆฌ ์—์ผ๋ฆฌ์–ด์‹ฑ ์—๋Ÿฌ ๋ฐฉ์ง€** ๋ณต์žกํ•œ ์ผ๋ฐฉํ–ฅ ํ”Œ๋žซํผ(One-way platform) ๋“ฑ ๊ณ ๊ธ‰ ์ถฉ๋Œ ํ•„ํ„ฐ๋ง์„ ์œ„ํ•ด `useFilterContactPair` ํ›…์„ ์‚ฌ์šฉํ•  ๋•Œ, ๋ฌผ๋ฆฌ ์Šคํ… ์ง„ํ–‰ ๋„์ค‘ `translation()`์ด๋‚˜ `linvel()` ๊ฐ™์€ RigidBody ์†์„ฑ์— ์ง์ ‘ ์ ‘๊ทผํ•˜๋ฉด WASM(Rust) ๊ณ„์ธต์—์„œ ์—์ผ๋ฆฌ์–ด์‹ฑ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ๋ฐ˜๋“œ์‹œ `useBeforePhysicsStep` ํ›…์„ ์‚ฌ์šฉํ•ด ๋ฌผ๋ฆฌ ์Šคํ… ์‹œ์ž‘ ์ „์— ํ•„์š”ํ•œ ๊ฐ์ฒด๋“ค์˜ ์ƒํƒœ(์œ„์น˜, ์†๋„ ๋“ฑ)๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ `Map` ๋“ฑ ์บ์‹œ(Cache) ๋ฉ”๋ชจ๋ฆฌ์— ๋ฏธ๋ฆฌ ์ €์žฅํ•ด ๋‘๊ณ , ํ•„ํ„ฐ๋ง ํ›…์—์„œ๋Š” ์ด ์บ์‹œ๋œ ๋ฐ์ดํ„ฐ๋งŒ ์ฝ๋„๋ก ์„ค๊ณ„ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. **4. On-demand Rendering ๋ฐ ๋ฌผ๋ฆฌ ์Šคํ… ์ˆ˜๋™ ์ œ์–ด** ๊ธฐ๋ณธ์ ์œผ๋กœ `@react-three/rapier`๋Š” ํ”„๋ ˆ์ž„์ด ๋ Œ๋”๋ง๋  ๋•Œ๋งˆ๋‹ค ๋ฌผ๋ฆฌ ์‹œ๋ฎฌ๋ ˆ์ด์…˜์„ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ํ™”๋ฉด์˜ ์‹œ๊ฐ์  ์—…๋ฐ์ดํŠธ๊ฐ€ ํ•„์š” ์—†์„ ๋•Œ๋„ ๋ฌผ๋ฆฌ ์—ฐ์‚ฐ์ด ํ•„์š”ํ•˜๊ฑฐ๋‚˜, ๋ฐ˜๋Œ€๋กœ ๋ฌผ๋ฆฌ ์—ฐ์‚ฐ์„ ์ผ์‹œ์ •์ง€ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ``๋ฅผ ์„ค์ •ํ•˜์—ฌ ๋ Œ๋”๋ง ๋ฃจํ”„์™€ ๋ฌผ๋ฆฌ ๋ฃจํ”„๋ฅผ ๋ถ„๋ฆฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ `useRapier().step()` ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด ๋ฌผ๋ฆฌ ์‹œ๋ฎฌ๋ ˆ์ด์…˜์„ ์ˆ˜๋™์œผ๋กœ ์ง„ํ–‰(Manual stepping)์‹œํ‚ฌ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. **5. ์„ผ์„œ(Sensor) ํ™œ์šฉ ๋ฐ ์ถฉ๋Œ ์ด๋ฒคํŠธ ๋‚ด React ์ƒํƒœ ์—…๋ฐ์ดํŠธ ์ง€์–‘** ๋ฌผ๋ฆฌ์  ๋ฐ˜๋ฐœ๋ ฅ์ด๋‚˜ ๋ฐ€์–ด๋‚ด๊ธฐ ์—ฐ์‚ฐ์ด ํ•„์š” ์—†๊ณ  ์˜ค์ง '์˜์—ญ์— ๋“ค์–ด์™”๋Š”์ง€(Overlapping)' ์—ฌ๋ถ€๋งŒ ํŒ๋ณ„ํ•ด์•ผ ํ•œ๋‹ค๋ฉด ํ•ด๋‹น ์ฝœ๋ผ์ด๋”์— `sensor` ์†์„ฑ์„ ๋ถ€์—ฌํ•ด์•ผ ๋ถˆํ•„์š”ํ•œ ์†”๋ฒ„(Solver) ์—ฐ์‚ฐ์„ ์ค„์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, `onCollisionEnter`์™€ ๊ฐ™์€ ๋นˆ๋ฒˆํ•œ ์ถฉ๋Œ ์ด๋ฒคํŠธ ๋‚ด๋ถ€์—์„œ React์˜ `setState`๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์‹ฌ๊ฐํ•œ ๋ฆฌ๋ Œ๋”๋ง ์ง€์—ฐ์ด ๋ฐœ์ƒํ•˜๋ฏ€๋กœ, ์ „์—ญ ์ƒํƒœ ๋ณ€๊ฒฝ์ด ์•„๋‹Œ ์ด์ƒ ๋ช…๋ นํ˜•(Imperative) ํŒŒํ‹ฐํด ์‹œ์Šคํ…œ์— ์ง์ ‘ ์‹ ํ˜ธ๋ฅผ ๋ณด๋‚ด ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋žŒ์งํ•ฉ๋‹ˆ๋‹ค. ## โš ๏ธ ๋ชจ์ˆœ ๋ฐ ์—…๋ฐ์ดํŠธ (Contradictions & RL Update) - **๊ณผ๊ฑฐ ๋ฐ์ดํ„ฐ์™€์˜ ์ถฉ๋Œ:** ์ž๋™ํ™” ์—”์ง„์— ์˜ํ•ด ๋งคํ•‘๋œ ์ง€์‹์œผ๋กœ, ์ถ”ํ›„ ์ •๋ฐ€ ๊ฒ€์ฆ ํ•„์š”. - **์ •์ฑ… ๋ณ€ํ™”:** Graphics & Performance ๋ถ„์•ผ์˜ ์ž๋™ ์ž์‚ฐํ™” ์ˆ˜ํ–‰. ## ๐Ÿ”— ์ง€์‹ ์—ฐ๊ฒฐ (Graph) - **Related Topics:** [[InstancedMesh (แ„ƒแ…ณแ„…แ…ฉแ„‹แ…ฎ แ„แ…ฉแ†ฏ แ„Žแ…ฌแ„Œแ…ฅแ†จแ„’แ…ช)|InstancedMesh (๋“œ๋กœ์šฐ ์ฝœ ์ตœ์ ํ™”)]], [[Web Worker (แ„‹แ…ฐแ†ธ แ„‹แ…ฏแ„แ…ฅ)|Web Worker (์›น ์›Œ์ปค)]], [[Garbage Collection (GC) แ„Žแ…ฌแ„Œแ…ฅแ†จแ„’แ…ช|Garbage Collection (GC) ์ตœ์ ํ™”]], [[Object Pooling (แ„‹แ…ฉแ„‡แ…ณแ„Œแ…ฆแ†จแ„แ…ณ แ„‘แ…ฎแ†ฏแ„…แ…ตแ†ผ)|Object Pooling (์˜ค๋ธŒ์ ํŠธ ํ’€๋ง)]] - **Projects/Contexts:** [[แ„€แ…ฉแ„‰แ…ฅแ†ผแ„‚แ…ณแ†ผ แ„‰แ…ตแ†ฏแ„‰แ…ตแ„€แ…กแ†ซ แ„‰แ…กแ†ผแ„’แ…ฉแ„Œแ…กแ†จแ„‹แ…ญแ†ผ แ„‰แ…ตแ„‰แ…ณแ„แ…ฆแ†ทแ„‹แ…ณแ†ฏ แ„‹แ…ฑแ„’แ…กแ†ซ React แ„€แ…ตแ„‡แ…กแ†ซ แ„€แ…ฆแ„‹แ…ตแ†ท แ„‹แ…ฆแ†ซแ„Œแ…ตแ†ซ แ„‹แ…กแ„แ…ตแ„แ…ฆแ†จแ„Žแ…ฅ|๊ณ ์„ฑ๋Šฅ ์‹ค์‹œ๊ฐ„ ์ƒํ˜ธ์ž‘์šฉ ์‹œ์Šคํ…œ์„ ์œ„ํ•œ React ๊ธฐ๋ฐ˜ ๊ฒŒ์ž„ ์—”์ง„ ์•„ํ‚คํ…์ฒ˜]] - **Contradictions/Notes:** Rapier์˜ ์Šค๋ƒ…์ƒท(Snapshot) ๊ธฐ๋Šฅ(`world.takeSnapshot()`)์„ ์ด์šฉํ•ด ๋ฌผ๋ฆฌ ์„ธ๊ณ„์˜ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋ณต์›ํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๋ณต์› ์‹œ์ ์˜ ๊ฐ์ฒด ์ƒ์„ฑ ์ˆœ์„œ๋‚˜ ์‹๋ณ„์ž๊ฐ€ ์Šค๋ƒ…์ƒท ์บก์ฒ˜ ์‹œ์ ๊ณผ ์ •ํ™•ํžˆ ์ผ์น˜ํ•˜์ง€ ์•Š์œผ๋ฉด RigidBody๋“ค์ด ์—‰ํ‚ค๋Š”(Scramble) ๋ฒ„๊ทธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฏ€๋กœ ์ƒํƒœ ์ง๋ ฌํ™”์— ๊ฐ๋ณ„ํ•œ ์ฃผ์˜๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. --- _Last updated: 2026-04-15_ - Raw Source: 00_Raw/2026-04-20/React Three Fiber์—์„œ Rapier ๋ฌผ๋ฆฌ ์—”์ง„ ์ตœ์ ํ™”ํ•˜๊ธฐ.md ---