시간 흐름 측정, getDelta()와 getElapsedTime()

 

getDelta()와 getElapsedTime()

• 주로 3D 라이브러리 Three.js에서 시간 흐름을 측정할 때 사용하는 메서드이다.
• 두 메서드 모두 렌더링이나 애니메이션의 타이밍 조절에 유용하게 사용되지만, 목적과 결과값에서 차이가 있다.

 

 

getDelta()

 

설명

마지막 getDelta() 호출 이후 경과된 시간(초 단위)을 반환하는 메서드이다.

 

 

용도

프레임 간의 간격을 계산해 애니메이션을 프레임 속도에 독립적으로 조정하는 데 사용한다.

 

 

특징

• 매번 호출 시 그 이후의 경과 시간만을 계산하므로, 각 프레임마다 경과된 시간이 달라질 수 있다.
• 예를 들어, 60fps로 렌더링 되는 경우 getDelta()는 약 0.0167초를 반환하고, 30 fps로 렌더링 된다면 약 0.033초를 반환한다.
• 프레임 간격이 일정하지 않더라도, 델타 값을 이용해 애니메이션 속도를 균일하게 맞출 수 있다.

 

 

예시

이 코드는 각 프레임의 간격에 따라 object의 x 위치를 조정해준다.

프레임 속도에 상관없이 일정한 속도로 이동한다.

const delta = clock.getDelta();
object.position.x += speed * delta;

 

 

getElapsedTime()

 

설명

Clock이 생성된 후(또는 start() 호출 이후) 누적된 총 경과 시간을 반환하는 메서드이다.

 

 

용도

애니메이션이나 동작을 특정 시간에 따라 진행하도록 할 때 유용하다.

 

 

특징:

• 호출할 때마다 누적된 시간값이 반환되며, 시간은 계속 증가한다.
• 델타 타임이 아니라 현재까지의 경과 시간을 기준으로 애니메이션 타이밍을 계산하는 데 사용할 수 있다.
• getElapsedTime()을 사용하면, 일정 시간에 비례한 애니메이션이 가능한데, 델타값을 사용하지 않아도 된다.

 

 

예시

이 코드는 elapsedTime을 사용해 object의 x 위치를 사인파 형태로 움직이도록 만든다.

시간 경과에 따라 부드러운 사인 곡선을 따라 이동한다.

const elapsedTime = clock.getElapsedTime();
object.position.x = Math.sin(elapsedTime);

 

 

차이점 요약

 

• getDelta(): 프레임 간 경과 시간, 프레임 독립적인 애니메이션에 유리하다.
• getElapsedTime(): 시작 시점부터 누적된 전체 경과 시간, 일정한 시간 흐름에 따른 애니메이션에 적합하다.

 

 

이 두 메서드를 목적에 맞게 사용하면 프레임 속도나 애니메이션의 타이밍을 효과적으로 제어할 수 있다.