WebGL Texture Y Flip
Image row direction, upload-time flipping and shader UV orientation are independent. Debug with labeled corners and arrows. Fix the UV mapping, then flip either on upload or in sampling; doing both flips the image twice.
Fix the problem and environment
Image row direction, upload-time flipping and shader UV orientation are independent. Debug with labeled corners and arrows. Fix the UV mapping, then flip either on upload or in sampling; doing both flips the image twice.
The controlling code
// 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));
Verify in order
Check orientation before adding kaleidoscope or refraction. Set upload state explicitly for updates because pixelStore belongs to the context, not a single call.
Scope and common mistakes
Render-target textures and HTML images have different origins; do not apply one fixture-specific flip blindly to every pass.