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

webgl manipulating two textures on one square

本文关键字：操纵 两个 纹理 一个 webgl 正方形      更新时间：2023-09-26

我昨天在看到了这个

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

第一个图像有两个纹理，您可以前后滑动鼠标来更改这两个纹理的边界。我觉得这看起来真的很有趣，想试试。

我的想法是，每次鼠标移动并将缓冲区重置为这些新点时，我是否需要绘制2个正方形并更新它们的顶点？似乎有一种更简单、更有效的方法，所以我想看看是否有人有什么想法。

正如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);
}
相关文章：