使用SDL2进行嵌入-错误: WebGL: drawArrays: null

Question

所以我试着用emscripten编译一些SDL2代码，我遇到了一个接一个的陷阱，大多数我可以自己解决，但这让我感到困惑。

目前，我正在尝试使用OpenGL在屏幕上绘制一个四边形：

void sprite::init(float x, float y, float width, float height)
{
    _x = x;
    _y = y;
    _width = width;
    _height = height;

    if(_vboID == 0)
    {
        glGenBuffers(1, &_vboID);
    }

    float vertexData[12];

    vertexData[0] = x + width;
    vertexData[1] = y + height;

    vertexData[2] = x;
    vertexData[3] = y + height;

    vertexData[4] = x;
    vertexData[5] = y;

    //second

    vertexData[6] = x;
    vertexData[7] = y;

    vertexData[8] = x + width;
    vertexData[9] = y;

    vertexData[10] = x + width;
    vertexData[11] = y + height;

    glBindBuffer(GL_ARRAY_BUFFER, _vboID);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), 
                 vertexData, GL_STATIC_DRAW);
    glBindBuffer(GL_ARRAY_BUFFER, 0);
}

void sprite::draw()
{
    glBindBuffer(GL_ARRAY_BUFFER, _vboID);

    glEnableVertexAttribArray(0);
    glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 0, 0);
    glDrawArrays(GL_TRIANGLES, 0, 6);
    glDisableVertexAttribArray(0);

    glBindBuffer(GL_ARRAY_BUFFER, 0);
}

这应该会生成一个四边形，或者说人们会这样认为。当然，它不会，相反它会生成一些错误

Error: WebGL: drawArrays: null CURRENT_PROGRAM sdl2.js:1:186510
Error: WebGL: No further warnings will be reported for this WebGL context. (already reported 32 warnings)

因此，我们来到了问题的核心，人们将如何解决这个问题？

Answer 1

就像Cubic提到的那样，错误消息说你需要一个着色器。

WebGL基于OpenGL ES 2.0 (不要与OpenGL混淆)。

OpenGL ES 2.0没有固定的函数管道。它需要100%的着色器，而OpenGL (在桌面上)有20+年的历史，并且有一个旧的不需要着色器的模式。这意味着桌面上的东西通常都是偶然工作的，因为所有的向后兼容的东西都挥之不去，就像在WebGL中一样，不仅是基于OpenGL ES 2.0，它的强制执行也非常严格，希望能让WebGL在任何地方都表现得相同，以便使用它的网页更有可能正常工作。

如果你想在你的桌面上测试OpenGL ES 2.0，并且你碰巧使用的是Windows，你可以使用模拟OpenGL ES 2.0的ANGLE。有几个项目使用它，所以他们可以针对一个几乎在任何地方都能工作的API。这意味着他们可以瞄准OpenGL ES 2.0，他们的代码可能会在Mac、Android、iOS、Linux和Windows上运行(使用ANGLE)。因为WebGL模拟的是OpenGL ES 2.0，所以它没有固定的函数让你做你不能做的事情，所以使用它可以帮助你开始使用C/C++，并且更有可能不使用ANGLE中没有的功能