Shadow

Shadow

๋น›์„ ๋ฐ›์•„ ์ƒ๊ธฐ๋Š” ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

Built In Shadow

๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์ผ์ผ์ด ์„ค์ •ํ•˜๋Š” ์ž‘์—…์€ ๋งค์šฐ ๋ฒˆ๊ฑฐ๋กญ๋‹ค. Three.js์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ทธ๋ฆผ์ž ํšจ๊ณผ๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์ž.

  • ๊ทธ๋ฆผ์ž๋ฅผ ๋งŒ๋“ค๋ ค๋ฉด renderer์˜ shadowMap์„ ์‚ฌ์šฉํ•˜๊ฒ ๋‹ค๊ณ  ์„ ์–ธ ํ•ด์ค˜์•ผ ํ•œ๋‹ค.

  • ๋น›์— ์˜ํ•ด ๊ทธ๋ฆผ์ž๋ฅผ ๋“œ๋Ÿฌ๋‚ผ ๊ฐ์ฒด(cast)์™€ ๊ทธ๋ฆผ์ž๋ฅผ ๋ฐ›๋„๋ก ํ•  ๊ฐ์ฒด(receive)๋ฅผ ์„ค์ •

const renderer = new THREE.WebGLRenderer();
renderer.shadowMap.enabled = true; 

Property

  • mapSize - spotLight.shadow.mapSize

    • ๊ฐ’์ด ํด์ˆ˜๋ก ๊ณ„์‚ฐ ์‹œ๊ฐ„์ด ๋Š˜์–ด๋‚˜๋Š” ๋Œ€์‹  ๊ทธ๋ฆผ์ž ํ’ˆ์งˆ์ด ํ–ฅ์ƒ๋œ๋‹ค.

    • ๊ฐ’์€ 2์˜ ๊ฑฐ๋“ญ์ œ๊ณฑ์œผ๋กœ, ๋„ˆ๋น„์™€ ๋†’์ด๊ฐ€ ๋™์ผํ•  ํ•„์š”๋Š” ์—†๋‹ค.

    • ๊ธฐ๋ณธ๊ฐ’์€ (512, 512)์ž…๋‹ˆ๋‹ค.

  • radius - spotLight.shadow.radius

    • ๊ทธ๋ฆผ์ž ๊ฐ€์žฅ์ž๋ฆฌ์— blur ํšจ๊ณผ๋ฅผ ์ค˜ ๋”์šฑ ์‚ฌ์‹ค์ ์ธ ๊ทธ๋ฆผ์ž๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋œ๋‹ค.

    • ๊ฐ’์ด 1๋ณด๋‹ค ํฐ ๊ฒฝ์šฐ blur ํšจ๊ณผ๊ฐ€ ์ƒ๊ธฐ๊ฒŒ ๋œ๋‹ค.

Last updated