From 130fd05edcafa69bd103be64398d4df97b22bd3f Mon Sep 17 00:00:00 2001 From: Gregg Tavares Date: Sat, 1 Jun 2024 10:49:51 +0900 Subject: [PATCH] Update to wgpu-matrix v3 This removes much of the casting that was needed before. --- package-lock.json | 8 ++--- package.json | 2 +- sample/a-buffer/main.ts | 2 +- sample/cameras/main.ts | 2 +- sample/cornell/scene.ts | 3 +- sample/cubemap/main.ts | 2 +- sample/deferredRendering/main.ts | 16 +++------- sample/fractalCube/main.ts | 2 +- sample/instancedCube/main.ts | 3 +- sample/normalMap/main.ts | 7 +---- sample/renderBundles/main.ts | 4 +-- sample/reversedZ/main.ts | 17 ++-------- sample/rotatingCube/main.ts | 2 +- sample/samplerParameters/main.ts | 2 +- sample/shadowMapping/main.ts | 41 +++---------------------- sample/skinnedMesh/glbUtils.ts | 16 +++++----- sample/skinnedMesh/main.ts | 18 ++++++----- sample/textRenderingMsdf/main.ts | 2 +- sample/textRenderingMsdf/msdfText.ts | 4 +-- sample/texturedCube/main.ts | 2 +- sample/twoCubes/main.ts | 4 +-- sample/volumeRenderingTexture3D/main.ts | 2 +- sample/worker/worker.ts | 2 +- src/main.ts | 2 -- 24 files changed, 53 insertions(+), 112 deletions(-) diff --git a/package-lock.json b/package-lock.json index a09a4a84..4ffffda8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,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", @@ -4134,9 +4134,9 @@ "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==" }, "node_modules/wgpu-matrix": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/wgpu-matrix/-/wgpu-matrix-2.8.0.tgz", - "integrity": "sha512-HSuLmWpr1b1kdBbOYsAZodGmIQjD42Or6vjL39hAAo19E07sgBDAII4rGuP4qr4hsfTsA3OhDJPqMTQ0XLpH9Q==" + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/wgpu-matrix/-/wgpu-matrix-3.0.0.tgz", + "integrity": "sha512-0/FVkPFiWWdCI2K/eEq8EXBQ24uO57nlJ0jI/EXTHBmXltjwMabITzNn/+u7ZYa32fOihdHV+moGzgcWzC6DNw==" }, "node_modules/which": { "version": "2.0.2", diff --git a/package.json b/package.json index 326fd2d6..a620c0af 100644 --- a/package.json +++ b/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", diff --git a/sample/a-buffer/main.ts b/sample/a-buffer/main.ts index 7707f93e..f4713ffa 100644 --- a/sample/a-buffer/main.ts +++ b/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() { diff --git a/sample/cameras/main.ts b/sample/cameras/main.ts index f9846c5b..648cb61a 100644 --- a/sample/cameras/main.ts +++ b/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(); diff --git a/sample/cornell/scene.ts b/sample/cornell/scene.ts index 2ef1ceb5..9034436a 100644 --- a/sample/cornell/scene.ts +++ b/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); diff --git a/sample/cubemap/main.ts b/sample/cubemap/main.ts index 26bd4a8c..7a423ff2 100644 --- a/sample/cubemap/main.ts +++ b/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(); diff --git a/sample/deferredRendering/main.ts b/sample/deferredRendering/main.ts index 473cbe1a..e5d95621 100644 --- a/sample/deferredRendering/main.ts +++ b/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, diff --git a/sample/fractalCube/main.ts b/sample/fractalCube/main.ts index 37ab8d61..35c4fa66 100644 --- a/sample/fractalCube/main.ts +++ b/sample/fractalCube/main.ts @@ -177,7 +177,7 @@ function getTransformationMatrix() { mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix); - return modelViewProjectionMatrix as Float32Array; + return modelViewProjectionMatrix; } function frame() { diff --git a/sample/instancedCube/main.ts b/sample/instancedCube/main.ts index 4bfa062e..87265398 100644 --- a/sample/instancedCube/main.ts +++ b/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(numInstances); const mvpMatricesData = new Float32Array(matrixFloatCount * numInstances); diff --git a/sample/normalMap/main.ts b/sample/normalMap/main.ts index f6b5398f..fe4f8189 100644 --- a/sample/normalMap/main.ts +++ b/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( diff --git a/sample/renderBundles/main.ts b/sample/renderBundles/main.ts index 9a72d3f9..2d50bcfb 100644 --- a/sample/renderBundles/main.ts +++ b/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 diff --git a/sample/reversedZ/main.ts b/sample/reversedZ/main.ts index 65ff3f1d..bda1c2d7 100644 --- a/sample/reversedZ/main.ts +++ b/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(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(); diff --git a/sample/rotatingCube/main.ts b/sample/rotatingCube/main.ts index cea6b992..5dd83191 100644 --- a/sample/rotatingCube/main.ts +++ b/sample/rotatingCube/main.ts @@ -151,7 +151,7 @@ function getTransformationMatrix() { mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix); - return modelViewProjectionMatrix as Float32Array; + return modelViewProjectionMatrix; } function frame() { diff --git a/sample/samplerParameters/main.ts b/sample/samplerParameters/main.ts index 7b357f45..4917ecad 100644 --- a/sample/samplerParameters/main.ts +++ b/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, diff --git a/sample/shadowMapping/main.ts b/sample/shadowMapping/main.ts index bd40f902..fd94c6d2 100644 --- a/sample/shadowMapping/main.ts +++ b/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 = { diff --git a/sample/skinnedMesh/glbUtils.ts b/sample/skinnedMesh/glbUtils.ts index 63198a2b..88446465 100644 --- a/sample/skinnedMesh/glbUtils.ts +++ b/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, diff --git a/sample/skinnedMesh/main.ts b/sample/skinnedMesh/main.ts index d68fcf0c..8203889e 100644 --- a/sample/skinnedMesh/main.ts +++ b/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] ); } diff --git a/sample/textRenderingMsdf/main.ts b/sample/textRenderingMsdf/main.ts index e83e2116..0e13daab 100644 --- a/sample/textRenderingMsdf/main.ts +++ b/sample/textRenderingMsdf/main.ts @@ -294,7 +294,7 @@ function getTransformationMatrix() { mat4.translate(textMatrix, [-3, -0.1, 0], textMatrix); largeText.setTransform(textMatrix); - return modelViewProjectionMatrix as Float32Array; + return modelViewProjectionMatrix; } function frame() { diff --git a/sample/textRenderingMsdf/msdfText.ts b/sample/textRenderingMsdf/msdfText.ts index 065213a7..adcd3ebd 100644 --- a/sample/textRenderingMsdf/msdfText.ts +++ b/sample/textRenderingMsdf/msdfText.ts @@ -1,9 +1,7 @@ -import { mat4 } from 'wgpu-matrix'; +import { mat4, Mat4 } from 'wgpu-matrix'; import msdfTextWGSL from './msdfText.wgsl'; -type Mat4 = mat4.default; - // The kerning map stores a spare map of character ID pairs with an associated // X offset that should be applied to the character spacing when the second // character ID is rendered after the first. diff --git a/sample/texturedCube/main.ts b/sample/texturedCube/main.ts index 080e029c..73442116 100644 --- a/sample/texturedCube/main.ts +++ b/sample/texturedCube/main.ts @@ -186,7 +186,7 @@ function getTransformationMatrix() { mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix); - return modelViewProjectionMatrix as Float32Array; + return modelViewProjectionMatrix; } function frame() { diff --git a/sample/twoCubes/main.ts b/sample/twoCubes/main.ts index c33289f5..4a9f4374 100644 --- a/sample/twoCubes/main.ts +++ b/sample/twoCubes/main.ts @@ -158,8 +158,8 @@ const projectionMatrix = mat4.perspective((2 * Math.PI) / 5, aspect, 1, 100.0); const modelMatrix1 = mat4.translation(vec3.create(-2, 0, 0)); const modelMatrix2 = mat4.translation(vec3.create(2, 0, 0)); -const modelViewProjectionMatrix1 = mat4.create() as Float32Array; -const modelViewProjectionMatrix2 = mat4.create() as Float32Array; +const modelViewProjectionMatrix1 = mat4.create(); +const modelViewProjectionMatrix2 = mat4.create(); const viewMatrix = mat4.translation(vec3.fromValues(0, 0, -7)); const tmpMat41 = mat4.create(); diff --git a/sample/volumeRenderingTexture3D/main.ts b/sample/volumeRenderingTexture3D/main.ts index a4b6929c..3b36ec74 100644 --- a/sample/volumeRenderingTexture3D/main.ts +++ b/sample/volumeRenderingTexture3D/main.ts @@ -184,7 +184,7 @@ function getInverseModelViewProjectionMatrix(deltaTime: number) { ); const modelViewProjectionMatrix = mat4.multiply(projectionMatrix, viewMatrix); - return mat4.invert(modelViewProjectionMatrix) as Float32Array; + return mat4.invert(modelViewProjectionMatrix); } let lastFrameMS = Date.now(); diff --git a/sample/worker/worker.ts b/sample/worker/worker.ts index aec123cc..4a3e52f9 100644 --- a/sample/worker/worker.ts +++ b/sample/worker/worker.ts @@ -174,7 +174,7 @@ async function init(canvas) { mat4.multiply(projectionMatrix, viewMatrix, modelViewProjectionMatrix); - return modelViewProjectionMatrix as Float32Array; + return modelViewProjectionMatrix; } function frame() { diff --git a/src/main.ts b/src/main.ts index 5be29878..2885c652 100644 --- a/src/main.ts +++ b/src/main.ts @@ -379,8 +379,6 @@ window.addEventListener('message', (e) => { sampleContainerElem.style.height = `${data.height}px`; break; } - default: - throw new Error(`unknown message cmd: ${cmd}`); } });