我创建了一个简单的three.js应用,该应用以3D形式渲染地图图块。每个图块都是一个单独的网格(一个具有10个高度和10个宽度的线段的平面),它使用THREE.ShaderMaterial
。为了访问高程数据,我使用了此Mapbox tileset。将两个png拼贴(高程和颜色)传递到用于解码高度值的简单着色器:
<script id="vertexShader" type="x-shader/x-vertex">
uniform sampler2D bump;
uniform sampler2D map;
varying float vAmount;
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 bumpData = texture2D( bump, uv );
vAmount = bumpData.x;
float height = (-0.4 + (bumpData.x * 256.0 * 256.0 + bumpData.y * 256.0 + bumpData.z)/1024.0);
vec3 newPosition = position;
newPosition.z = height;
gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
}
</script>
<script id="fragmentShader" type="x-shader/x-vertex">
uniform sampler2D bump;
uniform sampler2D map;
varying vec2 vUv;
varying float vAmount;
void main()
{
if(vAmount == 0.0) {
discard;
}
vec4 tile = texture2D(map, vUv);
gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0) + tile;
}
</script>
但是,附近的瓷砖似乎在边缘上的高度值有些不同。我尝试将THREE.NearestFilter
用于纹理,但没有任何效果。有办法摆脱这些白色条纹吗?