matrix-engine-wgpu 1.0.2 → 1.0.5

package/src/engine/engine.js

@@ -1,8 +1,470 @@
+// Note: The code in this file does not use the 'dst' output parameter of functions in the
+// 'wgpu-matrix' library, so produces many temporary vectors and matrices.
+// This is intentional, as this sample prefers readability over performance.
+import { Mat4, Vec3, Vec4, mat4, vec3 } from 'wgpu-matrix';
+// import Input from './input';
 
+// // Common interface for camera implementations
+// export default interface Camera {
+//   // update updates the camera using the user-input and returns the view matrix.
+//   update(delta_time: number, input: Input): Mat4;
 
-export class Engine {
+//   // The camera matrix.
+//   // This is the inverse of the view matrix.
+//   matrix: Mat4;
+//   // Alias to column vector 0 of the camera matrix.
+//   right: Vec4;
+//   // Alias to column vector 1 of the camera matrix.
+//   up: Vec4;
+//   // Alias to column vector 2 of the camera matrix.
+//   back: Vec4;
+//   // Alias to column vector 3 of the camera matrix.
+//   position: Vec4;
+// }
 
-  constructor() {
-    
+// The common functionality between camera implementations
+class CameraBase {
+  // The camera matrix
+  matrix_ = new Float32Array([
+    1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
+  ]);
+
+  // The calculated view matrix readonly
+  view_ = mat4.create();
+
+  // Aliases to column vectors of the matrix
+   right_ = new Float32Array(this.matrix_.buffer, 4 * 0, 4);
+   up_ = new Float32Array(this.matrix_.buffer, 4 * 4, 4);
+   back_ = new Float32Array(this.matrix_.buffer, 4 * 8, 4);
+   position_ = new Float32Array(this.matrix_.buffer, 4 * 12, 4);
+
+  // Returns the camera matrix
+  get matrix() {
+    return this.matrix_;
+  }
+  // Assigns `mat` to the camera matrix
+  set matrix(mat) {
+    mat4.copy(mat, this.matrix_);
+  }
+
+  // Returns the camera view matrix
+  get view() {
+    return this.view_;
+  }
+  // Assigns `mat` to the camera view
+  set view(mat) {
+    mat4.copy(mat, this.view_);
+  }
+
+  // Returns column vector 0 of the camera matrix
+  get right() {
+    return this.right_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 0 of the camera matrix
+  set right(vec) {
+    vec3.copy(vec, this.right_);
+  }
+
+  // Returns column vector 1 of the camera matrix
+  get up() {
+    return this.up_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 1 of the camera matrix \ Vec3
+  set up(vec) {
+    vec3.copy(vec, this.up_);
+  }
+
+  // Returns column vector 2 of the camera matrix
+  get back() {
+    return this.back_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 2 of the camera matrix
+  set back(vec) {
+    vec3.copy(vec, this.back_);
+  }
+
+  // Returns column vector 3 of the camera matrix
+  get position() {
+    return this.position_;
+  }
+  // Assigns `vec` to the first 3 elements of column vector 3 of the camera matrix
+  set position(vec) {
+    vec3.copy(vec, this.position_);
+  }
+}
+
+// WASDCamera is a camera implementation that behaves similar to first-person-shooter PC games.
+export class WASDCamera extends CameraBase {
+  // The camera absolute pitch angle
+   pitch = 0;
+  // The camera absolute yaw angle
+   yaw = 0;
+
+  // The movement veloicty readonly
+  velocity_ = vec3.create();
+
+  // Speed multiplier for camera movement
+  movementSpeed = 10;
+
+  // Speed multiplier for camera rotation
+  rotationSpeed = 1;
+
+  // Movement velocity drag coeffient [0 .. 1]
+  // 0: Continues forever
+  // 1: Instantly stops moving
+  frictionCoefficient = 0.99;
+
+  // Returns velocity vector
+  get velocity() {
+    return this.velocity_;
+  }
+  // Assigns `vec` to the velocity vector
+  set velocity(vec) {
+    vec3.copy(vec, this.velocity_);
+  }
+
+  // Construtor
+  constructor(options) {
+    super();
+    if (options && (options.position || options.target)) {
+      const position = options.position ?? vec3.create(0, 0, 0);
+      const target = options.target ?? vec3.create(0, 0, 0);
+      
+      const forward = vec3.normalize(vec3.sub(target, position));
+      this.recalculateAngles(forward);
+      this.position = position;
+      console.log('camera postion:', position);
+    }
+  }
+
+  // Returns the camera matrix
+  get matrix() {
+    return super.matrix;
+  }
+
+  // Assigns `mat` to the camera matrix, and recalcuates the camera angles
+  set matrix(mat) {
+    super.matrix = mat;
+    this.recalculateAngles(this.back);
+  }
+
+  update(deltaTime, input) {
+    const sign = (positive, negative) =>
+      (positive ? 1 : 0) - (negative ? 1 : 0);
+
+    // Apply the delta rotation to the pitch and yaw angles
+    this.yaw -= input.analog.x * deltaTime * this.rotationSpeed;
+    this.pitch -= input.analog.y * deltaTime * this.rotationSpeed;
+
+    // Wrap yaw between [0° .. 360°], just to prevent large accumulation.
+    this.yaw = mod(this.yaw, Math.PI * 2);
+    // Clamp pitch between [-90° .. +90°] to prevent somersaults.
+    this.pitch = clamp(this.pitch, -Math.PI / 2, Math.PI / 2);
+
+    // Save the current position, as we're about to rebuild the camera matrix.
+    const position = vec3.copy(this.position);
+
+    // Reconstruct the camera's rotation, and store into the camera matrix.
+    super.matrix = mat4.rotateX(mat4.rotationY(this.yaw), this.pitch);
+
+    // Calculate the new target velocity
+    const digital = input.digital;
+    const deltaRight = sign(digital.right, digital.left);
+    const deltaUp = sign(digital.up, digital.down);
+    const targetVelocity = vec3.create();
+    const deltaBack = sign(digital.backward, digital.forward);
+    vec3.addScaled(targetVelocity, this.right, deltaRight, targetVelocity);
+    vec3.addScaled(targetVelocity, this.up, deltaUp, targetVelocity);
+    vec3.addScaled(targetVelocity, this.back, deltaBack, targetVelocity);
+    vec3.normalize(targetVelocity, targetVelocity);
+    vec3.mulScalar(targetVelocity, this.movementSpeed, targetVelocity);
+
+    // Mix new target velocity
+    this.velocity = lerp(
+      targetVelocity,
+      this.velocity,
+      Math.pow(1 - this.frictionCoefficient, deltaTime)
+    );
+
+    // Integrate velocity to calculate new position
+    this.position = vec3.addScaled(position, this.velocity, deltaTime);
+
+    // Invert the camera matrix to build the view matrix
+    this.view = mat4.invert(this.matrix);
+    return this.view;
+  }
+
+  // Recalculates the yaw and pitch values from a directional vector
+  recalculateAngles(dir) {
+    this.yaw = Math.atan2(dir[0], dir[2]);
+    this.pitch = -Math.asin(dir[1]);
+  }
+}
+
+// ArcballCamera implements a basic orbiting camera around the world origin
+export class ArcballCamera extends CameraBase {
+  // The camera distance from the target
+   distance = 0;
+
+  // The current angular velocity
+   angularVelocity = 0;
+
+  // The current rotation axis
+   axis_ = vec3.create();
+
+  // Returns the rotation axis
+  get axis() {
+    return this.axis_;
+  }
+  // Assigns `vec` to the rotation axis
+  set axis(vec) {
+    vec3.copy(vec, this.axis_);
+  }
+
+  // Speed multiplier for camera rotation
+  rotationSpeed = 1;
+
+  // Speed multiplier for camera zoom
+  zoomSpeed = 0.1;
+
+  // Rotation velocity drag coeffient [0 .. 1]
+  // 0: Spins forever
+  // 1: Instantly stops spinning
+  frictionCoefficient = 0.999;
+
+  // Construtor
+  constructor(options) {
+    super();
+    if (options && options.position) {
+      this.position = options.position;
+      this.distance = vec3.len(this.position);
+      this.back = vec3.normalize(this.position);
+      this.recalcuateRight();
+      this.recalcuateUp();
+    }
+  }
+
+  // Returns the camera matrix
+  get matrix() {
+    return super.matrix;
+  }
+
+  // Assigns `mat` to the camera matrix, and recalcuates the distance
+  set matrix(mat) {
+    super.matrix = mat;
+    this.distance = vec3.len(this.position);
+  }
+
+  update(deltaTime, input) {
+    const epsilon = 0.0000001;
+
+    if (input.analog.touching) {
+      // Currently being dragged.
+      this.angularVelocity = 0;
+    } else {
+      // Dampen any existing angular velocity
+      this.angularVelocity *= Math.pow(1 - this.frictionCoefficient, deltaTime);
+    }
+
+    // Calculate the movement vector
+    const movement = vec3.create();
+    vec3.addScaled(movement, this.right, input.analog.x, movement);
+    vec3.addScaled(movement, this.up, -input.analog.y, movement);
+
+    // Cross the movement vector with the view direction to calculate the rotation axis x magnitude
+    const crossProduct = vec3.cross(movement, this.back);
+
+    // Calculate the magnitude of the drag
+    const magnitude = vec3.len(crossProduct);
+
+    if (magnitude > epsilon) {
+      // Normalize the crossProduct to get the rotation axis
+      this.axis = vec3.scale(crossProduct, 1 / magnitude);
+
+      // Remember the current angular velocity. This is used when the touch is released for a fling.
+      this.angularVelocity = magnitude * this.rotationSpeed;
+    }
+
+    // The rotation around this.axis to apply to the camera matrix this update
+    const rotationAngle = this.angularVelocity * deltaTime;
+    if (rotationAngle > epsilon) {
+      // Rotate the matrix around axis
+      // Note: The rotation is not done as a matrix-matrix multiply as the repeated multiplications
+      // will quickly introduce substantial error into the matrix.
+      this.back = vec3.normalize(rotate(this.back, this.axis, rotationAngle));
+      this.recalcuateRight();
+      this.recalcuateUp();
+    }
+
+    // recalculate `this.position` from `this.back` considering zoom
+    if (input.analog.zoom !== 0) {
+      this.distance *= 1 + input.analog.zoom * this.zoomSpeed;
+    }
+    this.position = vec3.scale(this.back, this.distance);
+
+    // Invert the camera matrix to build the view matrix
+    this.view = mat4.invert(this.matrix);
+    return this.view;
   }
-}
+
+  // Assigns `this.right` with the cross product of `this.up` and `this.back`
+  recalcuateRight() {
+    this.right = vec3.normalize(vec3.cross(this.up, this.back));
+  }
+
+  // Assigns `this.up` with the cross product of `this.back` and `this.right`
+  recalcuateUp() {
+    this.up = vec3.normalize(vec3.cross(this.back, this.right));
+  }
+}
+
+// Returns `x` clamped between [`min` .. `max`]
+function clamp(x, min, max) {
+  return Math.min(Math.max(x, min), max);
+}
+
+// Returns `x` float-modulo `div`
+function mod(x, div) {
+  return x - Math.floor(Math.abs(x) / div) * div * Math.sign(x);
+}
+
+// Returns `vec` rotated `angle` radians around `axis`
+function rotate(vec, axis, angle) {
+  return vec3.transformMat4Upper3x3(vec, mat4.rotation(axis, angle));
+}
+
+// Returns the linear interpolation between 'a' and 'b' using 's'
+function lerp(a, b, s) {
+  return vec3.addScaled(a, vec3.sub(b, a), s);
+}
+
+// IMPUT 
+
+// // Input holds as snapshot of input state
+// export default interface Input {
+//   // Digital input (e.g keyboard state)
+//   readonly digital: {
+//     readonly forward: boolean;
+//     readonly backward: boolean;
+//     readonly left: boolean;
+//     readonly right: boolean;
+//     readonly up: boolean;
+//     readonly down: boolean;
+//   };
+//   // Analog input (e.g mouse, touchscreen)
+//   readonly analog: {
+//     readonly x: number;
+//     readonly y: number;
+//     readonly zoom: number;
+//     readonly touching: boolean;
+//   };
+// }
+
+// InputHandler is a function that when called, returns the current Input state.
+// export type InputHandler = () => Input;
+
+// createInputHandler returns an InputHandler by attaching event handlers to the window and canvas.
+export function createInputHandler(window, canvas) {
+  let digital = {
+    forward: false,
+    backward: false,
+    left: false,
+    right: false,
+    up: false,
+    down: false,
+  };
+  let analog = {
+    x: 0,
+    y: 0,
+    zoom: 0,
+  };
+  let mouseDown = false;
+
+  const setDigital = (e, value) => {
+    switch (e.code) {
+      case 'KeyW':
+        digital.forward = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'KeyS':
+        digital.backward = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'KeyA':
+        digital.left = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'KeyD':
+        digital.right = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'Space':
+        digital.up = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+      case 'ShiftLeft':
+      case 'ControlLeft':
+      case 'KeyC':
+        digital.down = value;
+        e.preventDefault();
+        e.stopPropagation();
+        break;
+    }
+  };
+
+  window.addEventListener('keydown', (e) => setDigital(e, true));
+  window.addEventListener('keyup', (e) => setDigital(e, false));
+
+  canvas.style.touchAction = 'pinch-zoom';
+  canvas.addEventListener('pointerdown', () => {
+    mouseDown = true;
+  });
+  canvas.addEventListener('pointerup', () => {
+    mouseDown = false;
+  });
+  canvas.addEventListener('pointermove', (e) => {
+    mouseDown = e.pointerType == 'mouse' ? (e.buttons & 1) !== 0 : true;
+    if (mouseDown) {
+      // console.log('TEST ', analog)
+      analog.x += e.movementX / 10;
+      analog.y += e.movementY / 10;
+    }
+  });
+  canvas.addEventListener(
+    'wheel',
+    (e) => {
+      mouseDown = (e.buttons & 1) !== 0;
+      if (mouseDown) {
+        // The scroll value varies substantially between user agents / browsers.
+        // Just use the sign.
+        analog.zoom += Math.sign(e.deltaY);
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    { passive: false }
+  );
+
+  return () => {
+    const out = {
+      digital,
+      analog: {
+        x: analog.x,
+        y: analog.y,
+        zoom: analog.zoom,
+        touching: mouseDown,
+      },
+    };
+    // Clear the analog values, as these accumulate.
+    analog.x = 0;
+    analog.y = 0;
+    analog.zoom = 0;
+    return out;
+  };
+}
+

package/src/engine/final/adaptJSON1.js

@@ -0,0 +1,53 @@
+import {computeSurfaceNormals, computeProjectedPlaneUVs} from './utils2.js';
+
+export function adaptJSON1(dragonRawData) {
+
+  let mesh = {
+    positions: dragonRawData.positions,
+    triangles: dragonRawData.cells,
+    normals: [],
+    uvs: []
+  };
+
+  // Compute surface normals
+  mesh.normals = computeSurfaceNormals(mesh.positions, mesh.triangles);
+
+  // Compute some easy uvs for testing
+  mesh.uvs = computeProjectedPlaneUVs(mesh.positions, 'xy');
+
+  return mesh;
+}
+
+export function addVerticesNormalUvs(mesh) {
+
+  var meshAdapted = {
+    positions: [],
+    cells: [],
+    uvs: mesh.textures,
+    vertices: mesh.vertices
+    // normals: mesh.vertexNormals
+  };
+  // force syntese 
+  for (var x = 0; x < mesh.vertices.length; x=x+3) {
+    var sub = [];
+    sub.push(mesh.vertices[x])
+    sub.push(mesh.vertices[x+1])
+    sub.push(mesh.vertices[x+2])
+    meshAdapted.positions.push(sub)
+    sub = [];
+    sub.push(mesh.indices[x])
+    sub.push(mesh.indices[x+1])
+    sub.push(mesh.indices[x+2])
+    meshAdapted.cells.push(sub)
+  }
+
+    // Compute surface normals
+    meshAdapted.normals = computeSurfaceNormals(meshAdapted.positions, meshAdapted.cells);
+    // Compute some easy uvs for testing
+    meshAdapted.uvs = computeProjectedPlaneUVs(meshAdapted.positions, 'xy');
+     
+    meshAdapted.triangles = meshAdapted.cells
+  return meshAdapted;
+}
+
+ 

package/src/engine/final/utils2.js

@@ -0,0 +1,63 @@
+import { vec3 } from 'wgpu-matrix';
+
+export function computeSurfaceNormals(positions,triangles){
+  const normals = positions.map(() => {
+    // Initialize to zero.
+    return [0, 0, 0];
+  });
+  triangles.forEach(([i0, i1, i2]) => {
+    const p0 = positions[i0];
+    const p1 = positions[i1];
+    const p2 = positions[i2];
+
+    const v0 = vec3.subtract(p1, p0);
+    const v1 = vec3.subtract(p2, p0);
+
+    vec3.normalize(v0, v0);
+    vec3.normalize(v1, v1);
+    const norm = vec3.cross(v0, v1);
+
+    // Accumulate the normals.
+    vec3.add(normals[i0], norm, normals[i0]);
+    vec3.add(normals[i1], norm, normals[i1]);
+    vec3.add(normals[i2], norm, normals[i2]);
+  });
+  normals.forEach((n) => {
+    // Normalize accumulated normals.
+    vec3.normalize(n, n);
+  });
+
+  return normals;
+}
+
+// type ProjectedPlane = 'xy' | 'xz' | 'yz';
+const projectedPlane2Ids = {
+  xy: [0, 1],
+  xz: [0, 2],
+  yz: [1, 2],
+};
+
+export function computeProjectedPlaneUVs(positions, projectedPlane) {
+  const idxs = projectedPlane2Ids[projectedPlane];
+  const uvs = positions.map(() => {
+    // Initialize to zero.
+    return [0, 0];
+  });
+  const extentMin = [Infinity, Infinity];
+  const extentMax = [-Infinity, -Infinity];
+  positions.forEach((pos, i) => {
+    // Simply project to the selected plane
+    uvs[i][0] = pos[idxs[0]];
+    uvs[i][1] = pos[idxs[1]];
+
+    extentMin[0] = Math.min(pos[idxs[0]], extentMin[0]);
+    extentMin[1] = Math.min(pos[idxs[1]], extentMin[1]);
+    extentMax[0] = Math.max(pos[idxs[0]], extentMax[0]);
+    extentMax[1] = Math.max(pos[idxs[1]], extentMax[1]);
+  });
+  uvs.forEach((uv) => {
+    uv[0] = (uv[0] - extentMin[0]) / (extentMax[0] - extentMin[0]);
+    uv[1] = (uv[1] - extentMin[1]) / (extentMax[1] - extentMin[1]);
+  });
+  return uvs;
+}