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中需要再映射回来。