WebGL Fundamentals > Animation

https://webglfundamentals.org/webgl/lessons/webgl-animation.html

WebGL - Animation

https://github.com/Myoungmin/WebGL_Fundamentals

GitHub - Myoungmin/WebGL_Fundamentals: WebGL 학습 프로젝트

 

 

WebGL Animation

애니메이션을 프레임률에 독립적으로 만들지 않는다면 사용자의 하드웨어 조건에 따라 다른 속도로 움직이는 물체를 볼 수 있다.

이러한 문제를 방지하려면 프레임률에 독립적으로 애니메이션이 표출되도록 구성해야 한다.

 

애니메이션을 프레임률에 독립적으로 만드는 방법

프레임 간에 소요된 시간을 계산하고, 이를 사용하여 이 프레임을 얼마나 애니메이션 할지 계산하여 독립적으로 만들 수 있다.

 

먼저 시간이 필요한데, requestAnimationFrame은 호출하면 페이지가 로드된 이후에 시간을 보내준다.

requestAnimationFrame이 밀리초(1/1000초) 단위로 시간을 전달하기 때문에 초 단위를 얻기 위해 0.001로 곱해야 한다.

위 내용을 바탕으로 델타 시간 구하기

var then = 0;
 
requestAnimationFrame(drawScene);
 
// 장면 그리기
function drawScene(now) {
  // 시간을 초 단위로 변환
  now *= 0.001;
  // 현재 시간에서 이전 시간 빼기
  var deltaTime = now - then;
  // 다음 프레임을 위해 현재 시간 저장
  then = now;
 
  //...

초 단위의 deltaTime이 있으면 모든 계산은 초당 어떤 일이 일어나길 원하는 단위 수가 될 수 있다.

프레임률에 상관없이 초당 rotationSpeed 만큼 회전하도록 설정

 

rotation[1] += rotationSpeed * deltaTime;

 

setInterval나 setTimeout을 사용하지 않고 requestAnimationFrame 함수를 사용해야 하는 이유

setInterval와 setTimeout을 사용하면 두 가지 문제점이 있다.

1. 우선 setInterval와 setTimeout은 무언가를 표시하는 것에 대해 브라우저와 아무 관련이 없다.

브라우저가 새로운 프레임을 그릴 때 동기화되지 않으므로 사용자의 컴퓨터와 싱크가 맞지 않을 수 있다.

초당 60프레임이라 가정하고 setInterval나 setTimeout를 사용하였다면,

실제 사용자가 다른 프레임으로 실행하였을 때, 컴퓨터와 싱크가 맞지 않을 것이다.

 

2. 또 다른 문제는 브라우저가 setInterval나 setTimeout을 사용하는 이유를 모른다는 것이다.

페이지가 보이지 않아 애니메이션 동작이 필요없는 경우에도, 브라우저는 코드를 실행하게된다.

setTimeout이나 setInterval를 사용하게되면 브라우저가 알 수 있는 방법이 없다.

 

requestAnimationFrame은 이러한 문제를 해결하는 함수이다.

이 함수는 적시에 호출하여 화면과 애니메이션을 동기화시키며, 탭이 보이는 경우에만 호출한다.

 

 

 

 

 

 

https://myoungmin.github.io/WebGL_Fundamentals/

WebGL_Fundamentals