Question

遵循本教程https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Meshes-Lesson-1的有关渲染网格物体的知识。它可以在桌面应用程序上正常运行，但可以将其全部黑色和垃圾邮件部署到html5：

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

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

我正在使用这个简单的着色器，该着色器仅应呈现顶点的位置和颜色：

顶点着色器

{
  "sampleNumber" : 1234
}

片段着色器

    //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);

Answer 1

错误消息

.WebGL-000001FC218B3370] GL错误：GL_INVALID_OPERATION：glDrawArrays：尝试访问属性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模块中不起作用，而在桌面应用程序中起作用？

1 个答案: