绘制闪耀星际：从入门到放弃（四）

2023-11-05 17:06:30

踏入星际闪烁的迷人世界：用着色器绘制闪耀的星光

在浩瀚的宇宙中，闪烁的繁星点缀着夜空，激发着我们的想象力和创造力。如今，我们可以借助着色器的强大功能，将这些星光点缀在我们的数字世界中，营造出令人着迷的视觉效果。踏入着色器的世界，让我们一起探索如何绘制出闪耀的星际，让像素绽放出宇宙的魅力。

初识着色器：掌控图形之力的片段代码

着色器是一种片段代码，赋予我们掌控图形硬件绘制和处理图形的方式。它们可以针对不同的目的而设计：

顶点着色器： 处理顶点数据，如位置和法线。
片段着色器： 处理像素数据，如颜色和纹理。

在本教程中，我们将使用片段着色器来绘制出闪耀的星际。

构建星际闪烁着色器：赋予像素以星光

我们的着色器将遵循以下步骤，生成星际闪烁的效果：

生成随机分布的星点坐标。
根据星点与像素的距离计算它们的亮度。
应用高斯模糊，让星光散发出柔和的光晕。
混合模糊后的星光和背景。

以下为着色器代码：

// 片段着色器代码

#version 330 core

in vec2 texCoord;

out vec4 fragColor;

uniform vec2 resolution;
uniform float time;

const float PI = 3.14159265358979323846;

void main() {
    // 生成随机星点坐标
    float r1 = fract(sin(dot(texCoord, vec2(12.9898, 78.233))) * 43758.5453);
    float r2 = fract(sin(dot(texCoord, vec2(56.5667, 43.7827))) * 74982.5873);
    vec2 starPos = vec2(r1, r2);

    // 计算星点亮度
    float distance = length(starPos - texCoord);
    float brightness = 1.0 - smoothstep(0.1, 0.3, distance);

    // 高斯模糊
    float sigma = 0.01;
    float radius = 5.0;
    float weightSum = 0.0;
    vec4 blurred = vec4(0.0);
    for (float y = -radius; y <= radius; y++) {
        for (float x = -radius; x <= radius; x++) {
            float weight = exp(-(x * x + y * y) / (2.0 * sigma * sigma));
            weightSum += weight;
            blurred += texture2D(tex, texCoord + vec2(x, y) / resolution) * weight;
        }
    }
    blurred /= weightSum;

    // 混合星光和背景
    fragColor = mix(blurred, vec4(0.0), brightness);
}

示例代码：点亮数字星空

要使用此着色器绘制出闪耀的星际，需要：

创建纹理： 用来存储星点坐标。
链接着色器： 将着色器与图形管道链接。
绘制全屏四边形： 将纹理作为输入，绘制一个全屏四边形。

以下示例代码演示了如何实现：

// 示例代码

// 创建纹理
GLuint starTexture;
glGenTextures(1, &starTexture);
glBindTexture(GL_TEXTURE_2D, starTexture);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, 1024, 1024, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);

// 加载着色器
GLuint shaderProgram;
shaderProgram = loadShaders("star.vert", "star.frag");

// 渲染
glUseProgram(shaderProgram);
glBindTexture(GL_TEXTURE_2D, starTexture);
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);