WebGL 기초( 5 - 도형 이동 )

이번에는 삼각형에 움직임을 추가해보려고 합니다.

이를 위해서 애니메이션 루프를 설정해야하는데
setTimeout 이나 setInterveal 보다 requestAnimationFrame 활용할 예정입니다.

앞의 두 메서드가 아닌 requestAnimationFrame 사용하려는 이유는
좀 더 정확하고, 다른 브라우저 탭을 보고 있는 동안에는 씬에 애니메이션을 적용하지 않기 때문입니다.
( 예외로 requestAnimationFrame 사용하면 모바일 기기에서 불필요한 배터리 수명을 줄일 수 있다고 합니다.)

애니메이션을 만들게 될때 씬의 뷰를 움직이는 방법이있는데,
현재는 뷰를 조절하는 법을 모르기때문에 모델의 좌표계를 수정하여 움직임을 주도록 작성하였습니다.

requestAnimationFrame 지원이 브라우저마다 다르기때문에
사용항 브라우저에서 지원되는지를 확인하고 사용하여야 하거나 polyfill을 통해 수행할 수 있습니다.
url : https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

<script>
  // setupWebGL();
  // initShader();
  // setupBuffers();
  // drawScene();
  
  // 기존에 init해주던 부분에 animLoop를 호출하여 계속 반복시킵니다.
  
  initShader();
  setupBuffers();
  (function animLoop(){
    setupWebGL();
    setupDynamicBuffers();
    drawScene();
    requestAnimationFrame(animLoop, canvas);
  })();
</script>

requestAnimationFrame의 첫번째 파라미터는 콜백 함수이고,
두번째 인자는 애니메이션의 대상이되는 엘리먼트입니다.

<script>
  var angle = 0.0;
  function setupDynamicBuffers() {
    // 변환 범위를 -0.5 ~ 0.5로 제한하기위해 sin 사용
    var x_translation = Math.sin(angle)/2.0;
              
      var positionsColor = [
        -0.5 + x_translation,  0.5 + x_translation, //첫번째 삼각형의 정점 1
        -0.5 + x_translation, -0.5 + x_translation, //첫번째 삼각형의 정점 2
        0.5 + x_translation, -0.5 + x_translation, //첫번째 삼각형의 정점 3
      ];
    
      positionsColorBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, positionsColorBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positionsColor), gl.DYNAMIC_DRAW);
    
      var triangleVertices = [
        -0.5 + x_translation,  0.5 + x_translation, //첫번째 삼각형의 정점 1
        -0.5 + x_translation, -0.5 + x_translation, //첫번째 삼각형의 정점 2
        0.5 + x_translation, -0.5 + x_translation, //첫번째 삼각형의 정점 3
      ];
      angle += 0.01;
    
      trianglesVerticeBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.DYNAMIC_DRAW);
  }
</script>

가장 중요한 것은 정점이나 데이터가 변경될때는 정점의 타입을
STATIC_DRAW에서 DYNAMIC_DRAW로 바꾸어야한다는 것입니다.

WebGL 기초( 5 - 도형 이동 )

WebGL 기초( 5 - 도형 이동 )

Comments: