创建一个精确纹理的地球网格

Question

我正在尝试使用 WebGL 在 javascript 中为地球建模，并开始按照 this tutorial.

进行建模

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

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

投影公式应该是正确的，我能够生成模板文件以确保 - 在 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

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

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

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

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

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

然而，从广义上讲，如果您想要为地球制作纹理（并且您可以根据需要生成地球的纹理），请使用立方体贴图。该方法将产生最少的失真并且需要最少的努力（除了获取立方体贴图纹理本身）。另外，您甚至不需要纹理坐标；只需将内插法线用于纹理坐标。

创建一个精确纹理的地球网格

Creating an accurately textured globe mesh

javascript

mesh

webgl