在WebGL中绘制多个模型 [英] Draw multiple models in WebGL

问题描述

问题约束：

• 我没有使用three.js或类似文件，而是使用纯WebGL


• WebGL 2也不可行

我有几个模型存储为顶点和 Normals 数组（来自STL读取器）。

I have a couple of models loaded stored as Vertices and Normals arrays (coming from an STL reader).

到目前为止，两个型号的尺寸相同都没有问题。每当我加载2个不同的模型时，浏览器中就会显示一条错误消息：
WebGL：INVALID_OPERATION：drawArrays：尝试访问越界数组，所以我怀疑我无法正确操作多个缓冲区。

So far there is no problem when both models are the same size. Whenever I load 2 different models, an error message is shown in the browser: WebGL: INVALID_OPERATION: drawArrays: attempt to access out of bounds arrays so I suspect I am not manipulating multiple buffers correctly.

使用以下打字稿方法加载模型：

The models are loaded using the following typescript method:

        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);
        }

加载后，将调用Render方法绘制所有加载的图像型号：

After loaded, the Render method is called for drawing all loaded models:

        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);   
                }
            }
        }

一个模型很好用。两个克隆的模型也可以正常工作。

One model works just fine. Two cloned models also work OK. Different models fail with the error mentioned.

我缺少什么？

推荐答案

使用WebGL的常规方法

The normal way to use WebGL

在初始化时间

• 对于每个着色器程序

• for each shader program

• 创建并编译顶点着色器


• 创建并编译片段着色器


• 为每个模型创建程序，附加着色器，链接程序

每个模型

• 每种类型的顶点数据（位置，法线，颜色，texcoord


• 创建缓冲区


• 将数据复制到缓冲区

创建纹理

然后在渲染时

• 每个模型
  
  
  
  
  • 使用适用于模型的着色器程序
  
  
  • 绑定缓冲区，启用和设置属性
  
  
  • bind纹理和设置制服
  
  
  • 调用drawArrays或drawElements
  
  
  • for each model
    • use shader program appropriate for model
    • bind buffers, enable and setup attributes
    • bind textures and set uniforms
    • call drawArrays or drawElements

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

    But looking at your code it's binding buffers, and enabling and setting up attributes at init time instead of render time.

    也许会看到本文和这一个

    这篇关于在WebGL中绘制多个模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！