WebGL中鼠标与2D世界坐标转换平移后失效问题排查

你的问题出在视图变换矩阵的构造顺序和平移方向上，结合你熟悉的ThreeJS/Unreal经验，本质上是行向量矩阵变换的顺序和方向搞反了——WebGL顶点着色器里你用了行向量左乘矩阵，这和你习惯的列向量右乘（ThreeJS/Unreal默认）逻辑完全相反。

核心问题分析 #

1. 平移方向错误：你当前的平移矩阵是给世界坐标加上偏移量，但视图平移的逻辑应该是抵消相机的位移——相机向右移x，世界看起来向左移，对应世界坐标要减去x，所以平移分量应该取反。
2. 矩阵乘法顺序颠倒：行向量左乘矩阵时，变换是从右到左依次应用的。你当前的矩阵顺序是zoom * aspect * trans，实际会先执行缩放，再归一化，最后平移，这和正确的视图变换流程（平移→缩放→归一化）完全相反。

修复步骤 #

1. 修正平移矩阵的符号

把平移矩阵的平移分量改成-x和-y：

const transMat = new Mat3([1, 0, -x, 0, 1, -y, 0, 0, 1]);

2. 调整矩阵乘法顺序

按照平移→缩放→归一化的逻辑，矩阵乘积顺序改为transMat.multiply(zoomMat).multiply(aspectMat)：

function updateViewMatrix(): Mat3 {
  const { x, y } = offset;
  const dimensions = new Vector(canvas.clientWidth / 2, canvas.clientHeight / 2);
  const zoomMat = new Mat3([zoom, 0, 0, 0, zoom, 0, 0, 0, 1]);
  // 修正平移方向
  const transMat = new Mat3([1, 0, -x, 0, 1, -y, 0, 0, 1]);
  const aspectMat = new Mat3([
      1.0 / dimensions.x, 0, 0,
      0, 1.0 / dimensions.y, 0,
      0, 0, 1.0
  ]);
  // 调整矩阵顺序：先平移，再缩放，最后归一化
  viewMatrix.copy(transMat.multiply(zoomMat).multiply(aspectMat));
  viewMatrixUniform.set(false, viewMatrix.data);
  return viewMatrix;
}

3. 验证鼠标坐标转换

修正后的viewMatrix是正确的世界→裁剪空间变换矩阵，它的逆矩阵就能准确将裁剪空间的鼠标坐标转换回世界坐标，平移和缩放都会正常工作。此时鼠标悬停画布四角时，控制台会输出{x: +/-160, y: +/-160}。

补充说明 #

• 行向量左乘矩阵的逻辑：v * M1 * M2 表示先对v应用M1变换，再应用M2变换，所以矩阵的排列顺序是后执行的变换在左边。
• 你习惯的ThreeJS/Unreal用的是列向量右乘（M2 * M1 * v），变换顺序是先执行的变换在左边，这是两者的核心差异，也是你这次踩坑的主要原因。

内容的提问来源于stack exchange，提问作者zachThePerson