doesn't draw depth texture in framebuffer

0
votes

In attempt to draw model in depth texture of Chrome gives out a mistake: WebGL: INVALID_FRAMEBUFFER_OPERATION: drawArrays: internalformat of the attached texture isn't color-renderable

the texture and framebuffer are created so:

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);

The example can be found :here

2
opengl-esglslwebglshadow
as starmole points out, you're creating DEPTH_COMPONENT texture on the 4th from the bottom line and then trying to attach that as COLOR_ATTACHMENT0. Change the gl.DEPTH_COMPONENT to gl.RGBA and gl.UNSIGNED_SHORT to gl.UNSIGNED_BYTE and it should work. - gman

2 Answers

3
votes

You can not attach a depth texture as color: 

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

Is wrong. You can only attach a depth texture to depth. DEPTH_ATTACHMENT. If you want to render depth as color you have to do that in the shader.

1
votes

Take a look at: 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);