3x3矩阵透视变换中负w值导致边界框计算错误求助

我开发了一款图像编辑器，用3x3矩阵实现变换，支持基于4点映射的简单透视变换（无相机/深度概念）。当前用以下代码完成2D点的3x3矩阵变换（含w除法）：

vec2.transformMat3Div = function(out, a, m)
{
    const x = a[0],
      y = a[1];

    const w = (m[2]*x + m[5]*y + m[8]) || 1;

    out[0] = (m[0]*x + m[3]*y + m[6]) / w;
    out[1] = (m[1]*x + m[4]*y + m[7]) / w;
    return out;
};

为确定覆盖轴对齐矩形所需的图像边界框，我通过矩阵的逆变换轴对齐边界框角点，再取极值得到新边界框，代码如下：

const imatrix3 = matrix3.invert();
const newBBox = bbox.transform(bbox, imatrix3);//min-max of transforming the points in bbox

多数情况下该方法有效，但当矩阵变换较极端时，会出现边界框“翻转”（本该延伸至右下却变为左上），且此时变换函数中的w值为负。我知道3D透视投影中负w值需要裁剪，但我的场景没有相机概念，不清楚该裁剪什么、如何裁剪，需要解决边界框计算错误的问题。

解决方案 #

1. 明确负w值的本质

在你的2D透视变换场景中，负w值等价于点被变换到了“透视平面的另一侧”，这类点在图像编辑场景中属于不可见区域，不需要纳入边界框计算。

2. 修正边界框计算逻辑

原方法仅变换矩形4个角点，但极端透视下矩形边会因w值正负变化出现“弯折”，仅取角点极值会出错。正确流程：

• 遍历原矩形的4条边，找出每条边上w值由正变负的临界点（解方程 m[2]*x + m[5]*y + m[8] = 0，结合边的直线方程求交点）
• 收集所有有效点：原矩形中w>0的角点、所有边的临界点
• 对这些有效点做矩阵变换，再取x/y的极值得到正确边界框

3. 优化变换函数的w值处理

原代码用|| 1处理w=0的情况会导致错误，应该直接标记w≤0的点为无效，不参与后续计算：

vec2.transformMat3Div = function(out, a, m)
{
    const x = a[0],
          y = a[1];

    const w = m[2]*x + m[5]*y + m[8];
    // 仅处理w>0的有效点
    if (w <= 0) {
        return null; // 标记为无效点
    }

    out[0] = (m[0]*x + m[3]*y + m[6]) / w;
    out[1] = (m[1]*x + m[4]*y + m[7]) / w;
    return out;
};

4. 重新实现边界框计算流程

function calculateTransformedBBox(originalBBox, matrix) {
    const { minX, minY, maxX, maxY } = originalBBox;
    const points = [
        [minX, minY], [maxX, minY], [maxX, maxY], [minX, maxY]
    ];
    const validTransformedPoints = [];
    const edges = [
        // 四条边：左上-右上，右上-右下，右下-左下，左下-左上
        [[minX, minY], [maxX, minY]],
        [[maxX, minY], [maxX, maxY]],
        [[maxX, maxY], [minX, maxY]],
        [[minX, maxY], [minX, minY]]
    ];

    // 处理角点
    for (const p of points) {
        const transformed = vec2.transformMat3Div([], p, matrix);
        if (transformed) {
            validTransformedPoints.push(transformed);
        }
    }

    // 处理每条边上的w=0临界点
    const m = matrix;
    for (const [p1, p2] of edges) {
        const [x1, y1] = p1;
        const [x2, y2] = p2;
        // 边的参数方程：x = x1 + t*(x2-x1), y = y1 + t*(y2-y1), t∈[0,1]
        // 代入w=0方程：m2*x + m5*y + m8 = 0
        const A = m[2]*(x2 - x1) + m[5]*(y2 - y1);
        if (A === 0) {
            // 整条边w值同号，无临界点
            continue;
        }
        const B = m[2]*x1 + m[5]*y1 + m[8];
        const t = -B / A;
        if (t >= 0 && t <= 1) {
            // 临界点在边上，计算变换后的极限方向
            const cx = x1 + t*(x2 - x1);
            const cy = y1 + t*(y2 - y1);
            const dx = m[0]*cx + m[3]*cy + m[6];
            const dy = m[1]*cx + m[4]*cy + m[7];
            // 临界点w趋近于0+，变换后沿(dx, dy)方向趋向无穷远，需纳入极值计算
            if (dx > 0) validTransformedPoints.push([Infinity, dy/dx * Infinity]);
            if (dx < 0) validTransformedPoints.push([-Infinity, dy/dx * -Infinity]);
            if (dy > 0) validTransformedPoints.push([dx/dy * Infinity, Infinity]);
            if (dy < 0) validTransformedPoints.push([dx/dy * -Infinity, -Infinity]);
        }
    }

    // 计算有效点的极值
    if (validTransformedPoints.length === 0) {
        return { minX: 0, minY: 0, maxX: 0, maxY: 0 };
    }
    let minX = Infinity, minY = Infinity;
    let maxX = -Infinity, maxY = -Infinity;
    for (const [x, y] of validTransformedPoints) {
        if (x < minX) minX = x;
        if (x > maxX) maxX = x;
        if (y < minY) minY = y;
        if (y > maxY) maxY = y;
    }
    return { minX, minY, maxX, maxY };
}

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