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 矩阵转化，这样也可以计算漫反射系数。

来源：oschina

链接：https://my.oschina.net/u/186074/blog/79165

标签

法向量

var