How to use gl-matrix - 10 common examples

let endRight = buffer.data.subarray(
          (pos + 1) * 9 + 3, (pos + 1) * 9 + 6);
        let endUp = buffer.data.subarray(
          (pos + 1) * 9 + 6, (pos + 1) * 9 + 9);
        // Then lerp... kinda.
        let right = vec3.create();
        vec3.lerp(right, startRight, endRight, lerpTimer % 1);
        let up = vec3.create();
        vec3.lerp(up, startUp, endUp, lerpTimer % 1);
        let eye = vec3.create();
        vec3.lerp(eye, start, end, lerpTimer % 1);
        vec3.add(eye, eye, up);
        let front = vec3.create();
        vec3.cross(front, up, right);
        vec3.normalize(front, front);
        let center = vec3.create();
        vec3.add(center, front, eye);
        // console.log(start, end);
        // Last, create view matrix from these three vectors.
        mat4.lookAt(context.cameraObj.viewMatrix, eye, center, up);
        // context.cameraObj.transform.position.set(eye);
        // context.cameraObj.transform.invalidate();
        let slope = vec3.dot(front, [0, -1, 0]);
        lerpAccel *= 0.98;
        lerpAccel += slope / 30;
        lerpAccel = Math.max(0.5, Math.min(1.5, lerpAccel));
        lerpTimer += delta * 5 * (lerpAccel + Math.max(0, slope + 1));
        if ((lerpTimer + 1) >= buffer.data.length / 9) {
          lerpTimer = -1;
        }
      }
      renderer.render({

function quatLookAt(out, front, up) {
  let zFront = vec3.create();
  vec3.normalize(zFront, front);
  // vec3.scale(zFront, zFront, -1);
  let right = vec3.create();
  vec3.cross(right, up, zFront);
  vec3.normalize(right, right);
  if (vec3.length(right) < 0.0001) {
    right = [1, 0, 0];
  }
  let yUp = vec3.create();
  vec3.cross(yUp, zFront, right);
  let mat = [
    right[0], right[1], right[2],
    yUp[0], yUp[1], yUp[2],
    zFront[0], zFront[1], zFront[2]
    /* right[0], yUp[0], zFront[0],
    right[1], yUp[1], zFront[1],

0, 1, 3, 3, 2, 0,
        0, 1, 3, 3, 2, 0,
        0, 1, 3, 3, 2, 0,
        0, 1, 3, 3, 2, 0
      ]
    }
  });
  let box = renderer.geometries.create(calcNormals(originalData));
  let shader = renderer.shaders.create(
    require('../shader/phong.vert'),
    require('../shader/phong.frag')
  );
  let texture = renderer.textures.create(require('../texture/2.png'));

  let model1Mat = mat4.create();
  let model1Normal = mat3.create();

  return (delta, context) => {
    // mat4.rotateY(model1Mat, model1Mat, Math.PI * delta / 1000 / 2);
    // mat3.normalFromMat4(model1Normal, model1Mat);

    renderer.render({
      options: {
        clearColor: new Float32Array([0, 0, 0, 1]),
        clearDepth: 1,
        cull: gl.BACK,
        depth: gl.LEQUAL
      },
      uniforms: Object.assign({}, context.camera, {
        uPointLight: [{
          position: [0, 0, 8],
          color: '#ffffff',

abort: this.quitDrag,
						originalEvent: e
					}

					BindManager.on('press', this.onBindToggle)
					BindManager.on('release', this.onBindToggle)
					if (this.dragging !== undefined) {
						this.$emit('update:dragging', this.dragStarted)
					}
					this.$emit('dragstart', event)
					vec2.copy(this.prev, this.origin)
				}
			} else {
				// Detect drag and emit
				this.toSpecifiedCoord(this.current, this.absCurrent)
				vec2.sub(this.delta, this.current, this.prev)
				vec2.sub(this.offset, this.current, this.origin)

				const event: MouseDragEvent = {
					current: this.current,
					delta: this.delta,
					offset: this.offset,
					abort: this.quitDrag,
					originalEvent: e
				}

				this.$emit('drag', event)
				vec2.copy(this.prev, this.current)
			}
		}

		vec2.copy(this.absPrev, this.absCurrent)

init(featurePoint2D, imageWidth, imageHeight, planeHeight, cameraZ = 2435.782592) {
    // convert to image coord to world coord
    let featurePoint3D, size
    {
      let min = [Number.MAX_VALUE, Number.MAX_VALUE]
      let max = [Number.MIN_VALUE, Number.MIN_VALUE]
      let mtx = mat3.create()
      let scale = planeHeight / imageHeight
      mat3.scale(mtx, mtx, [scale, -scale])
      mat3.translate(mtx, mtx, [-imageWidth / 2, -imageHeight / 2])
      featurePoint3D = featurePoint2D.map((p) => {
        let q = vec2.transformMat3([], p, mtx)
        vec2.min(min, min, q)
        vec2.max(max, max, q)
        return q
      })
      size = vec2.sub([], max, min)
    }

    // calc z position
    let scale = vec2.len(size) / this.standardFace.size
    {
      let min = [Number.MAX_VALUE, Number.MAX_VALUE]

geoWire.faces( lines, { size: 2 } )

  geoPoints = glGeometry( gl );
  geoPoints.attr( 'aPosition', wirePositions );
} );


// Set the canvas size to fill the window and its pixel density
var mobile = isMobile( navigator.userAgent );
var dpr = mobile ? 1 : ( window.devicePixelRatio || 1 );
window.addEventListener( 'resize', fit( canvas, null, dpr ), false );

// Setup Matricies
var projection = mat4.create();
var normalm4 = mat4.create();
var normalm3 = mat3.create();
var view = mat4.create();

// Setup Shaders
var vertexShader = glslify( './shaders/shader.vert' );
var fragmentShader = glslify( './shaders/shader.frag' );
var shader = glShader( gl, vertexShader, fragmentShader );

var vertexWireframeShader = glslify( './shaders/shaderDebug.vert' );
var fragmentWireframeShader = glslify( './shaders/shaderDebug.frag' );
var shaderDebug = glShader( gl, vertexWireframeShader, fragmentWireframeShader );

var color = [ 1.0, 1.0, 1.0, 1.0 ];
var colorPoints = [ 1.0, 1.0, 1.0, 0.5 ];
var colorWire = [ 1.0, 1.0, 1.0, 0.5 ];

// Setup Sketch Variables

if (!this.cmdlData.has(model.assetID))
            this.cmdlData.set(model.assetID, new CMDLData(device, textureHolder, cache, model));
        return this.cmdlData.get(model.assetID)!;
    }
}

export class MREARenderer {
    private bufferCoalescer: GfxBufferCoalescerCombo;
    private materialGroupInstances: MaterialGroupInstance[] = [];
    private materialInstances: MaterialInstance[] = [];
    private surfaceData: SurfaceData[] = [];
    private surfaceInstances: SurfaceInstance[] = [];
    private cmdlData: CMDLData[] = [];
    private actors: Actor[] = [];
    public overrideSky: CMDLRenderer | null = null;
    public modelMatrix = mat4.create();
    public needSky: boolean = false;
    public visible: boolean = true;

    constructor(device: GfxDevice, modelCache: ModelCache, cache: GfxRenderCache, public textureHolder: RetroTextureHolder, public name: string, public mrea: MREA) {
        this.translateModel(device, cache);
        this.translateActors(device, cache, modelCache);
    }

    private translateModel(device: GfxDevice, cache: GfxRenderCache): void {
        const materialSet = this.mrea.materialSet;

        this.textureHolder.addMaterialSetTextures(device, materialSet);

        // First, create our group commands. These will store UBO buffer data which is shared between
        // all groups using that material.
        for (let i = 0; i < materialSet.materials.length; i++) {

dst[13] = m[13];

    dst[2] = 0;
    dst[6] = m[6];
    dst[10] = v[2] * mz;
    dst[14] = m[14];

    // Fill with junk to try and signal when something has gone horribly wrong. This should go unused,
    // since this is supposed to generate a mat4x3 matrix.
    m[3] = 9999.0;
    m[7] = 9999.0;
    m[11] = 9999.0;
    m[15] = 9999.0;
}

const scratchModelViewMatrix = mat4.create();
const packetParams = new PacketParams();
export class ShapeInstance {
    public visible: boolean = true;

    constructor(public shapeData: ShapeData, private materialInstance: MaterialInstance) {
    }

    public prepareToRender(device: GfxDevice, renderInstManager: GfxRenderInstManager, depth: number, camera: Camera, viewport: NormalizedViewportCoords, modelData: J3DModelData, materialInstanceState: MaterialInstanceState, shapeInstanceState: ShapeInstanceState): void {
        if (!this.visible)
            return;

        const materialInstance = this.materialInstance;
        if (!materialInstance.visible)
            return;

        const shape = this.shapeData.shape;

export function extend(publicAPI, model, initialValues = {}) {
  Object.assign(model, DEFAULT_VALUES, initialValues);

  // Inheritance
  vtkViewNode.extend(publicAPI, model, initialValues);

  model.keyMatrixTime = {};
  macro.obj(model.keyMatrixTime);

  model.keyMatrices = {
    normalMatrix: mat3.create(),
    vcdc: mat4.create(),
    wcvc: mat4.create(),
    wcdc: mat4.create(),
  };

  // Build VTK API
  macro.setGet(publicAPI, model, ['context', 'keyMatrixTime']);

  // Object methods
  vtkOpenGLCamera(publicAPI, model);
}

protected generateSphere1Node(parent: SceneNode): SceneNode {
        const gl = this._context.gl;

        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(0.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create and load texture. */
        const texture = new Texture2D(this._context, 'Texture');
        texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        texture.fetch('./data/concrete_floor_02_diff_1k.webp', false).then(() => {
            this.invalidate(true);
        });

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial1');
        material.texture = texture;
        material.textured = true;