javascript - Webgl 在浏览器中抛出不同的错误

Question

我正在学习 webgl 我制作了一个应用程序来读取 PLY 文件并使用 webgl 渲染它们。该应用程序在 Chrome 中运行良好，但当我在 safari 或 Firefox 中运行它时，它不起作用。我在另外两台电脑上测试了它，它只在一台电脑上工作。每个浏览器都会抛出不同的错误。这是 safari 中的错误:

[Warning] WebGL: INVALID_OPERATION: drawElements: attempt to access out of bounds arrays

在 Firefox 中，我收到以下错误:

Error: WebGL: drawElements: no VBO bound to enabled vertex attrib index 2!

相同的代码在 Chrome 中运行完美。在不同的浏览器中使用调试器，我找不到用于绘图的缓冲区和数组的差异。

这是代码:

   function initShaders() {
        var fragmentShader = getShader(gl, "shader-fs");
        var vertexShader = getShader(gl, "shader-vs");

        shaderProgram = gl.createProgram();
        gl.attachShader(shaderProgram, vertexShader);
        gl.attachShader(shaderProgram, fragmentShader);
        gl.linkProgram(shaderProgram);

        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
            alert("Could not initialise shaders");
        }

        gl.useProgram(shaderProgram);

        shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
        gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

        // shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
        // gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

       shaderProgram.textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
        gl.enableVertexAttribArray(shaderProgram.textureCoordAttribute);

        shaderProgram.normalCoordAttribute = gl.getAttribLocation(shaderProgram, "aVertexNormal");
        gl.enableVertexAttribArray(shaderProgram.normalCoordAttribute);

        shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
        shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
        shaderProgram.nMatrixUniform = gl.getUniformLocation(shaderProgram, "uNMatrix");
        shaderProgram.samplerUniform = gl.getUniformLocation(shaderProgram, "uSampler");
        shaderProgram.ambientColorUniform = gl.getUniformLocation(shaderProgram, "uAmbientColor");
        shaderProgram.lightingDirectionUniform = gl.getUniformLocation(shaderProgram, "uLightingDirection");
        shaderProgram.directionalColorUniform = gl.getUniformLocation(shaderProgram, "uDirectionalColor");
    }

    function initPLYObjectBuffers (ply_obj) {
        ply_obj.vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, ply_obj.vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(ply_obj.vertexArray), gl.STATIC_DRAW);

        if(ply_obj.hasNormal){
            ply_obj.normalBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, ply_obj.normalBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(ply_obj.normalArray), gl.STATIC_DRAW);
        }

        if(ply_obj.hasTexture){
            ply_obj.textureBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, ply_obj.textureBuffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(ply_obj.textureArray), gl.STATIC_DRAW);
        }

        // if(ply_obj.hasColor){
        //     ply_obj.colorBuffer = gl.createBuffer();
        //     gl.bindBuffer(gl.ARRAY_BUFFER, ply_obj.colorBuffer);
        //     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
        // }

        ply_obj.indexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ply_obj.indexBuffer);
        gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(ply_obj.indexArray), gl.STATIC_DRAW);
    }

function drawPLYObject(obj){

        gl.bindBuffer(gl.ARRAY_BUFFER, obj.vertexBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, obj.vertexItemSize, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, obj.normalBuffer);
        gl.vertexAttribPointer(shaderProgram.vertexNormalAttribute, obj.normalItemSize, gl.FLOAT, false, 0, 0);

        gl.bindBuffer(gl.ARRAY_BUFFER, obj.textureBuffer);
        gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, obj.textureItemSize, gl.FLOAT, false, 0, 0);

        gl.activeTexture(gl.TEXTURE0);
        gl.bindTexture(gl.TEXTURE_2D, myTexture);
        gl.uniform1i(shaderProgram.samplerUniform, 0);

        gl.uniform3f(
            shaderProgram.ambientColorUniform,
            parseFloat(document.getElementById("ambientR").value),
            parseFloat(document.getElementById("ambientG").value),
            parseFloat(document.getElementById("ambientB").value)
        );

        var lightingDirection = [
            parseFloat(document.getElementById("lightDirectionX").value),
            parseFloat(document.getElementById("lightDirectionY").value),
            parseFloat(document.getElementById("lightDirectionZ").value)
        ];
        var adjustedLD = vec3.create();
        vec3.normalize(lightingDirection, adjustedLD);
        vec3.scale(adjustedLD, -1);
        gl.uniform3fv(shaderProgram.lightingDirectionUniform, adjustedLD);

        gl.uniform3f(
            shaderProgram.directionalColorUniform,
            parseFloat(document.getElementById("directionalR").value),
            parseFloat(document.getElementById("directionalG").value),
            parseFloat(document.getElementById("directionalB").value)
        );

        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer);
        setMatrixUniforms();
        gl.drawElements(gl.TRIANGLES, obj.getIndexCount(), gl.UNSIGNED_SHORT, 0);
}

大部分代码来自教程。唯一添加的是 ply_obj，它包含文件中 obj 的顶点、法线和纹理的数组。我还在那里保存了不同缓冲区的引用，以便稍后在 drawPLYObject 函数中使用。生成 ply_obj 的代码来自此页面 http://threejs.org/examples/webgl_loader_ply.html 。我只是将其更改为可以在没有 Three.js 的情况下使用普通 webgl。

错误总是出现在这一行:

         gl.drawElements(gl.TRIANGLES, obj.getIndexCount(), gl.UNSIGNED_SHORT, 0);

我检查了数组，它们是正确的，并且在所有浏览器中都是相同的。我不知道还有什么问题。先感谢您。如果您需要更多信息，我很乐意提供。

Answer 1

好吧，事实证明这真的很愚蠢。我正在引用另一个名称的变量。不知何故，chrome 设法运行该程序并出现此错误。