webgl丢失对javascript中对象的引用

Question

Im trying to use an objective approach with WebGL. I have three variables that I want to dyanmically rename. I want this because I will have many variations of the same variable with other names so I want to make the one buffer that creates this. This buffer will be dynamically give a name based on the objects name.
Here is how I create the variables:

    var VertexPositionBuffer = [];
    var VertexColorBuffer = [];
    var VertexIndexBuffer = [];


    function setBufferName(Planets)
    {
        for(var i = 0; i < Planets.length; i++)
        {
            VertexPositionBuffer[i] = Planets[i].name+"VertexPositionBuffer";
            VertexColorBuffer[i] = Planets[i].name+"VertexColorBuffer";
            VertexIndexBuffer[i] = Planets[i].name+"VertexIndexBuffer";
        }
    }

Planets is an array. Currently the names are being set to "Sun" and "Mercury".
In initBuffers(Planets) I create the different gl buffers and loose reference to them.

function initBuffers(Planets) 
    {
        for(var i  = 0; i < Planets.length; i++)
        {
            VertexPositionBuffer[i] = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, VertexPositionBuffer[i]);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(Planets.vertices), gl.STATIC_DRAW);
            VertexPositionBuffer[i].itemSize = 3;
            VertexPositionBuffer[i].numItems = 24;
            VertexColorBuffer[i] = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, VertexColorBuffer[i]);
            var unpackedColors = [];
            for (var j in Planets.colorArray) 
            {
                var color = Planets.colorArray[j];
                for (var j=0; j < 4; j++) 
                {
                    unpackedColors = unpackedColors.concat(color);
                }
            }
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW);
            VertexColorBuffer[i].itemSize = 4;
            VertexColorBuffer[i].numItems = 24;
            VertexIndexBuffer[i] = gl.createBuffer();
            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, VertexIndexBuffer[i]);
            gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(Planets.cubeVertexIndices), gl.STATIC_DRAW);
            VertexIndexBuffer[i].itemSize = 1;
            VertexIndexBuffer[i].numItems = 36;
        }
        console.log('finished init buffers');
    }

Now the problem begins because I need to reference these buffers when I want to draw them. this Function shows how I draw them:

 function drawScene(Planets) 
    {
        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
        mat4.identity(mvMatrix);

        for(var i  = 0; i < Planets.length; i++)
        {
            console.log("Planet: "+Planets[i].name+'\n'+
                        "Planet positionX: "+Planets[i].positionX+'\n'+
                        "Planet positionY: "+Planets[i].positionY+'\n'+
                        "Planet positionZ: "+Planets[i].positionZ+'\n'+
                        "VertexPositionBuffer: "+VertexPositionBuffer[i]+'\n'+
                        "VertexColorBuffer: "+VertexColorBuffer[i]+'\n'+
                        "VertexIndexBuffer: "+VertexIndexBuffer[i]+'\n'+
                        "VertexPositionBuffer itemSize: "+VertexPositionBuffer[i].itemSize+'\n'+
                        "VertexColorBuffer itemSize: "+VertexColorBuffer[i].itemSize+'\n'+
                        "VertexIndexBuffer numItems: "+VertexIndexBuffer[i].numItems
                        );

            mat4.translate(mvMatrix, [Planets[i].positionX, Planets[i].positionY, Planets[i].positionZ]);
            mvPushMatrix();

            gl.bindBuffer(gl.ARRAY_BUFFER, VertexPositionBuffer[i]);
            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, VertexPositionBuffer[i].itemSize, gl.FLOAT, false, 0, 0);

            gl.bindBuffer(gl.ARRAY_BUFFER, VertexColorBuffer[i]);
            gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, VertexColorBuffer[i].itemSize, gl.FLOAT, false, 0, 0);

            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, VertexIndexBuffer[i]);
            setMatrixUniforms();
            gl.drawElements(gl.TRIANGLES, VertexIndexBuffer[i].numItems, gl.UNSIGNED_SHORT, 0);

            mvPopMatrix();
        }
    }

On the console.log() it can be seen that I have [object WebGLBuffer] and no name anymore to reference any of the buffers I created in setBufferName(Planets) . Any help yould be greatly appreciated!

Answer 1

I assume you are calling setBufferName(Planets) before you call initBuffers(Planets) .

So setBufferName(Planets) will set VertexPositionBuffer[i] to a name,

VertexPositionBuffer[i] = Planets[i].name+"VertexPositionBuffer";

but then initBuffers(Planets) will set VertexPositionBuffer[i] to a WebGLBuffer,

VertexPositionBuffer[i] = gl.createBuffer();

So you will lose your name.

I suggest you call setBufferName(Planets) after initBuffers(Planets) and change it so that you add a name property to the VertexPositionBuffer[i] . Like so:

function setBufferName(Planets)
{
    for(var i = 0; i < Planets.length; i++)
    {
        VertexPositionBuffer[i].name = Planets[i].name+"VertexPositionBuffer";
        VertexColorBuffer[i].name = Planets[i].name+"VertexColorBuffer";
        VertexIndexBuffer[i].name = Planets[i].name+"VertexIndexBuffer";
    }
}

Of course all this holds true for VertexColorBuffer[i] and VertexIndexBuffer[i] as well.

If you had something else in mind for where you wanted the name to be let me know, but I think this fix is what you want.