javascript - 创建精确纹理的地球网格
问题描述
我正在尝试使用 WebGL 在 javascript 中对地球进行建模,并按照本教程开始这样做。
网格上显示的纹理应具有最小的失真。为了避免扭曲的区域、距离和形状,我使用中断的正弦地图投影而不是球面投影。我使用在这个网站上找到的地球纹理进行测试。
我面临的问题是顶点呈现在预期的纹理边界之外。顶点数量越高,看到的“外部”纹理就越少(从左到右,纬度和经度带计数每一步都加倍):
投影公式应该是正确的,我能够生成一个模板文件以确保 - 在 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;
}
解决方案
您的纹理坐标在整个球体中不连续。它们之间有很大的不连续性。因此,您无法使用通常的机制生成球体;你必须根据你想要纹理坐标的位置来生成它。也就是说,您的网格几何必须与纹理的不连续性相匹配。
您的纹理中包含这些数据条。因此,这些条带必须是您的顶点生成的基础,包括位置。因此,对您而言,球体不是“球体”,而是一系列形成球形的抛物面带。每个单独的条带必须与其他条带分开;他们不能重用顶点。
同时,您必须确保每个条带的边缘生成与其相邻条带相同的位置值。否则,您可能会在条带之间出现间隙。
您需要做的另一件事是确保您的纹理在条带的边缘具有适当的数据。边缘三角形之间的纹理坐标插值以及纹理过滤有时会访问纹理“白色”区域中的值。因此,您需要在条带的边缘添加一个像素的附加信息,这样过滤就不会引入不需要的数据。这必须在每个 mipmap 级别完成。
通常的想法是简单地重复相邻的纹素。
然而,从广义上讲,如果你想为一个地球设置纹理(并且你可以根据需要生成地球的纹理),请使用立方体贴图。该方法将产生最少的失真并且需要最少的努力(除了获取立方体贴图纹理本身之外)。另外,您甚至不需要纹理坐标;只需使用插值法线作为纹理坐标。
推荐阅读
- python - Spyder 变量资源管理器中的颜色
- prometheus - 在警报时添加 Alertmanager 表达式查询
- python - 将箱线图放在散点图下方 [Plotly]
- python - 根据日期时间对字典内的数组进行排序
- javascript - 如何在 Matomo 图像跟踪中保存访问 url?
- python - 用于替换值的 Python 脚本根本不运行
- java - 如果文件名已经存在,如何让用户再次输入文本文件名?
- node.js - kafka 分区更改的侦听器 - Kafka 节点
- c# - C# 中的打印预览制作问题
- ios - Firebase iOS - 未定义符号:_GULResetLogger (arm64)