Javascript 缓冲区几何索引问题

我正在尝试将我在openFrameworks中编写的一些代码移植到THREE.JS中。代码使用柏林噪波生成一个风景。我这样做的目的是，首先创建一个静态索引数组，然后将顶点的位置放置在一个正方形网格中，每个位置按指定的距离移动。这样可以移动阵列中顶点的位置（上、下、左或右），以便在摄影机移动时，可以更新景观，并根据摄影机移动的方向生成新的景观带

对于每个顶点，将向索引数组添加6个索引，这些索引数组引用两个相邻三角形。我不想浪费内存为每个三角形存储每个顶点的副本

例如

v12 v11 v10
*----*----*
|\   |\   |
| \  | \  |
|  \ |  \ |
|   \|   \|
*----*----*
v02 v01 v00

例如，在顶点v00处，添加了索引{v00，v10，v11}和{v00，v11，v01}，等等

在我的openFrameworks代码中，这一切都非常有效！在经历了很多麻烦之后，我终于在THREE.js中实现了一些功能，但是我注意到，一旦我增加了顶点的数量，所有的事情都开始变得奇怪——三角形（看起来）到处连接，并且大量的顶点开始被跳过。目前，任何小于等于256*256的网格都可以正常工作，但一旦我增加了，我就开始看到所有的人工制品

我认为这可能是抵消的问题，但我真的不明白这意味着什么，或者如何用我的代码实现它。我见过其他人在按顺序（0，1，2，3，…）定义索引时成功地使用它，而不是为每个三角形使用3个单独的顶点（并按顺序为每个三角形添加每三个顶点）。我似乎不能让同样的事情发生

有什么想法吗？我下面有我的代码，以防万一。您可以看到我注释掉设置的部分

变异景观= { 尺寸：0， 大小：21845， 距离：0， 几何体：空， 网格：空， 位置：空， 法线：null， 颜色：空， 索引：空

generateVertex: function( r, c )
{
    var pos, color;

    // Set position
    pos = new THREE.Vector3();
    pos.x = this.distance * c;
    pos.z = this.distance * r;
    pos.y = -2 + 5*simplex.noise2D( 0.1*pos.x, 0.1*pos.z );

    // Set color
    color = new THREE.Color();
    color.setRGB( Math.random(1), 0, 0 );

    this.vertices.setXYZ( r * this.size + c, pos.x, pos.y, pos.z );
    this.colors.setXYZ( r * this.size + c, color.r, color.g, color.b );
},

generateIndices: function( i, r, c )
{
    this.indices[ i ] = ( r * this.size ) + c;
    this.indices[ i + 1 ] = ( ( r + 1 ) * this.size ) + c;
    this.indices[ i + 2 ] = ( ( r + 1 ) * this.size ) + ( c + 1 );

    this.indices[ i + 3 ] = ( r * this.size ) + c;
    this.indices[ i + 4 ] = ( ( r + 1 ) * this.size ) + ( c + 1 );
    this.indices[ i + 5 ] = ( r * this.size ) + ( c + 1 );

    /*this.indices[ i ] =  ( ( r * this.size ) + c ) % ( 3 * this.chunkSize );
    this.indices[ i + 1 ] = ( ( ( r + 1 ) * this.size ) + c ) % ( 3 * this.chunkSize );
    this.indices[ i + 2 ] = ( ( ( r + 1 ) * this.size ) + ( c + 1 ) ) % ( 3 * this.chunkSize );

    this.indices[ i + 3 ] = ( ( r * this.size ) + c ) % ( 3 * this.chunkSize );
    this.indices[ i + 4 ] = ( ( ( r + 1 ) * this.size ) + ( c + 1 ) ) % ( 3 * this.chunkSize );
    this.indices[ i + 5 ] = ( ( r * this.size ) + ( c + 1 ) ) % ( 3 * this.chunkSize ); */   
},

generatePoint: function( x, z )
{

},

generate: function( size, distance )
{        
    var sizeSquared, i;
    sizeSquared = size * size;
    i = 0;
    this.size = size;
    this.distance = distance;

    // Create buffer geometry
    this.geometry = new THREE.BufferGeometry();

    this.indices = new Uint16Array( 6*(size-1)*(size-1) );

    this.vertices = new THREE.BufferAttribute( new Float32Array( sizeSquared * 3 ), 3 );
    this.colors = new THREE.BufferAttribute( new Float32Array( sizeSquared * 3 ), 3 );

    // Generate points
    for( var r = 0; r < size; r = r + 1 )
    {
        for( var c = 0; c < size; c = c + 1 )
        {
            this.generateVertex( r, c );

            if( (r < size - 1) && (c < size - 1) )
            {
                this.generateIndices( i, r, c );
                i = i + 6;
            }
        }
    }

    // Set geometry
    this.geometry.addAttribute( 'index', new THREE.BufferAttribute( this.indices, 1 ) );
    this.geometry.addAttribute( 'position', this.vertices );
    this.geometry.addAttribute( 'color', this.colors );        

    //
    /*this.geometry.offsets = [];

    var triangles = 2 * ( size - 1 ) * ( size - 1 );
    var offsets = triangles / this.chunkSize;

    for( var j = 0; j < offsets; j = j + 1 )
    {
        var offset =
        {
            start: j * this.chunkSize * 3,
            index: j * this.chunkSize * 3,
            count: Math.min( triangles - ( j * this.chunkSize ), this.chunkSize ) * 3
        };

        this.geometry.offsets.push( offset );
    }*/

    var material = new THREE.MeshBasicMaterial( {vertexColors: THREE.VertexColors} );
    //var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });

    this.geometry.computeBoundingSphere();

    this.mesh = new THREE.Mesh( this.geometry, material );
    scene.add( this.mesh );

}

generateVertex:函数（r，c）
{
var-pos，颜色；
//设定位置
pos=新的三个向量3（）；
pos.x=此距离*c；
pos.z=此距离*r；
位置y=-2+5*单工噪声2d（0.1*位置x，0.1*位置z）；
//定色
颜色=新的三种颜色（）；
setRGB（数学随机（1,0,0）；
this.vertices.setXYZ（r*this.size+c，pos.x，pos.y，pos.z）；
this.colors.setXYZ（r*this.size+c，color.r，color.g，color.b）；
},
生成条件：函数（i、r、c）
{
指数[i]=（r*this.size）+c；
指数[i+1]=（（r+1）*this.size）+c；
指数[i+2]=（（r+1）*this.size）+（c+1）；
指数[i+3]=（r*this.size）+c；
指数[i+4]=（（r+1）*this.size）+（c+1）；
指数[i+5]=（r*this.size）+（c+1）；
/*指数[i]=（（r*this.size）+c）%（3*this.size）；
指数[i+1]=（（r+1）*this.size）+c）%（3*this.chunkSize）；
this.index[i+2]=（（r+1）*this.size）+（c+1））%（3*this.chunkSize）；
指数[i+3]=（（r*this.size）+c）%（3*this.chunkSize）；
this.index[i+4]=（（r+1）*this.size）+（c+1））%（3*this.chunkSize）；
this.index[i+5]=（（r*this.size）+（c+1））%（3*this.chunkSize）；*/
},
generatePoint：函数（x，z）
{
},
生成：函数（大小、距离）
{        
var sizeSquared，i；
sizeSquared=尺寸*尺寸；
i=0；
这个。大小=大小；
这个距离=距离；
//创建缓冲区几何图形
this.geometry=新的三个.BufferGeometry（）；
该指数=新UINT16阵列（6*（尺寸-1）*（尺寸-1））；
this.vertices=new THREE.BufferAttribute（new Float32Array（sizeSquared*3），3）；
this.colors=new THREE.BufferAttribute（new Float32Array（sizeSquared*3），3）；
//生成点
对于（变量r=0；r

WebGL基于OpenGL ES 2.0，它不支持32位索引缓冲区，因此，一旦顶点数超过256*256，索引缓冲区就无法再处理所有顶点

来自（第2.8节顶点阵列）：

支持使用ubyte和ushort索引编制索引。支持 对于uint索引，OpenGL ES 2.0不需要。如果 实现支持uint索引，它将导出OES元素 索引-uint扩展

假设这就是问题所在，您可以通过以下方式启用32位索引缓冲区：

var uintExt = gl.getExtension("OES_element_index_uint");
if (!uintExt) {
   alert("Sorry, this app needs 32bit indices and your device or browser doesn't appear to support them");
   return;
}

this.indices = new Uint16Array( 6*(size-1)*(size-1) );

this.indices = new Uint32Array( 6*(size-1)*(size-1) );