javascript - 像均匀的方形瓷砖一样绘制球体

Question

我正在尝试在 WebGL 中绘制球体，但我无法理解如何在 y 方向上进行迭代以使正方形看起来均匀。

我相信这个函数可能是对数的？我一直在研究 WGS84，但我无法掌握答案，但我敢打赌，有人确切地知道 Google 地图是如何创建球体的。

我正在用最简单的方法绘制一个球体，极坐标逻辑在 y 轴上。由于我使用的是极坐标逻辑，因此 y 方向是统一的，这会导致矩形的形状从 -90 变为 0，再从 0 变为 90：

function setGeometry () {
  let vertices = []

  for (let j = 0; j <= devisionCount; j++) {
    let lat = j * Math.PI / devisionCount
    let lat2 = (j + 1) * Math.PI / devisionCount
    for (let i = 0; i <= (devisionCount * 2); i++) {
      let lon = i * (Math.PI * 2) / (devisionCount * 2)
      let lon2 = (i + 1) * (Math.PI * 2) / (devisionCount * 2)
      vertices.push(radiusWide * Math.sin(lon) * Math.sin(lat)) // X
      vertices.push(radiusTall * Math.cos(lat))                 // Y
      vertices.push(radiusWide * Math.cos(lon) * Math.sin(lat)) // Z

      vertices.push(radiusWide * Math.sin(lon) * Math.sin(lat2)) // X
      vertices.push(radiusTall * Math.cos(lat2))                 // Y
      vertices.push(radiusWide * Math.cos(lon) * Math.sin(lat2)) // Z

      vertices.push(radiusWide * Math.sin(lon2) * Math.sin(lat)) // X
      vertices.push(radiusTall * Math.cos(lat))                  // Y
      vertices.push(radiusWide * Math.cos(lon2) * Math.sin(lat)) // Z
    }
  }

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW)
  return vertices.length
}

注意：显然我可以在这里做一个三角形条，但我正在做三角形，所以我的片段着色器更容易快速展示我正在努力的东西。

我在一个领域的尝试：

我正在尝试复制的内容（仔细查看白线，并注意到当我们接近两极时它保持接近矩形。

标签： javascriptwebgl