GLTF索引计数与缓冲区大小错误相同

Question

我正在努力学习WebGL并度过美好时光！ 我决定使用glTF作为这个项目的3d格式。 我有它运作良好，有一个奇怪的例外。 当索引计数较低时（比如简单的三角形多维数据集），索引计数等于索引缓冲区大小。 这不可能是对的。 在我拥有的每个其他模型中，索引计数是缓冲区大小的1/2。

这些导致渲染错误，如“错误：WebGL警告：drawElements：索引缓冲区太小。”。 以下是相关代码。

可渲染构造函数：

constructor(type,indexCount,vertBuffer,indexBuffer,uvBuffer,normalBuffer,modelMatrix){
    this.type = type;
    this.indexCount = indexCount;

    this.name = "NONE";

    this.vertBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ARRAY_BUFFER, this.vertBuffer);
    GL.bufferData(GL.ARRAY_BUFFER, vertBuffer, GL.STATIC_DRAW);
    GL.bindBuffer(GL.ARRAY_BUFFER, null);

    this.uvBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ARRAY_BUFFER, this.uvBuffer);
    GL.bufferData(GL.ARRAY_BUFFER, uvBuffer, GL.STATIC_DRAW);
    GL.bindBuffer(GL.ARRAY_BUFFER, null);

    this.indexBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
    GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, indexBuffer, GL.STATIC_DRAW);
    GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);

    this.normalBuffer = GL.createBuffer();
    GL.bindBuffer(GL.ARRAY_BUFFER, this.normalBuffer);
    GL.bufferData(GL.ARRAY_BUFFER, normalBuffer, GL.STATIC_DRAW);
    GL.bindBuffer(GL.ARRAY_BUFFER, null);

    this.matrix = modelMatrix;
    this.witMatrix = mat4.create();

    this.textures = [];

    //Create defaults
    this.setTexture(new dTexture(TEX.COLOR,"res/missingno.png"));
    this.setTexture(new dTexture(TEX.LIGHT,"res/rawLight.png"));
}

GLTF为“可渲染”

static fromGLTF(type,gltf){
    console.log("GLTF: loading "+gltf.nodes[0].name);
    return new Renderable(type,
        gltf.nodes[0].mesh.primitives[0].indicesLength,
        gltf.nodes[0].mesh.primitives[0].attributes.POSITION.bufferView.data,
        gltf.accessors[gltf.nodes[0].mesh.primitives[0].indices].bufferView.data,
        gltf.nodes[0].mesh.primitives[0].attributes.TEXCOORD_0.bufferView.data,
        gltf.nodes[0].mesh.primitives[0].attributes.NORMAL.bufferView.data,
        gltf.nodes[0].matrix);
}

这是渲染代码（它不是很漂亮，但为了完整性，这里是）：

render(){
    GL.viewport(0.0,0.0,this.canvas.width,this.canvas.height);
    GL.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT);

    this.renderables.forEach(renderable => {

        //mat4.identity(renderable.witMatrix);
        mat4.invert(renderable.witMatrix,renderable.matrix);
        mat4.transpose(renderable.witMatrix,renderable.witMatrix);

        GL.useProgram(this.programs[renderable.type].program);
        GL.uniformMatrix4fv(this.programs[renderable.type].pMatrix, false, this.projectionMatrix);
        GL.uniformMatrix4fv(this.programs[renderable.type].vMatrix, false, this.viewMatrix);
        GL.uniformMatrix4fv(this.programs[renderable.type].mMatrix, false, renderable.matrix);

        GL.enableVertexAttribArray(this.programs[renderable.type].positon);
        GL.bindBuffer(GL.ARRAY_BUFFER,renderable.vertBuffer);
        GL.vertexAttribPointer(this.programs[renderable.type].positon, 3, GL.FLOAT, false,0,0);

        GL.enableVertexAttribArray(this.programs[renderable.type].uv);
        GL.bindBuffer(GL.ARRAY_BUFFER,renderable.uvBuffer);
        GL.vertexAttribPointer(this.programs[renderable.type].uv, 2, GL.FLOAT, false,0,0);

        if(renderable.type == SHADER.STATIC){
            GL.uniform1i(this.programs[renderable.type].colorPos, 0);  // texture unit 0
            GL.activeTexture(GL.TEXTURE0);
            GL.bindTexture(GL.TEXTURE_2D, renderable.textures[TEX.COLOR].data);

            GL.uniform1i(this.programs[renderable.type].lightPos, 1);  // texture unit 1
            GL.activeTexture(GL.TEXTURE1);
            GL.bindTexture(GL.TEXTURE_2D, renderable.textures[TEX.LIGHT].data);
        }else if(renderable.type == SHADER.DYNAMIC){
            GL.uniform1i(this.programs[renderable.type].colorPos, 0);  // texture unit 0
            GL.activeTexture(GL.TEXTURE0);
            GL.bindTexture(GL.TEXTURE_2D, renderable.textures[TEX.COLOR].data);

            GL.enableVertexAttribArray(this.programs[renderable.type].normalPos);
            GL.bindBuffer(GL.ARRAY_BUFFER,renderable.normalBuffer);
            GL.vertexAttribPointer(this.programs[renderable.type].normalPos, 3, GL.FLOAT, false,0,0);

            GL.uniformMatrix4fv(this.programs[renderable.type].witMatrix, false, renderable.witMatrix);

            // set the light position
            GL.uniform3fv(this.programs[renderable.type].lightPosPos, [
                Math.sin(this.counter)*0.75,
                Math.cos(this.counter)*0.75+1,
                0
            ]);
            this.counter+=this.dt*0.25;
        }

        GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, renderable.indexBuffer);
        GL.drawElements(GL.TRIANGLES,renderable.indexCount,GL.UNSIGNED_SHORT,0);

        GL.activeTexture(GL.TEXTURE1);
        GL.bindTexture(GL.TEXTURE_2D,this.nullLightmap.data);
    });

    GL.flush();
}

有任何想法吗？

Answer 1

当索引计数较低时（比如简单的三角形多维数据集），索引计数等于索引缓冲区大小。 这不可能是对的。 在我拥有的每个其他模型中，索引计数是缓冲区大小的1/2。

索引缓冲区的大小取决于索引的数量和componentType 。
请参阅访问者元素大小 ：

 componentType Size in bytes 5120 (BYTE) 1 5121 (UNSIGNED_BYTE) 1 5122 (SHORT) 2 5123 (UNSIGNED_SHORT) 2 5125 (UNSIGNED_INT) 4 5126 (FLOAT) 4 

componentType指定单个索引的数据类型。 当索引的数目是低的（<= 256），则数据类型UNSIGNED_BYTE被使用，而索引缓冲器的类型是UNSIGNED_SHORT甚至UNSIGNED_INT ，如果有更多的索引。 如果类型是UNSIGNED_BYTE ，那么索引的数量当然等于缓冲区的大小（以字节为单位）。

取决于元素索引的类型，你必须熟练绘制调用，例如GL.UNSIGNED_BYTE ：

GL.drawElements(GL.TRIANGLES,renderable.indexCount,GL.UNSIGNED_BYTE,0); 

注意， componentType （5120,5121，...）的值似乎是任意的，是OpenGL枚举器常量GL.BYTE ， GL.UNSIGNED_BYTE ，...的值。

我建议将componentType传递给constructor因为你使用索引的数量（ indexCount ）

constructor(
    type,indexCount,componentType,
    vertBuffer,indexBuffer,uvBuffer,normalBuffer,modelMatrix){

    this.indexCount    = indexCount;
    this.componentType = componentType;

并在绘制几何体时使用它：

GL.drawElements(
    GL.TRIANGLES,
    renderable.indexCount,
    renderable.componentType,
    0);