涟漪的艺术：用 OpenGL ES 实现逼真的水波纹效果

2023-11-11 20:42:58

在数字领域的浩瀚海洋中，有这样一种效果，它宛如石子投入池塘，激起的涟漪向外扩散，在平静的表面留下难以忘怀的印记。这种涟漪效果不仅令人着迷，更赋予了互动体验以别样的生机和活力。而 OpenGL ES，作为一种功能强大的 3D 图形库，为我们提供了实现逼真涟漪效果的强大工具。

拥抱 OpenGL ES 的涟漪魅力

借助 OpenGL ES 的强大功能，我们可以突破传统 3D 坐标系中修改 z 分量的局限性，创造出更为逼真的水波纹效果。这其中的关键在于利用 fragment shader 中的纹理坐标，通过修改纹理坐标的值来实现波纹的动态扩散。

踏上涟漪之旅

要实现这一效果，我们需要按照以下步骤进行：

创建纹理： 首先，我们需要创建一个纹理，该纹理包含涟漪图案。此纹理将作为我们动态涟漪效果的基础。
编写 fragment shader： 在 fragment shader 中，我们将修改纹理坐标，以实现涟漪的扩散效果。这一步是实现逼真涟漪效果的核心。
响应用户输入： 当用户点击屏幕时，我们需要将点击位置传递给 fragment shader，以便将其作为涟漪的中心。
实时渲染： 最后，我们将使用 OpenGL ES 进行实时渲染，将涟漪效果应用到场景中。

代码探索

以下是实现这一效果的示例代码：

// fragment shader
uniform sampler2D texture;
uniform vec2 center;
uniform float radius;
uniform float time;

void main() {
    vec2 texCoord = gl_FragCoord.xy / textureSize(texture, 0);
    float distance = distance(texCoord, center);
    float wave = sin(distance * radius - time) * 0.5 + 0.5;
    gl_FragColor = texture2D(texture, texCoord + wave * normalize(texCoord - center));
}

// vertex shader
attribute vec3 position;
void main() {
    gl_Position = vec4(position, 1.0);
}

// C++ 代码
// 创建纹理
GLuint texture = ...;

// 创建 shader 程序
GLuint program = ...;

// 获取 uniform 位置
GLint centerLocation = glGetUniformLocation(program, "center");
GLint radiusLocation = glGetUniformLocation(program, "radius");
GLint timeLocation = glGetUniformLocation(program, "time");

// 设置纹理和 uniform
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, texture);

glUniform1i(glGetUniformLocation(program, "texture"), 0);
glUniform2f(centerLocation, clickPosition);
glUniform1f(radiusLocation, rippleRadius);
glUniform1f(timeLocation, time);

// 绑定顶点数据
glBindBuffer(GL_ARRAY_BUFFER, ...);
glVertexAttribPointer(..., ...);

// 启用顶点属性
glEnableVertexAttribArray(0);

// 绘制
glDrawArrays(GL_TRIANGLES, 0, ...);