Javascript Webgl在直线上应用1D纹理

我有一个webgl应用程序，其中有很多段（gl.LINES）。每个分段需要应用特定的1D纹理，或者如果愿意，分段的每个像素需要具有特定的颜色。这将用作线段上直方图的替代方案

我做了一个4像素的测试纹理，从红色到黑色。我希望看到从红色到黑色的渐变，但是输出是一条只有红色的线

以下是我的getTextureFromPixelArray方法：

Scene.getTextureFromPixelArray = function(data, width, height) {
    if (_.isArray(data) && data.length) {
        var gl = this._context;
        data = new Uint8Array(data);
        var texture = gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
        gl.bindTexture(gl.TEXTURE_2D, null);
        return texture;
    } else {
        this.log("Unable to create texture");
    }
    return null;
};

以下是生成测试纹理1D的代码：

var verticles = [];

verticles.push(this.vertex1.position[0]);
verticles.push(this.vertex1.position[1]);
verticles.push(this.vertex2.position[0]);
verticles.push(this.vertex2.position[1]);

var color = [];
var textureWidth = 4;
var textureHeight = 1;
var textureCoords = [];
for (var i=0;i<textureHeight;i++) {
    for (var j=0;j<textureWidth;j++) {
        color.push(Math.round(255 - j*255/(textureWidth-1))); // Red
        color.push(0); // Green
        color.push(0); // Blue
        color.push(255); // Alpha
    }
}
textureCoords.push(0);
textureCoords.push(0.5);
textureCoords.push(1);
textureCoords.push(0.5);

var vertexPositionAttributeLocation = gl.getAttribLocation(shaderProgram, "aVertexPosition"); 
var textureCoordAttributeLocation = gl.getAttribLocation(shaderProgram, "aTextureCoord");

// Set vertex buffers
gl.enableVertexAttribArray(vertexPositionAttributeLocation);
var verticlesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, verticlesBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verticles), gl.STATIC_DRAW);
gl.vertexAttribPointer(vertexPositionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

var texture = this.getTextureFromPixelArray(textureData, textureWidth, textureHeight||1);

var vertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTextureCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
gl.vertexAttribPointer(textureCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);

gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);

// Draw the segment
gl.drawArrays(gl.LINES, 0, verticles.length/2);

---

有人能看到我在哪里出错吗？

我需要使用以下选项启用纹理坐标属性：

gl.enableVertexAttribArray(textureCoordAttributeLocation);

以前

var vertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTextureCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
gl.vertexAttribPointer(textureCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);

var vertexTextureCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTextureCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
gl.vertexAttribPointer(textureCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);