ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
๐ŸŽฎ TCJSGame Update: The Future is Being Drawn
Dev.toDev.to
Frontend

Dual-renderer ๋ฐ Screen Culling ๋„์ž…์„ ํ†ตํ•œ ์„ฑ๋Šฅ 2-3๋ฐฐ ํ–ฅ์ƒ

๐ŸŽฎ TCJSGame Update: The Future is Being Drawn

Kehinde Owolabi2026๋…„ 5์›” 18์ผ2๋ถ„intermediate

AI ์š”์•ฝ

Context

TCJSGame V3์˜ ๋ Œ๋”๋ง ํšจ์œจ์„ฑ ํ•œ๊ณ„๋กœ ์ธํ•œ ํ”„๋ ˆ์ž„ ๋“œ๋ž ๋ฐœ์ƒ. ๋Œ€๊ทœ๋ชจ ๊ฐ์ฒด ๋ Œ๋”๋ง ์‹œ์˜ GPU ๋ถ€ํ•˜ ๋ฐ ๊ณ ์ • ํ”„๋ ˆ์ž„ ์œ ์ง€์˜ ์–ด๋ ค์›€์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ ์ฐจ์„ธ๋Œ€ ์—”์ง„ ์„ค๊ณ„ ํ•„์š”์„ฑ ๋Œ€๋‘.

Technical Solution

  • Fake Canvas Caching ๊ธฐ๋ฐ˜์˜ Dual-renderer ์•„ํ‚คํ…์ฒ˜ ์„ค๊ณ„๋ฅผ ํ†ตํ•œ ๋ Œ๋”๋ง ๋ถ€ํ•˜ ๋ถ„์‚ฐ
  • ๊ฐ€์‹œ ์˜์—ญ ์™ธ ๊ฐ์ฒด๋ฅผ ๋ Œ๋”๋ง ๋Œ€์ƒ์—์„œ ์ œ์™ธํ•˜๋Š” Screen Culling ๊ธฐ๋ฒ• ์ ์šฉ์œผ๋กœ ์—ฐ์‚ฐ๋Ÿ‰ ์ตœ์ ํ™”
  • Delta time ๋„์ž… ๋ฐ True 60 FPS ๋™๊ธฐํ™”๋ฅผ ํ†ตํ•œ ๋””๋ฐ”์ด์Šค ๋…๋ฆฝ์ ์ธ ์ผ๊ด€๋œ ๊ฒŒ์ž„ ์†๋„ ๊ตฌํ˜„
  • ์›ํ˜• ์ถฉ๋Œ ํŒ์ • ์•Œ๊ณ ๋ฆฌ์ฆ˜(Circle Collision Detection) ์ตœ์ ํ™”๋กœ ๋ฌผ๋ฆฌ ์—ฐ์‚ฐ ํšจ์œจ ๊ฐœ์„ 
  • ์นด๋ฉ”๋ผ ์‰์ดํฌ ๋ฐ ์คŒ ๊ธฐ๋Šฅ์„ ํฌํ•จํ•œ Enhanced Camera System ๊ตฌ์ถ•์œผ๋กœ ์‹œ๊ฐ์  ์—ฐ์ถœ์˜ ๊ตฌ์กฐ์  ์œ ์—ฐ์„ฑ ํ™•๋ณด

Impact

  • V3 ๋Œ€๋น„ ๋ Œ๋”๋ง ์„ฑ๋Šฅ 2-3๋ฐฐ ํ–ฅ์ƒ ๋‹ฌ์„ฑ

์‹ค์ฒœ ํฌ์ธํŠธ

1. ๋ Œ๋”๋ง ๋ณ‘๋ชฉ ๋ฐœ์ƒ ์‹œ ์ „์ฒด ํ™”๋ฉด ๊ฐฑ์‹  ๋Œ€์‹  ์บ์‹ฑ ๋ ˆ์ด์–ด๋ฅผ ํ™œ์šฉํ•œ Dual-renderer ๊ตฌ์กฐ ๊ฒ€ํ† 

2. ๋ทฐํฌํŠธ ์™ธ๋ถ€์˜ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ๋Ÿ‰์„ ์ค„์ด๊ธฐ ์œ„ํ•œ Culling ๋กœ์ง ์šฐ์„  ์ ์šฉ

3. ํ”„๋ ˆ์ž„ ๋“œ๋ž์— ๊ด€๊ณ„์—†์ด ์ผ์ •ํ•œ ๊ฒŒ์ž„ ์†๋„๋ฅผ ์œ ์ง€ํ•˜๊ธฐ ์œ„ํ•œ Delta time ๊ธฐ๋ฐ˜ ์—…๋ฐ์ดํŠธ ๋กœ์ง ๊ตฌํ˜„

ํƒœ๊ทธ

#Performance Optimization#Delta Time#Rendering Engine#Screen Culling#Dual-renderer
์›๋ฌธ ์ฝ๊ธฐ