WebGL的一个广场

Question

操纵两个纹理我这个昨天

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

第一个图像的纹理2可以在您的鼠标来回滑动来改变2个纹理的边界看到。我认为这看起来很有趣，想试试它。

我的想法是，我需要绘制2个方格并在每次鼠标移动时更新它们的顶点并将缓冲区重置为这些新点？似乎可能有一种更简单和更有效的方式，所以我想我会看看有没有人有任何想法。

Answer 1

正如LJ_1102所建议的那样，使用纯HTML肯定是一种方式，对于这种需求，也许也是一种简单的方法。

的加工工艺制造，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); 

}