matrix-engine-wgpu 1.3.16 → 1.3.18

package/src/engine/engine.js

@@ -0,0 +1,404 @@
+// 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 } from 'wgpu-matrix';
+import {LOG_INFO} from './utils';
+
+// 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_);
+  }
+
+  setProjection(fov = (2 * Math.PI) / 5, aspect = 1, near = 1, far = 1000) {
+    this.projectionMatrix = mat4.perspective(fov, aspect, near, far);
+  }
+
+  // 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_);
+  }
+
+  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;
+      this.setProjection()
+      // console.log(`%cCamera constructor : ${position}`, LOG_INFO);
+    }
+  }
+
+  // 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); 
+		// super.matrix = mat4.rotateX(mat4.rotationY(this.yaw), -this.pitch);
+		// super.matrix = mat4.rotateY(mat4.rotateX(this.pitch), this.yaw);
+
+    // 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);
+}
+
+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; break;
+      case 'KeyS': digital.backward = value; break;
+      case 'KeyA': digital.left = value; break;
+      case 'KeyD': digital.right = value; break;
+      case 'Space': digital.up = value; break;
+      case 'ShiftLeft':
+      case 'ControlLeft':
+      case 'KeyC': digital.down = value; break;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  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) {
+      analog.x += e.movementX / 10;
+      analog.y += e.movementY / 10;
+    }
+  });
+
+  canvas.addEventListener('wheel', (e) => {
+    if ((e.buttons & 1) !== 0) {
+      analog.zoom += Math.sign(e.deltaY);
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, { passive: false });
+
+  return () => {
+    // Guard: prevent zero deltas from breaking camera math
+    const safeX = analog.x || 0.0001;
+    const safeY = analog.y || 0.0001;
+    const out = {
+      digital,
+      analog: {
+        x: safeX,
+        y: safeY,
+        zoom: analog.zoom,
+        touching: mouseDown,
+      },
+    };
+    // Reset only the deltas for next frame
+    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;
+}

package/src/engine/lights.js

@@ -0,0 +1,153 @@
+import {mat4, vec3} from 'wgpu-matrix';
+
+export class SpotLight {
+  // injected
+  camera;
+  inputHandler;
+
+  // Light
+  position;
+  target;
+  up;
+  direction;
+
+  viewMatrix;
+  projectionMatrix;
+  viewProjMatrix;
+
+  fov;
+  aspect;
+  near;
+  far;
+
+  innerCutoff;
+  outerCutoff;
+
+  spotlightUniformBuffer;
+
+  constructor(
+    camera,
+    inputHandler,
+    position = vec3.create(0, 5, -10),
+    target = vec3.create(0, 0, 0),
+    fov = 45,
+    aspect = 1.0,
+    near = 0.1,
+    far = 200
+  ) {
+    this.camera = camera;
+    this.inputHandler = inputHandler;
+
+    this.position = position;
+    this.target = target;
+    this.up = vec3.create(0, 1, 0);
+    this.direction = vec3.normalize(vec3.subtract(target, position));
+
+    this.viewMatrix = mat4.lookAt(position, target, this.up);
+    this.projectionMatrix = mat4.perspective(
+      (fov * Math.PI) / 180,
+      aspect,
+      near,
+      far
+    );
+    this.viewProjMatrix = mat4.multiply(this.projectionMatrix, this.viewMatrix);
+
+    this.fov = fov;
+    this.aspect = aspect;
+    this.near = near;
+    this.far = far;
+
+    this.innerCutoff = Math.cos((Math.PI / 180) * 12.5);
+    this.outerCutoff = Math.cos((Math.PI / 180) * 17.5);
+  }
+
+  update() {
+    // this.direction = vec3.normalize(vec3.subtract(this.target, this.position));
+    // this.viewMatrix = mat4.lookAt(this.position, this.target, this.up);
+    // this.viewProjMatrix = mat4.multiply(this.projectionMatrix, this.viewMatrix);
+    // console.log('test light update this.target : ', this.target)
+    // Use the existing direction
+    const target = vec3.add(this.position, this.direction);
+    this.viewMatrix = mat4.lookAt(this.position, target, this.up);
+    this.viewProjMatrix = mat4.multiply(this.projectionMatrix, this.viewMatrix);
+  }
+
+  updateSceneUniforms(mainRenderBundle) {
+    const now = Date.now();
+    // First frame safety
+    let dt = (now - this.lastFrameMS) / 1000;
+    if(!this.lastFrameMS) {dt = 16;}
+    this.lastFrameMS = now;
+    // engine, once per frame
+    this.camera.update(dt, this.inputHandler());
+    const camVP = mat4.multiply(this.camera.projectionMatrix, this.camera.view); // P * V
+
+    for(const mesh of mainRenderBundle) {
+      // scene buffer layout = 0..63 lightVP, 64..127 camVP, 128..143 lightPos(+pad)
+      this.device.queue.writeBuffer(
+        mesh.sceneUniformBuffer,
+        64, // cameraViewProjMatrix offset
+        camVP.buffer,
+        camVP.byteOffset,
+        camVP.byteLength
+      );
+    }
+    // const camVP = mat4.multiply(camera.projectionMatrix, camera.view);
+    // const sceneData = new Float32Array(36); // 16 + 16 + 4
+    // sceneData.set(this.viewProjMatrix, 0);
+    // sceneData.set(camVP, 16);
+    // sceneData.set(this.position, 32);
+    // if(!this.device) {
+    //   console.warn("Device not set for SpotLight");
+    //   return;
+    // }
+    // this.device.queue.writeBuffer(
+    //   sceneUniformBuffer,
+    //   // this.spotlightUniformBuffer,
+    //   0,
+    //   sceneData.buffer,
+    //   sceneData.byteOffset,
+    //   sceneData.byteLength
+    // );
+  }
+
+  prepareBuffer(device) {
+    if(!this.device) this.device = device;
+    this.spotlightUniformBuffer = this.device.createBuffer({
+      size: 16 * 4, // 64 bytes
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+
+    const spotlightData = this.getLightDataBuffer();
+    this.device.queue.writeBuffer(
+      this.spotlightUniformBuffer,
+      0,
+      spotlightData.buffer,
+      spotlightData.byteOffset,
+      spotlightData.byteLength
+    );
+  }
+
+  updateLightBuffer() {
+    if(!this.device || !this.spotlightUniformBuffer) {return;}
+    const spotlightData = this.getLightDataBuffer();
+    this.device.queue.writeBuffer(
+      this.spotlightUniformBuffer,
+      0,
+      spotlightData.buffer,
+      spotlightData.byteOffset,
+      spotlightData.byteLength
+    );
+  }
+
+  getLightDataBuffer() {
+    return new Float32Array([
+      ...this.position, 0.0,
+      ...this.direction, 0.0,
+      this.innerCutoff,
+      this.outerCutoff,
+      0.0,
+      0.0,
+    ]);
+  }
+}