WebGL构建低畸变纹理地球网格：解决纹理越界问题

阿华AIGC实验室

2026-5-27

解决WebGL地球模型纹理边界溢出问题

嘿，我来帮你排查这个纹理边界溢出的问题！从你提供的预览图（）能看到，顶点越多问题越轻，这也符合边界计算误差导致的表现——顶点越密，单个顶点的误差影响越小。既然你已经在C#里验证过投影公式正确，那问题大概率出在JS代码里的细节处理上，尤其是边界值的计算和纹理坐标的约束。

问题根源分析

你的project_sinusoidial函数在处理接近经度最大值（yangle=1）的顶点时，segment的计算会超出预期的12段范围，变成13。这会导致segment_middle计算出大于1的值，再加上北极/南极区域cos值为0，最终生成的纹理坐标会超出[0,1]的范围，就出现了你看到的纹理外区域。

解决方案

1. 修正分段计算的边界限制

在project_sinusoidial函数里，给计算出的segment加上范围限制，确保它不会超过设定的分段数（12），也不会低于1：

function project_sinusoidial(xangle, yangle, segments) {
  var segment = Math.round(segments*yangle - 1/2) + 1;
  // 新增：限制segment在1到segments之间，避免越界
  segment = Math.max(1, Math.min(segments, segment));
  var segment_middle = (segment - 1/2)/segments;
  return [
    (yangle - segment_middle)*Math.cos(Math.PI*(1/2 - xangle)) + segment_middle,
    xangle
  ];
}

这会解决yangle接近1时segment越界的问题，从根源上避免纹理坐标超出范围。

2. 钳制纹理坐标到[0,1]范围

为了保险起见，生成纹理坐标时直接把u和v限制在0到1之间，处理浮点计算带来的微小误差：

var proj = project_sinusoidial(m/M, n/N, 12);
// 用Math.max和Math.min钳制坐标，确保在合法范围内
var u = Math.max(0, Math.min(1, 1 - proj[0]));
var v = Math.max(0, Math.min(1, 1 - proj[1]));

3. 设置纹理包裹模式为CLAMP_TO_EDGE

即使有少量坐标溢出，也让WebGL自动取纹理边缘的像素，而不是重复纹理（默认的REPEAT模式会导致奇怪的重复效果）。在加载纹理的代码里添加：

gl.bindTexture(gl.TEXTURE_2D, planetTexture);
// S对应u轴，T对应v轴，设置为边缘钳制
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);