Spread 不适用于 Array(16) _wgpuMatrix.mat4.invert 返回 NUll 填充数组

Question

对于矩阵变换，我使用 wgpu-matrix 库。

我已经在其他项目中实现了光线投射（命中对象触发器）。我也想在我的新项目matrix-engine-wgpu 中实现它。

此时输入的值是正确的。

let projectionMatrix = [...object.projectionMatrix]
// after this line i have also object.projectionMatrix filled with NaN  so strange ... I use debugger watch in first pass 

let modelViewProjectionMatrix = [...object.modelViewProjectionMatrix]

ray = unproject([touchCoordinate.x, touchCoordinate.y], 
       [0, 0, touchCoordinate.w, touchCoordinate.h], 
    mat4.invert(outp,object.projectionMatrix),
    mat4.invert(outv,modelViewProjectionMatrix));

我在

NaN

函数中得到了

unproject

填充数组。

export function unproject(
  screenCoord,   // [number, number]
  viewport,      // [number, number, number, number]
  invProjection, // mat4
  invView) {
  // return vec3
  const [left, top, width, height] = viewport;
  const [x, y] = screenCoord;
  console.log("test out x ", x)
  const out = vec4.fromValues((2 * x) / width - 1 - left, (2 * (height - y - 1)) / height - 1, 1, 1);
  vec4.transformMat4(out, out, invProjection);
  out[3] = 0;
  vec4.transformMat4(out, out, invView);
  return vec3.normalize(vec3.create(), out);
}

这是存在此问题的特殊分支：https://github.com/zlatnaspirala/matrix-engine-wgpu/tree/RAYCASTER

安装和运行说明

npm i
npm run main

这条线很关键：

    var TEST1 = mat4.invert(outv, modelViewProjectionMatrix)
     console.log("test1 ;; ", TEST1)
     console.log("test2 ;; ", outv)    

测试1的输出

[ 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 无效的， 空]

测试2的输出

{ “0”：0， “1”：0， “2”：0， “3”：0， “4”：0， “5”：0， “6”：0， “7”：0， “8”：0， “9”：0， “10”：0， “11”：0， “12”：0， “13”：0， “14”：0， “15”：0}

如果我切换

mat4.invert(modelViewProjectionMatrix, outv)

输出：

{ “0”：空， “1”：空， “2”：空， “3”：空， “4”：0， “5”：0.7265425324440002， “6”：0， “7”：0， “8”：-4.997498035430908， “9”：-6.150917053222656， “10”：-13.99299430847168， “11”：-0.9994995594024658， “12”：4.999997615814209， “13”：6.153993606567383， “14”：12.999993324279785， “15”：0.9999995231628418}

https://codesandbox.io/p/github/zlatnaspirala/matrix-engine-wgpu/RAYCASTER?file=%2Fsrc%2Fengine%2Fraycast-test.js%3A56%2C31&workspaceId=cd4f340e-85cd-4d71-9715-f9a263cdc951

有什么建议吗？

Answer 1

看来是这样

ray = unproject(
    [touchCoordinate.x, touchCoordinate.y],
    [0, 0, touchCoordinate.w, touchCoordinate.h],
    mat4.inverse(object.projectionMatrix),
    mat4.inverse(object.modelViewProjectionMatrix)
);

应该足够了。 如果您只向

inverse

提供单个（矩阵）参数，它将简单地返回该参数的倒数。 如果您认为

inverse

产生了错误的输出，您需要向我们显示传入的矩阵，看看情况是否如此。