创建精确纹理的地球网格

Question

我正在尝试使用 WebGL 在 javascript 中为地球建模，并通过关注 this tutorial 开始这样做。

网格上显示的纹理应具有最小的失真。为了避免扭曲的区域、距离和形状，我使用中断的正弦地图投影而不是球面投影。我使用this site 上的地球纹理进行测试。

我面临的问题是顶点渲染超出预期的纹理边界。顶点数量越高，看到的“外部”纹理就越少（从左到右，纬度和经度带计数每一步都加倍）：

投影公式应该是正确的，我能够生成一个模板文件 以确保 - 在 c# 中，我不太习惯 js：

那么，我的问题是，如何改进球体近似并避免在预期纹理区域之外显示像素？

相关代码：

// the projection used in the tutorial
function project_equirectangular(xangle, yangle) {
    return [xangle, yangle];
}

// the projection I intend to use to minimize distortion
function project_sinusoidial(xangle, yangle, segments) {
    var segment = Math.round(segments*yangle-1/2)+1;
    var segment_middle = (segment-1/2)/segments;
    return [
        (yangle-segment_middle)*Math.cos(Math.PI*(1/2-xangle))+segment_middle,
        xangle
    ];
}

// creating the spherical mesh for the globe
function initBuffers() {
    var M = 6;
    var N = 2*M;
    var radius = 1;
    var vertexPositionData = [];
    var normalData = [];
    var textureCoordData = [];
    for (var m=0; m <= M; m++) {
        var theta = Math.PI * m / M;
        var sinTheta = Math.sin(theta);
        var cosTheta = Math.cos(theta);
        for (var n=0; n <= N; n++) {
            var phi = 2 * Math.PI * n / N;
            var sinPhi = Math.sin(phi);
            var cosPhi = Math.cos(phi);
            
            var x = cosPhi * sinTheta;
            var y = cosTheta;
            var z = sinPhi * sinTheta;
            
            var proj = project_sinusoidial(m/M, n/N, 12);
            var u = 1 - proj[0];
            var v = 1 - proj[1];
            
            normalData.push(x);
            normalData.push(y);
            normalData.push(z);
            textureCoordData.push(u);
            textureCoordData.push(v);
            vertexPositionData.push(radius * x);
            vertexPositionData.push(radius * y);
            vertexPositionData.push(radius * z);
        }
    }
    var indexData = [];
    for (var m=0; m < M; m++) {
        for (var n=0; n < N; n++) {
            var first = (m * (N + 1)) + n;
            var second = first + N + 1;
            indexData.push(first);
            indexData.push(second);
            indexData.push(first + 1);
            indexData.push(second);
            indexData.push(second + 1);
            indexData.push(first + 1);
        }
    }
    planetVertexNormalBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, planetVertexNormalBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW);
    planetVertexNormalBuffer.itemSize = 3;
    planetVertexNormalBuffer.numItems = normalData.length / 3;
    planetVertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, planetVertexTextureCoordBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoordData), gl.STATIC_DRAW);
    planetVertexTextureCoordBuffer.itemSize = 2;
    planetVertexTextureCoordBuffer.numItems = textureCoordData.length / 2;
    planetVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, planetVertexPositionBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositionData), gl.STATIC_DRAW);
    planetVertexPositionBuffer.itemSize = 3;
    planetVertexPositionBuffer.numItems = vertexPositionData.length / 3;
    planetVertexIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, planetVertexIndexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), gl.STATIC_DRAW);
    planetVertexIndexBuffer.itemSize = 1;
    planetVertexIndexBuffer.numItems = indexData.length;
}

Answer 1

您的纹理坐标在您的球体上不连续。它们之间有很大的不连续性。因此，您无法使用通常的机制生成球体；你必须根据你想要纹理坐标的位置来生成它。也就是说，您的网格几何体必须与纹理的不连续性相匹配。

您的纹理中包含这些数据条。因此，这些条带必须是您的顶点生成的基础，包括位置。因此，对您而言，球体不是“球体”，而是一系列形成球形的抛物面带。每个单独的条带必须与其他条带分开；他们不能重用顶点。

同时，您必须确保每个条带的边缘生成与其相邻条带相同的位置值。否则，条带之间可能会出现间隙。

您需要做的另一件事是确保您的纹理在条带的边缘具有适当的数据。边缘三角形之间的纹理坐标插值以及纹理过滤有时会访问纹理“白色”区域中的值。因此，您需要在条带的边缘添加一个像素的附加信息，这样过滤就不会引入不需要的数据。这必须在每个 mipmap 级别完成。

通常的想法是简单地重复相邻的纹素。

但是，一般来说，如果您想要为地球仪设置纹理（并且您可以根据需要生成地球仪的纹理），请使用立方体贴图。该方法将产生最少的失真并且需要最少的努力（除了获取立方体贴图纹理本身）。另外，您甚至不需要纹理坐标；只需使用插值法线作为纹理坐标。