Question

我有一个包含很多段的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);

这是我的着色器：

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

有人能看到我犯了错误吗？

Answer 1

我需要启用纹理坐标属性：

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

Webgl在一条线上应用1D纹理

1 个答案: