“拼接”多个二维数组

Question

编辑（改写的问题）： 我将如何使用提供的 smoothstep 函数在相邻的二维数组之间创建渐变？每个数组的大小相同，包含范围在 0 和 1 之间的值，通过单纯形噪声从边缘到边缘平滑过渡。因此，我希望相邻数组值之间的差异最大为 0.04

function smoothstep (min, max, value) {
    var x = Math.max(0, Math.min(1, (value-min)/(max-min)));
    return x*x*(3 - 2*x);
};

---

我有 6 个二维数组，其中包含 0 到 1 之间的值来表示球体表面的高度。要遍历数组的所有值，我有这个：

for (var i = 0; i < cube.faces.length; i++) {
    for (var x = 0; x < cube.faces[i].heightMap.length; x++) {
        for (var z = 0; z < cube.faces[i].heightMap.length; z++) {
            if (x == 0 || x == cube.faces[i].heightMap.length - 1 || z == 0 || z == cube.faces[i].heightMap.length - 1) {
                switch (i) {
                    case 0:
                        if (x == 0) {
                            //match left of face 1 to top of face 4
                        } else if (z == 0) {
                            //match top of face 1 to top of face 6
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //match bottom of face 1 to top of face 5
                        } else {
                            //match right of face 1 to top of face 3
                        }
                        break;
                    case 1:
                        if (x == 0) {
                            //match left of face 2 to bottom of face 3
                        } else if (z == 0) {
                            //match top of face 2 to bottom of face 6
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //match bottom of face 2 to bottom of face 5
                        } else {
                            //match right of face 2 to bottom of face 4
                        }
                        break;
                    case 2:
                        if (x == 0) {
                            //match left of face 3 to right of face 5
                        } else if (z == 0) {
                            //~~match top of face 3 to right of face 1~~
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //~~match bottom of face 3 to left of face 2~~
                        } else {
                            //match right of face 3 to left of face 6
                        }
                        break;
                    case 3:
                        if (x == 0) {
                            //match left of face 4 to right of face 6
                        } else if (z == 0) {
                            //~~match top of face 4 to left of face 1~~
                        } else if (z == cube.faces[i].heightMap.length - 1) {
                            //~~match bottom of face 4 to right of face 2~~
                        } else {
                            //match right of face 4 to left of face 5
                        }
                        break;
                    case 4:
                        break;
                    case 5:
                        break;
                    default:
                        break;
                }
            }
        }
    }
}

但是，我在让面孔匹配时遇到了一些麻烦。调查这个我发现了一个名为“smoothstep”的函数，这似乎正是我所需要的。我不知道如何实现它，我还没有找到对我有用的解释。

function smoothstep(min, max, value) {
    var x = Math.max(0, Math.min(1, (value - min) / (max - min)));
    return x * x * (3 - 2 * x);
};

以下页面是我学习此方法的地方，但我无法理解要说的内容。如果有人有时间，您能解释一下我如何将其实施到我的情况中吗？ Link to related question

Answer 1

RE：Smoothstep，我在 Python 的 IDLE 解释器中快速重新创建了该函数，以便我可以将值插入其中并获得即时结果，据我所知，它所做的只是将你的最小值拉伸到 0，你的最大值为 1，然后相应地对 value 参数进行归一化。

例如，如果您提供参数(0.2, 0.4, 0.3) 0.3 介于 0.2 和 0.4 之间，因此该函数会将值标准化为大约 0.5

您是否只是想用 50 个数组行/列与边 A 和边 B 相交来创建一个实心的数字渐变？

如果是这样，我不知道smoothstep是否可行。

不管怎样，对于这样的事情，我会拿出一张纸，拿出一张纸，画出这样的东西，中间有数组 id 并标记边缘（假设在下面的例子中是一个骰子面图案）：

        |--A--|
        D  3  B
        |--C--|

        |--A--|
        D  1  B
        |--C--|

|--A--| |--A--| |--A--|
D  2  B D  4  B D  5  B
|--C--| |--C--| |--C--|

        |--A--|
        D  6  B
        |--C--|

然后在你的脑海中将它折叠起来（或将它剪下来并物理折叠立方体）以找到边缘对并绘制箭头指示从边缘向内进入面部的方向。 （我喜欢使用 N(orth)、E(ast)、S(outh)、W(est) 来可视化从边缘朝哪个方向前进。

前进方向：

N = Same columnID, Start at max RowID and decrement  (going north)
E = Same rowID, Start at min ColumnID and increment  (going east)
S = Same columnID, Start at min RowID and increment  (going south)
W = Same rowID, Start at max ColumnID and decrement  (going west)

您最终会得到一个类似var list = [1,B,W,, 5,A,S,], [4,B,W,, 5,D,E,]...etc...] 的列表（额外的逗号是有意的，表示列表中的空格，接下来填写）

现在，随着该列表的构建，您可以从边缘沿您为每个数组指定的任何方向获取值，25 行或列，将其插入到空白区域的列表中，您将获得绝对最小值和渐变的最大值。例如var list = [[1,B,W,0.3, 5,A,S,0.7],...etc...]

然后，如果它是一个实心渐变，您只需做一些简单的数学运算 step_value = Math.abs(list[n][3] - list[n][7])/50 然后在适当的方向上从每个边缘的起始值递增或递减，具体取决于它是最小值还是最大值。

如果它比二维数组边缘之间的直线渐变更复杂，我深表歉意，但可能需要更好地可视化您正在尝试做什么。

Answer 2

尝试解释smoothstep。您首先从两个值之间的线性插值开始，然后使用三次函数对其进行修改。

该图以绿色显示 0 和 1 之间的线性插值，红色显示平滑版本。我已将 x 的值限制在范围之外，但您也可以看到黑色立方的延续。

在函数中

function smoothstep(min, max, value) {
    var x = Math.max(0, Math.min(1, (value - min) / (max - min)));
    return x * x * (3 - 2 * x);
};

该函数将始终返回一个介于 0 和 1 之间的值。如果 value max 返回 1。如果 value 在 min 和 max 之间，则得到一个插值。

在数学上它是立方 3 x^2 - 2 x^3 的一部分。

---

我的第一直觉是在每个边缘应用Gaussian blurring。