2024年最新Android-OpenGL-ES-实现动态（水波纹）涟漪效果（保证惊艳到你），安卓的面试题

本文链接：https://blog.csdn.net/2401_84538510/article/details/138563269

最后

我这里整理了一份完整的学习思维以及Android开发知识大全PDF。

当然实践出真知，即使有了学习线路也要注重实践，学习过的内容只有结合实操才算是真正的掌握。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

为什么要这样做？因为我们的根本目标就是为了实现一定区域内的缩小和放大效果，我们以平滑函数的输出值作为纹理采样坐标的偏移程度，当平滑函数输出正值时，采样坐标向圆外侧偏移，呈现缩小效果，而平滑函数输出负值时，采样坐标向圆内侧偏移，呈现放大效果。

另外，为了防止形变效果的跳变，我们还需要平滑函数满足在边界处输出值为 0 （或者接近于 0 ），表示此边界为是否发生形变的临界线。

水波纹效果实现

基于上节的原理分析，我们接下来需要找一个合适的平滑函数，根据以上特征首先我想到的函数是 -x^3 ，它满足了平滑和输出值（左正右负）的条件。

在构建我们想要的平滑函数时，fooplot.com/网站提供了在线函数绘图功能，可以很方便看出一个函数的生成曲线。

我们根据类似 -x^3 函数，构建如下的片段着色器，试验下效果是否符合预期。

#version 300 es
precision highp float;
in vec2 v_texCoord;
layout(location = 0) out vec4 outColor;
uniform sampler2D s_TextureMap;//采样器
uniform vec2 u_TouchXY;//点击的位置（归一化）
uniform vec2 u_TexSize;//纹理尺寸
uniform float u_Time;//归一化的时间
uniform float u_Boundary;//边界 0.1
void main()
{
float ratio = u_TexSize.y / u_TexSize.x;
vec2 texCoord = v_texCoord * vec2(1.0, ratio);//根据纹理尺寸，对采用坐标进行转换
vec2 touchXY = u_TouchXY * vec2(1.0, ratio);//根据纹理尺寸，对中心点坐标进行转换
float distance = distance(texCoord, touchXY);//采样点坐标与中心点的距离

if ((u_Time - u_Boundary) > 0.0
&& (distance <= (u_Time + u_Boundary))
&& (distance >= (u_Time - u_Boundary))) {
float diff = (distance - u_Time); //输入 diff
float moveDis = - pow(8 * diff, 3.0);//平滑函数 -(8x)^3 采样坐标移动距离
vec2 unitDirectionVec = normalize(texCoord - touchXY);//单位方向向量
texCoord = texCoord + (unitDirectionVec * moveDis);//采样坐标偏移（实现放大和缩小效果）
}

texCoord = texCoord / vec2(1.0, ratio);//转换回来
outColor = texture(s_TextureMap, texCoord);
}

绘制的逻辑：

void ShockWaveSample::Draw(int screenW, int screenH)
{
LOGCATE(“ShockWaveSample::Draw()”);
m_SurfaceWidth = screenW;
m_SurfaceHeight = screenH;
if(m_ProgramObj == GL_NONE || m_TextureId == GL_NONE) return;

m_FrameIndex ++;

UpdateMVPMatrix(m_MVPMatrix, m_AngleX, m_AngleY, (float)screenW / screenH);

glUseProgram (m_ProgramObj);
glBindVertexArray(m_VaoId);

GLUtils::setMat4(m_ProgramObj, “u_MVPMatrix”, m_MVPMatrix);

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, m_TextureId);
GLUtils::setFloat(m_ProgramObj, “s_TextureMap”, 0);

//float time = static_cast(fmod(GetSysCurrentTime(), 2000) / 2000);
float time = static_cast(fmod(m_FrameIndex, 150) / 120);
GLUtils::setFloat(m_ProgramObj, “u_Time”, time);

//设置点击位置
GLUtils::setVec2(m_ProgramObj, “u_TouchXY”, m_touchXY);
//设置纹理尺寸
GLUtils::setVec2(m_ProgramObj, “u_TexSize”, vec2(m_RenderImage.width, m_RenderImage.height));
//设置边界值
GLUtils::setFloat(m_ProgramObj, “u_Boundary”, 0.1f);

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, (const void *)0);

}

我们使用 y=-(8*x)^3 作为平滑函数得出来的效果图如下所示，虽然有水波纹效果，但是形变边界跳变严重，原来是该平滑函数没有满足，在边界处输出值为 0 的条件。

使用-8x^3平滑函数绘制效果