Opengl ES之水印贴图

前言

水印贴图又称画中画，这种功能在Opengl中是如何实现的呢？我们可以简单地理解成两张纹理的叠加，一个纹理作为背景，另外一个纹理通过调整顶点坐标作为一个小的前景。

说到水印贴图的实现，很多朋友可能会想到通过mix混合函数实现，但是并不推荐这样做，抛开性能先不说，这种实现方式就不太方便后期拓展。今天我们就通过mix内建函数和
多纹理绘制两种方式实现一个水印贴图的功能。

mix混合贴图

先来看看我们用到的贴图资源，首先我们需要渲染的背景纹理是：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kt5G6ovP-1679379755166)(https://flyer-blog.oss-cn-shenzhen.aliyuncs.com/%E8%83%8C%E6%99%AF%E7%BA%B9%E7%90%86%E5%9B%BE.jpg)]

需要贴图的水印是：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zRmISlYt-1679379755167)(https://flyer-blog.oss-cn-shenzhen.aliyuncs.com/%E5%BF%83%E5%BD%A2%E6%B0%B4%E5%8D%B0.png)]

片元着色器:

#version 300 es
precision mediump float;
out vec4 FragColor;
in vec2 TexCoord;
uniform sampler2D ourTexture;
uniform sampler2D waterTexture;
void main()
{
   vec4 textColor = texture(ourTexture, TexCoord);
   vec4 waterColor = texture(waterTexture, TexCoord);
   FragColor = mix(textColor, waterColor, 0.7);
}

这个片元着色器很简单，就是传递两个纹理，一个是背景纹理，一个是水印纹理，然后通过mix内建混合函数将颜色混合渲染显示。

主要的渲染代码：

//    glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
//    glClear(GL_COLOR_BUFFER_BIT);
//    glUseProgram(program);
//
//    // 激活纹理
//    glActiveTexture(GL_TEXTURE2);
//    // 绑定纹理
//    glBindTexture(GL_TEXTURE_2D, textureId);
//    glUniform1i(textureSampler, 2);
//
//
//    // 激活纹理
//    glActiveTexture(GL_TEXTURE3);
//    // 绑定纹理
//    glBindTexture(GL_TEXTURE_2D, waterTextureId);
//    glUniform1i(waterTextureSampler, 3);
//
//    /**
//     * size 几个数字表示一个点，显示是两个数字表示一个点
//     * normalized 是否需要归一化，不用，这里已经归一化了
//     * stride 步长，连续顶点之间的间隔，如果顶点直接是连续的，也可填0
//     */
//    // 启用顶点数据
//    glEnableVertexAttribArray(positionHandle);
//    glVertexAttribPointer(positionHandle,2,GL_FLOAT,GL_FALSE,0,VERTICES);
//
//    // 纹理坐标
//    glEnableVertexAttribArray(textureHandle);
//    glVertexAttribPointer(textureHandle,2,GL_FLOAT,GL_FALSE,0,TEXTURE_COORD);
//
//    // 4个顶点绘制两个三角形组成矩形
//    glDrawArrays(GL_TRIANGLE_STRIP,0,4);
//
//    glUseProgram(0);
//
//    // 禁用顶点
//    glDisableVertexAttribArray(positionHandle);
//    if(nullptr != eglHelper){
//        eglHelper->swapBuffers();
//    }
//
//    glBindTexture(GL_TEXTURE_2D, 0);

运行起来看到效果是这样的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xl19zidf-1679379755167)(https://flyer-blog.oss-cn-shenzhen.aliyuncs.com/%E5%85%B3%E9%97%AD%E4%BA%86%E6%B7