javascript - 使用着色器在 Canvas 上实现镜像效果 (webgl)

Question

我正在尝试了解有关如何在 webgl 中使用着色器的更多信息。目前我将尝试对图像应用“镜像”效果。 如果我使用普通 Canvas ，我可以通过简单地调用来完成此操作: 规模(1，-1)；

结果是这样的(从维基百科复制)

是否有一种使用着色器应用此效果的好方法？

Answer 1

尝试这样的方法(或 X 坐标变换的变体:))

void main(void)
{
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    gl_FragColor = texture2D(iChannel0, vec2(abs(0.5 - uv.x), uv.y));
}

这是 Shadertoy 中的上述图像。只需将纹理或视频分配到 iChannel0 即可。