Question

我一直在尝试将颜色变量（vColor）从JavaScript传递给我的着色器。我在JavaScript中尝试了很多不同的东西，但是无法传递变量。< / p>

我理解这段代码中的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;

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

1 个答案: