WebGL：顯示深度紋理

我是WebGL的新手，並試圖實現深度紋理以便以後在陰影貼圖中使用。下面是我的framebuffer初始化代碼。在函數drawTest中，我首先綁定所有需要的緩衝區，然後將模型的頂點繪製到附加到紋理的幀緩衝區中。不應該這樣嗎？我得到的只是一個白色屏幕，沒有錯誤。WebGL：顯示深度紋理

this.drawTest = function (model1) { 

    this.model1 = model1; 


     if (model1.Image.ReadyState === true && model1.Ready === false) { 
      this.PrepareModel(model1); 
     } 
     if (model1.Ready) { 
      gl.bindBuffer(gl.ARRAY_BUFFER, this.model1.Vertices); 
      gl.vertexAttribPointer(this.VertexPosition, 3, gl.FLOAT, false, 0, 0); 
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model1.Triangles); 
     } 

     gl.bindFramebuffer(gl.FRAMEBUFFER, this.depthFramebuffer); 

     gl.clear(gl.DEPTH_BUFFER_BIT); 

     gl.drawElements(gl.TRIANGLES, model1.numItems, gl.UNSIGNED_SHORT, 0); 




} 


this.InitDrawDepth = function(size) { 

     this.depthTextureExt = gl.getExtension("WEBGL_depth_texture"); // Or browser-appropriate prefix 
     if(!this.depthTextureExt) { 
      console.log("WEBGL_depth_texture Extension not available!"); 
      return; 
     } 

     // Create a color texture 
     this.colorTexture = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, this.colorTexture); 
     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, size, size, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); 

     this.depthTexture = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, this.depthTexture); 
     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, size, size, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null); 

     // var framebuffer = gl.createFramebuffer(); 
     this.depthFramebuffer = gl.createFramebuffer(); 
     gl.bindFramebuffer(gl.FRAMEBUFFER, this.depthFramebuffer); 
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0); 
     gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0); 

     if(!gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) { 
      console.log("Framebuffer incomplete!"); 
     } 

     //reset Framebuffer 
     gl.bindFramebuffer(gl.FRAMEBUFFER, null); 

     this.depthTextureSize = size; 

    }

來源

2013-05-21 Pris0n

你介意jsFidlle-ing嗎？ –

我設法解決了這個問題。我有另一個功能導致原始緩衝區的麻煩。感謝所有試圖找出問題的人。

來源

2013-05-26 17:02:59 Pris0n

你介意分享你的解決方案嗎？我遇到了同樣的問題。 –

WebGL：顯示深度紋理

回答

相關問題