opengl shader实现多个同心圆环循环扩散效果 不用纹理图片

要实现这个效果，可以使用OpenGL的着色器语言GLSL来编写着色器程序。具体的实现步骤如下：

1. 定义顶点着色器程序，将顶点坐标传递给片段着色器。

#version 330 core
layout (location = 0) in vec3 aPos;

void main()
{
    gl_Position = vec4(aPos, 1.0);
}

2. 定义片段着色器程序，根据顶点坐标计算出每个像素点的颜色值。

#version 330 core
out vec4 FragColor;

uniform float time;
const int num_rings = 5;  // 圆环数量
const float speed = 0.2;  // 扩散速度
const float radius_step = 0.1;  // 圆环半径步长

void main()
{
    vec2 uv = gl_FragCoord.xy / vec2(800, 600);  // 屏幕坐标系转换到纹理坐标系
    float r = 0.0;
    for (int i = 0; i < num_rings; i++) {
        float radius = 0.1 + float(i) * radius_step;
        float offset = time * speed - float(i) * 0.2;
        float alpha = max(0.0, radius - length(uv - vec2(0.5 + offset, 0.5)));
        r += alpha;
    }
    FragColor = vec4(vec3(r), 1.0);
}

在片段着色器中，我们定义了一些常量和变量来控制圆环的数量、扩散速度和半径步长。通过循环计算每个像素点到圆心的距离，根据距离和半径的关系来计算出每个像素点的颜色值。

3. 在主程序中，创建一个帧缓冲对象，并将片段着色器渲染的结果绘制到屏幕上。

// 创建帧缓冲对象
unsigned int framebuffer;
glGenFramebuffers(1, &framebuffer);
glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);

// 创建纹理附件
unsigned int texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, 800, 600, 0, GL_RGB, GL_UNSIGNED_BYTE, NULL);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, texture, 0);

// 检查帧缓冲是否完整
if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE)
    std::cout << "ERROR::FRAMEBUFFER:: Framebuffer is not complete!" << std::endl;

// 渲染循环
while (!glfwWindowShouldClose(window))
{
    float time = glfwGetTime();

    // 渲染到帧缓冲
    glBindFramebuffer(GL_FRAMEBUFFER, framebuffer);
    glViewport(0, 0, 800, 600);
    glClear(GL_COLOR_BUFFER_BIT);
    shader.use();
    shader.setFloat("time", time);
    glBindVertexArray(VAO);
    glDrawArrays(GL_TRIANGLES, 0, 6);

    // 渲染到屏幕
    glBindFramebuffer(GL_FRAMEBUFFER, 0);
    glViewport(0, 0, 800, 600);
    glClear(GL_COLOR_BUFFER_BIT);
    screenShader.use();
    glBindVertexArray(screenVAO);
    glBindTexture(GL_TEXTURE_2D, texture);
    glDrawArrays(GL_TRIANGLES, 0, 6);

    glfwSwapBuffers(window);
    glfwPollEvents();
}

在主程序中，我们创建了一个帧缓冲对象，并将片段着色器渲染的结果绘制到帧缓冲对象中。然后再将帧缓冲对象中的纹理绘制到屏幕上。这样就可以实现多个同心圆环循环扩散的效果了。