WebGL рельефная сетка после 128 пикселей

Question

Я работаю над алгоритмом highmap с помощью 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):

image1: 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