javascript - 我无法在 Javascript 中生成平滑的 Simplex 噪声

Question

我已经尝试了所有方法并阅读了我在互联网上看到的关于 Perlin Noise 或 Simplex Noise 的每一个链接，甚至剖析了一些我认为工作正常的 Javascript 示例。

但我仍然得到看起来非常随机的图像...基本上只是电视静态图像。

我的代码如下。我正在使用随机数生成器以便我可以为一个值设定种子，但我也尝试过使用 Math.random。

据我所知，在不同 Octave 音阶生成的不同图像没有正确插值，或者我从噪声函数转换为 RGB 值的方式可能是错误的(我已经尝试修复这两个问题这些问题……)。

if (!this.Prng) {
    var Prng = function() {
        var iMersenne = 2147483647;
        var rnd = function(seed) {
            if (arguments.length) {
                that.seed = arguments[0];
            }
            that.seed = that.seed*16807%iMersenne;
            return that.seed;
        };
        var that = {
            seed: 123,
            rnd: rnd,
            random: function(seed) {
                if (arguments.length) {
                    that.seed = arguments[0];
                }
                return rnd()/iMersenne;
            }
        };
        return that;
    }();
}

var CSimplexNoise = function(r)
{
    this.grad3 =    [[1,1,0],[-1,1,0],[1,-1,0],[-1,-1,0],[1,0,1],[-1,0,1],
                    [1,0,-1],[-1,0,-1],[0,1,1],[0,-1,1],[0,1,-1],[0,-1,-1]];
    var p = [];
    for(i = 0; i < 256; i++)
        p[i] = Math.floor(r.random()*256);
    this.perm = new Array();
    for(i = 0; i < 512; i++)
    {   
        this.perm[i] = p[i & 255];
    }

}


CSimplexNoise.prototype.dot = function(g,x,y)
{
    return g[0]*x + g[1]*y;
}

CSimplexNoise.prototype.GenerateSimplexNoise = function(x,y,octaves,persistence)
{
    var total = 0;

    for(i=0; i < octaves-1; i++)
    {
        var freq = Math.pow(2,i);
        var amp = Math.pow(persistence,i);

        total += this.InterpolatedNoise(x*freq,y*freq) * amp;
    }

    return total;
}

CSimplexNoise.prototype.InterpolatedNoise = function(x,y)
{
    var xInt = Math.floor(x);
    var xFrac = x - xInt;
    var yInt = Math.floor(y);
    var yFrac = y - yInt;

    var v1 = this.SmoothNoise(xInt,yInt);
    var v2 = this.SmoothNoise(xInt + 1,yInt)
    var v3 = this.SmoothNoise(xInt,yInt+1)
    var v4 = this.SmoothNoise(xInt + 1, yInt + 1);

    var i1 = this.LinearInterpolate(v1,v2,xFrac);
    var i2 = this.LinearInterpolate(v3,v4,xFrac);

    return this.CosineInterpolate(i1,i2,yFrac);
}

CSimplexNoise.prototype.LinearInterpolate = function(a,b,x)
{
    return a*(1-x) + b*x;
}

CSimplexNoise.prototype.CosineInterpolate = function(a,b,x)
{
    var f = (1 - Math.cos(x*Math.PI)) * 0.5;
    return a*(1-f) + b*f;
}

CSimplexNoise.prototype.SmoothNoise = function(x,y)
{
    var corners = (this.Noise(x-1,y-1) + this.Noise(x+1,y-1) + this.Noise(x-1,y+1) + this.Noise(x+1,y+1)) / 16;
    var sides = (this.Noise(x-1,y) + this.Noise(x+1,y) + this.Noise(x,y-1) + this.Noise(x+1,y+1)) / 8;
    var center = this.Noise(x,y) / 4;
    return corners + sides + center;
}

CSimplexNoise.prototype.Noise = function(xin, yin)
{
    var n0, n1, n2;

    var F2 = 0.5*(Math.sqrt(3)-1);
    var s = (xin+yin)*F2;
    var i = Math.floor(xin+s);
    var j = Math.floor(yin+s);

    var G2 = (3-Math.sqrt(3))/6;
    var t = (i+j)*G2;
    var X0 = i-t;
    var Y0 = j-t;
    var x0 = xin-X0;
    var y0 = yin-Y0;

    var i1,j1;
    if(x0 > y0)
    {
        i1 = 1;
        j1 = 0;
    }
    else
    {
        i1 = 0;
        j1 = 1;
    }

    var x1 = x0 - i1 + G2;
    var y1 = y0 - j1 + G2;
    var x2 = x0 - 1 + 2 * G2;
    var y2 = y0 - 1 + 2 * G2;

    var ii = i & 255;
    var jj = j & 255;
    var gi0 = this.perm[ii + this.perm[jj]] % 12;
    var gi1 = this.perm[ii + i1 + this.perm[jj + j1]] % 12;
    var gi2 = this.perm[ii + 1 + this.perm[jj + 1]] % 12;

    var t0 = 0.5 - x0 * x0 - y0 * y0;
    if(t0 < 0)
        n0 = 0;
    else
    {
        t0 *= t0;
        n0 = t0 * t0 * this.dot(this.grad3[gi0],x0,y0)
    }

    var t1 = 0.5 - x1 * x1 - y1 * y1;
    if(t1 < 0)
        n1 = 0;
    else
    {
        t1 *= t1;
        n1 = t1 * t1 * this.dot(this.grad3[gi1],x1,y1);
    }

    var t2 = 0.5 - x2 * x2 - y2 * y2;
    if(t2 <0 ) 
        n2 = 0;
    else 
    {
        t2 *= t2;
        n2 = t2 * t2 * this.dot(this.grad3[gi2],x2,y2);
    }

    return 70 * (n0 + n1 + n2);
}



$(document).ready(function(){

    var context = $('#screen')[0].getContext("2d");
    var w = 100;
    var h = 100;
    var data = context.createImageData(w,h);

    var simplexNoise = new CSimplexNoise(Prng);

    for(y = 0; y < h; y++)
    {
        for(x = 0; x < w; x++)
        {
        //  var newVal = ((simplexNoise.GenerateSimplexNoise(x,y,5,0.25) - -1) / (1 - -1)) * (255 - 0);
            var newVal2 = simplexNoise.GenerateSimplexNoise(x,y,5,0.5)
            var newVal = Math.floor(newVal2*256);
            newVal = Math.abs(newVal * 2)-0.5;
            data.data[((h * y) + x) * 4] = newVal;
            data.data[((h * y) + x) * 4+1] = newVal;
            data.data[((h * y) + x) * 4+2] = newVal;
            data.data[((h * y) + x) * 4+3] = 255;

        }
    }

    context.putImageData(data,0,0);

})

Answer 1

尝试采样 simplexNoise.GenerateSimplexNoise(x * 0.05, y * 0.05, 5, 0.5)问题可能是您的 sample 相距太远。 (这会导致明显的随机行为，因为在您对其进行采样之前，单纯形噪声可能会穿过超过半个波长)

修订:更新了上面的数字...您实际上可能需要减少样本，以便在给定的单工噪声波长中有 20 个。大多数单纯形噪声的平均波长为 1，因此 0.05 应该可以解决问题。此外，您可能希望一开始只用一个 Octave 进行测试。