为什么纹理会倒过来?从图片坐标追到 WebGL 采样坐标
图片行的方向、上传时的翻转和着色器 UV 的方向是三个独立环节。用带角落标记和箭头的图排查,先确定 UV 映射,再选择在上传时或采样时翻转。两处都翻转会把图片翻两次。
先固定问题
图片像素的行方向、上传时的翻转标志和 shader 的 UV 方向是三件独立的事。调试时用带文字、箭头与角标的图,先固定 UV,再选择只在上传或只在采样时翻转。两处同时翻转会把图像再次翻回去。
关键代码
// Raw WebGL upload:
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA,gl.UNSIGNED_BYTE,image);
// Alternative shader-side correction when upload is NOT flipped:
// vec4 color=texture2D(source,vec2(uv.x,1.0-uv.y));
按顺序验证
先检查原图是否上下正确,再加万花筒或折射变形。每次纹理更新都明确设置上传状态,因为 pixelStore 是上下文状态,不是只影响一次调用的参数。
适用范围和常见错误
离屏渲染纹理和 HTML 图片的来源不同,不能凭第一张测试图的修复方式统一翻转所有通道。