In the example, you see a plain image. You can access this texture in the editor below using u_texture. By mapping it to gl_FragColor, you can display the texture on the canvas. However, the output of the shader below appears flipped upside down.

WebGL textures are displayed upside down by default after processing by the GPU. This occurs due to differences in coordinate systems: WebGL's default texture coordinate system places the origin (0, 0) at the bottom-left, while most image formats (such as PNG and JPEG) and canvas elements in JavaScript have their origin at the top-left.

This issue is typically resolved by adjusting the coordinate system in WebGL before uploading the texture. However, in this task, you are asked to flip the texture vertically within the fragment shader. The fragment shader should take the texture and output the same texture, but flipped vertically, so it appears correctly on the screen, as shown in the example.