WebGL - 多个形状，但只渲染一个而不是其他形状

Question

我必须在一个简单的WebGL程序中绘制多个形状，并且出现一个对我来说似乎不可行的问题。如果我尝试只绘制一个形状，一切正常。

在“main”函数中，我创建以下实例并渲染它们

_coneInstance = new Cone();
_coneInstance.initCone();

_cylinderInstance = new Cylinder();
_cylinderInstance.initCylinder();

_sphereInstance = new Sphere();
_sphereInstance.initSphere();

renderAll();

这导致了问题，即所有三个对象都看起来像形状 在renderAll（）中，调用每个对象的render函数 - 这些函数如下所示。

看起来，锥体和圆柱体的所有顶点都被球体覆盖。 由于每个单独绘制的对象都正常工作，我不会发布顶点构建过程。

function Cone()
{   
    ...
    this.vertexBuffer = 0;

    this.initCone = function()
    {        
        this.generateCone();
        this.initBuffers();
    }

    this.generateCone = function()
    {        
        ...
    }

    this.initBuffers = function()
    {        
        this.vertexBuffer = gl.createBuffer();
        this.bind();
        gl.bufferData(gl.ARRAY_BUFFER, flatten(this.triangleList), gl.STATIC_DRAW);

        gl.enableVertexAttribArray(vPosition);
        gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);

        this.unbind();   
    }

    this.render = function()
    {    
        this.bind();
        gl.drawArrays(gl.TRIANGLE_FAN, 0, this.numTrianglesUpperPart);
        gl.drawArrays(gl.TRIANGLE_FAN, this.numTrianglesUpperPart, this.numTrianglesLowerPart);
        this.unbind();
    }   

    this.bind = function()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
        console.log(gl.isBuffer(this.vertexBuffer ));
    }

    this.unbind = function()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
    }    
}


function Cylinder()
{   
    ...
    this.vertexBuffer = 0;

    this.initCylinder = function()
    {        
        this.generateCylinder();
        this.initCylinderBuffers();
    }

    this.generateCylinder = function()
    {        
        ... 
    }

    this.initCylinderBuffers = function()
    {        
        this.vertexBuffer = gl.createBuffer();
        this.bind();
        gl.bufferData(gl.ARRAY_BUFFER, flatten(this.cylinderVertexList), gl.STATIC_DRAW);

        gl.enableVertexAttribArray(vPosition);    
        gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);

        this.unbind();     
    }

    this.render = function()
    {
        this.bind();        
        gl.drawArrays(gl.TRIANGLE_FAN, 0, this.cylinderNumTrianglesUpperPart);
        gl.drawArrays(gl.TRIANGLE_FAN, this.cylinderNumTrianglesUpperPart, this.cylinderNumTrianglesLowerPart);
        gl.drawArrays(gl.TRIANGLES, this.cylinderNumTrianglesUpperPart+this.cylinderNumTrianglesLowerPart, this.cylinderNumTrianglesMiddlePart);
        this.unbind();
    }    

    this.bind = function()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
        console.log(gl.isBuffer(this.vertexBuffer ));
    }

    this.unbind = function()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
    }
}



function Sphere()
{   
    ...    
    this.vertexBuffer = 0;

    this.initSphere = function()
    { 
        this.generateSphere();
        this.initSphereBuffers();      
    }

    this.generateSphere = function()
    { 
        ...
    }

    this.initSphereBuffers = function()
    {        
        this.vertexBuffer = gl.createBuffer();       
        this.bind();
        gl.bufferData(gl.ARRAY_BUFFER, flatten(this.unindexedVertices), gl.STATIC_DRAW);

        gl.enableVertexAttribArray(vPosition);     
        gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);

        this.unbind();
    }

    this.render = function()
    {
        this.bind();
        gl.drawArrays(gl.TRIANGLES, 0, this.numTriangles);
        this.unbind();
    }

    this.bind = function()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer);
        console.log(gl.isBuffer(this.vertexBuffer ));
    }

    this.unbind = function()
    {
        gl.bindBuffer(gl.ARRAY_BUFFER, null);
    }
}