javascript - webgl丢失对javascript中对象的引用

我试图在WebGL中使用一种客观的方法。我想动态地重命名三个变量。我想要这个是因为我将使用相同的变量来使用其他名称进行很多变体，因此我想创建一个创建此变量的缓冲区。
该缓冲区将根据对象名称动态命名。
这是我创建变量的方法：

    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";
        }
    }

行星是一个数组。当前，名称被设置为“ Sun”和“ Mercury”。
在initBuffers(Planets)中，我创建了不同的gl缓冲区并松散引用了它们。

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');
    }

现在问题开始了，因为要绘制它们时需要引用这些缓冲区。
此功能显示了我如何绘制它们：

 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();
        }
    }

在console.log()上可以看到我有[object WebGLBuffer]并且没有名称可以引用我在setBufferName(Planets)中创建的任何缓冲区。

任何帮助您将不胜感激！

最佳答案

我假设您在呼叫setBufferName(Planets)之前先呼叫initBuffers(Planets)。

因此setBufferName(Planets)会将VertexPositionBuffer[i]设置为名称，

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

但是initBuffers(Planets)会将VertexPositionBuffer[i]设置为WebGLBuffer，

VertexPositionBuffer[i] = gl.createBuffer();

因此，您将失去名字。

建议您在setBufferName(Planets)之后调用initBuffers(Planets)并进行更改，以便为VertexPositionBuffer[i]添加名称属性。像这样：

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";
    }
}

当然，这对于VertexColorBuffer[i]和VertexIndexBuffer[i]同样适用。

如果您想在其他地方找到想要的名称，请让我知道，但我认为此修复程序是您想要的。