Question

我正在使用纹理向我的片段着色器发送一个Float32array（这里的目标是使用纹理将数据发送到着色器，在着色器中处理此数据，然后将其发送回javascript）。由于我的数据实际上不是图像，我决定用'gl.R32F'发送它，我试图在使用gl.readPixels处理后读取这些数据。这是我的代码，作为一个例子，没有处理数据，首先我试图找到一种方法将数据发送回javascript;

var canvas = document.getElementById('webgl-canvas');
var bbb = 4096*4096;
var widthcanvas = Math.sqrt(bbb)
canvas.width = widthcanvas;
canvas.height = widthcanvas;
var gl = initGL(canvas);

var boxVertices = new Float32Array([
    -1.0,  1.0,  0, 0, 
    -1.0, -1.0,  0, 1,
     1.0,  1.0,  1, 0,
     1.0, -1.0,  1, 1
]);
var boxVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, boxVertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, boxVertices, gl.STATIC_DRAW);
var boxTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, boxTexture);

gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);


var data= new Float32Array(bbb);
for(var i = 0; i < bbb; i++) {
    data[i] = -i;
}

gl.texImage2D(gl.TEXTURE_2D, 0, gl.R32F, widthcanvas, widthcanvas, 0, gl.RED, gl.FLOAT, data);
gl.bindTexture(gl.TEXTURE_2D, null);

var a_position = gl.getAttribLocation(shaderProgram, 'a_position');
var a_textCoords = gl.getAttribLocation(shaderProgram, 'a_textCoords');

gl.vertexAttribPointer  (a_position, 2, gl.FLOAT, gl.FALSE, 4 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.vertexAttribPointer(a_textCoords, 2, gl.FLOAT, gl.FALSE, 4 * Float32Array.BYTES_PER_ELEMENT, 2 * Float32Array.BYTES_PER_ELEMENT);



gl.enableVertexAttribArray(a_position);

gl.clearColor(0.75, 0.85, 0.8, 1.0);
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.bindTexture(gl.TEXTURE_2D, boxTexture);
gl.activeTexture(gl.TEXTURE0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

var framebuffer = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, boxTexture, 0);

var pixels = new Float32Array(gl.drawingBufferWidth * gl.drawingBufferHeight);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RED, gl.FLOAT, pixels);
console.log(pixels);
gl.deleteFramebuffer(framebuffer);

当我尝试将数据写为纹理时，我没有收到任何错误（虽然我不知道数据是否在没有任何更改的情况下发送，因为，我无法读回来）。但是，当我尝试使用gl.readPixels读取它时，我收到以下错误，

ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glReadPixels: framebuffer incomplete

所以，我的问题是这个;

如果我使用纹理发送数据的方式是正确的，并且在此过程中我的数据没有更改，我该如何将其发送回JavaScript？
如果我发送数据的方式有误，我该如何实现目标呢？

如果你能帮我解决这个问题，我将不胜感激。谢谢。

P.s：数据并不总是完美的正方形。

Answer 1

pleup 是对的。 R32F需要扩展才能变为彩色可渲染。当我在代码中添加以下内容时，一切正常，

var ext = gl.getExtension('EXT_color_buffer_float');

再次感谢您的回答。

获取使用gl.texImage2D绘制的纹理的“红色”像素值

1 个答案: