WebGL ๋ ๋ ๋ฒ๋ค ์ต์ ํ๋ฅผ ์ํ ๊ณ ๊ธ ๊ธฐ์ ์ ํ๊ตฌํฉ๋๋ค. ์ปค๋งจ๋ ๋ฒํผ ํจ์จ์ฑ์ ์ด์ ์ ๋ง์ถฐ ์ฑ๋ฅ์ ๋์ด๊ณ CPU ์ค๋ฒํค๋๋ฅผ ์ค์ฌ ๋ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ ์ข์ ์น ์ฑ์ ๋ง๋๋ ๋ฐฉ๋ฒ์ ์์๋ณด์ธ์.
WebGL ๋ ๋ ๋ฒ๋ค ๋ช ๋ น์ด ์ต์ ํ: ์ปค๋งจ๋ ๋ฒํผ ํจ์จ์ฑ ๋ฌ์ฑํ๊ธฐ
์ด๋์๋ ์ฌ์ฉ๋๋ ์น ๊ทธ๋ํฝ API์ธ WebGL์ ๊ฐ๋ฐ์๊ฐ ๋ธ๋ผ์ฐ์ ๋ด์์ ์ง์ ๋ฉ์ง 2D ๋ฐ 3D ๊ฒฝํ์ ๋ง๋ค ์ ์๋๋ก ์ง์ํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ ์ ๋ ๋ณต์กํด์ง์ ๋ฐ๋ผ ์ฑ๋ฅ ์ต์ ํ๋ ๋ฌด์๋ณด๋ค ์ค์ํด์ก์ต๋๋ค. ์ต์ ํ๋ฅผ ์ํ ํ ๊ฐ์ง ์ค์ํ ์์ญ์ WebGL์ ์ปค๋งจ๋ ๋ฒํผ๋ฅผ ํจ์จ์ ์ผ๋ก ์ฌ์ฉํ๋ ๊ฒ, ํนํ ๋ ๋ ๋ฒ๋ค์ ํ์ฉํ ๋์ ๋๋ค. ์ด ๊ธ์์๋ WebGL ๋ ๋ ๋ฒ๋ค ๋ช ๋ น์ด ์ต์ ํ์ ๋ณต์ก์ฑ์ ๊น์ด ํ๊ณ ๋ค์ด, ์ปค๋งจ๋ ๋ฒํผ ํจ์จ์ฑ์ ๊ทน๋ํํ๊ณ CPU ์ค๋ฒํค๋๋ฅผ ์ต์ํํ๊ธฐ ์ํ ์ค์ฉ์ ์ธ ์ ๋ต๊ณผ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค.
WebGL ์ปค๋งจ๋ ๋ฒํผ์ ๋ ๋ ๋ฒ๋ค ์ดํดํ๊ธฐ
์ต์ ํ ๊ธฐ๋ฒ์ ์ดํด๋ณด๊ธฐ ์ ์ WebGL ์ปค๋งจ๋ ๋ฒํผ์ ๋ ๋ ๋ฒ๋ค์ ๊ธฐ๋ณธ ๊ฐ๋ ์ ์ดํดํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
WebGL ์ปค๋งจ๋ ๋ฒํผ๋ ๋ฌด์์ธ๊ฐ?
ํต์ฌ์ ์ผ๋ก WebGL์ GPU์ ๋ช ๋ น์ด๋ฅผ ์ ์ถํ์ฌ ๊ทธ๋ํฝ์ ๋ ๋๋งํ๋ ๋ฐฉ๋ฒ์ ์ง์ํ๋ ๋ฐฉ์์ผ๋ก ์๋ํฉ๋๋ค. ์ ฐ์ด๋ ํ๋ก๊ทธ๋จ ์ค์ , ํ ์ค์ฒ ๋ฐ์ธ๋ฉ, ๋๋ก์ฐ ์ฝ(draw call) ๋ฐํ๊ณผ ๊ฐ์ ์ด๋ฌํ ๋ช ๋ น์ด๋ ์ปค๋งจ๋ ๋ฒํผ์ ์ ์ฅ๋ฉ๋๋ค. ๊ทธ๋ฌ๋ฉด GPU๋ ์ด ๋ช ๋ น์ด๋ค์ ์์ฐจ์ ์ผ๋ก ์ฒ๋ฆฌํ์ฌ ์ต์ข ๋ ๋๋ง๋ ์ด๋ฏธ์ง๋ฅผ ์์ฑํฉ๋๋ค.
๊ฐ WebGL ์ปจํ ์คํธ๋ ์์ฒด ์ปค๋งจ๋ ๋ฒํผ๋ฅผ ๊ฐ์ง๊ณ ์์ต๋๋ค. ๋ธ๋ผ์ฐ์ ๋ ์ด๋ฌํ ๋ช ๋ น์ด๋ค์ ๊ธฐ๋ณธ OpenGL ES ๊ตฌํ์ผ๋ก ์ค์ ๋ก ์ ์กํ๋ ๊ฒ์ ๊ด๋ฆฌํฉ๋๋ค. ์ปค๋งจ๋ ๋ฒํผ ๋ด์ ๋ช ๋ น์ด ์์ ์ ํ์ ์ต์ ํํ๋ ๊ฒ์ ํนํ ํด๋ํฐ๊ณผ ๊ฐ์ ๋ฆฌ์์ค๊ฐ ์ ํ๋ ์ฅ์น์์ ์ต์ ์ ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
๋ ๋ ๋ฒ๋ค ์๊ฐ: ๋ช ๋ น์ด ์ฌ์ ๋ นํ ๋ฐ ์ฌ์ฌ์ฉ
WebGL 2์์ ๋์ ๋ ๋ ๋ ๋ฒ๋ค์ ๋ ๋๋ง ๋ช ๋ น์ด ์ํ์ค๋ฅผ ์ฌ์ ๋ นํํ๊ณ ์ฌ์ฌ์ฉํ ์ ์๋ ๊ฐ๋ ฅํ ๋ฉ์ปค๋์ฆ์ ์ ๊ณตํฉ๋๋ค. ์ด๋ฅผ WebGL ๋ช ๋ น์ด๋ฅผ ์ํ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ ๋งคํฌ๋ก๋ผ๊ณ ์๊ฐํ ์ ์์ต๋๋ค. ์ด๋ ํนํ ๋์ผํ ๊ฐ์ฒด๋ฅผ ์ฌ๋ฌ ๋ฒ ๊ทธ๋ฆฌ๊ฑฐ๋ ์ฝ๊ฐ์ ๋ณํ์ ์ฃผ์ด ๊ทธ๋ฆด ๋ ์๋นํ ์ฑ๋ฅ ํฅ์์ผ๋ก ์ด์ด์ง ์ ์์ต๋๋ค.
๋งค ํ๋ ์๋ง๋ค ๋์ผํ ๋ช ๋ น์ด ์ธํธ๋ฅผ ๋ฐ๋ณต์ ์ผ๋ก ๋ฐํํ๋ ๋์ , ํ ๋ฒ ๋ ๋ ๋ฒ๋ค์ ๋ นํํ ๋ค์ ํด๋น ๋ฒ๋ค์ ์ฌ๋ฌ ๋ฒ ์คํํ ์ ์์ต๋๋ค. ์ด๋ ํ๋ ์๋น ์คํํด์ผ ํ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋์ ์์ ์ต์ํํ๊ณ ๋ช ๋ น์ด ์ค๋น ๋น์ฉ์ ๋ถ์ฐ์์ผ CPU ์ค๋ฒํค๋๋ฅผ ์ค์ ๋๋ค.
๋ ๋ ๋ฒ๋ค์ ํนํ ๋ค์๊ณผ ๊ฐ์ ๊ฒฝ์ฐ์ ์ ์ฉํฉ๋๋ค:
- ์ ์ ์ง์ค๋ฉํธ๋ฆฌ: ๊ฑด๋ฌผ์ด๋ ์งํ๊ณผ ๊ฐ์ด ์ฅ๊ธฐ๊ฐ ๋ณ๊ฒฝ๋์ง ์๋ ์ ์ ๋ฉ์๋ฅผ ๊ทธ๋ฆด ๋.
- ๋ฐ๋ณต๋๋ ๊ฐ์ฒด: ์ฒ์ ๋๋ฌด๋ ์๋ฎฌ๋ ์ด์ ์ ์ ์์ฒ๋ผ ๋์ผํ ๊ฐ์ฒด์ ์ฌ๋ฌ ์ธ์คํด์ค๋ฅผ ๋ ๋๋งํ ๋.
- ๋ณต์กํ ํจ๊ณผ: ๋ธ๋ฃธ(bloom)์ด๋ ์๋ ๋งคํ(shadow mapping) ํจ์ค์ ๊ฐ์ ํน์ ์๊ฐ ํจ๊ณผ๋ฅผ ๋ง๋๋ ์ผ๋ จ์ ๋ ๋๋ง ๋ช ๋ น์ด๋ฅผ ์บก์ํํ ๋.
์ปค๋งจ๋ ๋ฒํผ ํจ์จ์ฑ์ ์ค์์ฑ
๋นํจ์จ์ ์ธ ์ปค๋งจ๋ ๋ฒํผ ์ฌ์ฉ์ ์ฌ๋ฌ ๊ฐ์ง ๋ฐฉ์์ผ๋ก ๋ํ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ฑ๋ฅ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค:
- CPU ์ค๋ฒํค๋ ์ฆ๊ฐ: ๊ณผ๋ํ ๋ช ๋ น์ด ์ ์ถ์ CPU์ ๋ถ๋ด์ ์ฃผ์ด ํ๋ ์ ์๋๋ฅผ ์ ํ์ํค๊ณ ์ ์ฌ์ ์ธ ๋ฒ๋ฒ ์(stuttering)์ ์ ๋ฐํฉ๋๋ค.
- GPU ๋ณ๋ชฉ ํ์: ์ต์ ํ๋์ง ์์ ์ปค๋งจ๋ ๋ฒํผ๋ GPU์ ๊ณผ๋ถํ๋ฅผ ์ฃผ์ด ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ๋ณ๋ชฉ ํ์์ ์ผ์ผํฌ ์ ์์ต๋๋ค.
- ๋ ๋์ ์ ๋ ฅ ์๋น: ๋ ๋ง์ CPU ๋ฐ GPU ํ๋์ ์ ๋ ฅ ์๋น ์ฆ๊ฐ๋ก ์ด์ด์ง๋ฉฐ, ์ด๋ ํนํ ๋ชจ๋ฐ์ผ ์ฅ์น์ ํด๋กญ์ต๋๋ค.
- ๋ฐฐํฐ๋ฆฌ ์๋ช ๋จ์ถ: ๋ ๋์ ์ ๋ ฅ ์๋น์ ์ง์ ์ ์ธ ๊ฒฐ๊ณผ์ ๋๋ค.
์ปค๋งจ๋ ๋ฒํผ ํจ์จ์ฑ์ ์ต์ ํํ๋ ๊ฒ์ ํนํ ๋ณต์กํ WebGL ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ ์๋ ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค. GPU์ ์ ์ถ๋๋ ๋ช ๋ น์ด ์๋ฅผ ์ต์ํํ๊ณ ์ปค๋งจ๋ ๋ฒํผ๋ฅผ ์ ์คํ๊ฒ ๊ตฌ์ฑํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ CPU ์ค๋ฒํค๋๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ์ ๋ฐ์ ์ธ ๋ ๋๋ง ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
WebGL ๋ ๋ ๋ฒ๋ค ์ปค๋งจ๋ ๋ฒํผ ์ต์ ํ ์ ๋ต
WebGL ๋ ๋ ๋ฒ๋ค ์ปค๋งจ๋ ๋ฒํผ๋ฅผ ์ต์ ํํ๊ณ ์ ๋ฐ์ ์ธ ๋ ๋๋ง ํจ์จ์ฑ์ ํฅ์์ํค๊ธฐ ์ํด ์ฌ๋ฌ ๊ธฐ์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค:
1. ์ํ ๋ณ๊ฒฝ ์ต์ํํ๊ธฐ
๋ค๋ฅธ ์ ฐ์ด๋ ํ๋ก๊ทธ๋จ, ํ ์ค์ฒ ๋๋ ๋ฒํผ๋ฅผ ๋ฐ์ธ๋ฉํ๋ ๊ฒ๊ณผ ๊ฐ์ ์ํ ๋ณ๊ฒฝ์ WebGL์์ ๊ฐ์ฅ ๋น์ฉ์ด ๋ง์ด ๋๋ ์์ ์ค ํ๋์ ๋๋ค. ๊ฐ ์ํ ๋ณ๊ฒฝ์ GPU๊ฐ ๋ด๋ถ ์ํ๋ฅผ ์ฌ๊ตฌ์ฑํ๋๋ก ์๊ตฌํ๋ฉฐ, ์ด๋ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ์ง์ฐ์ํฌ ์ ์์ต๋๋ค. ๋ฐ๋ผ์ ์ํ ๋ณ๊ฒฝ ํ์๋ฅผ ์ต์ํํ๋ ๊ฒ์ ์ปค๋งจ๋ ๋ฒํผ ํจ์จ์ฑ์ ์ต์ ํํ๋ ๋ฐ ์ค์ํฉ๋๋ค.
์ํ ๋ณ๊ฒฝ์ ์ค์ด๊ธฐ ์ํ ๊ธฐ๋ฒ:
- ์ฌ์ง๋ณ๋ก ๊ฐ์ฒด ์ ๋ ฌํ๊ธฐ: ๋์ผํ ์ฌ์ง์ ๊ณต์ ํ๋ ๊ฐ์ฒด๋ค์ ๋ ๋ ํ์์ ํจ๊ป ๊ทธ๋ฃนํํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ง ์์ฑ(์ ฐ์ด๋ ํ๋ก๊ทธ๋จ, ํ ์ค์ฒ, ์ ๋ํผ)์ ํ ๋ฒ๋ง ์ค์ ํ ๋ค์ ํด๋น ์ฌ์ง์ ์ฌ์ฉํ๋ ๋ชจ๋ ๊ฐ์ฒด๋ฅผ ๊ทธ๋ฆด ์ ์์ต๋๋ค.
- ํ ์ค์ฒ ์ํ๋ผ์ค ์ฌ์ฉํ๊ธฐ: ์ฌ๋ฌ ๊ฐ์ ์์ ํ ์ค์ฒ๋ฅผ ํ๋์ ํฐ ํ ์ค์ฒ ์ํ๋ผ์ค๋ก ๊ฒฐํฉํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ํ๋ผ์ค๋ฅผ ํ ๋ฒ๋ง ๋ฐ์ธ๋ฉํ๊ณ ํ ์ค์ฒ ์ขํ๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ๋ณ ํ ์ค์ฒ๋ฅผ ์ํ๋งํ๋ฉด ๋๋ฏ๋ก ํ ์ค์ฒ ๋ฐ์ธ๋ฉ ์์ ํ์๊ฐ ์ค์ด๋ญ๋๋ค.
- ๋ฒํ ์ค ๋ฒํผ ๊ฒฐํฉํ๊ธฐ: ๊ฐ๋ฅํ๋ค๋ฉด ์ฌ๋ฌ ๋ฒํ ์ค ๋ฒํผ๋ฅผ ํ๋์ ์ธํฐ๋ฆฌ๋ธ๋(interleaved) ๋ฒํ ์ค ๋ฒํผ๋ก ๊ฒฐํฉํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋ฒํผ ๋ฐ์ธ๋ฉ ์์ ํ์๊ฐ ์ค์ด๋ญ๋๋ค.
- ์ ๋ํผ ๋ฒํผ ๊ฐ์ฒด(UBO) ์ฌ์ฉํ๊ธฐ: UBO๋ฅผ ์ฌ์ฉํ๋ฉด ๋จ์ผ ๋ฒํผ ์ ๋ฐ์ดํธ๋ก ์ฌ๋ฌ ์ ๋ํผ ๋ณ์๋ฅผ ์ ๋ฐ์ดํธํ ์ ์์ต๋๋ค. ์ด๋ ๊ฐ๋ณ ์ ๋ํผ ๋ณ์๋ฅผ ์ค์ ํ๋ ๊ฒ๋ณด๋ค ๋ ํจ์จ์ ์ ๋๋ค.
์์ (์ฌ์ง๋ณ ์ ๋ ฌ):
๊ฐ์ฒด๋ฅผ ๋ค์๊ณผ ๊ฐ์ด ๋ฌด์์ ์์๋ก ๊ทธ๋ฆฌ๋ ๋์ :
draw(object1_materialA);
draw(object2_materialB);
draw(object3_materialA);
draw(object4_materialC);
์ฌ์ง๋ณ๋ก ์ ๋ ฌํฉ๋๋ค:
draw(object1_materialA);
draw(object3_materialA);
draw(object2_materialB);
draw(object4_materialC);
์ด๋ ๊ฒ ํ๋ฉด ์ฌ์ง A๋ object1๊ณผ object3์ ๋ํด ํ ๋ฒ๋ง ์ค์ ํ๋ฉด ๋ฉ๋๋ค.
2. ๋๋ก์ฐ ์ฝ ๋ฐฐ์น(Batching)ํ๊ธฐ
GPU์ ํน์ ํ๋ฆฌ๋ฏธํฐ๋ธ(์ผ๊ฐํ, ์ , ์ )๋ฅผ ๋ ๋๋งํ๋๋ก ์ง์ํ๋ ๊ฐ ๋๋ก์ฐ ์ฝ์ ์ผ์ ๋์ ์ค๋ฒํค๋๋ฅผ ๋ฐ์์ํต๋๋ค. ๋ฐ๋ผ์ ๋๋ก์ฐ ์ฝ ์๋ฅผ ์ต์ํํ๋ฉด ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
๋๋ก์ฐ ์ฝ์ ๋ฐฐ์นํ๊ธฐ ์ํ ๊ธฐ๋ฒ:
- ์ง์ค๋ฉํธ๋ฆฌ ์ธ์คํด์ฑ: ์ธ์คํด์ฑ์ ์ฌ์ฉํ๋ฉด ๋จ์ผ ๋๋ก์ฐ ์ฝ๋ก ๋์ผํ ์ง์ค๋ฉํธ๋ฆฌ์ ์ฌ๋ฌ ์ธ์คํด์ค๋ฅผ ์๋ก ๋ค๋ฅธ ๋ณํ์ ์ ์ฉํ์ฌ ๊ทธ๋ฆด ์ ์์ต๋๋ค. ์ด๋ ๋๋ฌด, ์ ์ ๋๋ ๋ฐ์์ ๊ฐ์ด ๋ง์ ์์ ๋์ผํ ๊ฐ์ฒด๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ํนํ ์ ์ฉํฉ๋๋ค.
- ๋ฒํ ์ค ๋ฒํผ ๊ฐ์ฒด(VBO) ์ฌ์ฉํ๊ธฐ: VBO๋ฅผ ์ฌ์ฉํ์ฌ GPU์ ๋ฒํ ์ค ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋งค ํ๋ ์๋ง๋ค CPU์์ GPU๋ก ์ ์กํด์ผ ํ๋ ๋ฐ์ดํฐ ์์ด ์ค์ด๋ญ๋๋ค.
- ์ธ๋ฑ์ค ๋๋ก์ ์ฌ์ฉํ๊ธฐ: ์ธ๋ฑ์ค ๋๋ก์์ ์ฌ์ฉํ์ฌ ๋ฒํ ์ค๋ฅผ ์ฌ์ฌ์ฉํ๊ณ ์ ์ฅ ๋ฐ ์ ์กํด์ผ ํ๋ ๋ฒํ ์ค ๋ฐ์ดํฐ์ ์์ ์ค์ ๋๋ค.
- ์ง์ค๋ฉํธ๋ฆฌ ๋ณํฉํ๊ธฐ: ์ฌ๋ฌ ์ธ์ ํ ์ง์ค๋ฉํธ๋ฆฌ๋ฅผ ํ๋์ ๋ ํฐ ์ง์ค๋ฉํธ๋ฆฌ๋ก ๋ณํฉํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ์ฅ๋ฉด์ ๋ ๋๋งํ๋ ๋ฐ ํ์ํ ๋๋ก์ฐ ์ฝ ์๊ฐ ์ค์ด๋ญ๋๋ค.
์์ (์ธ์คํด์ฑ):
1000๊ฐ์ ๋๋ฌด๋ฅผ 1000๊ฐ์ ๋๋ก์ฐ ์ฝ๋ก ๊ทธ๋ฆฌ๋ ๋์ , ์ธ์คํด์ฑ์ ์ฌ์ฉํ์ฌ ๋จ์ผ ๋๋ก์ฐ ์ฝ๋ก ๊ทธ๋ฆฝ๋๋ค. ๊ฐ ๋๋ฌด ์ธ์คํด์ค์ ์์น์ ํ์ ์ ๋ํ๋ด๋ ํ๋ ฌ ๋ฐฐ์ด์ ์ ฐ์ด๋์ ์ ๊ณตํฉ๋๋ค.
3. ํจ์จ์ ์ธ ๋ฒํผ ๊ด๋ฆฌ
๋ฒํ ์ค ๋ฐ ์ธ๋ฑ์ค ๋ฒํผ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ์์ ์ฑ๋ฅ์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋ฒํผ๋ฅผ ์์ฃผ ํ ๋นํ๊ณ ํด์ ํ๋ฉด ๋ฉ๋ชจ๋ฆฌ ๋จํธํ์ CPU ์ค๋ฒํค๋ ์ฆ๊ฐ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋ถํ์ํ ๋ฒํผ ์์ฑ ๋ฐ ํ๊ดด๋ฅผ ํผํ์ธ์.
ํจ์จ์ ์ธ ๋ฒํผ ๊ด๋ฆฌ๋ฅผ ์ํ ๊ธฐ๋ฒ:
- ๋ฒํผ ์ฌ์ฌ์ฉํ๊ธฐ: ์ ๋ฒํผ๋ฅผ ๋ง๋๋ ๋์ ๊ฐ๋ฅํ๋ฉด ๊ธฐ์กด ๋ฒํผ๋ฅผ ์ฌ์ฌ์ฉํฉ๋๋ค.
- ๋์ ๋ฒํผ ์ฌ์ฉํ๊ธฐ: ์์ฃผ ๋ณ๊ฒฝ๋๋ ๋ฐ์ดํฐ์ ๊ฒฝ์ฐ
gl.DYNAMIC_DRAW์ฌ์ฉ ํํธ์ ํจ๊ป ๋์ ๋ฒํผ๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด GPU๊ฐ ์์ฃผ ๋ณ๊ฒฝ๋๋ ๋ฐ์ดํฐ์ ๋ํ ๋ฒํผ ์ ๋ฐ์ดํธ๋ฅผ ์ต์ ํํ ์ ์์ต๋๋ค. - ์ ์ ๋ฒํผ ์ฌ์ฉํ๊ธฐ: ์์ฃผ ๋ณ๊ฒฝ๋์ง ์๋ ๋ฐ์ดํฐ์ ๊ฒฝ์ฐ
gl.STATIC_DRAW์ฌ์ฉ ํํธ์ ํจ๊ป ์ ์ ๋ฒํผ๋ฅผ ์ฌ์ฉํฉ๋๋ค. - ์ฆ์ ๋ฒํผ ์ ๋ก๋ ํผํ๊ธฐ: GPU์ ๋ฐ์ดํฐ๋ฅผ ์ ๋ก๋ํ๋ ํ์๋ฅผ ์ต์ํํฉ๋๋ค.
- ๋ถ๋ณ ์คํ ๋ฆฌ์ง ์ฌ์ฉ ๊ณ ๋ คํ๊ธฐ: WebGL ํ์ฅ ๊ธฐ๋ฅ์ธ `GL_EXT_immutable_storage`๋ ์์ฑ ํ ์์ ํ ์ ์๋ ๋ฒํผ๋ฅผ ๋ง๋ค ์ ์๊ฒ ํ์ฌ ์ถ๊ฐ์ ์ธ ์ฑ๋ฅ ์ด์ ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
4. ์ ฐ์ด๋ ํ๋ก๊ทธ๋จ ์ต์ ํํ๊ธฐ
์ ฐ์ด๋ ํ๋ก๊ทธ๋จ์ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์์ ์ค์ํ ์ญํ ์ ํ๋ฉฐ, ๊ทธ ์ฑ๋ฅ์ ์ ๋ฐ์ ์ธ ๋ ๋๋ง ์๋์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ ฐ์ด๋ ํ๋ก๊ทธ๋จ์ ์ต์ ํํ๋ฉด ์๋นํ ์ฑ๋ฅ ํฅ์์ ์ป์ ์ ์์ต๋๋ค.
์ ฐ์ด๋ ํ๋ก๊ทธ๋จ ์ต์ ํ๋ฅผ ์ํ ๊ธฐ๋ฒ:
- ์ ฐ์ด๋ ์ฝ๋ ๋จ์ํํ๊ธฐ: ์ ฐ์ด๋ ์ฝ๋์์ ๋ถํ์ํ ๊ณ์ฐ๊ณผ ๋ณต์ก์ฑ์ ์ ๊ฑฐํฉ๋๋ค.
- ์ ์ ๋ฐ๋ ๋ฐ์ดํฐ ํ์
์ฌ์ฉํ๊ธฐ: ๊ฐ๋ฅํ๋ฉด ์ ์ ๋ฐ๋ ๋ฐ์ดํฐ ํ์
(์:
mediump๋๋lowp)์ ์ฌ์ฉํฉ๋๋ค. ์ด๋ฌํ ๋ฐ์ดํฐ ํ์ ์ ๋ ์ ์ ๋ฉ๋ชจ๋ฆฌ์ ์ฒ๋ฆฌ ๋ฅ๋ ฅ์ ํ์๋ก ํฉ๋๋ค. - ๋์ ๋ถ๊ธฐ ํผํ๊ธฐ: ๋์ ๋ถ๊ธฐ(์: ๋ฐํ์ ๋ฐ์ดํฐ์ ์์กดํ๋
if๋ฌธ)๋ ์ ฐ์ด๋ ์ฑ๋ฅ์ ๋ถ์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ๋์ ๋ถ๊ธฐ๋ฅผ ์ต์ํํ๊ฑฐ๋ ๋ฃฉ์ ํ ์ด๋ธ ์ฌ์ฉ๊ณผ ๊ฐ์ ๋์ฒด ๊ธฐ๋ฒ์ผ๋ก ๊ต์ฒดํด ๋ณด์ธ์. - ๊ฐ ๋ฏธ๋ฆฌ ๊ณ์ฐํ๊ธฐ: ์์ ๊ฐ์ ๋ฏธ๋ฆฌ ๊ณ์ฐํ์ฌ ์ ๋ํผ ๋ณ์์ ์ ์ฅํฉ๋๋ค. ์ด๋ ๊ฒ ํ๋ฉด ๋งค ํ๋ ์๋ง๋ค ๋์ผํ ๊ฐ์ ๋ค์ ๊ณ์ฐํ๋ ๊ฒ์ ํผํ ์ ์์ต๋๋ค.
- ํ ์ค์ฒ ์ํ๋ง ์ต์ ํํ๊ธฐ: ๋ฐ๋งต(mipmap)๊ณผ ํ ์ค์ฒ ํํฐ๋ง์ ์ฌ์ฉํ์ฌ ํ ์ค์ฒ ์ํ๋ง์ ์ต์ ํํฉ๋๋ค.
5. ๋ ๋ ๋ฒ๋ค ๋ชจ๋ฒ ์ฌ๋ก ํ์ฉํ๊ธฐ
๋ ๋ ๋ฒ๋ค์ ์ฌ์ฉํ ๋ ์ต์ ์ ์ฑ๋ฅ์ ์ํด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ธ์:
- ํ ๋ฒ ๋ นํํ๊ณ ์ฌ๋ฌ ๋ฒ ์คํํ๊ธฐ: ๋ ๋ ๋ฒ๋ค์ ์ฃผ์ ์ด์ ์ ํ ๋ฒ ๋ นํํ๊ณ ์ฌ๋ฌ ๋ฒ ์คํํ๋ ๋ฐ์ ๋์ต๋๋ค. ์ด ์ฌ์ฌ์ฉ์ ํจ๊ณผ์ ์ผ๋ก ํ์ฉํ๊ณ ์๋์ง ํ์ธํ์ธ์.
- ๋ฒ๋ค์ ์๊ณ ์ง์ค์ ์ผ๋ก ์ ์งํ๊ธฐ: ์๊ณ ๋ ์ง์ค๋ ๋ฒ๋ค์ด ํฌ๊ณ ๋จ์ผํ๋ ๋ฒ๋ค๋ณด๋ค ์ข ์ข ๋ ํจ์จ์ ์ ๋๋ค. ์ด๋ฅผ ํตํด GPU๋ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ๋ ์ ์ต์ ํํ ์ ์์ต๋๋ค.
- ๋ฒ๋ค ๋ด์์ ์ํ ๋ณ๊ฒฝ ํผํ๊ธฐ (๊ฐ๋ฅํ๋ค๋ฉด): ์์ ์ธ๊ธํ๋ฏ์ด ์ํ ๋ณ๊ฒฝ์ ๋น์ฉ์ด ๋ง์ด ๋ญ๋๋ค. ๋ ๋ ๋ฒ๋ค ๋ด์์ ์ํ ๋ณ๊ฒฝ์ ์ต์ํํ๋๋ก ๋ ธ๋ ฅํ์ธ์. ์ํ ๋ณ๊ฒฝ์ด ํ์ํ ๊ฒฝ์ฐ, ๋ฒ๋ค์ ์์์ด๋ ๋์ ํจ๊ป ๊ทธ๋ฃนํํ์ธ์.
- ์ ์ ์ง์ค๋ฉํธ๋ฆฌ์ ๋ฒ๋ค ์ฌ์ฉํ๊ธฐ: ๋ ๋ ๋ฒ๋ค์ ์ฅ๊ธฐ๊ฐ ๋ณ๊ฒฝ๋์ง ์๋ ์ ์ ์ง์ค๋ฉํธ๋ฆฌ๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ์ด์์ ์ ๋๋ค.
- ํ ์คํธ ๋ฐ ํ๋กํ์ผ๋ง: ๋ ๋ ๋ฒ๋ค์ด ์ค์ ๋ก ์ฑ๋ฅ์ ํฅ์์ํค๋์ง ํ์ธํ๊ธฐ ์ํด ํญ์ ํ ์คํธํ๊ณ ํ๋กํ์ผ๋งํ์ธ์. WebGL ํ๋กํ์ผ๋ฌ์ ์ฑ๋ฅ ๋ถ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ์ฝ๋๋ฅผ ์ต์ ํํ์ธ์.
6. ํ๋กํ์ผ๋ง ๋ฐ ๋๋ฒ๊น
ํ๋กํ์ผ๋ง๊ณผ ๋๋ฒ๊น ์ ์ต์ ํ ๊ณผ์ ์์ ํ์์ ์ธ ๋จ๊ณ์ ๋๋ค. WebGL์ ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ธฐ ์ํ ๋ค์ํ ๋๊ตฌ์ ๊ธฐ์ ์ ์ ๊ณตํฉ๋๋ค.
ํ๋กํ์ผ๋ง ๋ฐ ๋๋ฒ๊น ์ ์ํ ๋๊ตฌ:
- ๋ธ๋ผ์ฐ์ ๊ฐ๋ฐ์ ๋๊ตฌ: ๋๋ถ๋ถ์ ์ต์ ๋ธ๋ผ์ฐ์ ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋ ํ๋กํ์ผ๋ง, ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋ ๋ถ์, WebGL ์ํ ๊ฒ์ฌ๋ฅผ ํ ์ ์๋ ๋ด์ฅ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ ๊ณตํฉ๋๋ค.
- WebGL ๋๋ฒ๊ฑฐ: Spector.js๋ WebGL Insight์ ๊ฐ์ ์ ์ฉ WebGL ๋๋ฒ๊ฑฐ๋ ์ ฐ์ด๋ ๊ฒ์ฌ, ์ํ ์ถ์ , ์ค๋ฅ ๋ณด๊ณ ์ ๊ฐ์ ๋ ๊ณ ๊ธ ๋๋ฒ๊น ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค.
- GPU ํ๋กํ์ผ๋ฌ: NVIDIA Nsight Graphics๋ AMD Radeon GPU Profiler์ ๊ฐ์ GPU ํ๋กํ์ผ๋ฌ๋ฅผ ์ฌ์ฉํ๋ฉด GPU ์ฑ๋ฅ์ ๋ถ์ํ๊ณ ๋ ๋๋ง ํ์ดํ๋ผ์ธ์ ๋ณ๋ชฉ ํ์์ ์๋ณํ ์ ์์ต๋๋ค.
๋๋ฒ๊น ํ:
- WebGL ์ค๋ฅ ๊ฒ์ฌ ํ์ฑํํ๊ธฐ: WebGL ์ค๋ฅ ๊ฒ์ฌ๋ฅผ ํ์ฑํํ์ฌ ๊ฐ๋ฐ ๊ณผ์ ์ด๊ธฐ์ ์ค๋ฅ์ ๊ฒฝ๊ณ ๋ฅผ ํฌ์ฐฉํฉ๋๋ค.
- ์ฝ์ ๋ก๊น ์ฌ์ฉํ๊ธฐ: ์ฝ์ ๋ก๊น ์ ์ฌ์ฉํ์ฌ ์คํ ํ๋ฆ์ ์ถ์ ํ๊ณ ์ ์ฌ์ ์ธ ๋ฌธ์ ๋ฅผ ์๋ณํฉ๋๋ค.
- ์ฅ๋ฉด ๋จ์ํํ๊ธฐ: ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฉด ๊ฐ์ฒด๋ฅผ ์ ๊ฑฐํ๊ฑฐ๋ ์ ฐ์ด๋์ ๋ณต์ก์ฑ์ ์ค์ฌ ์ฅ๋ฉด์ ๋จ์ํํด ๋ณด์ธ์.
- ๋ฌธ์ ๋ถ๋ฆฌํ๊ธฐ: ์ฝ๋ ์น์ ์ ์ฃผ์ ์ฒ๋ฆฌํ๊ฑฐ๋ ํน์ ๊ธฐ๋ฅ์ ๋นํ์ฑํํ์ฌ ๋ฌธ์ ๋ฅผ ๋ถ๋ฆฌํด ๋ณด์ธ์.
์ค์ ์์ ๋ฐ ์ฌ๋ก ์ฐ๊ตฌ
์ด๋ฌํ ์ต์ ํ ๊ธฐ์ ์ด ์ด๋ป๊ฒ ์ ์ฉ๋ ์ ์๋์ง ์ค์ ์์๋ฅผ ๋ช ๊ฐ์ง ์ดํด๋ณด๊ฒ ์ต๋๋ค.
์์ 1: 3D ๋ชจ๋ธ ๋ทฐ์ด ์ต์ ํํ๊ธฐ
์ฌ์ฉ์๊ฐ ๋ณต์กํ 3D ๋ชจ๋ธ์ ๋ณด๊ณ ์ํธ ์์ฉํ ์ ์๋ WebGL ๊ธฐ๋ฐ 3D ๋ชจ๋ธ ๋ทฐ์ด๋ฅผ ์์ํด ๋ณด์ธ์. ์ฒ์์๋ ์ด ๋ทฐ์ด๊ฐ ํนํ ํด๋ฆฌ๊ณค ์๊ฐ ๋ง์ ๋ชจ๋ธ์ ๋ ๋๋งํ ๋ ์ฑ๋ฅ์ด ์ ํ๋๋ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
์์์ ๋ ผ์ํ ์ต์ ํ ๊ธฐ์ ์ ์ ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ค์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค:
- ์ง์ค๋ฉํธ๋ฆฌ ์ธ์คํด์ฑ: ๋ณผํธ๋ ๋ฆฌ๋ฒณ๊ณผ ๊ฐ์ด ๋ฐ๋ณต๋๋ ์์์ ์ฌ๋ฌ ์ธ์คํด์ค๋ฅผ ๋ ๋๋งํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- ํ ์ค์ฒ ์ํ๋ผ์ค: ์ฌ๋ฌ ํ ์ค์ฒ๋ฅผ ๋จ์ผ ์ํ๋ผ์ค๋ก ๊ฒฐํฉํ์ฌ ํ ์ค์ฒ ๋ฐ์ธ๋ฉ ์์ ํ์๋ฅผ ์ค์ด๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- ๋ํ ์ผ ์์ค(LOD): LOD๋ฅผ ๊ตฌํํ์ฌ ๋ชจ๋ธ์ด ์นด๋ฉ๋ผ์์ ๋ฉ๋ฆฌ ์์ ๋ ๋ ์์ธํ ๋ฒ์ ์ ๋ชจ๋ธ์ ๋ ๋๋งํฉ๋๋ค.
์์ 2: ํํฐํด ์์คํ ์ต์ ํํ๊ธฐ
์ฐ๊ธฐ๋ ๋ถ๊ณผ ๊ฐ์ ๋ณต์กํ ์๊ฐ ํจ๊ณผ๋ฅผ ์๋ฎฌ๋ ์ด์ ํ๋ WebGL ๊ธฐ๋ฐ ํํฐํด ์์คํ ์ ์๊ฐํด ๋ณด์ธ์. ์ด ํํฐํด ์์คํ ์ ์ด๊ธฐ์ ๋งค ํ๋ ์ ๋ ๋๋ง๋๋ ํํฐํด ์๊ฐ ๋ง์ ์ฑ๋ฅ ๋ฌธ์ ๊ฐ ์์์ต๋๋ค.
์์์ ๋ ผ์ํ ์ต์ ํ ๊ธฐ์ ์ ์ ์ฉํจ์ผ๋ก์จ ๊ฐ๋ฐ์๋ค์ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค:
- ์ง์ค๋ฉํธ๋ฆฌ ์ธ์คํด์ฑ: ๋จ์ผ ๋๋ก์ฐ ์ฝ๋ก ์ฌ๋ฌ ํํฐํด์ ๋ ๋๋งํ๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- ๋น๋ณด๋ ํํฐํด: ํํฐํด์ ํญ์ ์นด๋ฉ๋ผ๋ฅผ ํฅํ๋ ํํํ ์ฌ๊ฐํ(quad)์ผ๋ก ๋ ๋๋งํ์ฌ ๋ฒํ ์ค ์ ฐ์ด๋์ ๋ณต์ก์ฑ์ ์ค์ด๋ ๋ฐ ์ฌ์ฉ๋ฉ๋๋ค.
- ํํฐํด ์ปฌ๋ง: ๋ทฐ ํ๋ฌ์คํ (view frustum) ์ธ๋ถ์ ์๋ ํํฐํด์ ์ปฌ๋ง(culling)ํ์ฌ ๋ ๋๋งํด์ผ ํ ํํฐํด ์๋ฅผ ์ค์ ๋๋ค.
WebGL ์ฑ๋ฅ์ ๋ฏธ๋
WebGL์ ์ฑ๋ฅ๊ณผ ๊ธฐ๋ฅ์ ๊ฐ์ ํ๊ธฐ ์ํด ์ ๊ธฐ์ ์ผ๋ก ์๋ก์ด ๊ธฐ๋ฅ๊ณผ ํ์ฅ ๊ธฐ๋ฅ์ด ๋์ ๋๋ฉด์ ๊ณ์ํด์ ๋ฐ์ ํ๊ณ ์์ต๋๋ค. WebGL ์ฑ๋ฅ ์ต์ ํ์ ์๋ก์ด ํธ๋ ๋ ์ค ์ผ๋ถ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- WebGPU: WebGPU๋ WebGL์ ๋นํด ์๋นํ ์ฑ๋ฅ ํฅ์์ ์ฝ์ํ๋ ์ฐจ์ธ๋ ์น ๊ทธ๋ํฝ API์ ๋๋ค. ์ปดํจํธ ์ ฐ์ด๋ ๋ฐ ๋ ์ด ํธ๋ ์ด์ฑ๊ณผ ๊ฐ์ ๊ธฐ๋ฅ์ ์ง์ํ๋ ๋ ํ๋์ ์ด๊ณ ํจ์จ์ ์ธ API๋ฅผ ์ ๊ณตํฉ๋๋ค.
- WebAssembly: WebAssembly๋ฅผ ํตํด ๊ฐ๋ฐ์๋ ๋ธ๋ผ์ฐ์ ์์ ๊ณ ์ฑ๋ฅ ์ฝ๋๋ฅผ ์คํํ ์ ์์ต๋๋ค. ๋ฌผ๋ฆฌ ์๋ฎฌ๋ ์ด์ ์ด๋ ๋ณต์กํ ์ ฐ์ด๋ ๊ณ์ฐ๊ณผ ๊ฐ์ ๊ณ์ฐ ์ง์ฝ์ ์ธ ์์ ์ WebAssembly๋ฅผ ์ฌ์ฉํ๋ฉด ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ํ๋์จ์ด ๊ฐ์ ๋ ์ด ํธ๋ ์ด์ฑ: ํ๋์จ์ด ๊ฐ์ ๋ ์ด ํธ๋ ์ด์ฑ์ด ๋ ๋ณดํธํ๋จ์ ๋ฐ๋ผ ๊ฐ๋ฐ์๋ ๋ ํ์ค์ ์ด๊ณ ์๊ฐ์ ์ผ๋ก ๋ฉ์ง ์น ๊ทธ๋ํฝ ๊ฒฝํ์ ๋ง๋ค ์ ์๊ฒ ๋ ๊ฒ์ ๋๋ค.
๊ฒฐ๋ก
WebGL ๋ ๋ ๋ฒ๋ค ์ปค๋งจ๋ ๋ฒํผ๋ฅผ ์ต์ ํํ๋ ๊ฒ์ ๋ณต์กํ ์น ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ถ๋๋ฝ๊ณ ๋ฐ์์ฑ ์๋ ์ฑ๋ฅ์ ๋ฌ์ฑํ๋ ๋ฐ ์ค์ํฉ๋๋ค. ์ํ ๋ณ๊ฒฝ ์ต์ํ, ๋๋ก์ฐ ์ฝ ๋ฐฐ์น, ํจ์จ์ ์ธ ๋ฒํผ ๊ด๋ฆฌ, ์ ฐ์ด๋ ํ๋ก๊ทธ๋จ ์ต์ ํ, ๋ ๋ ๋ฒ๋ค ๋ชจ๋ฒ ์ฌ๋ก ์ค์๋ฅผ ํตํด ๊ฐ๋ฐ์๋ CPU ์ค๋ฒํค๋๋ฅผ ํฌ๊ฒ ์ค์ด๊ณ ์ ๋ฐ์ ์ธ ๋ ๋๋ง ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ต๊ณ ์ ์ต์ ํ ๊ธฐ์ ์ ํน์ ์ ํ๋ฆฌ์ผ์ด์ ๊ณผ ํ๋์จ์ด์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค๋ ์ ์ ๊ธฐ์ตํ์ธ์. ํญ์ ์ฝ๋๋ฅผ ํ ์คํธํ๊ณ ํ๋กํ์ผ๋งํ์ฌ ๋ณ๋ชฉ ํ์์ ์๋ณํ๊ณ ๊ทธ์ ๋ฐ๋ผ ์ต์ ํํด์ผ ํฉ๋๋ค. ๋ฏธ๋์ WebGL ์ฑ๋ฅ์ ๋์ฑ ํฅ์์ํฌ ๊ฒ์ผ๋ก ๊ธฐ๋๋๋ WebGPU ๋ฐ WebAssembly์ ๊ฐ์ ์๋ก์ด ๊ธฐ์ ์ ์ฃผ๋ชฉํ์ธ์.
์ด๋ฌํ ์์น์ ์ดํดํ๊ณ ์ ์ฉํจ์ผ๋ก์จ WebGL์ ๋ชจ๋ ์ ์ฌ๋ ฅ์ ๋ฐํํ๊ณ ์ ์ธ๊ณ ์ฌ์ฉ์๋ฅผ ์ํด ๋งค๋ ฅ์ ์ด๊ณ ๊ณ ์ฑ๋ฅ์ธ ์น ๊ทธ๋ํฝ ๊ฒฝํ์ ๋ง๋ค ์ ์์ต๋๋ค.