CODEWITHSUNDEEP
javascriptcanvaswebglshader
Christian
Christian

Reputation: 7429

Mirror effect on a canvas using shaders (webgl)

I am trying to learn more about how to use shader within webgl. Currently I'll try to apply a "mirror" effect to an immage. If I use a plain canvas, I can do this by simply call: scale(1,-1);

The result is something like this (copied from Wikipedia) enter image description here

Is there a nice way to apply this effect using a shader?

Upvotes: 0

Views: 1021

Answers (1)

AKX
AKX

Reputation: 169075

Try something like this (or variations of the X coordinate transformation :) )

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

Here's an image of the above in Shadertoy. Just assign a texture or video into iChannel0.

Screenshot of mirror shader

Upvotes: 2

Related Questions