TypeScript gl-matrix.mat4類代碼示例

export function setup() {
  // ProjectionView
  const projectionViewData = new Float32Array(mat4.create());

  uniformBuffers.projectionView = new UniformBuffer(projectionViewData);
}

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();
let outQuat = quat.create();

let outMat2Null: mat2 | null;
let outMat2dNull: mat2d | null;

export function start_gl(container: HTMLElement, perfCbk?: PerfHandler,
                         perfMode?: boolean): Update
{
  // Create a <canvas> element to do our drawing in. Then set it up to fill
  // the container and resize when the window resizes.
  let canvas = document.createElement('canvas');
  container.appendChild(canvas);
  function fit() {
    let width = container.clientWidth;
    let height = container.clientHeight;
    canvas.setAttribute('width', width + 'px');
    canvas.setAttribute('height', height + 'px');
  }
  window.addEventListener('resize', fit);
  fit();

  // Attach a `canvas-orbit-camera` thing, which handles user input for
  // manipulating the view.
  let camera = canvasOrbitCamera(canvas, {});

  // Initialize the OpenGL context with our rendering function.
  let gl = (canvas.getContext("webgl") ||
    canvas.getContext("experimental-webgl")) as WebGLRenderingContext;

  // Create the transform matrices. Alternatively, these can be created using
  // `new Float32Array(16)`.
  let projection = mat4.create();
  let view = mat4.create();

  // Performance measurement.
  let frame_count = 0;
  let last_sample = performance.now();
  let last_frame = performance.now();
  let sample_rate = 1000;  // Measure every second.
  let latencies: number[] = [];
  let draw_latencies: number[] = [0];
  function drawtime(ms: number) {
    if (perfCbk) {
      draw_latencies[draw_latencies.length - 1] += ms;
    }
  }

  // Initially, the SHFL function does nothing. The client needs to call us
  // back to fill in the function. Then, we will update this variable.
  let shfl_render: { proc: any, env: any } | null = null;

  // This function requests to render the next frame. In performance
  // measurement mode, we ask to run as quickly as possible. In ordinary mode,
  // we ask to run in the browser's render loop---i.e., only at a reasonable
  // frame rate like 60fps or whatever the browser likes.
  let nextFrame: () => void;
  if (perfMode) {
    nextFrame = () => setTimeout(render, 0);
  } else {
    nextFrame = () => window.requestAnimationFrame(render);
  }

  // A flag that, when set, saves the current image as a PNG.
  let download_image = false;

  // The main render loop.
  function render() {
    // Get the current size of the canvas.
    let width = gl.drawingBufferWidth;
    let height = gl.drawingBufferHeight;

    // Handle user input and update the resulting camera view matrix.
    camera.view(view);
    camera.tick();

    // Update the projection matrix for translating to 2D screen space.
    projection_matrix(projection, width, height);

    // Draw on the whole canvas.
    gl.viewport(0, 0, width, height);

    // Rendering flags.
    gl.depthFunc(gl.LESS);
    gl.enable(gl.DEPTH_TEST);  // Prevent triangle overlap.

    // Invoke the compiled SHFL code.
    let start = performance.now();
    if (shfl_render) {
      shfl_render.proc.apply(void 0, shfl_render.env);
    }
    let end = performance.now();

    // Framerate tracking.
    if (perfCbk) {
      ++frame_count;
      let now = performance.now();
      let elapsed = now - last_sample;  // Milliseconds.
      latencies.push(end - start);
      last_frame = now;
      if (elapsed > sample_rate) {
        perfCbk(frame_count, elapsed, latencies, draw_latencies);
        last_sample = performance.now();
        frame_count = 0;
        latencies = [];
        draw_latencies = [0];
//.........這裏部分代碼省略.........

 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import {mat4, vec3, vec4} from 'gl-matrix';

export {mat2, mat3, mat4, quat, vec2, vec3, vec4} from 'gl-matrix';

export type Vec2 = Float32Array;
export type Vec3 = Float32Array;
export type Vec4 = Float32Array;
export type Mat3 = Float32Array;
export type Mat4 = Float32Array;
export type Quat = Float32Array;

export const identityMat4 = mat4.create();

export const AXES_NAMES = ['x', 'y', 'z'];

export class BoundingBox {
  constructor(public lower: Vec3, public upper: Vec3) {}
};

export const kAxes =
    [vec4.fromValues(1, 0, 0, 0), vec4.fromValues(0, 1, 0, 0), vec4.fromValues(0, 0, 1, 0)];
export const kZeroVec = vec3.fromValues(0, 0, 0);
export const kInfinityVec = vec3.fromValues(Infinity, Infinity, Infinity);

export function prod3(x: ArrayLike<number>) {
  return x[0] * x[1] * x[2];
}

 public applyMatrix(matrix: mat4) {
   vec3.transformMat4(this.center.v, this.center.v, matrix);
   const scaling = mat4.getScaling(vec3.create(), matrix);
   this.radius *= Math.max(scaling[0], scaling[1], scaling[2]);
 }

		view: () =>
			mat4.multiply(
				state.ground.groundMirrorView,
				state.viewPort.camera.viewMat,
				state.ground.mirrorMatrix as any,
			),

 /**
  * Generate view matrix
  *
  * ビュー行列を生成します。
  */
 private _generateViewMatrix(): void {
   mat4.lookAt(this.viewMatrix.rawElements, this.Transformer.GlobalPosition.rawElements, Vector3.add(this.Transformer.forward, this.Transformer.GlobalPosition).rawElements, this.Transformer.up.rawElements);
 }