Advertisement Jump to content

Depth Buffer is not working with my multisample FBO

Recommended Posts

I'm trying to figure out why my depth buffer is not working when using multisample FBOs. If I only render 2 passes: shadow pass and final pass...everything works nicely as you can see:


...but if I flip my post processing boolean to true, I get the following issue:


From the looks of it, it's like webGL is ignoring the depth buffer. Interestingly enough, if I disable DEPTH_TEST while leaving post processing on, I get an image, only that it's understandably see through:


I don't understand what I'm doing wrong. When my PostProccessor class starts, I store 2 FBOs in it: IN and OUT. In fact, this is the constructor code:

// Unbind any FBOS, render buffers, or textures

this._in = gl.createFramebuffer();

let colorBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorBuffer);
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this.samples, gl.RGBA8, this.width, this.height);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.RENDERBUFFER, colorBuffer);

let depthBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthBuffer);
gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this.samples, gl.DEPTH_COMPONENT16, this.width, this.height);
gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthBuffer);

// Finalize IN FBO

this._out = gl.createFramebuffer();
this.texture = new Texture(noImage); 

gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.texture.buffer, 0);

// Finalize OUT FBO

Everything seems fine, I'm banging my head trying to figure out what I'm doing wrong :( Oh and texture wise, I'm creating a standard texture, this is part of the constructor:

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_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, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);

I'll also include my render loop in psuedo code, just case that's helpful.

It'll be on PasteBin so this post doesn't look overwhelming, it's short though, promise. You can find it here. Thanks in advance!

Edited by Hashbrown

Share this post

Link to post
Share on other sites

I  solved it. Who ever posted an answer and deleted it was right about going through my code again. I had to step through my game, turn on and off parts of it and debug it since WebGL is all about states. Not only did I solve my issue but found a lot of areas that needed a re-write.

What happened? I feel so silly, instead of using: |;

I had: ||; // Notice the OR

The first frame always worked, but by the time the second one drew, that's where the depth buffer wasn't cleared. Now it's clearing and my post processing pipeline is working. 

Edited by Hashbrown

Share this post

Link to post
Share on other sites

Haha sorry, I might see if I can unhide it. But I did misread your question and, not being very expert in FBOs I was assuming there was some problem in the FBO setup / assumptions rather than states. :)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement

Important Information

By using, you agree to our community Guidelines, Terms of Use, and Privacy Policy. is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!