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

Question

按照本教程 https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Meshes-Lesson-1 渲染网格。它在桌面应用程序上运行良好，但部署到 html5 它全黑和垃圾邮件：

.WebGL-000001FC218B3370]GL ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 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 ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 0

表示顶点数组缓冲区中没有足够的顶点属性。
这意味着第三个参数 count 指定了比缓冲区中顶点数更多的顶点。

如果您有一个包含 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);

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

Why does Shader not work in html5 module but works in desktop app?

opengl

gwt

libgdx

shader