【问题标题】:JavaScript simplex / perlin noiseJavaScript 单纯形 / perlin 噪声
【发布时间】:2012-01-14 09:16:30
【问题描述】:

我正在尝试在 JavaScript 中创建一个 perlin / simplex / value 噪声函数,该函数将产生类似于以下结果:

(注意:此图像已经应用了阈值。我想要它没有阈值。)

我已经在互联网上搜索了 2 天了。有很多链接解释噪音和大量代码,但在 JavaScript 中没有,每当我尝试转换它时,我都会得到奇怪的结果。以下是我的一些尝试:

我认为部分问题可能源于 JavaScript 中位运算符的使用,在这种情况下很难强制数字的类型。

我正在寻找的是一个工作示例,JavaScript 噪音(任何类型)。

我也愿意为与可能导致类似于我发布的图像(阈值之前)的模式或任何优化提示的参数有关的任何信息提供奖励,因为我需要它以尽可能快的速度运行尽可能(在 JavaScript 中)。

【问题讨论】:

标签: javascript algorithm perlin-noise procedural-generation simplex-noise


【解决方案1】:

我知道这已经很老了,但也许它对其他人仍然有用。我已经构建了一个将 Perlin 和 Simplex 噪声呈现到 HTML5 画布的 javascript 应用程序,请在此处查看:http://lencinhaus.github.com/canvas-noise

该应用程序允许调整噪声计算和渲染中涉及的每个参数,并保存生成的纹理。它还将参数添加到 URL,以便可以共享。 例如,this configuration 生成的纹理与您显示的纹理非常相似。

希望有帮助!

【讨论】:

    【解决方案2】:

    这是我最终得到的用于 2D/3D Perlin 噪声的代码。请注意,它使用 RequireJS 的 AMD 模块语法,但如果您不使用 AMD 加载程序,则可以将其去掉。

    define(
        [],
        function()
        {
            function fade(t)
            {
                return t * t * t * (t * (t * 6 - 15) + 10);
            }
    
            function lerp(t, a, b)
            {
                return a + t * (b - a);
            }
    
            function grad(hash, x, y, z)
            {
                // Convert lo 4 bits of hash code into 12 gradient directions.
                var h = hash & 15,
                    u = h < 8 ? x : y,
                    v = h < 4 ? y : h == 12 || h == 14 ? x : z;
                return ((h & 1) == 0 ? u : -u) + ((h & 2) == 0 ? v : -v);
            }
    
            function scale(n)
            {
                return (1 + n) / 2;
            }
    
            var p = new Array(512);
    
            var permutation = [
                151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140, 36, 103, 30, 69, 142, 8, 99,
                37, 240, 21, 10, 23, 190, 6, 148, 247, 120, 234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32,
                57, 177, 33, 88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71, 134, 139, 48, 27, 166,
                77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133, 230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143,
                54, 65, 25, 63, 161, 1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130, 116, 188, 159,
                86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250, 124, 123, 5, 202, 38, 147, 118, 126, 255, 82,
                85, 212, 207, 206, 59, 227, 47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44,
                154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98, 108, 110, 79, 113, 224, 232,
                178, 185, 112, 104, 218, 246, 97, 228, 251, 34, 242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51,
                145, 235, 249, 14, 239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121, 50, 45,
                127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243, 141, 128, 195, 78, 66, 215, 61, 156, 180
            ];
    
            for (var i = 0; i < 256; i++) {
                p[256 + i] = p[i] = permutation[i];
            }
    
            return {
                /** Returns a number between 0 and 1. */
                noise3d: function(x, y, z)
                {
                    // Find unit cube that contains point.
                    var X = Math.floor(x) & 255,
                        Y = Math.floor(y) & 255,
                        Z = Math.floor(z) & 255;
                    // Find relative x,y,z of point in cube.
                    x -= Math.floor(x);
                    y -= Math.floor(y);
                    z -= Math.floor(z);
                    // Compute fade curves for each of x,y,z.
                    var u = fade(x),
                        v = fade(y),
                        w = fade(z);
                    // Hash coordinates of the corners.
                    var A = p[X    ] + Y, AA = p[A] + Z, AB = p[A + 1] + Z,
                        B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z;
    
                    // Add blended results from 8 corners of cube.
                    return scale(
                        lerp(
                            w,
                            lerp(
                                v,
                                lerp(
                                    u,
                                    grad(p[AA], x, y, z),
                                    grad(p[BA], x - 1, y, z)
                                ),
                                lerp(
                                    u,
                                    grad(p[AB], x, y - 1, z),
                                    grad(p[BB], x - 1, y - 1, z)
                                )
                            ),
                            lerp(
                                v,
                                lerp(
                                    u,
                                    grad(p[AA + 1], x, y, z - 1),
                                    grad(p[BA + 1], x - 1, y, z - 1)
                                ),
                                lerp(
                                    u,
                                    grad(p[AB + 1], x, y - 1, z - 1),
                                    grad(p[BB + 1], x - 1, y - 1, z - 1)
                                )
                            )
                        )
                    );
                },
    
                /** Returns a number between 0 and 1. */
                noise2d: function(x, y)
                {
                    // Find unit square that contains point.
                    var X = Math.floor(x) & 255,
                        Y = Math.floor(y) & 255;
                    // Find relative x,y of point in square.
                    x -= Math.floor(x);
                    y -= Math.floor(y);
                    // Compute fade curves for each of x,y.
                    var u = fade(x),
                        v = fade(y);
                    // Hash coordinates of the corners.
                    var A = p[X    ] + Y, AA = p[A], AB = p[A + 1],
                        B = p[X + 1] + Y, BA = p[B], BB = p[B + 1];
    
                    // Add blended results from the corners.
                    return scale(
                        lerp(
                            v,
                            lerp(
                                u,
                                grad(p[AA], x, y, 0),
                                grad(p[BA], x - 1, y, 0)
                            ),
                            lerp(
                                u,
                                grad(p[AB], x, y - 1, 0),
                                grad(p[BB], x - 1, y - 1, 0)
                            )
                        )
                    );
                }
            };
        }
    );
    

    【讨论】:

      【解决方案3】:

      我想出了这个解决方案,它为我的用例提供了更好的结果:

      http://asserttrue.blogspot.com/2011/12/perlin-noise-in-javascript_31.html

      它使用了一个大的置换矩阵:

      var permutation = [ 151,160,137,91,90,15,
      131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,
      190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,
      88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166,
      77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,
      102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196,
      135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123,
      5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,
      223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9,
      129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228,
      251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107,
      49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254,
      138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180
      ];
      

      将其用作:

      pn = PerlinNoise()
      n = pn.noise( random_x, random_y, .8 )
      

      【讨论】:

        猜你喜欢
        • 2011-09-20
        • 2013-09-23
        • 2013-08-22
        • 1970-01-01
        • 2011-06-12
        • 2014-02-15
        • 1970-01-01
        • 1970-01-01
        • 2020-06-06
        相关资源
        最近更新 更多