Question

我试图使用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";
        }
    }

行星是一个数组。目前，名称被设置为“太阳”和“水星” 在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)中创建的任何缓冲区。 Error screenshot from chrome 非常感谢任何帮助！

Answer 1

我假设您在致电setBufferName(Planets)之前致电initBuffers(Planets)。

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

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

但是initBuffers(Planets)会将VertexPositionBuffer[i]设置为WebGL缓冲区，

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]，所有这一切都适用。

如果你有其他的想法让你知道这个名字，但我认为这个修复就是你想要的。

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

1 个答案: