WebGL Fundamentals > WebGL 2D : Scale

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

WebGL 2D Scale

https://github.com/Myoungmin/WebGL_Fundamentals

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

 

 

WebGL 2D : Scale

행렬을 적용하기 전에 ‘스케일’의 기본 개념을 알아본다.

원하는 스케일로 위치를 곱하면 된다.

<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec2 a_position;
 
uniform vec2 u_resolution;
uniform vec2 u_translation;
uniform vec2 u_rotation;
uniform vec2 u_scale;
 
void main() {
  // 위치 스케일링
  vec2 scaledPosition = a_position * u_scale;
 
  // 위치 회전
  vec2 rotatedPosition = vec2(
    scaledPosition.x * u_rotation.y + scaledPosition.y * u_rotation.x,
    scaledPosition.y * u_rotation.y - scaledPosition.x * u_rotation.x);
 
  // 평행 이동 추가
  vec2 position = rotatedPosition + u_translation;

 

그릴 때 스케일을 설정하기 위해 필요한 자바스크립트를 추가

 

  //...
 
  var scaleLocation = gl.getUniformLocation(program, "u_scale");
 
  //...
 
  var scale = [1, 1];
 
  //...
 
  // 장면 그리기
  function drawScene() {
 
    //...
 
    // 평행 이동 설정
    gl.uniform2fv(translationLocation, translation);
 
    // 회전 설정
    gl.uniform2fv(rotationLocation, rotation);
 
    // 스케일 설정
    gl.uniform2fv(scaleLocation, scale);
 
    // 지오메트리 그리기
    var primitiveType = gl.TRIANGLES;
    var offset = 0;
    var count = 18;  // 'F'의 삼각형 6개, 삼각형마다 점 3개
    gl.drawArrays(primitiveType, offset, count);
  }

 

 

 

 

 

 

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

WebGL_Fundamentals