Three.js(九)perlin 2d噪音的生成

2019独角兽企业重金招聘Python工程师标准>>>

噪音的目的是为了增加随机性，使事物看起来更真实。但是简单的使用随机函数 并不 自然，因为随机函数产生的值与值之间并不连续。

要构造一个连续的2d噪音，简单的想法可以是： 在一个平面上所有整数点位置赋一个随机的值， 而整数网格中的点 则采用插值的方式得到值。

这里有两个问题， 一是整数格子上的值如何给， 二是插值的方式。

perlin噪声的解决方式是：

      整数格子上的计算一个叫做gradient的东西，在2d空间这个gradient是2维度向量， 它的分布具有各向同性的特点，也就是每个整数格子点都有相同的概率得到某个方向的gradient。 实现的时候， gradient可以从 8个方向的向量里面获取， 具体取哪一个是需要一个随机的过程的。。

        [1, 0], [1, 1],

        [0, 1], [-1, 1],

        [-1, 0], [-1, -1],

        [0, -1], [1, -1],

    获取一个点周围4个整数定点的 gradient之后， 将gradient和  4个点到该点的 向量 的内积 作为4个点的值，

    接着需要对这4个值进行插值。

    

     简单的2维 线性插值的方法是： 首先 沿 x方向 将 n00 n10 x插值， 再将 n01 n11 x插值， 最后将结果 沿y方向插值。

   def mix(u, v, a):

        return u*(1-a)+v*a

     但是这样插值结果不光滑， 可以调整插值的系数，  用函数 3*a*a - 2*a 重新映射，得到新的插值系数，用这个值插值就比较光滑， 且在端点两侧更加紧凑。

        float smooth(float u) {

        return 3.0*u*u-2.0*u;

      }

     接着是如何为每个定点选择gradient呢？ 这里有采用一个周期循环的方式。 例如对256个数字0-255 生成一个排列permutation， 这样平面上每个点

通过permutation[(X+permutation[Y%256])%256] 可以得到一个0-255 之间的某个值 接着将这个值 %8 就得到 其对应的gradient编号。

      这样做，虽然会导致平面上的一个循环的问题，但是噪声这种东西，本来就是局部的，在大的范围上看，噪声都是趋于0的， 因此问题不大。

     而如何生成一个 0-255的排列呢？ 有一种叫做 permutation polynomial 排列多项式的东西， 例如 (2*x*x+x)%256 这样一个函数，

   可以生成一个0-255的排列 只需要把 0-255的值代入就可以了。 

   实施上可以生成任意 2^k 的排列。

      http://en.wikipedia.org/wiki/Permutation_polynomial

     

     这样整个流程就是：

    一个 gradient数组

    一个permutation 

    计算一个点周围4个整数点的 gradient

    计算gradient和 4个整数点 到目标点的 向量的内积

    光滑插值积分的值。

    

     在Three.js 中我们声明一个平面 -1 1 -1 1. 使用平面的纹理坐标作为计算噪音的坐标点。

         var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 2, 1, 1), 

     但是有个问题，纹理坐标是从 0-1的， 因此平面上的点的临近的4个整数点都是一样的， 因此我们需要一个系数用来乘以纹理坐标，将平面的坐标空间扩大， 因此shader里面需要一个uniform float coff 作为系数。

    同时shader里面也需要一个uniform vec2 gradien[8]; 的2维度向量数组。

    但是如何访问这个数组呢？ shader里面数组的访问只能使用常数索引的方式， 当然我们可以把gradient放到1维纹理里面， 这样就可以通过texture得到对应的向量，这种方式似乎更好。

    因此需要一个 8*1的数据纹理， 注意纹理需要设置 needsUpdate 来将数据存入到显卡中。

    var texture = new THREE.DataTexture(data, 8, 1, THREE.RGBFormat);

    texture.needsUpdate = true;

    其中data是一个 8*3 的 UintArray

       var v = [

        [1, 0], [1, 1],

        [0, 1], [-1, 1],

        [-1, 0], [-1, -1],

        [0, -1], [1, -1],

    ];

    var data = new Uint8Array(3*8);

    for(var i in v) {

        data[i*3] = ~~((v[i][0]+1)/2*255);//R

        data[i*3+1] = ~~((v[i][1]+1)/2*255);//G

        data[i*3+2] = 0;//B

    }

      

    因此平面的material是：

       var plane = new THREE.Mesh(new THREE.PlaneGeometry(2, 2, 1, 1), 

        new THREE.ShaderMaterial({

            uniforms:{

                coff:{type:'f', value:512},

                gradient:{type:'t', value:0, texture:texture},

            },

            attributes:{

            },

            vertexShader: document.getElementById("vert").textContent,

            fragmentShader: document.getElementById("frag").textContent,

            }));

    

   而shader主要是fragment， vertex主要将纹理坐标传入到fragment中。

      uniform float coff;

    //uniform vec2 gradient[8];

    uniform sampler2D gradient;

    varying vec2 vUv;

    

    

    //计算随机的排列序列号 接着获取一个gradient

    float permu(float x){

        x = mod(x, 256.0);

        return mod((2.0*x*x+x), 256.0);

    }

    float smooth(float u) {

        return 3.0*u*u-2.0*u;

    }

    float myDot(vec2 p, float dx, float dy){

        return p.x*dx+p.y*dy;

    }

    vec2 getGradient(float v)

    {

        v = mod(v, 8.0);

        v = v/8.0;

        vec4 c = texture2D(gradient, vec2(v, 0));

        return vec2(c.r*2.0-1.0, c.g*2.0-1.0);

    }

    float noise(float x, float y) {

        float X = floor(x);

        float Y = floor(y);

        //偏移坐标

        float difx = x-X;

        float dify = y-Y;

        //约束到0-255

        X = mod(X, 255.0);

        Y = mod(Y, 255.0);

        //0 - 255

        float g00 = permu(x+permu(y));

        float g01 = permu(x+permu(y+1.0));

        float g11 = permu(x+1.0+permu(y+1.0));

        float g10 = permu(x+1.0+permu(y));

        

        //0-8 gradient * 偏移坐标

        float n00 = myDot(getGradient(g00), difx, dify);

        float n01 = myDot(getGradient(g01), difx, dify-1.0);

        float n11 = myDot(getGradient(g11), difx-1.0, dify-1.0);

        float n10 = myDot(getGradient(g10), difx-1.0, dify);

        //插值

        float u = smooth(difx);

        float v = smooth(dify);

        float nx0 = mix(n00, n10, u);

        float nx1 = mix(n01, n11, u);

        float nxy = mix(nx0, nx1, v);

        return nxy;

    }

  void main( void ) {

        float n = noise(vUv.x*coff, vUv.y*coff); 

        gl_FragColor = vec4(n, n, n, 1);

}

    

    

    

      

   

转载于:https://my.oschina.net/u/186074/blog/79977