Webgl apply 1D texture on a line

Question

I have an webgl application with a lot of segments (gl.LINES). Each segment needs to apply a specific 1D texture, or if you prefer, each pixels of a segment needs to have a specific color. This will be use as an alternative to an histogram on the segment.

I made a test texture of 4 pixels from red to black. I would have liked to see a gradient from red to black, but instead the output is a red only line.

Here is my getTextureFromPixelArray method:

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;
};

Here is my code for generating a test texture 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);

Here is my shaders:

Scene.fragmentShaderSrc = "\
    precision mediump float;\
    varying highp vec2 vTextureCoord;\
    uniform sampler2D uSampler;\
    void main(void) {gl_FragColor = texture2D(uSampler, vTextureCoord);}\
";

Scene.vertexShaderSrc = "\
    attribute vec2 aVertexPosition;\
    attribute vec2 aTextureCoord;\
    uniform mat4 uPMatrix;\
    uniform mat4 uModelView;\
    varying highp vec2 vTextureCoord;\
    void main(void) {\
        gl_Position = uPMatrix * uModelView * vec4(aVertexPosition,0,1);\
        vTextureCoord = aTextureCoord;\
    }\
";

Can someone see where I made an error?

Answer 1

I needed to enable the texture coordinate attribute with :

gl.enableVertexAttribArray(textureCoordAttributeLocation);

before

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);