Webgl将颜色变量传递给着色器

我一直试图将JavaScript的颜色变量（vColor）传递给我的着色器。我在JavaScript中尝试了很多不同的东西，但一直未能传递变量。Webgl将颜色变量传递给着色器

我有点理解这个代码中的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); 
}

来源

2015-07-10 Alabas

在你的着色器，你使用vColor既作为属性名并作为统一名称。这可能是导致浏览器混淆的原因。假设制服，属性和变化形成一个名称空间，并为制服和属性分配不同的名称更好。我还看到一个可能的错误：

uniform vec4 vColor;

您的意思是这是一个不同？

varying vec4 fColor; 

.... 

gl_FragColor = fColor;

来源

2015-07-10 18:38:44

Webgl将颜色变量传递给着色器

回答

相关问题