Opengl es WebGL-如何传递无符号字节顶点属性颜色值？

我的顶点由具有以下结构的数组组成：

[     Position      ][        colour        ]
[float][float][float][byte][byte][byte][byte]

通过顶点位置没有问题：

gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
gl.vertexAttribPointer(this.material.aVertexPosition, 3, gl.FLOAT, false, 4, 0);

但我不知道如何将颜色传递给着色器。不幸的是，无法在glsl着色器中使用整数，因此我必须使用浮点。 如何将无符号字节颜色值转换为glsl浮点颜色值？我试过r、g和b三种颜色，但颜色都弄乱了：

gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
gl.vertexAttribPointer(this.material.aR, 1, gl.BYTE, false, 15, 12);

顶点着色器（coloredpoint.vs）

像素着色器（coloredpoint.fs）

我希望这就是你想要的^^

gl.vertexAttribPointer(this.material.aVertexPosition, 3, gl.FLOAT, false, 4, 0);
gl.vertexAttribPointer(this.material.aR, 1, gl.BYTE, false, 15, 12);

你的步幅应该是16，而不是15，当然也不是4

此外，每个单独的颜色不需要是单独的属性。这四个字节可以是vec4输入。哦，你的颜色应该是标准化的，无符号字节。也就是说，当着色器获取范围[0，255]上的值时，应将其缩放为[0，1]。因此，您想要的是：

gl.vertexAttribPointer(this.material.aVertexPosition, 3, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(this.material.color, 4, gl.UNSIGNED_BYTE, true, 16, 12);

---

哦，属性不是材质。你不应该这样称呼他们。

谢谢，但我已经试过了。这只会使点变暗。这很奇怪，因为我在C++中使用它，而且效果很好，你确定你的浮点有足够的精度吗？请看Nicol Bolas的答案。我传递的是gl.BYTE而不是gl.unsgned_BYTE，我的步幅错了。除了你的问题，你是否考虑过将attrib作为3元素向量传递？这节省了代码和时间。@没有人是我最初做的。我只是换成分别传球，只是为了确保阵型没有问题。谢谢。我错误地理解了步幅是一组数据与下一组数据之间的差距。我以前尝试过规范化颜色，但我缺少的是无符号的字节类型。Material是一个包含着色器、其属性和一些材质设置的对象，因此我认为将其称为Material是正确的。现在工作。

GLfloat red=(GLfloat)red/255;

gl.vertexAttribPointer(this.material.aVertexPosition, 3, gl.FLOAT, false, 4, 0);
gl.vertexAttribPointer(this.material.aR, 1, gl.BYTE, false, 15, 12);

gl.vertexAttribPointer(this.material.aVertexPosition, 3, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(this.material.color, 4, gl.UNSIGNED_BYTE, true, 16, 12);