前言
水印贴图又称画中画，这种功能在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
