impr: Add inverse matrices to orbit cam (#2150)

Author: reczkok

apps/typegpu-docs/src/examples/common/setup-orbit-camera.ts

@@ -7,6 +7,8 @@ export const Camera = d.struct({
   targetPos: d.vec4f,
   view: d.mat4x4f,
   projection: d.mat4x4f,
+  viewInverse: d.mat4x4f,
+  projectionInverse: d.mat4x4f,
 });
 
 export interface CameraOptions {
@@ -57,11 +59,16 @@ export function setupOrbitCamera(
     cameraState.pitch = Math.asin(cameraVector.y / cameraState.radius);
     cameraState.target = tgt;
 
+    const view = calculateView(newPos, cameraState.target);
+    const projection = calculateProj(canvas.clientWidth / canvas.clientHeight);
+
     callback(Camera({
       position: newPos,
       targetPos: cameraState.target,
-      view: calculateView(newPos, cameraState.target),
-      projection: calculateProj(canvas.clientWidth / canvas.clientHeight),
+      view,
+      projection,
+      viewInverse: invertMat(view),
+      projectionInverse: invertMat(projection),
     }));
   }
 
@@ -83,8 +90,11 @@ export function setupOrbitCamera(
       cameraState.yaw,
     );
 
+    const newView = calculateView(newCameraPos, cameraState.target);
+
     callback({
-      view: calculateView(newCameraPos, cameraState.target),
+      view: newView,
+      viewInverse: invertMat(newView),
       position: newCameraPos,
     });
   }
@@ -105,13 +115,17 @@ export function setupOrbitCamera(
     );
     const newView = calculateView(newPos, cameraState.target);
 
-    callback({ view: newView, position: newPos });
+    callback({
+      view: newView,
+      viewInverse: invertMat(newView),
+      position: newPos,
+    });
   }
 
   // resize observer
   const resizeObserver = new ResizeObserver(() => {
     const projection = calculateProj(canvas.clientWidth / canvas.clientHeight);
-    callback({ projection });
+    callback({ projection, projectionInverse: invertMat(projection) });
   });
   resizeObserver.observe(canvas);
 
@@ -237,3 +251,7 @@ function calculateView(position: d.v4f, target: d.v4f) {
 function calculateProj(aspectRatio: number) {
   return m.mat4.perspective(Math.PI / 4, aspectRatio, 0.1, 1000, d.mat4x4f());
 }
+
+function invertMat(matrix: d.m4x4f) {
+  return m.mat4.invert(matrix, d.mat4x4f());
+}

packages/typegpu/tests/examples/individual/gravity.test.ts

@@ -181,6 +181,8 @@ describe('gravity example', () => {
         targetPos: vec4f,
         view: mat4x4f,
         projection: mat4x4f,
+        viewInverse: mat4x4f,
+        projectionInverse: mat4x4f,
       }
 
       @group(0) @binding(0) var<uniform> camera: Camera;
@@ -234,6 +236,8 @@ describe('gravity example', () => {
         targetPos: vec4f,
         view: mat4x4f,
         projection: mat4x4f,
+        viewInverse: mat4x4f,
+        projectionInverse: mat4x4f,
       }
 
       @group(0) @binding(0) var<uniform> camera_1: Camera;

packages/typegpu/tests/examples/individual/phong-reflection.test.ts

@@ -32,6 +32,8 @@ describe('phong reflection example', () => {
         targetPos: vec4f,
         view: mat4x4f,
         projection: mat4x4f,
+        viewInverse: mat4x4f,
+        projectionInverse: mat4x4f,
       }
 
       @group(0) @binding(0) var<uniform> cameraUniform: Camera;