Webgl передаёт цветовые переменные в шейдеры

Question

Я пытаюсь передать цветовую переменную (vColor) из JavaScript в мои шейдеры. Я пробовал много разных вещей в JavaScript, но не смог передать переменную.

Я вроде понимаю, как передавалась переменная vPosition в этом коде. Я попытался сделать то же самое для vColor, но получил ошибки, такие как

Ошибка: WebGL: enableVertexAttribArray: -1 недействителен index. Это значение, вероятно, происходит от вызова getAttribLocation(), где это возвращаемое значение -1 означает, что переданное имя не соответствовало активному атрибуту в указанной программе.

Кто-нибудь, пожалуйста, помогите мне понять это?

Вот шейдеры

<script id="vertex-shader" type="x-shader/x-vertex"> 
attribute vec4 vPosition; 
attribute vec4 vColor; 
varying vec4 fColor; 
void main() 
{ 
    fColor=vColor; 
    gl_Position = vPosition; 
} 
</script> 

<script id="fragment-shader" type="x-shader/x-fragment"> 
precision mediump float; 
uniform vec4 vColor; 
void main() 
{ 
    gl_FragColor = vColor; 
} 
</script> 

А вот JavaScript

"use strict"; 
var gl; 
var points; 
window.onload = function init() 
{ 
    var canvas = document.getElementById("gl-canvas"); 

    gl = WebGLUtils.setupWebGL(canvas); 
    if (!gl) { alert("WebGL isn't available"); } 

    // Four Vertices 

    var vertices = [ 
     -0.5, -0.5, 
     -0.5, 0.5, 
     0.5, 0.5, 
     0.5, -0.5 
    ]; 


    // 
    // Configure WebGL 
    // 
    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(0.0, 0.0, 0.0, 1.0); 

    // Load shaders and initialize attribute buffers 

    var program = initShaders(gl, "vertex-shader", "fragment-shader"); 
    gl.useProgram(program); 

    // Load the data into the GPU 

    var bufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferId); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW); 

    // Associate out shader variables with our data buffer 

    var vPosition = gl.getAttribLocation(program, "vPosition"); 
    gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPosition); 

    render(); 
}; 


function render() { 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4); 
} 

Answer 1

В вашем шейдере вы используете vColor и как имя атрибутов и также единое имя. Вероятно, это вызвало путаницу в браузере. Лучше предположить, что униформы, атрибуты и изменения образуют одно пространство имен и назначают разные имена для униформ и атрибутов. Я также вижу возможную ошибку:

uniform vec4 vColor; 

ли вы имеете в виду, что это будет изменяющейся?

varying vec4 fColor; 

.... 

gl_FragColor = fColor;