1

我正在尝试绘制一个球体网格，稍后我可以将其修改为看起来像一棵树的叶子。但是，我的 pointsArray 中也有一些顶点位于从我的球体网格生成的顶点之前。我有一个索引缓冲区，其中包含用于按顺序绘制每个三角形的索引，但我需要访问顶点的最后一部分，即我的球体网格，而不需要索引缓冲区从其他顶点绘制三角形。在这里，我为顶点、颜色和纹理坐标创建缓冲区，以将它们传输到我的着色器代码。我还为球体网格创建了一个索引缓冲区。

function loadBuffers()
{   
    // Load the colors for the triangles and enable the attribute vColor
    var cBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );

    var vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vColor );


    // Load the vertices for the triangles and enable the attribute vPosition
    var vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );

    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    var tBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(texturesArray), gl.STATIC_DRAW );

    var vTexCoord = gl.getAttribLocation( program, "vTexCoord" );
    gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vTexCoord );

    iBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
    console.log(indexBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexBuffer), gl.STATIC_DRAW);
    iBuffer.itemSize = 1;
    iBuffer.numItems = indexBuffer.length;
}

这是我的球体生成代码：

function sphere()
{
    genSphereVertices(1, 10, 10, 0, 0, 1.5);
    plotSphere(10, 10);
}

function genSphereVertices(radius, latBands, lonBands, X, Y, Z)
{
    var normRadius = 1;

    for (var lat = 0; lat < latBands + 1; ++lat)
    {
        var theta = lat * Math.PI/latBands; //0 to pi
        var z = normRadius * Math.cos(theta);

        for (var lon = 0; lon < lonBands + 1; ++lon)
        {
            var phi = 2 * lon * Math.PI/lonBands;//0 to 2pi

            var u = Math.sqrt((normRadius * normRadius) - (z * z));

            var x = u * Math.cos(phi);
            var y = u * Math.sin(phi);

            //here I push my new x,y,z vertex to the pointsArray,
            //however pointsArray is also being used to draw a building
            //with textures
            pointsArray.push(vec4((X+x)*radius, (Y+y)*radius, (Z+z)*radius, 1.0));
            numVertices++;
            colorsArray.push(faceColors[lon%7]);
        }
    }
}

function plotSphere(latBands, lonBands)
{
    for (var lat = 0; lat < latBands; ++lat)
    {
        for (var lon = 0; lon < lonBands; ++lon)
        {
            //map indices to tell what order to connect each vertex
            var vA = lat * (lonBands + 1) + lon;
            var vB = vA + (latBands + 1);
            var vC = vA + 1;
            var vD = vB + 1;

            indexBuffer.push(vA);
            indexBuffer.push(vB);
            indexBuffer.push(vC);
            indexBuffer.push(vB);
            indexBuffer.push(vD);
            indexBuffer.push(vC);
        }
    }
}

这是我在绘制其余顶点后尝试绘制球体的地方。

function render()
{
    objOffset = 0;

    if (loadedImageCount == imageTextures.length)//textures on building
    {
        for (var i = 0; i < numFaces; ++i)//move through each face and map textures to specific faces
        {
            if (i < 60){//walls
                gl.uniform1i(fs_textureLoc, 0);
            }else if (i < 69){//building tops
                gl.uniform1i(fs_textureLoc, 1);
            }else if (i < 73){//slanted rooves
                gl.uniform1i(fs_textureLoc, 2);
            }else if (i < 93){//stairs
                gl.uniform1i(fs_textureLoc, 3);
            }
            //draw each face (each is a rect with 2 triangles)
            gl.drawArrays(gl.TRIANGLES, objOffset, twoTriangles);
            objOffset += twoTriangles;
        }
    }


    //now I want to draw the sphere, but the index buffer is starting from
    //the beginning of the pointsArray! :(
    gl.drawElements(gl.TRIANGLES, iBuffer.numItems, gl.UNSIGNED_SHORT, 0);

    //animate scene
    requestAnimFrame(render);
}

当此代码运行时，索引缓冲区从 pointsArray 的开头开始绘制，绘制整个建筑物。如何从 pointsArray 的偏移量开始仅使用球体网格的索引缓冲区

这是我尝试绘制网格之前的样子这是我尝试绘制球体网格时得到的结果

4

0 回答 0