WebGL - Làm cách nào để chuyển các giá trị màu của thuộc tính đỉnh không dấu?

Question

đỉnh của tôi được tạo thành từ một mảng với cấu trúc này:

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

Đi qua vị trí đỉnh là không có vấn đề:

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

Nhưng tôi không thể tìm ra làm thế nào tôi có thể vượt qua màu sắc để trình đổ bóng. Thật không may, nó không thể sử dụng số nguyên bên trong shader glsl vì vậy tôi phải sử dụng phao. Làm thế nào tôi có thể nhận được giá trị màu byte chưa ký của tôi vào giá trị màu phao nổi? Tôi đã thử nó như thế này cho r, g, b sepperately nhưng màu sắc được tất cả điều sai lầm:

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

sải chân của bạn nên là 16, không phải 15 và chắc chắn không 4.

Ngoài ra, mỗi màu sắc cá nhân không cần phải là một thuộc tính riêng biệt. Bốn byte có thể là đầu vào vec4. Ồ, và màu sắc của bạn phải là được chuẩn hóa, các byte chưa ký. Nghĩa là, các giá trị trên phạm vi [0, 255] sẽ được chia tỷ lệ thành [0, 1] khi trình đổ bóng nhận được chúng. Vì vậy, những gì bạn muốn là:

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

Oh, và thuộc tính này là không vật liệu. Bạn không nên gọi cho họ điều đó.

Answer 2

GLfloat red=(GLfloat)red/255; 

tôi hy vọng đó là những gì bạn đang tìm kiếm ^^