WebGL 地形网格在 128 像素后缩小答案

【问题标题】：WebGL terrain grid shrinking after 128 pixelsWebGL 地形网格在 128 像素后缩小
【发布时间】：2014-05-29 13:31:41
【问题描述】：

我正在使用 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 或更高，网格将停止增长并开始缩小。

【问题讨论】：

标签： javascript opengl-es webgl terrain heightmap

【解决方案1】：

我终于找到了问题所在。事实证明，WebGL 每个 ELEMENT_ARRAY_BUFFER 的索引限制为 65536 个。因此，如果您尝试加载具有大量顶点的对象，则会导致意外行为。

似乎有几个解决方案可以解决这个问题：

1) 在绑定索引缓冲区时启用 gl 扩展“OES_element_index_uint”并使用 Uint32Array。

2) 将您的 Mesh 拆分为块并同时渲染 1 个

3) 不要使用 gl.drawElements 而是使用 gl.drawArrays。

我最终使用了第三种选择。请记住，这可能不是最有效的方法，因为您需要多次定义同一个顶点。

现在的结果是一个好看的地形（在计算法线和应用光照之后）：http://goo.gl/EhE815

【讨论】：