为什么Shader不能在html5模块中工作但在桌面应用程序中工作？

Question

按照本教程https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Meshes-Lesson-1渲染Meshes。它适用于桌面应用程序，但部署到html5它的所有黑色和垃圾邮件：

.WebGL-000001FC218B3370] GL错误：GL_INVALID_OPERATION：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);
    }

Answer 1

错误消息

.WebGL-000001FC218B3370] GL错误：GL_INVALID_OPERATION：glDrawArrays：尝试访问属性0中超出范围的顶点

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

如果你有一个顶点缓冲区有3个顶点，那么count必须是3，分别是9 / NUM_COMPONENTS，因为顶点坐标的元组大小是3，而数组的大小是9个元素：

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