opengl-es - webgl example code

WebGL-¿Cómo pasar valores de color de atributo de vértice de byte sin firmar?

Question

Mis vértices están formados por una matriz con esta estructura:

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

Pasar la posición del vértice no es problema:

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

Pero no puedo entender cómo puedo pasar los colores al sombreador. Desafortunadamente, no es posible usar números enteros dentro del glsl shader, así que tengo que usar flotadores. ¿Cómo puedo obtener mi valor de color de byte sin firmar en el valor de color flotante glsl? Lo intenté así para r, g y b por separado, pero todos los colores están en mal estado:

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

Answer 1

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

Su paso debe ser 16, no 15 y ciertamente no 4.

Además, cada color individual no necesita ser un atributo separado. Los cuatro bytes pueden ser una entrada vec4. Ah, y tus colores deberían estar normalizados , bytes sin firmar. Es decir, los valores en el rango [0, 255] deben escalarse a [0, 1] cuando el shader los obtenga. Por lo tanto, lo que quieres es:

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

Ah, y los atributos no son materiales. No deberías llamarlos así.

Answer 2

GLfloat red=(GLfloat)red/255;

Espero que sea lo que estas buscando ^^