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 创建此效果的过程如下：

创建 canvas，在整个 canvas 上绘制一个正方形（总共两个三角形），将鼠标放在 canvas 上并计算距离的百分比 left/right是从边缘之一吗？并为那个正方形使用一些类似于下面这个的片段着色器。

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

}

webgl 在一个正方形上操作两个纹理

webgl manipulating two textures on one square

html

javascript

textures

webgl