Mapbox高程数据精度

时间:2019-02-25 20:21:09

标签: javascript three.js mapbox mapbox-gl-js

我创建了一个简单的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>

screenshot 但是,附近的瓷砖似乎在边缘上的高度值有些不同。我尝试将THREE.NearestFilter用于纹理,但没有任何效果。有办法摆脱这些白色条纹吗?

0 个答案:

没有答案