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

Javascript GLTF索引计数与缓冲区大小相同错误,javascript,webgl,gltf,Javascript,Webgl,Gltf,我正在学习WebGL,玩得很开心!我决定使用glTF作为这个项目的3d格式。我有一个奇怪的例外。当索引计数较低时(例如一个简单的三角立方体),索引计数等于索引缓冲区大小。这不可能是对的。在我所有的其他模型中,索引计数是缓冲区大小的1/2 这些会导致如下“错误:WebGL警告:抽屉元素:索引缓冲区太小”之类的渲染错误。以下是相关代码 可渲染构造函数: constructor(type,indexCount,vertBuffer,indexBuffer,uvBuffer,normalBuffer,m

我正在学习WebGL,玩得很开心!我决定使用glTF作为这个项目的3d格式。我有一个奇怪的例外。当索引计数较低时(例如一个简单的三角立方体),索引计数等于索引缓冲区大小。这不可能是对的。在我所有的其他模型中,索引计数是缓冲区大小的1/2

这些会导致如下“错误:WebGL警告:抽屉元素:索引缓冲区太小”之类的渲染错误。以下是相关代码

可渲染构造函数:

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到“可渲染”

下面是渲染代码(虽然不太美观,但为了完整起见,请看这里):

有什么想法吗

当索引计数较低时(例如一个简单的三角立方体),索引计数等于索引缓冲区大小。这不可能是对的。在我所有的其他模型中,索引计数是缓冲区大小的1/2

索引缓冲区的大小取决于索引的数量和
组件类型

见:


componentType
指定单个索引的数据类型。当索引数量较低时(“当索引计数较低时(例如一个简单的三角立方体),索引计数等于索引缓冲区大小。这不可能是正确的。在我拥有的每一个其他模型中,索引计数都是缓冲区大小的1/2。”我假设索引缓冲区的类型是
GL.UNSIGNED\u BYTE
,当索引的数量较少时,而索引缓冲区的类型是
GL.UNSIGNED\u SHORT
,甚至是
GL.UNSIGNED\u INT
,如果有更多的索引。它的类型是
GL.UNSIGNED\u BYTE
,当然,索引的数量等于以字节为单位的缓冲区。就是这样!谢谢!现在我看到了,它在世界上是有意义的。
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();
}
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
GL.drawElements(GL.TRIANGLES,renderable.indexCount,GL.UNSIGNED_BYTE,0); 
constructor(
    type,indexCount,componentType,
    vertBuffer,indexBuffer,uvBuffer,normalBuffer,modelMatrix){

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