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

时间:2014-11-21 10:02:52

标签: javascript graphics opengl-es textures webgl

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

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

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

当只使用gl.drawArrays(gl.POINTS ...)绘制点/线时,一切正常。但是当我尝试使用gl.drawElements实现三角形的绘制时,一切都会变成地狱。

我的代码(通过评论建议更新)可在http://pastebin.com/T0iBfbcA

找到

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

1 个答案:

答案 0 :(得分:1)

好的,所以我发现了问题。首先,我没有为棘轮怪物添加纹理坐标指针(谢谢!)。

然而,在那之后,屏幕仍然是黑色的,没有任何效果。原来这个问题源于图像数据。它没有触发任何错误或例外,它只是没有工作。但是我没有从img元素中获取数据,而是首先将它绘制在画布上,然后我使用画布作为纹理的输入。这很有效,一切都很好,花花公子。

我已经更新了pastebin以及删除了当我真正看到纹理时出现的一些小问题。