WebGL - la profondità di rendering nella trama fbo non funziona

Question

Per uno shader di post elaborazione, ho bisogno del colore e del buffer di profondità del mio framebuffer. L'accesso al colorbuffer funziona bene ma ho problemi a creare il deepbuffer. Ho sempre trovato un errore INVALID_ENUM quando si cerca di utilizzare texImage2D per la trama di profondità:

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

utilizzando un renderbuffer invece di un lavori di struttura ma voglio profondità in un tessuto così posso passarlo a uno shader.

framebuffer con il codice di profondità di struttura:

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

La specifica OpenGL ES 2.0 (rispetto alla quale è stato specificato WebGL) non elenca GL_DEPTH_COMPONENT (o qualsiasi delle sue versioni di dimensioni) come formato interno di trama valido, quindi non sembra supportare trame di profondità e come specifica WebGL non 'stato in qualsiasi luogo che si comporta in modo diverso, inoltre non supporta trame di profondità.

Ma forse questo link è di aiuto, laddove le imitazioni di profondità vengono emulate in WebGL comprimendo il valore di profondità in una trama rgba standard.

Answer 2

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

OpenGL ES è sempre stato più restrittivo nei suoi parametri di trasferimento dei pixel rispetto al desktop GL. Quindi devi assicurarti che i parametri di trasferimento dei pixel corrispondano al tuo formato interno, anche se non stai caricando alcun dato. Quindi prova UNSIGNED_SHORT piuttosto che UNSIGNED_BYTE.