WebGL:显示深度纹理

Posted

技术标签:

【中文标题】WebGL:显示深度纹理【英文标题】:WebGL: Display Depth Texture 【发布时间】:2013-05-21 20:23:09 【问题描述】:

我是 WebGL 的新手,正在尝试实现深度纹理以供以后在阴影贴图中使用。 下面是我的帧缓冲区初始化代码。 在函数 drawTest 中,我首先绑定所有需要的缓冲区并将模型的顶点绘制到附加到纹理的帧缓冲区中。 这不应该工作吗?我得到的只是一个白屏,没有错误。

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;

    

【问题讨论】:

你介意 jsFidlle-ing 吗? 【参考方案1】:

我设法解决了这个问题。我有另一个功能导致原始缓冲区出现问题。 感谢所有试图找出问题的人。

【讨论】:

您介意分享您的解决方案吗?我遇到了同样的问题。

以上是关于WebGL:显示深度纹理的主要内容,如果未能解决你的问题,请参考以下文章

WebGL:在带有深度模板纹理附件的帧缓冲区上未清除颜色

WebGL-五

WebGL - 在平面上显示球体

如何使用 WebGL 异步加载图像、创建纹理、渲染和保存图像?

WebGL - 从渲染缓冲区读取像素数据

WebGL— FrameBuffer,RenderBuffer,Texture区别