WebGL-Comment passer des valeurs de couleur d'attribut byte vertex non signé?

Mon sommets sont constitués d'un tableau avec cette structure:

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

Passer La position du vertex n'est pas un problème:

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

mais je ne vois pas comment je peux transmettre les couleurs au shader. Malheureusement, il n'est pas possible d'utiliser des entiers à l'intérieur du shader glsl, donc je dois utiliser des flotteurs. Comment puis-je obtenir ma valeur de couleur de byte non signée dans la valeur de couleur de float glsl? J'ai essayé comme ça pour r, g et b, mais les couleurs sont toutes abîmées. jusqu':

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);
} 
17
demandé sur genpfault 2011-08-26 12:17:06

2 réponses

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

votre foulée devrait être de 16, Pas de 15 et certainement pas 4.

normalisé, d'octets non signés. Qui est, les valeurs sur l'intervalle [0, 255] doivent être adaptés à [0, 1] lorsque le shader. Par conséquent, ce que vous voulez est:

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

Oh, et les attributs sont matériaux. Vous ne devrait pas les appeler ainsi.

27
répondu Nicol Bolas 2011-08-26 08:31:28
GLfloat red=(GLfloat)red/255;

j'espère que c'est ce que vous cherchez ^^

1
répondu Whiskas 2011-08-26 08:20:39