Сетка ландшафта WebGL сжимается после 128 пикселей

Question

Я работаю над алгоритмом карты высот, используя 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);

Если я использую размер =128, он работает нормально; это результат (большая вертикальная "линия" представляет 0, 0, 0):

Изображение 1: http://goo.gl/TxfM0R

Проблема возникает, когда я пытаюсь использовать изображение размером 256x256 или более:

Изображение 2: http://goo.gl/12ZE4U

Обратите внимание, как изображение посередине перестало расти по оси Z!

После некоторых проб и ошибок я обнаружил, что предел составляет 128. Если я использую 129 или выше, сетка перестает расти и начинает уменьшаться.

Answer 1

Я наконец узнал, в чем проблема. Оказывается, что WebGL имеет ограничение в 65536 индексов на ELEMENT_ARRAY_BUFFER. Поэтому, если вы попытаетесь загрузить объекты с большим количеством вершин, это приведет к неожиданному поведению.

Кажется, есть несколько решений для решения этой проблемы:

1) включите расширение gl "OES_element_index_uint" и используйте Uint32Array при привязке вашего индексного буфера.

2) Разделите вашу сетку на куски и визуализируйте 1 за раз

3) Не используйте gl.drawElements, а вместо этого gl.drawArrays.

Я закончил тем, что использовал 3-й вариант. Помните, что это может быть не самый эффективный способ, так как вам нужно определять одну и ту же вершину несколько раз.

Результатом теперь является хорошо выглядящий ландшафт (после вычисления нормалей и применения освещения): http://goo.gl/EhE815