three.js(八) bump map的生成

bump Map 主要用于增长表面的法向量细节。例如一个平面其法向量到处相同，即便使用了纹理，光照下的表现仍然不够真实。这时能够扰动表面面片的方向量，从而造成比较真实的光照效果。

 

相似于地形生成，能够经过分形的方法生成平面表面的随机高度， 接着根据高度生成每一个位置的法向量。这里使用512*512的纹理， 可是因为分形须要513*513个点，因此最后纹理取计算结果的左上角便可。

过程分红三步：

生成513*513个高度数据，

生成512* 512的2D canvas 图形数据

    var canvas = document.createElement('canvas');

    canvas.width = CANW-1;

    canvas.height = CANH-1;

    var context = canvas.getContext('2d');

    context.fillStyle = "#000";

    context.fillRect(0, 0, CANW, CANH);

    var image = context.getImageData(0, 0, canvas.width, canvas.height);

    var imageData = image.data;

向canvas的数据中填充 向量数据， 这里须要将法向量 xyz 对应到rgb值中， -1，1 范围映射到0-255范围， 在shader中须要再映射回来。

    var dx = 2/(CANW-1);

    var dy = 2/(CANH-1);

    var dirX = new THREE.Vector3();

    var dirY = new THREE.Vector3();

    //var nor = new THREE.Vector3();

    for(var row = 0; row < CANW-1; row++)

    {

        for(var col = 0; col < CANH-1; col++)

        {

            var i = (row*(CANW-1)+col)*4;//图像数据顶点

            var j = row*CANW+col;//高度数据

            var x = -1+col*dx;

            var y = -1+col*dy;

            

            var lz = temp[row*CANW+(col-1+CANW)%CANW];

            var rz = temp[row*CANW+(col+1)%CANW];

            var uz = temp[(row-1+CANH)%CANH*CANW+col];

            var bz = temp[(row+1)%CANH*CANW+col];

            

            dirX.set(2*dx, 0, rz-lz);

            dirY.set(0, 2*dy, uz-bz);

            

            dirX.crossSelf(dirY).normalize();

            

            imageData[i] = ~~((dirX.x+1)/2*255);

            imageData[i+1] = ~~((dirX.y+1)/2*255);

            imageData[i+2] = ~~((dirX.z+1)/2*255);

        }

    }

接着建立Three的纹理对象， 须要手动设定纹理须要更新

     var texture = new THREE.Texture(canvas, new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping);

     texture.needsUpdate = true;

将纹理和光照传入到材质中

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

            new THREE.ShaderMaterial({

            uniforms:{

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

                light:{type:'v3', value:new THREE.Vector3(0, 0, 1)},

            },

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

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

            }));

在定点shader中须要传递纹理坐标，用于在fragmentShader 中获取法向量， 同时也须要传递平面的世界坐标。

    varying vec2 vUv;

    varying vec3 pos;

void main( void ) {

        vUv = uv;

        pos = (objectMatrix*vec4(position, 1)).xyz;

在片断shader里面：

    首先从纹理中取出法向量的值， 同时将法向量的值由0-255 对应的0-1的范围 转化到原始的范围 -1--1  

      uniform sampler2D bump;

      uniform vec3 light;//点光源

    varying vec2 vUv;

    varying vec3 pos;

void main( void ) {

        vec3 nor = texture2D(bump, vUv).xyz;//法向量 tangent空间扰动量

        nor = nor*2.0-1.0;

     注意这里的法向量实际上是属于tangent空间， 与物体空间有不一样， 可是对于平面来说是相同的， 所以只须要转化到世界空间再和光照方向相乘，计算漫反射系数。

      所以这里须要一个转化法向量坐标到世界坐标的矩阵， 即世界矩阵objectMatrix的逆的转置。

      也能够把光照方向 和 法向量都转化到视坐标中即经过modelView 矩阵 和 normalMatrix 矩阵转化，这样也能够计算漫反射系数。