如何在WebGL中实现图像翻转？

方法1：修改顶点着色器的UV坐标 #

WebGL纹理的UV坐标默认以(0,0)对应纹理左下角、(1,1)对应右上角。要实现翻转，只需对UV分量取反：

• 垂直翻转：取反y分量
• 水平翻转：取反x分量
• 同时翻转：x、y分量都取反

示例顶点着色器代码：

attribute vec2 a_position;
attribute vec2 a_texCoord;
varying vec2 v_texCoord;

void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
  // 垂直翻转
  v_texCoord = vec2(a_texCoord.x, 1.0 - a_texCoord.y);
  // 水平翻转：vec2(1.0 - a_texCoord.x, a_texCoord.y)
  // 同时翻转：vec2(1.0 - a_texCoord.x, 1.0 - a_texCoord.y)
}

片元着色器保持常规纹理采样即可：

precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texCoord;

void main() {
  gl_FragColor = texture2D(u_texture, v_texCoord);
}

方法2：加载纹理时自动翻转 #

通过gl.pixelStorei设置UNPACK_FLIP_Y_WEBGL参数，让WebGL在加载纹理时自动完成垂直翻转，适合一次性固定纹理方向的场景。

示例JavaScript代码：

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 开启垂直翻转
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

// 加载图像到纹理
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

// 设置纹理参数
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

// 后续加载其他纹理无需翻转时，记得关闭：
// gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);

方法3：用矩阵变换实现动态翻转 #

通过顶点着色器中的变换矩阵实现翻转，适合需要动态切换翻转状态的场景。

示例顶点着色器代码：

attribute vec2 a_position;
attribute vec2 a_texCoord;
uniform mat2 u_flipMatrix;
varying vec2 v_texCoord;

void main() {
  gl_Position = vec4(a_position, 0.0, 1.0);
  v_texCoord = u_flipMatrix * a_texCoord;
}

JavaScript中传递矩阵：

// 垂直翻转矩阵
const flipVertical = new Float32Array([1, 0, 0, -1]);
// 水平翻转矩阵
const flipHorizontal = new Float32Array([-1, 0, 0, 1]);
// 同时翻转矩阵
const flipBoth = new Float32Array([-1, 0, 0, -1]);

// 传递矩阵到着色器
const matrixLoc = gl.getUniformLocation(program, 'u_flipMatrix');
gl.uniformMatrix2fv(matrixLoc, false, flipVertical);

注：使用矩阵翻转时，若出现图像偏移，可配合vec2(0.5, 0.5)的坐标偏移调整原点位置。

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