获取使用 gl.texImage2D 绘制的纹理的'red'像素值

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

所以，我的问题是

1. 如果我使用纹理发送数据的方式正确，并且在此过程中我的数据不会更改，则如何将其发送回JavaScript？
2. 如果我发送数据的方式是错误的，我该如何实现目标？

如果您可以帮助我解决这个问题，我将不胜感激。谢谢。

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

Answer 1

pleup 是正确的。R32F需要扩展才能变色。当我将以下内容添加到我的代码中时，一切正常，

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

再次感谢您的答案。