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轴均匀分布。折线上方无色,下方蓝色。

答:

hlsl 复制代码
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 代码

glsl 复制代码
// 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对话:

相关推荐
10年前端老司机2 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星2 分钟前
vue实现微信聊天emoji表情
前端·javascript
極光未晚5 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
Rrvive7 分钟前
原型与原型链到底是什么?
javascript
極光未晚1 小时前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆1 小时前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
用户9272472502191 小时前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑2 小时前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者2 小时前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者2 小时前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端