如何将数学函数移植和调试到着色代码中？

Question

我正在努力学习如何将这些技术应用于sdf呈现来自用数学画风景的景观。在视频中，Quilez展示了这个公式：

​

​

但我似乎不正确地将其实现到glsl中。我对着色器很陌生。到目前为止，这就是我所拥有的：

 #define PI 3.141593

// a_ij = 2 {uv(u+v)} - 1
float uv_to_cooef(in vec2 uv) {
    return 2.0 * fract(uv.x * uv.y * (uv.x + uv.y)) - 1.0;
}

// S(a,b,x) = 3λ^2 - 2λ^3
float smoothstep01(in float x) {
    return smoothstep(0.0, 1.0, x);
}

float terrain(in vec2 p) {
    vec2 ij = floor(p);
    vec2 i = vec2(1.0, 0.0);
    vec2 j = vec2(0.0, 1.0);
    float s = 500.0;
    float a = uv_to_cooef(s * fract(ij / PI));
    float b = uv_to_cooef(s * fract((ij + i) / PI));
    float c = uv_to_cooef(s * fract((ij + j) / PI));
    float d = uv_to_cooef(s * fract((ij + i + j) / PI));
    float s_xi = smoothstep01(p.x - ij.x);
    float s_yj = smoothstep01(p.y - ij.y);
    return a
        + (b - a) * s_xi
        + (c - a) * s_yj;
        + (a - b - c + d) * s_xi * s_yj;
}

// Use raymarching setup in https://www.shadertoy.com/view/tdS3DG but change map to:
vec2 map( in vec3 p, int id ) {
    return vec2(p.y - terrain(p.xz), 1.0);
}

我得到了无节制的垃圾：

​

​

调试将数学函数转换为glsl的一些好方法是什么？

用更简单的连续函数替换map会产生很好的结果：

vec2 map( in vec3 p, int id ) {
    float d2 = p.y + sin(p.x / 3.0) * cos(p.y / 7.0);
    return vec2(d2,2.0);
}

​

​

所以我认为这意味着我的函数不是连续的，但是如何调试它呢？将它分解为2d函数并在desmos上绘制它？

完成的sdf场景在着色玩具上，但我想了解如何从数学到那个。

Answer 1

原来我的问题是一个额外的分号，glsl没有抱怨下一行毫无意义的声明。

    return a
        + (b - a) * s_xi
        + (c - a) * s_yj; // bad semicolon
        + (a - b - c + d) * s_xi * s_yj;

我尝试调试的步骤：

• 将函数可视化为另一种格式。我把这个函数移植到desmos不连续。
• 我修好了我的污秽 ( a(i,j)的定义是错误的)，但无法看出固定版本与我的glsl代码有何不同。我的下一步是将函数简化为一个更简单的连续函数，然后对我的glsl代码进行同样的修改。
• 相反，我胡乱使用其他代码，无意中注意到了分号。那么运气呢？