Use wgpu-matrix 3.x

package.json

@@ -29,7 +29,7 @@
     "showdown": "^2.1.0",
     "stats.js": "github:mrdoob/stats.js#b235d9c",
     "teapot": "^1.0.0",
-    "wgpu-matrix": "^2.8.0"
+    "wgpu-matrix": "^3.0.0"
   },
   "devDependencies": {
     "@babel/runtime": "^7.24.1",

sample/a-buffer/main.ts

@@ -534,7 +534,7 @@ const configure = () => {
     const viewMatrix = mat4.lookAt(eyePosition, origin, upVector);
 
     const viewProjMatrix = mat4.multiply(projectionMatrix, viewMatrix);
-    return viewProjMatrix as Float32Array;
+    return viewProjMatrix;
   }
 
   return function doDraw() {

sample/cameras/main.ts

@@ -196,7 +196,7 @@ function getModelViewProjectionMatrix(deltaTime: number) {
   const camera = cameras[params.type];
   const viewMatrix = camera.update(deltaTime, inputHandler());
   mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);
-  return modelViewProjectionMatrix as Float32Array;
+  return modelViewProjectionMatrix;
 }
 
 let lastFrameMS = Date.now();

sample/cornell/scene.ts

@@ -1,5 +1,4 @@
-import { vec3 } from 'wgpu-matrix';
-type Vec3 = vec3.default;
+import { vec3, Vec3 } from 'wgpu-matrix';
 
 function reciprocal(v: Vec3) {
   const s = 1 / vec3.lenSq(v);

sample/cubemap/main.ts

@@ -194,7 +194,7 @@ const aspect = canvas.width / canvas.height;
 const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 3000);
 
 const modelMatrix = mat4.scaling(vec3.fromValues(1000, 1000, 1000));
-const modelViewProjectionMatrix = mat4.create() as Float32Array;
+const modelViewProjectionMatrix = mat4.create();
 const viewMatrix = mat4.identity();
 
 const tmpMat4 = mat4.create();

sample/deferredRendering/main.ts

@@ -476,18 +476,10 @@ const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 2000.0);
 
 // Move the model so it's centered.
 const modelMatrix = mat4.translation([0, -45, 0]);
-
-const modelData = modelMatrix as Float32Array;
-device.queue.writeBuffer(
-  modelUniformBuffer,
-  0,
-  modelData.buffer,
-  modelData.byteOffset,
-  modelData.byteLength
-);
+device.queue.writeBuffer(modelUniformBuffer, 0, modelMatrix);
 const invertTransposeModelMatrix = mat4.invert(modelMatrix);
 mat4.transpose(invertTransposeModelMatrix, invertTransposeModelMatrix);
-const normalModelData = invertTransposeModelMatrix as Float32Array;
+const normalModelData = invertTransposeModelMatrix;
 device.queue.writeBuffer(
   modelUniformBuffer,
   64,
@@ -504,7 +496,7 @@ function getCameraViewProjMatrix() {
 
   const viewMatrix = mat4.lookAt(rotatedEyePosition, origin, upVector);
 
-  return mat4.multiply(projectionMatrix, viewMatrix) as Float32Array;
+  return mat4.multiply(projectionMatrix, viewMatrix);
 }
 
 function frame() {
@@ -516,7 +508,7 @@ function frame() {
     cameraViewProj.byteOffset,
     cameraViewProj.byteLength
   );
-  const cameraInvViewProj = mat4.invert(cameraViewProj) as Float32Array;
+  const cameraInvViewProj = mat4.invert(cameraViewProj);
   device.queue.writeBuffer(
     cameraUniformBuffer,
     64,

sample/fractalCube/main.ts

@@ -177,7 +177,7 @@ function getTransformationMatrix() {
 
   mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);
 
-  return modelViewProjectionMatrix as Float32Array;
+  return modelViewProjectionMatrix;
 }
 
 function frame() {

sample/instancedCube/main.ts

@@ -1,4 +1,4 @@
-import { mat4, vec3 } from 'wgpu-matrix';
+import { mat4, Mat4, vec3 } from 'wgpu-matrix';
 
 import {
   cubeVertexArray,
@@ -126,7 +126,6 @@ const uniformBindGroup = device.createBindGroup({
 const aspect = canvas.width / canvas.height;
 const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 100.0);
 
-type Mat4 = mat4.default;
 const modelMatrices = new Array<Mat4>(numInstances);
 const mvpMatricesData = new Float32Array(matrixFloatCount * numInstances);
 

sample/normalMap/main.ts

@@ -227,12 +227,7 @@ const surfaceBGDescriptor = createBindGroupDescriptor(
 );
 
 const aspect = canvas.width / canvas.height;
-const projectionMatrix = mat4.perspective(
-  (2 * Math.PI) / 5,
-  aspect,
-  0.1,
-  10.0
-) as Float32Array;
+const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 0.1, 10.0);
 
 function getViewMatrix() {
   return mat4.lookAt(

sample/renderBundles/main.ts

@@ -233,7 +233,7 @@ function createSphereBindGroup(
   return bindGroup;
 }
 
-const transform = mat4.create() as Float32Array;
+const transform = mat4.create();
 mat4.identity(transform);
 
 // Create one large central planet surrounded by a large ring of asteroids
@@ -318,7 +318,7 @@ function getTransformationMatrix() {
 
   mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);
 
-  return modelViewProjectionMatrix as Float32Array;
+  return modelViewProjectionMatrix;
 }
 
 // Render bundles function as partial, limited render passes, so we can use the

sample/reversedZ/main.ts

@@ -1,4 +1,4 @@
-import { mat4, vec3 } from 'wgpu-matrix';
+import { mat4, Mat4, vec3 } from 'wgpu-matrix';
 import { GUI } from 'dat.gui';
 
 import vertexWGSL from './vertex.wgsl';
@@ -480,7 +480,6 @@ const uniformBindGroups = [
   }),
 ];
 
-type Mat4 = mat4.default;
 const modelMatrices = new Array<Mat4>(numInstances);
 const mvpMatricesData = new Float32Array(matrixFloatCount * numInstances);
 
@@ -517,21 +516,11 @@ const reversedRangeViewProjectionMatrix = mat4.multiply(
   viewProjectionMatrix
 );
 
-let bufferData = viewProjectionMatrix as Float32Array;
-device.queue.writeBuffer(
-  cameraMatrixBuffer,
-  0,
-  bufferData.buffer,
-  bufferData.byteOffset,
-  bufferData.byteLength
-);
-bufferData = reversedRangeViewProjectionMatrix as Float32Array;
+device.queue.writeBuffer(cameraMatrixBuffer, 0, viewProjectionMatrix);
 device.queue.writeBuffer(
   cameraMatrixReversedDepthBuffer,
   0,
-  bufferData.buffer,
-  bufferData.byteOffset,
-  bufferData.byteLength
+  reversedRangeViewProjectionMatrix
 );
 
 const tmpMat4 = mat4.create();

sample/rotatingCube/main.ts

@@ -151,7 +151,7 @@ function getTransformationMatrix() {
 
   mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix);
 
-  return modelViewProjectionMatrix as Float32Array;
+  return modelViewProjectionMatrix;
 }
 
 function frame() {

sample/samplerParameters/main.ts

@@ -276,7 +276,7 @@ const viewProj = mat4.translate(
   mat4.perspective(2 * Math.atan(1 / kCameraDist), 1, 0.1, 100),
   [0, 0, -kCameraDist]
 );
-device.queue.writeBuffer(bufConfig, 0, viewProj as Float32Array);
+device.queue.writeBuffer(bufConfig, 0, viewProj);
 
 const bufMatrices = device.createBuffer({
   usage: GPUBufferUsage.STORAGE,

sample/shadowMapping/main.ts

@@ -304,41 +304,10 @@ const modelMatrix = mat4.translation([0, -45, 0]);
 
 // The camera/light aren't moving, so write them into buffers now.
 {
-  const lightMatrixData = lightViewProjMatrix as Float32Array;
-  device.queue.writeBuffer(
-    sceneUniformBuffer,
-    0,
-    lightMatrixData.buffer,
-    lightMatrixData.byteOffset,
-    lightMatrixData.byteLength
-  );
-
-  const cameraMatrixData = viewProjMatrix as Float32Array;
-  device.queue.writeBuffer(
-    sceneUniformBuffer,
-    64,
-    cameraMatrixData.buffer,
-    cameraMatrixData.byteOffset,
-    cameraMatrixData.byteLength
-  );
-
-  const lightData = lightPosition as Float32Array;
-  device.queue.writeBuffer(
-    sceneUniformBuffer,
-    128,
-    lightData.buffer,
-    lightData.byteOffset,
-    lightData.byteLength
-  );
-
-  const modelData = modelMatrix as Float32Array;
-  device.queue.writeBuffer(
-    modelUniformBuffer,
-    0,
-    modelData.buffer,
-    modelData.byteOffset,
-    modelData.byteLength
-  );
+  device.queue.writeBuffer(sceneUniformBuffer, 0, lightViewProjMatrix);
+  device.queue.writeBuffer(sceneUniformBuffer, 64, lightViewProjMatrix);
+  device.queue.writeBuffer(sceneUniformBuffer, 128, lightPosition);
+  device.queue.writeBuffer(modelUniformBuffer, 0, modelMatrix);
 }
 
 // Rotates the camera around the origin based on time.
@@ -352,7 +321,7 @@ function getCameraViewProjMatrix() {
   const viewMatrix = mat4.lookAt(eyePosition, origin, upVector);
 
   mat4.multiply(projectionMatrix, viewMatrix, viewProjMatrix);
-  return viewProjMatrix as Float32Array;
+  return viewProjMatrix;
 }
 
 const shadowPassDescriptor: GPURenderPassDescriptor = {

sample/skinnedMesh/glbUtils.ts

@@ -1,6 +1,6 @@
-import { Quat } from 'wgpu-matrix';
+import { Quatn } from 'wgpu-matrix';
 import { Accessor, BufferView, GlTf, Scene } from './gltf';
-import { Mat4, Vec3, mat4 } from 'wgpu-matrix';
+import { Mat4, Vec3n, mat4 } from 'wgpu-matrix';
 
 //NOTE: GLTF code is not generally extensible to all gltf models
 // Modified from Will Usher code found at this link https://www.willusher.io/graphics/2023/05/16/0-to-gltf-first-mesh
@@ -511,9 +511,9 @@ type TempReturn = {
 };
 
 export class BaseTransformation {
-  position: Vec3;
-  rotation: Quat;
-  scale: Vec3;
+  position: Vec3n;
+  rotation: Quatn;
+  scale: Vec3n;
   constructor(
     // Identity translation vec3
     position = [0, 0, 0],
@@ -608,7 +608,7 @@ export class GLTFNode {
     } else {
       mat4.copy(this.localMatrix, this.worldMatrix);
     }
-    const worldMatrix = this.worldMatrix as Float32Array;
+    const worldMatrix = this.worldMatrix;
     device.queue.writeBuffer(
       this.nodeTransformGPUBuffer,
       0,
@@ -787,9 +787,9 @@ export class GLTFSkin {
     );
     for (let j = 0; j < this.joints.length; j++) {
       const joint = this.joints[j];
-      const dstMatrix: Mat4 = mat4.identity();
+      const dstMatrix = mat4.identity();
       mat4.multiply(globalWorldInverse, nodes[joint].worldMatrix, dstMatrix);
-      const toWrite = dstMatrix as Float32Array;
+      const toWrite = dstMatrix;
       device.queue.writeBuffer(
         this.jointMatricesUniformBuffer,
         j * 64,

sample/skinnedMesh/main.ts

@@ -2,7 +2,7 @@ import { GUI } from 'dat.gui';
 import { convertGLBToJSONAndBinary, GLTFSkin } from './glbUtils';
 import gltfWGSL from './gltf.wgsl';
 import gridWGSL from './grid.wgsl';
-import { Mat4, mat4, Quat, vec3 } from 'wgpu-matrix';
+import { Mat4, mat4, quat, vec3 } from 'wgpu-matrix';
 import { createBindGroupCluster } from '../bitonicSort/utils';
 import {
   createSkinnedGridBuffers,
@@ -29,6 +29,7 @@ enum SkinMode {
   OFF,
 }
 
+/*
 // Copied from toji/gl-matrix
 const getRotation = (mat: Mat4): Quat => {
   // Initialize our output quaternion
@@ -89,6 +90,7 @@ const getRotation = (mat: Mat4): Quat => {
 
   return out;
 };
+*/
 
 //Normal setup
 const canvas = document.querySelector('canvas') as HTMLCanvasElement;
@@ -301,9 +303,9 @@ const orthographicProjection = mat4.ortho(-20, 20, -10, 10, -100, 100);
 
 function getProjectionMatrix() {
   if (settings.object !== 'Skinned Grid') {
-    return perspectiveProjection as Float32Array;
+    return perspectiveProjection;
   }
-  return orthographicProjection as Float32Array;
+  return orthographicProjection;
 }
 
 function getViewMatrix() {
@@ -325,7 +327,7 @@ function getViewMatrix() {
       viewMatrix
     );
   }
-  return viewMatrix as Float32Array;
+  return viewMatrix;
 }
 
 function getModelMatrix() {
@@ -339,7 +341,7 @@ function getModelMatrix() {
   if (settings.object === 'Whale') {
     mat4.rotateY(modelMatrix, (Date.now() / 1000) * 0.5, modelMatrix);
   }
-  return modelMatrix as Float32Array;
+  return modelMatrix;
 }
 
 // Pass Descriptor for GLTFs
@@ -417,7 +419,7 @@ for (let i = 0; i < gridBoneCollection.bindPosesInv.length; i++) {
   device.queue.writeBuffer(
     skinnedGridInverseBindUniformBuffer,
     i * 64,
-    gridBoneCollection.bindPosesInv[i] as Float32Array
+    gridBoneCollection.bindPosesInv[i]
   );
 }
 
@@ -447,7 +449,7 @@ const animWhaleSkin = (skin: GLTFSkin, angle: number) => {
     // (these nodes, of course, each being nodes that represent joints/bones)
     whaleScene.nodes[joint].source.position = mat4.getTranslation(m);
     whaleScene.nodes[joint].source.scale = mat4.getScaling(m);
-    whaleScene.nodes[joint].source.rotation = getRotation(m);
+    whaleScene.nodes[joint].source.rotation = quat.fromMat(m);
   }
 };
 
@@ -493,7 +495,7 @@ function frame() {
     device.queue.writeBuffer(
       skinnedGridJointUniformBuffer,
       i * 64,
-      gridBoneCollection.transforms[i] as Float32Array
+      gridBoneCollection.transforms[i]
     );
   }