How to use the math.gl.Matrix4 function in math

function getProjectionMatrix({width, height, near, far}) {
  // Make sure Matrix4.ortho doesn't crash on 0 width/height
  width = width || 1;
  height = height || 1;

  return new Matrix4().ortho({
    left: -width / 2,
    right: width / 2,
    bottom: height / 2,
    top: -height / 2,
    near,
    far
  });
}

constructor(props = {}) {
    const {id} = props;

    this.id = id || uid(this.constructor.name);

    this.display = true; // whether to display the object at all
    this.position = new Vector3();
    this.rotation = new Vector3();
    this.scale = new Vector3(1, 1, 1);
    this.matrix = new Matrix4();
    this.userData = {};

    this.props = {};
    this._setScenegraphNodeProps(props);
  }

test('Matrix4.toFloat32Array', t => {
  t.equals(typeof Matrix4.prototype.toFloat32Array, 'function');
  const m = new Matrix4();
  m.identity();
  t.equals(m.toFloat32Array().BYTES_PER_ELEMENT, 4);
  t.end();
});

test('Matrix4#identity (identity matrix)', t => {
  t.equals(typeof Matrix4.prototype.identity, 'function');
  const m = new Matrix4();
  m.identity();

  const RESULT = IDENTITY_MATRIX;

  tapeEquals(t, m, RESULT);
  t.end();
});

onRender(animationProps) {
    const {gl, aspect, cube, tick} = animationProps;

    const view = new Matrix4().lookAt({eye: [0, 0, -1]}).translate([0, 0, 4]);
    const projection = new Matrix4().perspective({fov: radians(75), aspect});

    gl.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);

    cube.draw({
      uniforms: {
        uView: view,
        uProjection: projection,
        uMix: 0.5 + Math.sin(tick * 0.02) / 2.0
      }
    });
  }
}

onRender(animationProps) {
    const {gl, aspect, cube, tick} = animationProps;

    const view = new Matrix4().lookAt({eye: [0, 0, -1]}).translate([0, 0, 4]);
    const projection = new Matrix4().perspective({fov: radians(75), aspect});

    gl.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);

    cube.draw({
      uniforms: {
        uView: view,
        uProjection: projection,
        uMix: 0.5 + Math.sin(tick * 0.02) / 2.0
      }
    });
  }
}

_createLightMatrix() {
    const lightMatrices = [];
    for (const light of this.directionalLights) {
      const viewMatrix = new Matrix4().lookAt({
        eye: new Vector3(light.direction).negate()
      });

      lightMatrices.push(viewMatrix);
    }
    return lightMatrices;
  }

function animate(appState) {
  const timeNow = new Date().getTime();
  if (appState.lastTime != 0) {
    const elapsed = timeNow - appState.lastTime;
    const newMatrix = new Matrix4()
    .rotateY(radians(elapsed / 20));
    appState.moonRotationMatrix.multiplyLeft(newMatrix);
    appState.cubeRotationMatrix.multiplyLeft(newMatrix);
  }
  appState.lastTime = timeNow;
}

traverse(visitor, {worldMatrix = new Matrix4()} = {}) {
    const modelMatrix = new Matrix4(worldMatrix).multiplyRight(this.matrix);

    for (const child of this.children) {
      if (child instanceof GroupNode) {
        child.traverse(visitor, {worldMatrix: modelMatrix});
      } else {
        visitor(child, {worldMatrix: modelMatrix});
      }
    }
  }
}

transformMatrix(matrix) {
    if (matrix instanceof Array) {
      matrix = new Matrix4(matrix);
    }

    this.tmp_matrix_transform = matrix;
    return this;
  }