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);
}
答
在你的着色器,你使用vColor既作为属性名并作为统一名称。这可能是导致浏览器混淆的原因。假设制服,属性和变化形成一个名称空间,并为制服和属性分配不同的名称更好。我还看到一个可能的错误:
uniform vec4 vColor;
您的意思是这是一个不同?
varying vec4 fColor;
....
gl_FragColor = fColor;