WebGL Fundamentals > WebGL 2D : Translation

https://webglfundamentals.org/webgl/lessons/webgl-2d-translation.html

WebGL 2D Translation

https://github.com/Myoungmin/WebGL_Fundamentals

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

 

 

WebGL 2D : Translation

평행이동의 기본 개념을 알아본다.

 

1. 자바스크립트를 그릴 때마다 모든 점들을 업데이트 하는 가장 기본적인 방법

자바스크립트 안에서 점들을 전부 업데이트하고 다시 그리는 방법이다.

 

// 문자 'F'를 정의하는 값들로 버퍼 채우기
function setGeometry(gl, x, y) {
  var width = 100;
  var height = 150;
  var thickness = 30;
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
      // 왼쪽 열
      x, y,
      x + thickness, y,
      x, y + height,
      x, y + height,
      x + thickness, y,
      x + thickness, y + height,
 
      // 상단 가로 획
      x + thickness, y,
      x + width, y,
      x + thickness, y + thickness,
      x + thickness, y + thickness,
      x + width, y,
      x + width, y + thickness,
 
      // 중간 가로 획
      x + thickness, y + thickness * 2,
      x + width * 2 / 3, y + thickness * 2,
      x + thickness, y + thickness * 3,
      x + thickness, y + thickness * 3,
      x + width * 2 / 3, y + thickness * 2,
      x + width * 2 / 3, y + thickness * 3,
    ]),
    gl.STATIC_DRAW
  );
}

 

이 방법은 확장하기에 좋지 않다.
수백 수천 개의 선으로 이루어진 아주 복잡한 지오메트리를 그리려면 꽤 복잡한 코드를 작성해야 한다.

 

2. 더 간단한 지오메트리를 업로드하고 셰이더에서 평행 이동을 수행하는 방법

<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec2 a_position;
 
uniform vec2 u_resolution;
uniform vec2 u_translation;
 
void main() {
  // 평행 이동 추가
  vec2 position = a_position + u_translation;
 
  // 사각형을 픽셀에서 0.0에서 1.0사이로 변환
  vec2 zeroToOne = position / u_resolution;
  //...

 

지오메트리는 한 번만 설정한다.

// 문자 'F'를 정의하는 값들로 버퍼 채우기
function setGeometry(gl) {
  gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
      // 왼쪽 열
      0, 0,
      30, 0,
      0, 150,
      0, 150,
      30, 0,
      30, 150,
 
      // 상단 가로 획
      30, 0,
      100, 0,
      30, 30,
      30, 30,
      100, 0,
      100, 30,
 
      // 중간 가로 획
      30, 60,
      67, 60,
      30, 90,
      30, 90,
      67, 60,
      67, 90,
    ]),
    gl.STATIC_DRAW
  );
}

 

그런 다음 평행 이동하여 그리기 전에 u_translation을 업데이트하여 평행 이동 정보를 셰이더에 넘겨준다.

  //...
 
  var translationLocation = gl.getUniformLocation(program, "u_translation");
 
  //...
 
  // 위치를 넣을 버퍼 생성
  var positionBuffer = gl.createBuffer();
  // ARRAY_BUFFER에 바인딩 (ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // 버퍼에 지오메트리 데이터 넣기
  setGeometry(gl);
 
  //...
 
  // 장면 그리기
  function drawScene() {
 
    //...
 
    // 평행 이동 설정
    // u_translation을 업데이트하여 평행 이동 정보를 셰이더에 넘겨준다.
    gl.uniform2fv(translationLocation, translation);
 
    // 사각형 그리기
    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 18;
    gl.drawArrays(primitiveType, offset, count);
  }

 

1번 방법처럼 setGeometry가 더 이상 drawScene 안에 있지않고 한 번만 호출된다.

이제 그릴 때 자바스크립트에서 좌표 설정을 하지 않고 WebGL이 셰이더를 통해 평행 이동의 거의 모든 것을 수행하고 있다.

이렇게 하여 지오메트리에 수만 개의 점들이 있더라도 주요 코드는 그대로 유지할 수 있게 된다.

 

평행 이동, 회전, 스케일을 모두 알아보면 더 나아가 최종적으로 이 모든 것을 행렬로 수행하게 된다.

 

 

 

 

 

 

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

WebGL_Fundamentals