How to use the gl-matrix.mat4.multiply function in gl-matrix

To help you get started, we’ve selected a few gl-matrix examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github GrimoireGL / GrimoireJS / src / Core / Transform / Transformer.ts View on Github external
protected __updateTransformMatricies(): void {
    // initialize localTransformCache & localToGlobalMatrix.rawElements
    mat4.identity(this._localTransformMatrix.rawElements);
    mat4.identity(this._localToGlobalMatrix.rawElements);
    // generate local transofrm matrix
    mat4.fromRotationTranslationScaleOrigin(this._localTransformMatrix.rawElements, this._rotation.rawElements, this._position.rawElements, this._scale.rawElements, this._localOrigin.rawElements); // substitute Rotation*Translation*Scale matrix (around local origin) for localTransformMatrix.rawElements
    if (this.linkedObject != null && this.linkedObject.Parent != null) {
      // Use LocalToGlobal matrix of parents to multiply with localTransformCache
      mat4.copy(this._localToGlobalMatrix.rawElements, this.linkedObject.Parent.Transformer.LocalToGlobal.rawElements);
    } else {
      // If this transformer have no parent transformer,localToGlobalMatrix.rawElements,GlobalTransform will be same as localTransformCache
      mat4.identity(this._localToGlobalMatrix.rawElements);
    }
    // Multiply parent transform
    mat4.multiply(this._localToGlobalMatrix.rawElements, this._localToGlobalMatrix.rawElements, this._localTransformMatrix.rawElements);
    this.__updateDirections();
  }
github uber / deck.gl / src / viewport / old-viewport.js View on Github external
// Move camera to altitude
    mat4.translate(vm, vm, [0, 0, -this.altitude]);

    // After the rotateX, z values are in pixel units. Convert them to
    // altitude units. 1 altitude unit = the screen height.
    mat4.scale(vm, vm, [1, -1, 1 / this.height]);

    // Rotate by bearing, and then by pitch (which tilts the view)
    mat4.rotateX(vm, vm, this.pitchRadians);
    mat4.rotateZ(vm, vm, -this.bearingRadians);

    this.viewMatrix = this._createMat4();
    mat4.translate(this.viewMatrix, vm, [-this.centerX, -this.centerY, 0]);

    const vpm = this._createMat4();
    mat4.multiply(vpm, vpm, this.projectionMatrix);
    mat4.multiply(vpm, vpm, this.viewMatrix);

    this.viewProjectionMatrix = vpm;

    // PIXEL PROJECTION MATRIX
    const m = this._createMat4();

    // Scale with viewport window's width and height in pixels
    mat4.scale(m, m, [this.width, this.height, 1]);
    // Convert to (0, 1)
    mat4.translate(m, m, [0.5, 0.5, 0]);
    mat4.scale(m, m, [0.5, 0.5, 0]);
    // Project to clip space (-1, 1)
    mat4.multiply(m, m, this.viewProjectionMatrix);
    this.pixelProjectionMatrix = m;
github JordanMachado / webgl-tools / src / experiments / particles / Scene.js View on Github external
this.webgl = new G.Webgl();
        this.webgl.clearColor('#ffe1d9', 1);

        this.webgl.append();
        this.camera = new G.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);
        this.controls = new OrbitalCameraControl(this.camera, 20, window);
        this.controls.center = [4, 0, 0];
        this.fboHelper = new G.FBOHelper(this.webgl, 256);

        // this.cameraShadow = new G.PerspectiveCamera(45, 1, 0.1, 100);
        const s = 15;

        this.cameraShadow = new G.OrthographicCamera(-s, s, -s, s, 1, 100);
        this.cameraShadow.lookAt([0, 50, 0.1], [0, 0, 0], [0, 1, 0]);
        this.mvpDepth = mat4.create();
        mat4.multiply(this.mvpDepth, this.cameraShadow.projection, this.cameraShadow.view);
        const biaMatrix = mat4.fromValues(
            0.5, 0.0, 0.0, 0.0,
            0.0, 0.5, 0.0, 0.0,
            0.0, 0.0, 0.5, 0.0,
            0.5, 0.5, 0.5, 1.0
        );

        mat4.multiply(this.mvpDepth, biaMatrix, this.mvpDepth);

        this.fbo = new G.FrameBuffer(gl, 1024, 1024, { depth: true });
        this.fboHelper.attach(this.fbo.depth);
        this.fboHelper.attach(this.fbo.colors);

        this.scene = new G.Object3D();

        const system = this.system = new System(256, this);
github xiaoiver / custom-mapbox-layer / src / utils / symbol-projection.ts View on Github external
pitchWithMap: boolean,
  rotateWithMap: boolean,
  transform: any,
  pixelsToTileUnits: number) {
  // @ts-ignore
  const m = mat4.identity(new Float32Array(16));
  if (pitchWithMap) {
    mat4.identity(m);
    mat4.scale(m, m, [1 / pixelsToTileUnits, 1 / pixelsToTileUnits, 1]);
    if (!rotateWithMap) {
      mat4.rotateZ(m, m, transform.angle);
    }
  } else {
    mat4.scale(m, m, [transform.width / 2, -transform.height / 2, 1]);
    mat4.translate(m, m, [1, -1, 0]);
    mat4.multiply(m, m, posMatrix);
  }
  return m;
}
github Kitware / vtk-js / Sources / Rendering / OpenGL / Glyph3DMapper / index.js View on Github external
actor.getProperty().getEdgeVisibility() &&
      representation === Representation.SURFACE;

    // // [WMVD]C == {world, model, view, display} coordinates
    // // E.g., WCDC == world to display coordinate transformation
    const keyMats = model.openGLCamera.getKeyMatrices(ren);
    const actMats = model.openGLActor.getKeyMatrices();

    // precompute the actor+camera mats once
    mat3.multiply(
      model.normalMatrix,
      keyMats.normalMatrix,
      actMats.normalMatrix
    );
    mat4.multiply(model.mcdcMatrix, keyMats.wcdc, actMats.mcwc);
    mat4.multiply(model.mcvcMatrix, keyMats.wcvc, actMats.mcwc);

    const garray = model.renderable.getMatrixArray();
    const narray = model.renderable.getNormalArray();
    const carray = model.renderable.getColorArray();
    const numPts = garray.length / 16;

    let compositePass = false;
    if (model.openGLRenderer.getSelector()) {
      if (
        model.openGLRenderer.getSelector().getCurrentPass() ===
        PassTypes.COMPOSITE_INDEX_PASS
      ) {
        compositePass = true;
      }
    }
github andrevenancio / lowww / packages / core / src / core / shadow-map-renderer.js View on Github external
// update camera position
        vec3.copy(this.camera.position.data, vec);

        // update view matrix
        mat4.identity(this.matrices.view);
        mat4.lookAt(
            this.matrices.view,
            this.camera.position.data,
            this.camera.target,
            this.camera.up
        );

        // SHADOW
        mat4.identity(this.matrices.shadow);
        mat4.multiply(
            this.matrices.shadow,
            this.camera.matrices.projection,
            this.matrices.view
        );
        mat4.multiply(
            this.matrices.shadow,
            this.matrices.bias,
            this.matrices.shadow
        );
    }
github mapbox / mapbox-gl-js / src / geo / transform.js View on Github external
calculatePosMatrix(unwrappedTileID: UnwrappedTileID, aligned: boolean = false): Float32Array {
        const posMatrixKey = unwrappedTileID.key;
        const cache = aligned ? this._alignedPosMatrixCache : this._posMatrixCache;
        if (cache[posMatrixKey]) {
            return cache[posMatrixKey];
        }

        const canonical = unwrappedTileID.canonical;
        const scale = this.worldSize / this.zoomScale(canonical.z);
        const unwrappedX = canonical.x + Math.pow(2, canonical.z) * unwrappedTileID.wrap;

        const posMatrix = mat4.identity(new Float64Array(16));
        mat4.translate(posMatrix, posMatrix, [unwrappedX * scale, canonical.y * scale, 0]);
        mat4.scale(posMatrix, posMatrix, [scale / EXTENT, scale / EXTENT, 1]);
        mat4.multiply(posMatrix, aligned ? this.alignedProjMatrix : this.projMatrix, posMatrix);

        cache[posMatrixKey] = new Float32Array(posMatrix);
        return cache[posMatrixKey];
    }
github JordanMachado / webgl-tools / src / SceneDev.js View on Github external
window.scene = this;
    this.webgl = new G.Webgl();
    this.time = 0
    this.bgC = '#ffffff';
    this.webgl.append();
    this.webgl.clearColor(colors[0], 1)



    this.camera = new G.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 500);

    this.cameraShadow = new G.PerspectiveCamera(45, 1, 0.1, 100);
    this.cameraShadow.lookAt([0,20,1], [0,0,0], [0,1,0]);
    this.mvpDepth = mat4.create();
    mat4.multiply(this.mvpDepth, this.cameraShadow.projection, this.cameraShadow.view)
    const biaMatrix = mat4.fromValues(
        0.5, 0.0, 0.0, 0.0,
        0.0, 0.5, 0.0, 0.0,
        0.0, 0.0, 0.5, 0.0,
        0.5, 0.5, 0.5, 1.0
      );
    mat4.multiply(this.mvpDepth, biaMatrix, this.mvpDepth);


    this.controls = new OrbitalCameraControl(this.camera, 20, window);
    this.fbo = new G.FrameBuffer(gl, 1024, 1024 , { depth: true});



    this.scene = new G.Object3D();
github mapbox / mapbox-gl-js / src / symbol / projection.js View on Github external
function getLabelPlaneMatrix(posMatrix: mat4,
                             pitchWithMap: boolean,
                             rotateWithMap: boolean,
                             transform: Transform,
                             pixelsToTileUnits: number) {
    const m = mat4.create();
    if (pitchWithMap) {
        mat4.scale(m, m, [1 / pixelsToTileUnits, 1 / pixelsToTileUnits, 1]);
        if (!rotateWithMap) {
            mat4.rotateZ(m, m, transform.angle);
        }
    } else {
        mat4.multiply(m, transform.labelPlaneMatrix, posMatrix);
    }
    return m;
}
github amelierosser / medium / examples / src / js / textureproj / index.js View on Github external
projectionCamera.top = cameraTop;
  projectionCamera.updateProjectionMatrix();

  projectionCamera.position.set(
    guiController.x,
    guiController.y,
    guiController.z
  );
  projectionCamera.target.set(
    mesh.position.x,
    mesh.position.y,
    mesh.position.z
  );
  projectionCamera.updateMatrixWorld();

  mat4.multiply(
    textureProjectionMatrix,
    projectionCamera.projectionMatrix,
    projectionCamera.worldInverseMatrix
  );

  mesh.material.uniforms.uTextureProjectionMatrix.value.set(
    textureProjectionMatrix
  );
}
const range = 10;