Buffer 在WebGL中绘制多个模型

问题限制：

• 我使用的不是three.js或类似的，而是纯WebGL
• WebGL 2也不是一个选项

我有两个加载的模型存储为

顶点

和

法线

数组（来自STL阅读器）

到目前为止，当两种型号尺寸相同时，没有问题。每当我加载两个不同的型号时，浏览器中将显示一条错误消息：

WebGL:INVALID_操作：drawArrays:尝试访问越界数组

，因此我怀疑我没有正确操作多个缓冲区

使用以下typescript方法加载模型：

        public AddModel(model: Model)
        {
            this.models.push(model);

            model.VertexBuffer = this.gl.createBuffer();
            model.NormalsBuffer = this.gl.createBuffer();

            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, model.VertexBuffer);
            this.gl.bufferData(this.gl.ARRAY_BUFFER, model.Vertices, this.gl.STATIC_DRAW);

            model.CoordLocation = this.gl.getAttribLocation(this.shaderProgram, "coordinates");
            this.gl.vertexAttribPointer(model.CoordLocation, 3, this.gl.FLOAT, false, 0, 0);
            this.gl.enableVertexAttribArray(model.CoordLocation);

            this.gl.bindBuffer(this.gl.ARRAY_BUFFER, model.NormalsBuffer);
            this.gl.bufferData(this.gl.ARRAY_BUFFER, model.Normals, this.gl.STATIC_DRAW);

            model.NormalLocation = this.gl.getAttribLocation(this.shaderProgram, "vertexNormal");
            this.gl.vertexAttribPointer(model.NormalLocation, 3, this.gl.FLOAT, false, 0, 0);
            this.gl.enableVertexAttribArray(model.NormalLocation);
        }

加载后，将调用渲染方法来绘制所有加载的模型：

        public Render(viewMatrix: Matrix4, perspective: Matrix4)
        {   
            this.gl.uniformMatrix4fv(this.viewRef, false, viewMatrix);
            this.gl.uniformMatrix4fv(this.perspectiveRef, false, perspective);
            this.gl.uniformMatrix4fv(this.normalTransformRef, false, viewMatrix.NormalMatrix());

            // Clear the canvas
            this.gl.clearColor(0, 0, 0, 0);
            this.gl.viewport(0, 0, this.canvas.width, this.canvas.height);
            this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);

            // Draw the triangles
            if (this.models.length > 0)
            {
                for (var i = 0; i < this.models.length; i++)
                {
                    var model = this.models[i];

                    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, model.VertexBuffer);
                    this.gl.enableVertexAttribArray(model.NormalLocation);

                    this.gl.enableVertexAttribArray(model.CoordLocation);
                    this.gl.vertexAttribPointer(model.CoordLocation, 3, this.gl.FLOAT, false, 0, 0);

                    this.gl.uniformMatrix4fv(this.modelRef, false, model.TransformMatrix);
                    this.gl.uniform3fv(this.materialdiffuseRef, model.Color.AsVec3());

                    this.gl.drawArrays(this.gl.TRIANGLES, 0, model.TrianglesCount);   
                }
            }
        }

公共渲染（viewMatrix:Matrix4，perspective:Matrix4）
{   
this.gl.uniformMatrix4fv（this.viewRef，false，viewMatrix）；
this.gl.uniformMatrix4fv（this.perspectiveRef，false，perspective）；
this.gl.uniformMatrix4fv（this.normalTransformRef，false，viewMatrix.NormalMatrix（））；
//清理画布
这个.gl.clearColor（0,0,0,0）；
this.gl.viewport（0，0，this.canvas.width，this.canvas.height）；
this.gl.clear（this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT）；
//画三角形
如果（this.models.length>0）
{
对于（var i=0；i

有一种模式很好用。两个克隆模型也可以正常工作。不同的模型因上述错误而失败

---

我缺少什么？

使用WebGL的正常方式

在初始时间

• 对于每个着色器程序
  • 创建和编译顶点着色器
  • 创建并编译片段着色器
  • 创建程序、附加着色器、链接程序
• 每种型号
  • 对于每种类型的顶点数据（位置、法线、颜色、texcoord
  • 创建缓冲区
  • 将数据复制到缓冲区
• 创建纹理

然后在渲染时

• 每种型号
  • 使用适用于模型的着色器程序
  • 绑定缓冲区、启用和设置属性
  • 绑定纹理并设置制服
  • 调用DrawArray或DrawElement

但看看你的代码，它是绑定缓冲区，在初始化时而不是渲染时启用和设置属性

也许你会看到