Track the Camera in Desmos!

Examples
1

I was playing around with typing in Calc in console in Desmos | 3D Graphing Calculator , and eventually found the debug matrices for the WebGL engine in Desmos. Here is an example graph which tracks the user’s camera live: https://www.desmos.com/3d/ydur9uhjkn , and here is the code for anyone interested:

function updateDesmosCameraLists() {
const cam = Calc.controller.grapher3d.redrawResult?.camera;
if (!cam) return;

// 1. cameraMatrixWorldInverse (Inverse View Matrix)
const L1 = Array.from(cam.cameraMatrixWorldInverse || );

// 2. cameraProjectionMatrix (Projection Matrix)
const L2 = Array.from(cam.cameraProjectionMatrix || );

// 3. worldMatrixWorld (Model-View Matrix)
const L3 = Array.from(cam.worldMatrixWorld || );

// 4. worldRotationQuaternion (Orientation)
const q = cam.worldRotationQuaternion;
const L4 = q ? [q.x, q.y, q.z, q.w] : ;

// Batch update to Desmos for performance
Calc.setExpressions([
{ id: ‘list1’, latex: L_{cameraWorldInverse}=${JSON.stringify(L1)} },
{ id: ‘list2’, latex: L_{cameraProjectionMatrix}=${JSON.stringify(L2)} },
{ id: ‘list3’, latex: L_{worldMatrixWorld}=${JSON.stringify(L3)} },
{ id: ‘list4’, latex: L_{worldRotationQuaternion}=${JSON.stringify(L4)} }
]);
}

// Clear existing interval if you’ve run this before to prevent memory leaks
if (window.cameraLoggerInterval) clearInterval(window.cameraLoggerInterval);

window.cameraLoggerInterval = setInterval(() => {
updateDesmosCameraLists();
}, 1);

2

Here is an example use in @dwoodbrey’s shader engine in desmos: [Copy of] [Copy of] [Copy of] Untitled Graph | Desmos , replacing the static camera with the live camera position.

3

Note: you have to refresh the graph to disable the script. If you go to other graphs without refreshing, the script will still be active.