WebGL模糊滤镜致视频/ImageBitmap翻转的问题及解决咨询

针对你遇到的奇数次模糊导致ImageBitmap翻转、gl.UNPACK_FLIP_Y_WEBGL无效的情况，给你几个可行的解决思路：

1. 在Shader中直接翻转UV坐标 #

这是最直接的方案，不需要修改纹理本身，在片元着色器里调整采样坐标的Y轴：

// 原采样代码
vec4 color = texture2D(u_texture, v_uv);

// 修改后，翻转Y轴
vec4 color = texture2D(u_texture, vec2(v_uv.x, 1.0 - v_uv.y));

如果是多次模糊的链式处理，可以在第一次模糊时应用翻转，后续根据次数判断是否需要再次翻转；或者统一在最终输出的Shader里处理一次，确保最终画面方向正确。

2. 用Canvas先翻转ImageBitmap再传入WebGL #

创建一个临时Canvas，把ImageBitmap绘制进去时翻转，再从Canvas获取新的ImageBitmap或者直接用Canvas作为纹理源：

async function flipImageBitmapVertically(bitmap) {
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  const ctx = canvas.getContext('2d');
  
  // 翻转画布坐标系
  ctx.translate(0, canvas.height);
  ctx.scale(1, -1);
  ctx.drawImage(bitmap, 0, 0);
  
  // 返回翻转后的ImageBitmap
  return createImageBitmap(canvas);
}

注意createImageBitmap是异步操作，需要用async/await处理。这种方法兼容性好，适合所有支持ImageBitmap的浏览器。

3. 调整WebGL顶点着色器的UV变换 #

在顶点着色器里直接修改UV的Y轴，或者通过矩阵变换实现全局翻转：

// 顶点着色器示例
attribute vec2 a_position;
attribute vec2 a_uv;
varying vec2 v_uv;

void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
  // 翻转UV的Y轴
  v_uv = vec2(a_uv.x, 1.0 - a_uv.y);
}

这种方式把翻转逻辑放在顶点阶段，片元着色器可以保持原有采样逻辑，适合不想改动片元代码的场景。

额外说明 #

gl.UNPACK_FLIP_Y_WEBGL对ImageBitmap无效是因为浏览器对ImageBitmap的像素存储格式处理和普通HTMLVideoElement/Image不同，属于实现层面的差异。而多次模糊时的翻转问题，本质是WebGL纹理原点（左下角）和Canvas/视频的原点（左上角）方向不一致导致的，每次纹理传递都会反转Y轴，奇数次叠加后就会出现翻转，统一在某一个环节处理翻转就能解决问题。

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