opengl-es - ejemplos - webgl mozilla

WebGL: la profundidad de renderizado de la textura FBO no funciona

Question

Para un sombreador de procesamiento posterior, necesito el color y el buffer de profundidad de mi framebuffer. El acceso al buffer de color funciona bien, pero tengo problemas para crear el buffer de profundidad. Siempre recibo un error INVALID_ENUM cuando trato de usar texImage2D para la textura de profundidad:

WebGL error INVALID_ENUM in texImage2D(TEXTURE_2D, 0, DEPTH_COMPONENT16, 1536, 502, 0, DEPTH_COMPONENT, UNSIGNED_BYTE, null)

Usar un buffer de representación en lugar de una textura funciona, pero quiero profundidad en una textura para poder pasarla a un sombreador.

framebuffer con código de profundidad de textura:

Framebuffer.prototype.initBufferStuffTexture = function(width, height){
if(this.width == width && this.height == height){
return;
}
this.width = width;
this.height = height;
// remove existing buffers
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
if(this.texture != null){
gl.deleteTexture(this.texture.glid);
this.texture = null;
}
if(this.renderbuffer != null){
gl.deleteRenderbuffer(this.renderbuffer);
this.renderbuffer = null;
}
if(this.framebuffer != null){
gl.deleteFramebuffer(this.framebuffer);
this.framebuffer = null;
}
// create new buffers
this.framebuffer = gl.createFramebuffer();
this.texture = new Texture();
this.texture.glid = gl.createTexture();
this.depth = new Texture();
this.depth.glid = gl.createTexture();
// framebuffer
gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer);
this.framebuffer.width = width;
this.framebuffer.height = height;
// colorbuffer
gl.bindTexture(gl.TEXTURE_2D, this.texture.glid);
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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.framebuffer.width, this.framebuffer.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
// depthbuffer
gl.bindTexture(gl.TEXTURE_2D, this.depth.glid);
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.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT16, this.framebuffer.width, this.framebuffer.height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_BYTE, null);
// assemble buffers
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture.glid, 0);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depth.glid, 0);
this.checkBuffer();
gl.bindTexture(gl.TEXTURE_2D, null);
gl.bindRenderbuffer(gl.RENDERBUFFER, null);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);
}

Answer 1

texImage2D (TEXTURE_2D, 0, DEPTH_COMPONENT16, 1536, 502, 0, DEPTH_COMPONENT, UNSIGNED_BYTE, nulo)

OpenGL ES siempre ha sido más restrictivo en sus parámetros de transferencia de píxeles que el escritorio GL. Por lo tanto, debe asegurarse de que los parámetros de transferencia de píxeles coincidan con su formato interno, incluso si no está cargando datos. Por lo tanto, pruebe UNSIGNED_SHORT en lugar de UNSIGNED_BYTE.

Answer 2

La especificación OpenGL ES 2.0 (contra la cual se especificó WebGL) no incluye GL_DEPTH_COMPONENT (o cualquiera de sus versiones de tamaño) como un formato interno de textura válido, por lo que parece no admitir texturas de profundidad y como la especificación WebGL no indica en ningún lugar que se comporte de manera diferente, tampoco admite texturas de profundidad.

Pero tal vez este enlace sea ​​útil, donde las texturas de profundidad se emulan en WebGL empacando el valor de profundidad en una textura de rgba estándar.