使用glFrameBufferTextureLayer分层渲染为3D纹理

Question

我的目标是使用gl.frameBufferTextureLayer将切片渲染为3D纹理。 但是，当我使用gl.readPixels读回数据时，什么也不会渲染。

当我将gl.TEXTURE_3D更改为gl.TEXTURE_2D_ARRAY它可以正常工作，但是在这里的测试中，他们肯定gl.TEXTURE_2D_ARRAY 3D纹理层附加到FBO上。 WebGL 文档没有说明应该使用哪种纹理，但是GLES3 文档可以确保将纹理确定为3D纹理。 我检查了framebuffer的完整状态以及所有其他内容。

WebGL2中是否有用于将3D纹理层附加到FBO的资源，这是否可能？ 一些代码：

this.fbo= gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, this.fbo);

this.colorTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_3D, this.colorTexture);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA8, 64, 64, 64, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

this.renderBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, this.renderBuffer);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 64, 64);    
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this.renderBuffer);

// Use level 1 in 3D texture
// Works when texture is GL_TEXTURE_2D_ARRAY
gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, this.texture, 0, 1);

// ... Render scene

let data = new Uint8Array(64 * 64 * 4);
gl.readPixels(0, 0, 64, 64, gl.RGBA, gl.UNSIGNED_BYTE, data, 0); // data is empty

Answer 1

首先让我们尝试一个简单的无渲染

 const gl = document.createElement("canvas").getContext("webgl2"); const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_3D, tex); gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA8, 2, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, tex, 0, 1); gl.clearColor(.25, .5, .75, 1); gl.clear(gl.COLOR_BUFFER_BIT); const data = new Uint8Array(2 * 2 * 4); gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.UNSIGNED_BYTE, data); console.log(data); 

这样可行

现在让我们尝试渲染

 const gl = document.createElement("canvas").getContext("webgl2"); const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_3D, tex); gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA8, 2, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, tex, 0, 1); const vs = ` #version 300 es void main() { gl_Position = vec4(0, 0, 0, 1); gl_PointSize = 4.0; } `; const fs = ` #version 300 es precision mediump float; out vec4 color; void main() { color = vec4(.75, .5, .25, 1); } ` const prg = twgl.createProgram(gl, [vs, fs]); gl.useProgram(prg); gl.viewport(0, 0, 2, 2); gl.drawArrays(gl.POINTS, 0, 1); const data = new Uint8Array(2 * 2 * 4); gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.UNSIGNED_BYTE, data); console.log(data); 

 <script src="https://twgljs.org/dist/4.x/twgl.min.js"></script> 

那也行。

让我们尝试一下深度缓冲区

 const gl = document.createElement("canvas").getContext("webgl2"); const fb = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, fb); const tex = gl.createTexture(); gl.bindTexture(gl.TEXTURE_3D, tex); gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR); gl.texParameteri(gl.TEXTURE_3D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.texImage3D(gl.TEXTURE_3D, 0, gl.RGBA8, 2, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.framebufferTextureLayer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, tex, 0, 1); const rb = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, rb); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 2, 2); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, rb); const vs = ` #version 300 es uniform float depth; void main() { gl_Position = vec4(0, 0, depth, 1); gl_PointSize = 4.0; } `; const fs = ` #version 300 es precision mediump float; uniform vec4 color; out vec4 outColor; void main() { outColor = color; } ` const prgInfo = twgl.createProgramInfo(gl, [vs, fs]); gl.useProgram(prgInfo.program); gl.viewport(0, 0, 2, 2); gl.enable(gl.DEPTH_TEST); // draw in middle twgl.setUniforms(prgInfo, { depth: 0, color: [1, 0, 0, 1], }); gl.drawArrays(gl.POINTS, 0, 1); // draw in front twgl.setUniforms(prgInfo, { depth: -.5, color: [0, 1, 0, 1], }); gl.drawArrays(gl.POINTS, 0, 1); // draw in back twgl.setUniforms(prgInfo, { depth: .5, color: [0, 0, 1, 1], }); gl.drawArrays(gl.POINTS, 0, 1); // should be front color (0, 255, 0, 255) const data = new Uint8Array(2 * 2 * 4); gl.readPixels(0, 0, 2, 2, gl.RGBA, gl.UNSIGNED_BYTE, data); console.log(data); 

 <script src="https://twgljs.org/dist/4.x/twgl.min.js"></script> 

似乎可以工作

也许您忘记设置视口了？ 我经常犯那个错误