Opengl 为什么着色器不能在html5模块中工作，但可以在桌面应用程序中工作？

以下是有关渲染网格的本教程。它在桌面应用程序上运行良好，但部署到html5上时，其全黑和垃圾邮件：

.WebGL-00000 1FC218B3370]GL错误：GL\u无效\u操作：glDrawArrays:尝试访问属性0中超出范围的顶点

为什么它不起作用？我没有在着色器中使用数组

我正在使用这个简单的着色器，它只是用来渲染顶点的位置和颜色：

顶点着色器

    //our attributes
attribute vec2 a_position;
attribute vec4 a_color;

//our camera matrix
uniform mat4 u_projTrans;

//send the color out to the fragment shader
varying vec4 vColor;

void main() {
    vColor = a_color;
    gl_Position = u_projTrans * vec4(a_position.xy, 0.0, 1.0);
}

片段着色器

#ifdef GL_ES
precision mediump float;
#endif

//input from vertex shader
varying vec4 vColor;

void main() {
    gl_FragColor = vColor;
}

这样渲染

triangle.mesh.render(shaderProgram, GL20.GL_TRIANGLES, 0, 18 / NUM_COMPONENTS);

编辑

我的顶点规范

public static final int MAX_TRIS = 1;
public static final int MAX_VERTS = MAX_TRIS * 3;

// ...

protected float[] verts = new float[MAX_VERTS * NUM_COMPONENTS];

mesh = new Mesh(true, MAX_VERTS, 0,
                    new VertexAttribute(VertexAttributes.Usage.Position, 2, "a_position"),
                    new VertexAttribute(VertexAttributes.Usage.ColorPacked, 4, "a_color"));

float c = color.toFloatBits();

idx = 0;

verts[idx++] = coordinates[0].x;
verts[idx++] = coordinates[0].y;
verts[idx++] = c;

//top left vertex
verts[idx++] = coordinates[1].x;
verts[idx++] = coordinates[1].y;
verts[idx++] = c;

//bottom right vertex
verts[idx++] = coordinates[2].x;
verts[idx++] = coordinates[2].y;
verts[idx++] = c;

mesh.setVertices(verts);

我的抽签决定

public void render() {
        Gdx.gl.glDepthMask(false);
        Gdx.gl.glEnable(GL20.GL_BLEND);

        shaderProgram.begin();  // shaderprogram contains vertex and fragment shader
        shaderProgram.setUniformMatrix("u_projTrans", world.renderer.getCam().combined);
        for (Triangle triangle : triangles) {
            triangle.mesh.render(shaderProgram, GL20.GL_TRIANGLES, 0, 18 / NUM_COMPONENTS);

        }
        shaderProgram.end();
        Gdx.gl.glDepthMask(true);
    }

错误消息

.WebGL-00000 1FC218B3370]GL错误：GL\u无效\u操作：glDrawArrays:尝试访问属性0中超出范围的顶点

表示顶点数组缓冲区中没有足够的顶点属性。
这意味着第三个参数计数指定的顶点数大于缓冲区中的顶点数

如果顶点缓冲区有3个顶点，则计数必须分别为3，因为顶点坐标的元组大小为3，数组的大小为9个元素：

triangle.mesh.render（着色器程序、GL20.GL_三角形、0、18/NUM_组件）

triangle.mesh.render（着色器程序、GL20.GL_三角形、0、9/NUM_组件）
错误消息与着色器代码无关！这意味着顶点数组缓冲区中没有足够的顶点属性！这意味着第三个参数计数指定了更多的顶点，然后是缓冲区中的顶点数。谢谢，你知道如何实现吗？因为在桌面上，一切都很正常（OpenGL）。当然，代码中有一个bug。可能是移植代码时的一个小错误。但我不能告诉你，如果不知道顶点规格和绘图调用，@rabbi76请查看我的编辑！我添加了如何创建顶点和渲染调用。如果渲染一个具有3个顶点的单个三角形，那么它必须是
shaderProgram，GL20.GL_三角形，0,3
，而不是
18/NUM_组件