2024年Android最全Android-OpenGL-ES-实现动态（水波纹）涟漪效果（保证惊艳到你），腾讯社招测试开发面试

最新推荐文章于 2024-08-08 15:41:30 发布

2401_84556681

最新推荐文章于 2024-08-08 15:41:30 发布

阅读量581

点赞数 20

分类专栏：程序员文章标签： android 面试学习

本文链接：https://blog.csdn.net/2401_84556681/article/details/138877600

版权

程序员专栏收录该内容

130 篇文章 0 订阅

订阅专栏

总结：

各行各样都会淘汰一些能力差的，不仅仅是IT这个行业，所以，不要被程序猿是吃青春饭等等这类话题所吓倒，也不要觉得，找到一份工作，就享受安逸的生活，你在安逸的同时，别人正在奋力的向前跑，这样与别人的差距也就会越来越遥远，加油，希望，我们每一个人，成为更好的自己。

BAT大厂面试题、独家面试工具包,
资料包括数据结构、Kotlin、计算机网络、Framework源码、数据结构与算法、小程序、NDK、Flutter

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

需要这份系统化学习资料的朋友，可以戳这里获取

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

在构建我们想要的平滑函数时，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平滑函数绘制效果