WebGL - 렌더링 깊이를 fbo 텍스처가 작동하지 않습니다.

Question

후 처리 셰이더의 경우 프레임 버퍼의 색상과 깊이 버퍼가 필요합니다. colorbuffer에 액세스하면 잘 작동하지만 depthbuffer를 만드는 데 문제가 있습니다. 텍스처 작품 대신 renderbuffer를 사용

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

그러나 나는 질감의 깊이는 그래서 쉐이더에 전달할 수 있습니다 원하는 : 깊이 텍스처에 대한 texImage2D를 사용하려고 할 때 나는 항상 INVALID_ENUM의 오류가 발생합니다. 깊이 텍스처 코드

프레임 버퍼 :

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

OpenGL ES 2.0 사양 (WebGL이 지정됨)은 GL_DEPTH_COMPONENT (또는 해당 크기 버전)을 유효한 텍스처 내부 형식으로 나열하지 않으므로 심도 텍스처를 지원하지 않는 것으로 보입니다. WebGL 사양과 달리 다르게 동작하는 곳이라면 깊이 텍스처를 지원하지 않습니다.

하지만 어쩌면이 link은 깊이 값을 표준 rgba 텍스처에 압축하여 WebGL에서 깊이 txture를 에뮬레이션하는 데 도움이됩니다.

Answer 2

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

OpenGL은 ES 항상왔다 데스크톱 GL보다 픽셀 전송 매개 변수가 더 제한적입니다. 따라서 실제로 데이터를 업로드하지 않는 경우에도 픽셀 전송 매개 변수가 내부 형식과 일치하는지 확인해야합니다. 따라서 UNSIGNED_BYTE 대신 UNSIGNED_SHORT를 시도하십시오.