WebGL FrameBuffer - 렌더링 깊이 텍스처

Question

3D 엔진에 후 처리 효과를 통합하는 과정에 있습니다. 나는 FrameBuffer Object를 사용하여 깊이 데이터를 캡처하여로드 블록을 때렸다. WebGL. FrameBuffer에 색상 데이터를 캡처하는 데 문제가 없습니다. 그러나 Chrome/Firefox 용 깊이 확장 기능을 사용하는 경우에도 깊이 데이터을 얻을 수 없습니다.

var DepthEXT = webGLContext.getExtension("WEBKIT_WEBGL_depth_texture") || 
       webGLContext.getExtension("MOZ_WEBGL_depth_texture"); 

설정에 문제가 있는지 확인하기 위해 여러 가지 설정을 시도했지만 시도해 본 결과 아무 것도 볼 수 없었습니다. 게시물 끝에있는 스크린 샷은 텍스처로 렌더링 된 색상 첨부와 텍스처로 렌더링 된 깊이 첨부를 보여줍니다. FrameBuffer를 초기화 할 때 문제가 있습니까? 아니면 다른 곳에서이 문제를 해결해야합니까? 여기

// Frame Buffer 
    this.m_frameBuffer = gl.createFramebuffer(); 
    gl.bindFramebuffer(gl.FRAMEBUFFER, this.m_frameBuffer); 

    // Render Buffer 
    this.m_renderBuffer = gl.createRenderbuffer(); 
    gl.bindRenderbuffer(gl.RENDERBUFFER, this.m_renderBuffer); 
    gl.renderbufferStorage( 
     gl.RENDERBUFFER, 
     gl.DEPTH_COMPONENT16, 
     sharedRenderer.canvasDOMElement.width, 
     sharedRenderer.canvasDOMElement.height); 

    // Diffuse Component 
    this.m_diffuseComponentTexture = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, this.m_diffuseComponentTexture); 

    gl.texParameteri( 
     gl.TEXTURE_2D, 
     gl.TEXTURE_MAG_FILTER, 
     gl.LINEAR); 

    gl.texParameteri( 
     gl.TEXTURE_2D, 
     gl.TEXTURE_MIN_FILTER, 
     gl.LINEAR); 

    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, 
     sharedRenderer.canvasDOMElement.width, 
     sharedRenderer.canvasDOMElement.height, 
     0, 
     gl.RGBA, 
     gl.UNSIGNED_BYTE, 
     null); 

    // Depth 
    this.m_depthComponentTexture = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, this.m_depthComponentTexture); 

    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_COMPONENT, 
     sharedRenderer.canvasDOMElement.width, 
     sharedRenderer.canvasDOMElement.height, 
     0, 
     gl.DEPTH_COMPONENT, 
     gl.UNSIGNED_SHORT, 
     null); 

    // FrameBuffer 
    // Diffuse 
    gl.framebufferTexture2D( 
     gl.FRAMEBUFFER, 
     gl.COLOR_ATTACHMENT0, 
     gl.TEXTURE_2D, 
     this.m_diffuseComponentTexture, 
     0); 

    // Depth 
    gl.framebufferTexture2D( 
     gl.FRAMEBUFFER, 
     gl.DEPTH_ATTACHMENT, 
     gl.TEXTURE_2D, 
     this.m_depthComponentTexture, 
     0); 

    // RenderBuffer 
    gl.framebufferRenderbuffer( 
     gl.FRAMEBUFFER, 
     gl.DEPTH_ATTACHMENT, 
     gl.RENDERBUFFER, 
     this.m_renderBuffer); 


    // Unbind buffers and textures 
    gl.bindTexture(gl.TEXTURE_2D, null); 
    gl.bindRenderbuffer(gl.RENDERBUFFER, null); 
    gl.bindFramebuffer(gl.FRAMEBUFFER, null); 

나는 프레임 버퍼에 현재 장면을 렌더링하는 코드입니다 :

다음은 프레임 버퍼 개체를 초기화 내 코드입니다.

CBRenderer.prototype.renderSceneToGBuffer = function(sceneToRender, GBufferTarget, deltaSeconds) 
{ 
     CBMatrixStack.clearMatrixStackAndPushIdentityMatrix(); 

     this.applyProjectionMatrix(); 

     GBufferTarget.bindGBufferFrameBuffer(); 

     this.renderer.enable(this.renderer.DEPTH_TEST); 
     this.renderer.depthMask(true); 
     this.renderer.clearDepth(1.0); 
     this.renderer.clearColor(0.1, 0.1, 0.1, 0.0); 

     this.renderer.clear(this.renderer.COLOR_BUFFER_BIT | this.renderer.DEPTH_BUFFER_BIT); 

     sceneToRender.render(deltaSeconds); 

     this.renderer.flush(); 

     GBufferTarget.m_dirty = false; 
     GBufferTarget.unbindGBufferFrameBuffer(); 

     this.renderer.clearColor(0.0, 0.0, 0.0, 0.0); 
     this.renderer.clear(this.renderer.COLOR_BUFFER_BIT | this.renderer.DEPTH_BUFFER_BIT); 

     this.renderer.bindTexture(this.renderer.TEXTURE_2D, null); 
} 

Answer 1

당신은 그것을 설정의 끝에서 당신의 FBO에 부착 된 깊이 질감이 없습니다. 당신은 어떤 점에서 깊이 첨부 파일로 질감 설정을 수행합니다

// Depth 
gl.framebufferTexture2D( 
    gl.FRAMEBUFFER, 
    gl.DEPTH_ATTACHMENT, 
    gl.TEXTURE_2D, 
    this.m_depthComponentTexture, 
    0); 

을하지만 즉시, 대신 깊이 첨부 파일로 renderbuffer을 설정하는 것이 다음

// RenderBuffer 
gl.framebufferRenderbuffer( 
    gl.FRAMEBUFFER, 
    gl.DEPTH_ATTACHMENT, 
    gl.RENDERBUFFER, 
    this.m_renderBuffer); 

당신은 하나 개의 대상에 부착 할 수 있습니다 각 FBO 부착 점. 두 번째 호출은 첫 번째 호출에서 방금 설정 한 호출을 대체하는 새로운 깊이 연결을 설정합니다. 그래서이 마지막에 m_depthComponentTexture은 더 이상 FBO에 연결되지 않습니다.

깊이 텍스처를 사용하려는 경우 왜 깊이 렌더링 버퍼를 만들지는 모르겠다. 이 중 하나만 필요합니다. 나중에 샘플링 할 필요가 없으면 보통 깊이에 대해 렌더 버퍼를 사용합니다. 결과에서 샘플링하려면 텍스처가 필요하고 더 이상 렌더 버퍼가 필요 없습니다.