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_fragcol...