我正在使用 webgl 研究高度图算法。我以为我让它工作了,但我意识到我的网格生成存在一个关键问题。如果我将网格大小设置为 > 128 次迭代,就会发生一些奇怪的事情:网格在 z 轴上停止增长,我最终得到一个矩形而不是方形网格。
这是我正在使用的代码:
/*
v1---v0
| / |
| / |
| / |
v2---v3
*/
var size = 5; // max size of terrain
var width = 128; // texture width
var l = size/width;
this.vertices = [];
for(var j=0; j<width; j++){ // y
for(var i=0; i<width; i++){ // x
var p0 = new Point3D(l*(i+1), 0, l * (j+1)); // Upper right
var p1 = new Point3D(l*i, 0, l * (j+1)); // Upper left
var p2 = new Point3D(l*i, 0, l * j); // Bottom left
var p3 = new Point3D(l*(i+1), 0, l * j); // Bottom right
var base = this.vertices.length/3;
this.vertices.push(p0.x, p0.y, p0.z); // v0
this.vertices.push(p1.x, p1.y, p1.z); // v1
this.vertices.push(p2.x, p2.y, p2.z); // v2
this.vertices.push(p3.x, p3.y, p3.z); // v3
// Add indices
this.indices.push(base); // 0
this.indices.push(base+1); // 1
this.indices.push(base+2); // 2
this.indices.push(base); // 0
this.indices.push(base+2); // 2
this.indices.push(base+3); // 3
}
}
/*** Later in my draw method: *****/
{....}
gl.drawElements(gl.LINE_STRIP, this.mesh.vjsBuffer.numItems, gl.UNSIGNED_SHORT, 0);
如果我使用 size=128 它工作正常;这是结果(大的垂直“线”代表 0、0、0):
图片1:http : //goo.gl/TxfM0R
当我尝试使用 256x256 或任何更高的图像尺寸时,问题就出现了:
图片2:http : //goo.gl/12ZE4U
注意中间的图像是如何在 z 轴上停止增长的!
经过反复试验,我发现限制是 128。如果我使用 129 或更高,网格将停止增长并开始缩小。