DeepSeek + 码上掘金 学习shadertoy之 —— Catmull-Rom样条插值

之前在手机via浏览器上看了《Shader从入门到放弃》 raymarching 基础部分，居然看懂了，作者几段代码就把 ray marching sdf 讲明白了。

文章末尾还有可以运行的代码编辑器，这是掘金的新功能？ 手机上也能看代码、运行代码。 就是键盘老是弹出。

摘自知乎：

样条插值最常用的是贝塞尔曲线，但贝塞尔曲线不经过控制点。 如需经过控制点，用catmull-Rom样条插值更合适。

ok,先用shadertoy画个没有插值的折线，再进化为曲线，看看deepseek能给我们带来什么样的惊喜吧！

code.juejin.cn/pen/7484514…

（怎么嵌入这个码上掘金的编辑器？）

Shadertoy绘制折线

问：

shader toy 绘制一条x-y折线，折点预先指定，有6个，x轴均匀分布。折线上方无色，下方蓝色。

答：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalize coordinates to [0, 1]
    vec2 uv = fragCoord / iResolution.xy;
    float x = uv.x;
    float y = uv.y;

    // Define the y-coordinates of the 6 points
    float points[6];
    points[0] = 0.2;
    points[1] = 0.5;
    points[2] = 0.7;
    points[3] = 0.4;
    points[4] = 0.6;
    points[5] = 0.3;

    // Calculate the segment index
    int index = int(x * 5.0);
    index = clamp(index, 0, 4);

    // Linear interpolation between two points
    float x0 = float(index) / 5.0;
    float x1 = float(index + 1) / 5.0;
    float y0 = points[index];
    float y1 = points[index + 1];

    float lineY = mix(y0, y1, (x - x0) / (x1 - x0));

    // Draw blue if below the line, otherwise transparent
    if (y < lineY) {
        fragColor = vec4(0.0, 0.0, 1.0, 1.0); // Blue
    } else {
        fragColor = vec4(0.0, 0.0, 0.0, 0.0); // Transparent
    }
}

运行结果：

Shadertoy绘制曲线

再问：

很棒！现在请用Catmull-Rom样条插值法，将之绘制成曲线：

答：

使用 Catmull-Rom 样条插值 可以将折线平滑地连接成一条曲线。Catmull-Rom 是一种常用的插值方法，它通过相邻的四个点来计算平滑的曲线。

以下是基于 Catmull-Rom 样条插值的 ShaderToy 代码，将折线绘制成平滑曲线：

---

ShaderToy 代码

// Catmull-Rom 插值函数
float catmullRom(float t, float p0, float p1, float p2, float p3) {
    return 0.5 * (
        (2.0 * p1) +
        (-p0 + p2) * t +
        (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * t * t +
        (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * t * t * t
    );
}

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
    // Normalize coordinates to [0, 1]
    vec2 uv = fragCoord / iResolution.xy;
    float x = uv.x;
    float y = uv.y;

    // Define the y-coordinates of the 6 points
    float points[6];
    points[0] = 0.2;
    points[1] = 0.5;
    points[2] = 0.7;
    points[3] = 0.4;
    points[4] = 0.6;
    points[5] = 0.3;

    // Find the segment index
    int index = int(x * 5.0);
    index = clamp(index, 0, 4);

    // Get the four control points for Catmull-Rom
    float p0 = points[max(index - 1, 0)];
    float p1 = points[index];
    float p2 = points[index + 1];
    float p3 = points[min(index + 2, 5)];

    // Calculate the t value for interpolation
    float t = (x - float(index) / 5.0) * 5.0;

    // Interpolate y value using Catmull-Rom
    float curveY = catmullRom(t, p0, p1, p2, p3);

    // Draw blue if below the curve, otherwise transparent
    if (y < curveY) {
        fragColor = vec4(0.0, 0.0, 1.0, 1.0); // Blue
    } else {
        fragColor = vec4(0.0, 0.0, 0.0, 0.0); // Transparent
    }
}

运行结果：

完美，就是有亿些锯齿。。

完整deekseek对话：

扩展——围起来，画个多边形！

线性插值效果图：

Catmull-Rom插值效果图

像不像非洲地图！哈哈。

和前面一样的，只不过x轴替换为扇形的弧度

总结：

Catmull-Rom样条插值法提供了一种经过控制点的曲线绘制方法。在控制点均匀分布的时候十分有效且易于实现。

// Catmull-Rom 插值函数
float catmullRom(float t, float p0, float p1, float p2, float p3) {
    return 0.5 * (
        (2.0 * p1) +
        (-p0 + p2) * t +
        (2.0 * p0 - 5.0 * p1 + 4.0 * p2 - p3) * t * t +
        (-p0 + 3.0 * p1 - 3.0 * p2 + p3) * t * t * t
    );
}