不在帧缓冲区中绘制深度纹理答案

【问题标题】：doesn't draw depth texture in framebuffer不在帧缓冲区中绘制深度纹理
【发布时间】：2015-05-22 07:50:30
【问题描述】：

尝试在 Chrome 的深度纹理中绘制模型时出错： WebGL： INVALID_FRAMEBUFFER_OPERATION：drawArrays：附加纹理的内部格式不可渲染

纹理和帧缓冲区是这样创建的：

var fb=self.gl.createFramebuffer();
self.gl.bindFramebuffer(self.gl.FRAMEBUFFER, fb);

var rb=self.gl.createRenderbuffer();
self.gl.bindRenderbuffer(self.gl.RENDERBUFFER, rb);
self.gl.renderbufferStorage(self.gl.RENDERBUFFER, self.gl.DEPTH_COMPONENT16,256,256);
self.gl.framebufferRenderbuffer(self.gl.FRAMEBUFFER, self.gl.DEPTH_ATTACHMENT,self.gl.RENDERBUFFER, rb);

var texture_rtt=self.gl.createTexture();
self.gl.bindTexture(self.gl.TEXTURE_2D, texture_rtt);
self.gl.texParameteri(self.gl.TEXTURE_2D, self.gl.TEXTURE_MAG_FILTER, self.gl.LINEAR);
self.gl.texParameteri(self.gl.TEXTURE_2D, self.gl.TEXTURE_MIN_FILTER, self.gl.LINEAR);
self.gl.texParameteri(self.gl.TEXTURE_2D, self.gl.TEXTURE_WRAP_S, self.gl.CLAMP_TO_EDGE);
self.gl.texParameteri(self.gl.TEXTURE_2D, self.gl.TEXTURE_WRAP_T, self.gl.CLAMP_TO_EDGE);
self.gl.texImage2D(self.gl.TEXTURE_2D, 0, self.gl.DEPTH_COMPONENT, 256, 256,0, self.gl.DEPTH_COMPONENT, self.gl.UNSIGNED_SHORT, null);

self.gl.framebufferTexture2D(self.gl.FRAMEBUFFER, self.gl.COLOR_ATTACHMENT0,self.gl.TEXTURE_2D, texture_rtt, 0);

self.gl.bindTexture(self.gl.TEXTURE_2D, null);
self.gl.bindFramebuffer(self.gl.FRAMEBUFFER, null);

例子可以找到：here

【问题讨论】：

正如starmole 指出的那样，您正在从底线的第4 个创建DEPTH_COMPONENT 纹理，然后尝试将其附加为COLOR_ATTACHMENT0。将gl.DEPTH_COMPONENT 更改为gl.RGBA 并将gl.UNSIGNED_SHORT 更改为gl.UNSIGNED_BYTE，它应该可以工作。

标签： opengl-es glsl webgl shadow

【解决方案1】：

您不能将深度纹理附加为颜色：

 framebufferTexture2D(self.gl.FRAMEBUFFER, self.gl.COLOR_ATTACHMENT0

错了。您只能将深度纹理附加到深度。 DEPTH_ATTACHMENT。如果要将深度渲染为颜色，则必须在着色器中进行。

【讨论】：

【解决方案2】：

看看：http://learningwebgl.com/blog/?p=1786

var fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);

var rb = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 256, 256);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, rb);

var rttTexture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, rttTexture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 256, 256, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, rttTexture, 0);

【讨论】：