WebGL-如何传递无符号字节顶点属性颜色值? [英] WebGL - How to pass unsigned byte vertex attribute colour values?
本文介绍了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);
顶点着色器(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);
}
像素着色器(colouredPoint.fs)
precision highp float;
varying vec3 vVertexColour;
void main(void){
gl_FragColor = vec4(vVertexColour, 1);
}
推荐答案
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。
此外,每种单独的颜色都不需要是单独的属性。这四个字节可以是矢量4输入。哦,而且您的颜色应该是规范化,无符号字节。也就是说,着色器获取范围[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);
哦,并且属性是而不是材料。你不应该那样叫他们。
这篇关于WebGL-如何传递无符号字节顶点属性颜色值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文