“没有VBO绑定到启用的顶点属性索引0”试图在WebGL中绘制一个简单的纹理

"no VBO bound to enabled vertex attrib index 0" trying to draw a simple texture in WebGL

本文关键字:绘制 WebGL 简单 一个 纹理 绑定 VBO 没有 启用 顶点 索引      更新时间:2023-09-26

我刚刚开始尝试学习一些基本的WebGL编码,到目前为止它一直很好,直到我尝试渲染一个简单的2D纹理......

这是我第一次真正做任何与计算机图形学有关的事情,尤其是WebGL/OpenGL。因此,如果我的代码中有任何公然愚蠢的内容,我真诚地为此道歉,请保持温柔。

所以我要做的是绘制一个简单的纹理,我从html img元素中获取。对于如何正确告诉着色器我希望它们在视点上渲染我的纹理的位置,我有点迷茫。我尝试了几种不同的方法,并在谷歌上搜索了类似的问题,但没有结果。不同的缓冲区应该如何同时将数据传输到着色器的概念对我来说有点难以理解。

当仅使用 gl.drawArrays(gl.积分...一切正常。但是当我尝试使用 gl.drawElements 实现三角形的绘制时,一切都会下地狱。

我的代码(根据评论中的建议更新)可以在 http://pastebin.com/T0iBfbcA 找到

那么我在这里做错了什么?

好的

,所以我发现了问题。首先,我没有像棘轮怪胎所说的那样为纹理坐标添加指针(谢谢!

然而,在那之后,屏幕仍然是黑色的,没有任何效果。事实证明,问题源于图像数据。它没有触发任何错误或异常,只是不起作用。但是我没有从 img 元素获取数据,而是首先在画布上绘制它,然后使用画布作为纹理的输入。这奏效了,现在一切都很好,很花花公子。

我也更新了 pastebin 以删除我实际可以看到纹理时出现的一些小问题。