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

我的顶点是由具有这种结构的数组：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 sepperately但颜色全乱了：

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

的Vertex Shader（colouredPoint.vs）

precision highp float; 

attribute vec3 aVertexPosition; 
attribute float aR; 
attribute float aG; 
attribute float aB; 

uniform mat4 world; 
uniform mat4 view; 
uniform mat4 proj; 

varying vec3 vVertexColour; 

void main(void){ 
    gl_PointSize = 4.0; 
    gl_Position = proj * view * world * vec4(aVertexPosition, 1.0); 
    vVertexColour = vec3(aR, aG, aB); 
}

的Pixel Shader（colouredPoint.fs）

precision highp float; 

varying vec3 vVertexColour; 

void main(void){ 
    gl_FragColor = vec4(vVertexColour, 1); 
}

来源

2011-08-26 Markus

除了你的问题，你是否考虑过将attrib作为3元素向量？这节省了代码和时间。 – Nobody

@没有人这就是我原来做的。我只是转而将它们单独传递，以确保阵列不是问题。 – Markus

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

哦，属性不材料。你不应该给他们打电话。

来源

2011-08-26 08:31:28

谢谢。我错误地理解了跨越一组数据与下一组之间的差距。我试图规范颜色之前，但我失踪的是UNSIGNED_BYTE类型。材质是一个包含着色器，其属性和一些材质设置的对象，所以我认为它恰好称为材质。现在工作。 – Markus

GLfloat red=(GLfloat)red/255;

我希望这是你在找什么^^

来源

2011-08-26 08:20:39 Whiskas

谢谢，但我已经尝试过了。它只是使点变暗。 http://gebackene-ente.at/nudelsalat/sonstiges/webgl_01.png http://gebackene-ente.at/nudelsalat/sonstiges/webgl_02.png – Markus

这很奇怪，因为我在C++中使用它，它工作得很好，你确定你的float有足够的精度吗？ – Whiskas

请参阅Nicol Bolas对解决方案的回答。我传递了gl.BYTE而不是gl.UNISGNED_BYTE，并且我的步幅错了。 – Markus

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

回答

相关问题