TypeScript gl-matrix.mat2d類代碼示例

  /*
   * tilePos = mapToTile * squarePos
   * tilePos = (mapToTile * verticalFlip) * squarePos
   */
  setMapSize(size : number){
    /*
    mapToTile:
    [ 64   0  64 ]   [x]   [x]
    [  0  64  64 ] X [y] = [y]
    [  0   0   1 ]   [1]   [1]
    */
    mat2d.set(this.mapToTileMatrix, size/2, 0, 0, size/2, size/2, size/2);
    mat2d.mul(this.mapToTileMatrix, this.mapToTileMatrix, this.verticalFlipMatrix);

    mat2d.invert(this.mapFromTileMatrix, this.mapToTileMatrix);

    this.recalculate();
  }

  /**
   * squarePos = viewportToSquare * viewportPos
   * squarePos = (clipToSquare * viewportToClip * verticalFlip) * viewportPos
   */
  setViewport(width : number, height : number){
    /*
      viewportToClip:
      [ 2/w    0  -1 ]   [x]   [x]
      [  0    2/h -1 ] X [y] = [y]
      [  0     0   1 ]   [1]   [1]
    */

    mat2d.set(this.viewportToClipMatrix, 2/width, 0, 0, 2/height, -1, -1);

    /*
      correctAspect:
      [ 1   0   0 ]   [x]   [x]
      [ 0  h/w  0 ] X [y] = [y]
      [ 0   0   1 ]   [1]   [1]
    */

    mat2d.set(this.clipToSquareMatrix, 1, 0, 0, height/width, 0, 0);
    mat2d.invert(this.clipFromSquareMatrix, this.clipToSquareMatrix);

    mat2d.mul(this.viewportToSquareMatrix, this.verticalFlipMatrix, this.viewportToClipMatrix);
    mat2d.mul(this.viewportToSquareMatrix, this.clipToSquareMatrix, this.viewportToSquareMatrix);
    mat2d.invert(this.viewportFromSquareMatrix, this.viewportToSquareMatrix);

    this.recalculate();
  }

var outVal: number;
var outBool: boolean;
var outStr: string;

let vecArray = new Float32Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);

let vec2A = vec2.fromValues(1, 2);
let vec2B = vec2.fromValues(3, 4);
let vec3A = vec3.fromValues(1, 2, 3);
let vec3B = vec3.fromValues(3, 4, 5);
let vec4A = vec4.fromValues(1, 2, 3, 4);
let vec4B = vec4.fromValues(3, 4, 5, 6);
let mat2A = mat2.fromValues(1, 2, 3, 4);
let mat2B = mat2.fromValues(1, 2, 3, 4);
let mat2dA = mat2d.fromValues(1, 2, 3, 4, 5, 6);
let mat2dB = mat2d.fromValues(1, 2, 3, 4, 5, 6);
let mat3A = mat3.fromValues(1, 2, 3, 4, 5, 6, 7, 8, 9);
let mat3B = mat3.fromValues(1, 2, 3, 4, 5, 6, 7, 8, 9);
let mat4A = mat4.fromValues(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
let mat4B = mat4.fromValues(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16);
let quatA = quat.fromValues(1, 2, 3, 4);
let quatB = quat.fromValues(5, 6, 7, 8);

let outVec2 = vec2.create();
let outVec3 = vec3.create();
let outVec4 = vec4.create();
let outMat2 = mat2.create();
let outMat2d = mat2d.create();
let outMat3 = mat3.create();
let outMat4 = mat4.create();

  constructor(){
    this.verticalFlipMatrix = mat2d.create();
    this.viewportToSquareMatrix = mat2d.create();
    this.viewportFromSquareMatrix = mat2d.create();
    this.mapToTileMatrix = mat2d.create();
    this.mapFromTileMatrix = mat2d.create();
    this.squareToMapMatrix = mat2d.create();
    this.squareFromMapMatrix = mat2d.create();
    this.clipToSquareMatrix = mat2d.create();
    this.clipFromSquareMatrix = mat2d.create();
    this.viewportToClipMatrix = mat2d.create();

    this.mapToViewportMatrix = mat3.create();

    mat2d.fromScaling(this.verticalFlipMatrix, [1, -1]);
    mat2d.fromScaling(this.squareToMapMatrix, [1, 1]);
    mat2d.invert(this.squareFromMapMatrix, this.squareToMapMatrix);

    this.setMapSize(128);
  }

  set transformation({x, y, s} : {x : number, y: number, s : number}){
    mat2d.set(this.squareToMapMatrix, s, 0, 0, s, x, y);
    mat2d.invert(this.squareFromMapMatrix, this.squareToMapMatrix);

    this.recalculate();
  }

  transformMapToSquare(...pos : [MapPos, SquarePos][]){
    if(pos.length === 0) return;
    if(pos.length === 1){
      /*

      squareToMap * squarePos = mapPos
      [ s 0 x ]   [s_x]   [m_x]
      [ 0 s y ] x [s_y] = [m_y]
      [ 0 0 1 ]   [ 1 ]   [ 1 ]

      m_x = s*s_x + x
      m_y = s*s_y + y

      x = m_x - s*s_x
      y = m_y - s*s_y

      1 > x > -1
      1 > y > -1

      */
      const s = this.squareToMapMatrix[0] //reuse existing scale
      const x = pos[0][0][0] - s*pos[0][1][0];
      const y = pos[0][0][1] - s*pos[0][1][1];
      mat2d.set(this.squareToMapMatrix, s, 0, 0, s, minmax(-1, x, 1), minmax(-1, y, 1));
      mat2d.invert(this.squareFromMapMatrix, this.squareToMapMatrix);

      this.recalculate();
      return;
    }

    /*
    Calculate squareToMap by solving the equation
    mapPos = squareToMap * squarePos
    [ s 0 x ]   [s_x_a  s_x_b  s_x_c]   [m_x_a  m_x_b  m_x_c]
    [ 0 s y ] x [s_y_a  s_y_b  s_y_c] = [m_y_a  m_y_b  m_y_c]
    [ 0 0 1 ]   [    1      1      1]   [    1      1      1]

    s*s_x_a + x = m_x_a
    s*s_x_b + x = m_x_b
    s*s_x_c + x = m_x_c
    s*s_y_a + y = m_y_a
    s*s_y_b + y = m_y_b
    s*s_y_c + y = m_y_c

    [ s_x_a 1 0 ] [ s ]   [ m_x_a ]
    [ s_x_b 1 0 ] [ x ] = [ m_x_b ]
    [ s_x_c 1 0 ] [ y ]   [ m_x_c ]
    [ s_y_a 0 1 ]         [ m_y_a ]
    [ s_y_b 0 1 ]         [ m_y_b ]
    [ s_y_c 0 1 ]         [ m_y_c ]

    (At*A)i*At*b
    Ai*Ati*At*b
    Ai*b

    [L*3][3] = [L]
    [3*L][L*3][3] = [3*L][L]
    [3*3][3] = [3]

    */

    const len = pos.length;
    let m00=0, m01=0, m02=0, m11=0,m12=0,m22=0;
    let v0=0, v1=0, v2=0;
    for(let i=0; i<len; i++){
      m00 += pos[i][1][0]*pos[i][1][0] + pos[i][1][1]*pos[i][1][1];
      m01 += pos[i][1][0];
      m02 += pos[i][1][1];
      v0 += pos[i][0][0]*pos[i][1][0] + pos[i][0][1]*pos[i][1][1];
      v1 += pos[i][0][0];
      v2 += pos[i][0][1];
    }
    const mat = mat3.fromValues(
      m00, m01, m02,
      m01, len,   0,
      m02,   0, len);
    const vec = vec3.fromValues(v0, v1, v2);
    mat3.invert(mat, mat);
    vec3.transformMat3(vec, vec, mat);
    const s = minmax(0.001, vec[0], 2);
    mat2d.set(this.squareToMapMatrix, s, 0, 0, s, minmax(-1, vec[1], 1), minmax(-1, vec[2], 1));
    mat2d.invert(this.squareFromMapMatrix, this.squareToMapMatrix);

    this.recalculate();
  }