Emscripten 与 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）。因为 ANGLE 模拟 OpenGL ES 2.0，所以它没有固定功能的东西，目前可以让你做你不能做的事情，所以使用它可以帮助你从 C/C++ 开始，并且更有可能不使用没有的功能在 WebGL 中可用