javascript - webgl manipulating two textures on one square -

i saw yesterday @

http://www.buzzfeed.com/kellyoakes/space-pictures-that-will-actually-make-you-think#.lhw29d3bmv

the first image has 2 textures can slide mouse , forth change boundary of 2 textures. thought looked interesting , wanted try it.

my thoughts are, need draw 2 squares , update vertices every time mouse moves , reset buffer these new points? seems there might easier , more efficient way thought i'd see if had ideas.

using plain html 1 way, suggested lj_1102, , needs, maybe simpler 1 too.

the process create effect webgl follows:

create canvas, draw 1 square (two triangles in total) on entire canvas, take mouse position on canvas , calculate percentage of how far left/right 1 of edges; , square use fragment shader similar 1 bellow.

uniform float percentage; uniform vec2 canvas_size; uniform sampler2d left_image; uniform sampler2d right_image;  void main() {     vec2 uv = gl_fragcoord.xy/canvas_size;     if ( uv.x<=percentage )         gl_fragcolor = texture2d(left_image,uv);     else         gl_fragcolor = texture2d(right_image,uv);  }