2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

地形生成通常使用高度圖， 而高度圖的生成可以使用繪圖工具，或者通過分形算法生成，例如square-diamond, ?fbm方法。
這里采用簡單求平均值+隨機(jī)波動的方法。




對于一個2^n+1 ?* ?2^n+1 的網(wǎng)格， 中心點(diǎn)的高度是四角點(diǎn)的平均值加隨機(jī)偏移， 邊上中點(diǎn)的高度值是邊兩端點(diǎn)的平均值加隨機(jī)偏移。
接著將偏移的幅度縮小， 計算四個較小方塊的頂點(diǎn)的高度值。
這樣隨機(jī)生成了高度。


接著構(gòu)造地形， 地形分割成2^n * 2^n 塊， 這樣頂點(diǎn)就有 2^n+1 ?* ?2^n+1 個?
? ? var geo = new THREE.PlaneGeometry(3, 3, WIDTH-1, HEIGHT-1);


上面生成了每個頂點(diǎn)的高度， 需要將高度值傳入shader中， 可以直接修改geo中的所有頂點(diǎn)的z值，來修改高度。


我們可以根據(jù)地形的高度來混合紋理，例如比較高的位置為石塊， 而低洼處為草地, 這個紋理的混合。
c2 = mix(c0, c1, (height-minHeight)/(maxHeight-minHeight))
c0是第一張紋理獲取的顏色， c1是第二張紋理獲取的顏色， 而minHeight maxHeight 是整個地形高度的方位， height是當(dāng)前高度。
c2 就是混合后的顏色。
shader如下，兩張紋理， 頂點(diǎn)在平面坐標(biāo)中的位置，?
紋理坐標(biāo)采用頂點(diǎn)的x, y 坐標(biāo)的小數(shù)部分。
? ? uniform sampler2D texture_grass;
? ? uniform sampler2D texture_rock;
? ? uniform float maxHeight;
? ? uniform float minHeight;
? ? varying vec3 pos;




void main( void ) {
? ? ? ? vec2 uv0;
? ? ? ??
? ? ? ? uv0.x = fract(pos.x);
? ? ? ? uv0.y = fract(pos.y);
? ? ? ??
? ? ? ? vec4 c0 = texture2D(texture_grass, uv2);
? ? ? ? vec4 c1 = texture2D(texture_rock, uv2);




? ? ? ? vec4 c2 = mix(c0, c1, (pos.z-minHeight)/(maxHeight-minHeight));


? ? ? ? gl_FragColor = c2;
? ? ?

}








而材質(zhì):
? ? var pmat = new THREE.ShaderMaterial({
? ? ? ? uniforms:{
? ? ? ? ? ? texture_grass:{type:'t', value:0, texture:THREE.ImageUtils.loadTexture("grassa512.bmp")},
? ? ? ? ? ? texture_rock:{type:'t', value:1, texture:THREE.ImageUtils.loadTexture("dirt512.bmp")},
? ? ??
? ? ? ? ? ? maxHeight:{type:'f', value:0},
? ? ? ? ? ? minHeight:{type:'f', value:1},
? ? ? ? },
? ? ? ? attributes:{
? ? ? ? },
? ? ? ? vertexShader: document.getElementById("vert").textContent,
? ? ? ? fragmentShader: document.getElementById("frag").textContent,
? ? ? ? //wireframe:true,
? ??
? ? });




其中紋理的值 0, 1 表示GPU內(nèi)部的紋理編號， 這個數(shù)量受硬件限制。


頂點(diǎn)shader


? ? varying vec3 pos;
void main( void ) {


? ? ? ? pos = position.xyz;
? ? ? ? gl_Position = projectionMatrix * modelViewMatrix * vec4(position.xyz, 1);

}

轉(zhuǎn)載于:https://my.oschina.net/u/186074/blog/79069

總結(jié)

以上是生活随笔為你收集整理的three.js（五） 地形纹理混合的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。