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 矩陣轉化，這樣也能夠計算漫反射係數。