Diiiiiikey

Blog

Drei에서 제공하는 그림자 컴포넌트

  1. AccumulativeShadows
  2. ContactShadows
  3. SoftShadows

이외에도 여러개의 그림자 컴포넌트가 더 있다. https://github.com/pmndrs/drei

AccumulativeShadows

정적인 그림자. mesh가 움직여도 변경되지 않는다.(동적인 그림자로 만들 수는 있음 근데 비추)

자체적으로 평면 메쉬를 자동으로 추가한다. 따라서 배경을 흰색으로 하고, planeGeomatry 삭제를 했다.

다른 메쉬의 표면에는 표현되지 않는다. 따라서 메쉬에 대해 receiveShadow가 필요없다.

<AccumulativeShadows
  position={[0, 0.01, 0]}
  scale={10}
  color="#000000"
  opacity={0.7}
  alphaTest={1}
  frames={60}
></AccumulativeShadows>

position - 평면 메쉬의 위치

scale - 평면 메쉬의 크기

color - 그림자의 색상

opacity - 그림자의 불투명도

alphaTest - 그림자에 대해 픽셀에 알파값을 비교해서 해당 값보다 작으면 그림자를 표현

frames - 처음에 렌더링되는 프레임 중 지정된 값만큼 그림자를 만들고 누적해서 최종 그람자 이미지를 만든다.

그림자 생성을 위한 광원을 자식으로 추가해야 그림자가 생성된다.

RandomizedLight

<RandomizedLight
  radius={0.5}
  ambient={0.21}
  intensity={1.5}
  position={[3, 3, 0]}
/>

구의 그림자는 처음 위치에 머물러있다.

radius - 블러링 반경값. 클수록 모서리에 블러가 강해짐

ambient - Ambient Occlusion에 대한 값

Occlusion에 - 빛의 차폐로 인한 감쇠 근사치를 구하는 이펙트입니다. 현실에서도 방의 구석 부분은 훨씬 더 어둡듯이, 구석이나 틈 같은 곳을 더 어둡게 하여 더욱 자연스럽고 사실적인 느낌을 낼 수 있도록, 표준 글로벌 일루미네이션에 더해 미묘한 이펙트로 사용하는 것이 보통 가장 좋습니다.-나무위키

또한 RandomizedLight를 자식으로 여러개 가질 수 있는데, 추가를 해보면 제대로 표현되지 않는다.

먼저, RandomizedLight 내부에서 사용하는 광원의 개수를 줄여야한다.

<RandomizedLight amount={4} radius={0.5} ambient={0.01} intensity={0.5} position={[5, 3, 0]} />
<RandomizedLight amount={4} radius={0.5} ambient={0.21} intensity={0.5} position={[-3, 3, 0]} />

amount의 기본값은 8, 두개의 RandomizedLight를 사용하기 때문에 4로 줄였다.

정적인 그림자 이미지를 만들지만 렌더링 속도가 빠르고, 한번 그림자가 만들어지면 cpu, gpu 의 비용에 0에 가깝다.


동적으로 한번 만들어보자

frames={Infinity} 로 바꾸고 temporal, blend={30} 추가

그림자가 생기긴하는데 구의 그림자가 다른 그림자보다 옅다. blend를 낮추면 그림자가 짙어지는데 다른 그림자들도 동적인 것처럼 제자리에서 엄청 부들댄다. 권장되는 방법은 아닌것 같다.


SoftShadows

directionalLight의 그림자를 가져다가 계산한 것, 반드시 장면에 그림자를 생성해주는 directionalLight 필요로 함

ui로 입력해보자

const config = useControls({
  size: { value: 25, min: 0, max: 100 },
  focus: { value: 0, min: 0, max: 10 },
  samples: { value: 10, min: 1, max: 100, step: 3 },
});

추가

size - 광원의 크기. 클수록 그림자가 커지나 흐려짐

focus - 깊이. 클수록 블러가 커짐

samples - 그림자 이미지를 생성하기 위한 샘플링 수. 높을 수록 고퀄


ContactShadows

R3F의 기본적인 그림자 기능을 전혀 사용하지 않는 독립적인 그림자 컴포넌트이다.

따라서 castShadow, receiveShadow 가 필요없다.

AccumulativeShadows와 마찬가지로 평면을 자동으로 만들며, 이 평면에만 그림자가 표현된다.

<ContactShadows
  position={[0, -3, 0]}
  scale={10}
  resolution={512}
  color="#000000"
  opacity={0.4}
  blur={0.5}
  frames={1}
/>

position - 평면의 위치

scale - 평면의 크기

resolution - 그림자의 크기

color - 그림자 색상

opacity - 그림자 투명도

blur - 그림자 블러링

frames={1} - 정적 그림자

댓글남기기

참고