WebGL манипулируя две текстуры на одной площади

Question

Я видел это вчера на

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

Первое изображение имеет 2 текстуры, которые вы можете скользить мыши вперед и назад, чтобы изменить границу 2 текстур. Я думал, что это выглядит действительно интересно и хочет попробовать.

Мои мысли: нужно ли рисовать 2 квадрата и обновлять их вершины каждый раз, когда мышь перемещается и перезагружает буфер для этих новых точек? Кажется, что может быть проще и эффективнее, поэтому я подумал, что увижу, есть ли у кого-нибудь идеи.

Answer 1

Использование простого HTML - это, безусловно, один из способов, как это предлагает LJ_1102, и для этого требуется, может быть, и более простой.

Процесс создания этого эффекта с WebGL будет выглядеть следующим образом:

создать холст, нарисовать один квадрат (два треугольника, в общей сложности) более всего холста, занять позицию мыши на холсте и вычислить процент, как далеко влево/справа от одного из ребер; и для этого квадрата используйте некоторый фрагмент-шейдер, похожий на этот ниже.

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); 

}