Jump to content
  • Advertisement
Hashbrown

Depth Buffer is not working with my multisample FBO

Recommended Posts

Posted (edited)

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:

ezgif-3-9dc36735f8.gif

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

ezgif-3-d2253f95f7.gif

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:

ezgif-3-68cddf0d29.gif

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.unbindFBO();
this.unbindRenderbuffer();
this.unbindTexture();

// IN FBO
this._in = gl.createFramebuffer();
this.bindFBO(this.in); 

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
gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
checkFBO();
this.unbindFBO();
this.unbindRenderbuffer();
this.unbindTexture();

// NOW MAKE OUT FBO
this._out = gl.createFramebuffer();
this.bindFBO(this.out);
this.texture = new Texture(noImage); 

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

// Finalize OUT FBO
gl.drawBuffers([gl.COLOR_ATTACHMENT0]);
checkFBO();
this.unbindFBO();
this.unbindRenderbuffer();
this.unbindTexture();

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
Advertisement
Posted (edited)

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:

this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);

I had:

this.gl.COLOR_BUFFER_BIT || this.gl.DEPTH_BUFFER_BIT); // 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

Oh it was you  :) No problem, thanks again. Stepping through my games was the best solution. 

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 GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!