创意编程——ShaderJoy带你开启GLSL特效新境界

2024-02-05 20:21:22

ShaderJoy，一站式创意编程平台，为所有技艺水平的程序员提供创作舞台，让编程乐趣更上一层楼。本篇文章将向您展示如何使用ShaderJoy创建炫酷的GLSL特效，让您的春节创意编程作品脱颖而出。让我们直奔主题，开始动手吧。

三行代码领略GLSL魅力

// 片段着色器
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 屏幕坐标 (-1~1) 到纹理坐标 (0~1)
    vec2 uv = fragCoord.xy / iResolution.xy;

    // 生成同心圆
    vec2 center = vec2(0.5, 0.5);
    float radius = 0.5;
    float dist = distance(uv, center);
    float t = fract(dist * 10.0);

    // 应用梯度
    vec3 color = vec3(0.0);
    if(t < 0.2) {
        color = vec3(1.0, 0.0, 0.0);
    } else if(t < 0.4) {
        color = vec3(1.0, 1.0, 0.0);
    } else if(t < 0.6) {
        color = vec3(0.0, 1.0, 0.0);
    } else if(t < 0.8) {
        color = vec3(0.0, 0.0, 1.0);
    } else {
        color = vec3(1.0, 0.0, 1.0);
    }

    // 设置输出颜色
    fragColor = vec4(color, 1.0);
}

效果演示：吉星高照虎年鸿运

打开ShaderJoy，粘贴以上代码，点击运行，就能看到“吉星高照虎年鸿运”的字样在屏幕上绽放。红色的“吉星高照”和金色的“虎年鸿运”交相辉映，交织成一幅喜庆祥和的新春图景。

深入理解核心代码

虽然只有短短三行，但每一行代码都至关重要，共同构建了这幅生动的画面。

vec2 uv = fragCoord.xy / iResolution.xy;

这一行代码将屏幕坐标转化为纹理坐标。

vec2 center = vec2(0.5, 0.5);
float radius = 0.5;
float dist = distance(uv, center);

这些代码定义了同心圆的中心位置和半径，并计算出当前像素与圆心的距离。

float t = fract(dist * 10.0);

这一行代码将距离值映射到0到1之间，为后续的渐变色提供基础。

vec3 color = vec3(0.0);

这一行代码初始化输出颜色为黑色。

if(t < 0.2) {
    color = vec3(1.0, 0.0, 0.0);
} else if(t < 0.4) {
    color = vec3(1.0, 1.0, 0.0);
} else if(t < 0.6) {
    color = vec3(0.0, 1.0, 0.0);
} else if(t < 0.8) {
    color = vec3(0.0, 0.0, 1.0);
} else {
    color = vec3(1.0, 0.0, 1.0);
}