WebGL2添加旋转缩放变换后纹理闪烁问题咨询

在WebGL2环境中实现了可移动的纹理精灵，使用标准正交投影矩阵时无闪烁现象，但为矩阵添加旋转+缩放变换后，纹理开始出现闪烁且显示不稳定。该变换仅用于精灵定位，完成平移后会执行逆变换以保证精灵以原始形状绘制，核心变换代码如下：

if (transform === true) {
    matrix = m4.scale(matrix, scaleX, scaleY, 1);
    matrix = m4.zRotate(matrix, rotation)
};

matrix = m4.translate(matrix,
    dstX,
    dstY,
    0);

if (transform === true) {
    matrix = m4.zRotate(matrix, -rotation)
    matrix = m4.scale(matrix, scaleX, 1/scaleY, 1);
};

点击屏幕可切换变换开关，开启变换后精灵顶部的闪烁现象最为明显。请问该问题是否由子像素舍入误差（精灵未定位在屏幕像素位置）导致？若是，有什么修复方法？

是的，闪烁现象确实由子像素定位误差和变换矩阵计算的浮点精度偏差共同导致：

1. 变换+逆变换的矩阵运算会产生微小浮点误差，导致精灵顶点最终的屏幕坐标并非严格整数像素位置，WebGL的光栅化过程会对非整数坐标进行插值采样，引发画面抖动。
2. 你当前的逆变换步骤存在错误（逆缩放参数使用错误），加上变换顺序的累积影响，会让精灵实际渲染位置偏离理想的像素对齐点，这种偏差在精灵边缘（比如顶部）会被光栅化过程放大，表现为明显闪烁。

1. 修正逆变换的计算错误 #

当前逆缩放步骤中误用了scaleX，正确的逆缩放应该使用1/scaleX，修正后的核心代码：

if (transform === true) {
    matrix = m4.scale(matrix, scaleX, scaleY, 1);
    matrix = m4.zRotate(matrix, rotation)
};

matrix = m4.translate(matrix, dstX, dstY, 0);

if (transform === true) {
    matrix = m4.zRotate(matrix, -rotation);
    // 修正逆缩放参数为1/scaleX
    matrix = m4.scale(matrix, 1/scaleX, 1/scaleY, 1);
};

修正后矩阵运算的精度损失会大幅降低，能缓解大部分闪烁问题。

2. 手动对齐像素坐标 #

在完成所有矩阵变换后，将精灵的最终屏幕坐标舍入到最近的整数像素位置，可在顶点着色器中实现：

#version 300 es
precision highp float;

in vec2 a_position;
in vec2 a_texcoord;

uniform mat4 u_matrix;
uniform vec2 u_canvasSize; // 传入canvas宽高

out vec2 v_texcoord;

void main() {
  vec4 pos = u_matrix * vec4(a_position, 0.0, 1.0);
  // 将NDC坐标转换为屏幕像素坐标，取整后转回NDC
  vec2 screenPos = (pos.xy * 0.5 + 0.5) * u_canvasSize;
  screenPos = round(screenPos);
  pos.xy = (screenPos / u_canvasSize - 0.5) * 2.0;
  gl_Position = pos;

  v_texcoord = a_texcoord;
}

这种方法适合不需要亚像素平滑移动的场景，能彻底消除闪烁，但精灵移动会呈现“跳格”效果。

3. 优化纹理过滤方式 #

将纹理的放大/缩小过滤器改为线性过滤，减少子像素采样时的突变：

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

该方法能平滑闪烁，但会让纹理边缘稍微模糊，适合需要平滑移动的场景。

4. 调整变换顺序减少累积误差 #

将平移操作提前到变换之前，避免变换对平移分量的精度影响：

// 先创建正交投影矩阵
let orthoMatrix = new Float32Array([
    2 / gl.canvas.width, 0, 0, 0,
    0, -2 / gl.canvas.height, 0, 0,
    0, 0, 1, 0,
    -1, 1, 0, 1
]);

let matrix = m4.identity();
// 先平移到目标位置
matrix = m4.translate(matrix, dstX, dstY, 0);

if (transform === true) {
    // 以平移后的位置为中心执行变换和逆变换
    matrix = m4.scale(matrix, scaleX, scaleY, 1);
    matrix = m4.zRotate(matrix, rotation);
    matrix = m4.zRotate(matrix, -rotation);
    matrix = m4.scale(matrix, 1/scaleX, 1/scaleY, 1);
};

// 最后应用正交投影和纹理缩放
matrix = m4.multiply(matrix, orthoMatrix);
matrix = m4.scale(matrix, texWidth, texHeight, 1);

这种顺序调整能减少变换对平移坐标的精度影响，降低子像素偏差。

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