three.js(八) bump map的生成 - 李勇2的个人空间 - 开源中国

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

原网址: 访问
创建于: 2018-10-13 16:38:05
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论